Screen configurations

Responsive web design was in many ways a reaction to mobile phones. Before smartphones appeared, very few people seriously considered how websites should look and feel on handheld devices. That changed with the meteoric rise of mobile phones featuring built-in web browsers.

Responsive web design encouraged a mindset that questioned assumptions. Whereas previously it was common to assume that a website would only be viewed on a desktop computer, now it's standard practice to design that same website for phones and tablets as well. In fact, mobile usage has now eclipsed desktop usage on the web.

This responsive mindset will serve you well for the future. It's entirely possible that your websites will be viewed on devices and screens that we can't even imagine today. And this mindset extends beyond screens. Even now people are using devices with no screens to access your content. Voice assistants can use your websites if you are using a strong foundation of semantic HTML.

There's experimentation in the world of screens too. There are devices on the market today with foldable screens. That introduces some challenges for your designs.

Dual screens

Users of foldable devices can choose whether they want their web browser to occupy just one of the screens or span across both screens. If the browser spans both screens, then the website on display will be broken up by the hinge between the two screens. It doesn't look great.

Viewport segments

There's an experimental media feature designed to detect if your website is being displayed on a dual-screen device. The proposed name of the media feature is viewport-segments. There are two varieties: horizontal-viewport-segments and vertical-viewport-segments.

If the horizontal-viewport-segments media feature reports a value of 2 and vertical-viewport-segments reports a value of 1 that means the hinge on the device runs from top to bottom, splitting your content into two side-by-side panels.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

If the vertical-viewport-segments media feature reports a value of 2 and horizontal-viewport-segments reports a value of 1 then the hinge runs from side to side, dividing your content into two panels, one on top of the other.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

If both vertical-viewport-segments and horizontal-viewport-segments report a value of 1 this means the website is being displayed on just one screen, even if the device has more than one screen. This is equivalent to not using any media query.

Environment variables

The viewport-segments media feature by itself won't help you design around that annoying hinge. You need a way of knowing the size of the hinge. That's where environment variables can help.

Environment variables in CSS allow you to factor awkward device intrusions into your styles. For example, you can design around the "notch" on the iPhone X using the environment values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom and safe-area-inset-left. These keywords are wrapped in an env() function.

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Environment variables work like custom properties. This means you can pass in a fallback option in case the environment variable doesn't exist.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

For those environment variables to work on the iPhone X, update the meta element that specifies viewport information:

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

Now your page layout will take up the entire viewport and safely pad the document with device-provided inset values.

For foldable screens, six new environment variables are being proposed: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

Here's an example of a layout with two columns, one wider than the other.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

For dual screens with a vertical hinge, set the first column to be the width of the first screen and the second column to be the width of the second screen.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Treat dual screens as an opportunity. Perhaps one screen could be used to display scrollable text content while the other displays a fixed element like an image or a map.

The future

Will foldable displays become the next big thing? Who knows. No one could've predicted how popular mobile devices would become so it's worth having an open mind about future form factors.

Above all, it's worth ensuring that your websites can respond to whatever the future may bring. That's what responsive design gives you: not just a set of practical techniques, but a mindset that will serve you well as you build the web of tomorrow.

Check your understanding

Test your knowledge of screen configurations