Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

Responsive design (CSS)

Making your site look good on any device and screen

Basic idea

  • Goal: make your website look good on any device
  • Important tools:
    • Viewport meta tag
    • Media queries

Viewport meta tag

  • Converts between "hardware pixels" and "software pixels", helping you support screens with different pixel densities
    • On a small screen with huge pixel density, you still don't want your website to for example fill only a part of the screen or show tiny text
    • If used correctly, a small screen with huge pixel density will appear to your CSS rules as a screen with small dimensions in terms of pixels
    • See also mydevice.io
  • Doesn't change actual design, just makes sure you have sensible width and height values to base your design on

Example (common, recommended version of the tag):

<meta name="viewport" content="width=device-width,initial-scale=1">

Media queries

  • Allow changing design based on viewport width/height
  • Have to define design changes yourself based on detected width/height
  • Widely used in CSS framworks like Bootstrap

Example:

@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}

Common approach: mobile-first design

  • First create a design that looks good on narrow-screen devices
  • Then use media queries to change the layout on larger screens so it looks better or makes better use of the available screen space

Flexbox and Grids

In general, Flexbox and Grids are good tools for building pages that scale with the viewport size

Testing your design

Useful tool: Chrome DevTools Device Mode

See Simulate Mobile Devices with Device Mode in Chrome DevTools

Resources