Feiliang Zhou
Response design principles
What is responsive design?
Design technique to make a webpage adjust its layout and visual style to any possible screen sizes (window or viewport size) In practice, this means that responsive design makes websites usable on all devices, such as desktop computers, tablets, and mobile phones. It's set of practices, not a separate technology. It's all just CSS!
Responsive Design Ingredients
- Fluid Layouts
- To allow webpage to adapt to the current viewport width (or even height)
- Use % (or vh/vw) unit instead of px for elements that should adapt to viewport (usually layout)
- Use max-width instead of width
- Responsive Units
- Use rem unit instead of px for most lengths
- To make it easy to scale the entire layout down (or up) automatically
- Helpful trick: setting 1rem to 10ox for easy calculations
- Flexible Images
- By default, images don't scale automatically as we change the viewport, so we need to fix that
- Always use % for image dimensions, together with the max-width property
- Media Queries
- Bring responsive sites to life!
- To change CSS styles on certain viewport widths (called breakpoints)
Desktop-First VS. Mobile-First Development
Desktop-First:
- Start writing CSS for the desktop: large screen
- Then, media queries shrink design to smaller screens.
Mobile-First:
- Start with CSS for mobile devices: small screen
- Then, media queries expand design to a large screen
- Forces us to reduce websites and apps to the absolute essentials.