DEV Community

Cover image for Make your design compatible with foldable device
Nicolas Frizzarin for This is Learning

Posted on • Edited on

Make your design compatible with foldable device

Introduction

The way to think about the design of an application has never been simple.
How to correctly represent the information to the user? How to make the design pleasant and easy to use? How to adapt the interface to different sizes? are recurrent questions to ask when creating a user interface.

Over the years, technology has continued to progress, and the Desktop First design approach has been quickly replaced by a Mobile First approach.

In September 2020 Samsung released the very first foldable device: the Galaxy Fold. This release of a brand new type of screen once again upsets the design approach we had until then. Mobile First approach is not enough anymore, developers and designers will have to take into account a new type of screen.

The era of responsive design has evolved again.

So how to make our application responsive to this type of screen? How to take into account the different foldable screen layouts?

This article aims to answer these questions and give you the necessary information to create responsive design on foldable device.

Warning: the features described in this article are still experimental, may change in the future and are only available behind the flag: Experimental Web Platform features of chrome.

Posture of foldable device

Broken design

There are several possible postures with foldable devices. These postures depend mainly on the angle of inclination.

Some examples to better understand:

  • an angle of 0 corresponds to a closed device
  • an angle of 140 corresponds to a laptop or book shaped device
  • an angle of 185 corresponds to a fully open device

The javascript and css API's must therefore take all these variations but also future scenarios.
It's not to be neglected that tomorrow a device can be foldable on the horizontal axis and at the same time on the vertical axis.

Viewport segments

By default, if we don't take into account the possibility of having a device with two or more screens, the design of our application may be "broken".
But what does broken mean? Well, it can be broken like the site you are reading this article on.

Image description

This image illustrates very well the fact of having a broken design. This emulation was done on a duo surface. The fold of this device hides some words, letters etc.

To solve this problem and tell to the browser where to placed the elements, a new media query is available: viewport-segments
This media query is declined in two ways:

  • horizontal-viewport-segments
  • vertical-viewport-segments

Why two varieties? Well, simply because your device can be oriented in two different ways:

  • portrait
  • landscape

If the device is oriented in landscape mode, this naturally means that the device have 1 or more screens on the horizontal axis. The media query to use will be the one associated with the horizontal axis.

@media(horizontal-viewports-segments /**number of screen**/){}
Enter fullscreen mode Exit fullscreen mode

If the device is oriented in portrait mode, as opposed to landscape mode, the device have 1 or more screens on the vertical axis. The media query to use will be the one associated to the vertical axis.

@media(vertical-viewports-segments /**number of screen**/){}
Enter fullscreen mode Exit fullscreen mode

An example in image will be more telling.

Diagram from Microsoft Edge Explainers.

In the case of a duo surface, if the device is oriented in landscape mode, the media query will be written as follows:

@media(horizontal-viewport-segments 2) {}
Enter fullscreen mode Exit fullscreen mode

Conversely, if the duo surface is oriented in portrait mode, then the media query will be written in this way:

@media(vertical-viewport-segments 2) {}
Enter fullscreen mode Exit fullscreen mode

In itself the media query viewport-segments does not help to design the application. This media is used to identify the number of screens on which the application will be displayed.

To be able to correctly place the different design elements of our application around the "fold", six new environment variables have been created.

Environments variable

Environment variables in CSS allow you to factor awkward device intrusions into your styles.

Let's take the example of iphones from version X. All these phones have a notch which can break the design of your application.
To place correctly the elements around this notch, environment variables have been created. This is the case for example of the environment variable safe-area-inset-top.

In the case of foldables devices 6 new environment variables appear:

  • viewport-segment-width
  • viewport-segment-height
  • viewport-segment-top
  • viewport-segment-right
  • viewport-segment-bottom
  • viewport-segment-left

These keywords are to be used in the env() function. The css environment variables behave like custom properties, which means that an additional value can be passed to the env function as a callback value in case the environment variable does not exist.

The environment variables are mainly based on the viewport. It is therefore necessary to add a meta tag in the main HTML page.

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

To use a foldable device environment variable, the syntax is as follows:

env(viewport-segment-width x y, /** fallback value **/)
Enter fullscreen mode Exit fullscreen mode

x is the index of the screen on the horizontal axis and y is the index of the screen on the vertical axis.

For example, if we want to retrieve the size of the second screen on the horizontal axis, the syntax will be the following

width: env(viewport-segment-width 1 0)
Enter fullscreen mode Exit fullscreen mode

A diagram is always more representative than a long speech

Diagram for Microsoft Edge Explainers

With these environmental variables, a multitude of design possibilities are available to us.

We could for example put on a screen a fixed image and on another one a long scrollable text.

Let's code it :)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
  </head>

  <body>
    <main>
      <aside>
        <img alt="foldable device image" src="./foldable_screen.jpeg" />
      </aside>
      <article>
        Long scrollable text ...
      </article>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  height: 100%;
  width: 100%;
}

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  aside img  {
    position: absolute;
    height: 100%;
    width: env(viewport-segment-width 0 0);
    top: env(viewport-segment-top 0 0);
  }
  main article {
    position: absolute;
    box-sizing: border-box;
    padding-left: 1rem;
    height: 100%;
    overflow: auto;
    left: env(viewport-segment-left 1 0);
  }
}
Enter fullscreen mode Exit fullscreen mode

The two lines

  • width: env(viewport-segment-width 0 0)
  • top: env(viewport-segment-top 0 0) allow you to specify the position of the image and its size. In our case I want to place the image on the whole first screen.

The line left: env(viewport-segment-left 1 0) allow to place the text on the whole second screen. For visual aesthetics, the padding-left property allows to shift the text from the fold.

The result is the following:

Image description

Reacting to resize or posture change events

Sometimes we may want to realize some Javascript logic depending on the different posture of the device, or want to react to the resize.

For this javascipt allows us to easily retrieve the number of screen of the device

window.addEventListener(() => {
 console.log(window.visualViewport.segments);
/**
If no segments this seems that the foldable device is closed.
If one or more segements window.visualViewport.segments is an array
**/
})
Enter fullscreen mode Exit fullscreen mode

Want to play with these amazing API's

First activate in the chrome flags

  • Experimental JavaScript
  • Experimental Web Platform features
  • Device Posture API

chrome flags to activate

In the chrome devtools console, go to the settings section then go in the experiments panel and activate the option Emulation: Support dual screen mode

chrome devtools

You are ready to go, now its possible to select suface duo or galexy fold device when you emulate a mobile device ;)

Conclusion

Are foldable screens the next generation of mobile? It's still way too early to tell; so it's very important for a web developer to keep an open mind and code the design of his application so that it is adaptable to whatever the future may bring. This is what responsive design offers.

The responsive design offers you a set of practical techniques but also an open mind that will allow you to adapt your applications for the web of tomorrow.

Ressource

Top comments (0)