Responsive Made Easy

NB. In firefox use Ctrl + Shft + m to quickly view responsive mode.

Ethan Marcotte originally described responsive design utilizing 3 things:

1. Fluid grids
2. Flexible images
3. Media queries

According to Utopia.fyi fluid responsive design utilizes:

1. Fluid space
2. Fluid type sizes
3. Flexible images
4. Media queries

Utopia.fyi has a free online calculator to create fluid type sizes and fluid space (see below).

Remove elements

One of the simplest ways to improve the experience of smaller screens is to simply remove unnecessary elements.

#element {
  display: none;
}

Media queries

Start simple for mobile and then add in complexity with media queries:

@media (min-width: 40em) {
    /* css here */
}

If designing mobile first then design the project for mobile screens and then use the min-width media query to change styling at bigger screen sizes.

@media screen and (min-width: 800px) {
  nav {
    flex-direction: row; 
    /* The nav element is displayed horizontally when the viewport is 800px or larger */
  }
}

(Apparently using em is more consistent between browsers.)

Using multiple media queries

Using the and operator you can string several conditions together. This means all conditions must be met before the stated code is used.

@media screen and (max-width: 550px) and (orientation: landscape) {
  ... some code ...
}

This means only when the site is displayed on a screen AND is 550 pixels wide or larger AND the orientation is landscape then the CSS inside will be used.

Note there is no or operator. To create a media query where either of the above conditions has to apply a comma separated list is used as in regular CSS declartions:

@media
  (max-width: 550px),
  (orientation: landscape) {
  ... some code ...
}

If the screen is 550px or wider OR the orientation is landscape the CSS inside will be used.

The use of screen is not required but useful if the web page or interface may be used elsewhere, for instance printed out.

min

Use min() for container widths. min looks at two values and selects the smallest one at any given time.

A typical layout, like this site, uses a max-width value on the main container element to prevent it getting too wide. It expands to the full width it can until it reaches that width and then stays at that.

.container {
    margin-inline: auto; /* these are left and right */
    width: min(90%, 1250px);
}

Here the min values are the same as: width: 90%; max-width: 1250px

NB. Both min and max can take multiple values: width: max(50vh, 400px, 30%)

NB2. You can use calc expressions inside min, max and clamp too: width: max(50% + 2em, 30rem)

Here’s an example from Kevin Powell:

.container {
  width: min(100% - 2rem, 50rem);
  margin-inline: auto;
}

This chooses whichever is smaller. So it’s either 50rem until it falls below that when it’s 100% minus 1rem on each side.

Flexible images

Make responsive:

img {
    max-width: 100%;
    display: block; 
    /* the default value of inline is not much use, even if floating an image */
}

Alternatively you might prefer width: 100%. This will scale the image up as well as down to fit it’s containing element.

You can use different images for different sized screens:

 <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture> 

Font sizing

Using viewport widths works if done carefully. The issue is that if the size is too small the visitor to the site cannot resize the type since if they zoom in the viewport width will not change.

One solution uses calc to mix vw with another unit: font-size: calc(0.5vw + 0.5rem)

Another solution is to use clamp which takes a minimum, an ideal, and a maximum value: font-size: clamp(15px, 1.5vw, 28px);. Note that Firefox has a built in minium value of 15px for fonts.

BEST WAY: Use the above method with clampizer or Utopia.fyi to get smooth scaling from the minimum screen size to the maximum. (NB. The clampsizer app can sometimes take a few seconds to load.).

Utopia looks more complicated and has more options but if you set your min and max viewport sizes then scroll down and tick the use clamp checkbox then the middle setting, --step-0, is the same value that clampizer produces. This is ideal for a base font style where font-size is defined in the body part of your CSS.

Utopia.fyi is an invaluable free tool I use in every project.

Adaptive design

This term was coined by Jen Simmons from Mozilla (at the time). It refers to the effect of elements changing their size or layout without the need for media queries.

Video

There’s a lot of non-responsive stuff here. Responsive starts around 27 mins in.

More

1. W3 Schools has an excellent intro to responsive design. Another section is based on CSS. They even have their own responsive framework