The changes that the collapsible Web may bring to us

The collapsible Web is the name given to collapsible devices. Foldable devices come in a variety of forms, from laptops to phones to newfangled dual-screen hybrids. There is no comprehensive definition of such new inventions, but most fall into one of two categories. “Foldable” is a device with a foldable screen (huawei Mate X, Samsung Galaxy Z Flip); “Dual-screen” devices, on the other hand, have separate screens but can also work together in unique ways, providing productivity in flexible forms (e.g., Microsoft’s Surface Neo and Surface Duo). These two types may follow similar rules when it comes to Web design. If it succeeds, Web design could face the biggest revolution in a decade. This is the beginning of a new journey for us Web developers.

That sounds exciting, but what does it really mean? The foldable Web will bring new challenges, new opportunities, and, quite possibly, new concepts. The Internet may also undergo its biggest transformation since the smartphone. You might think this is all hype, but the truth is that such a day is not too far away. Remember that at this time last year, some mobile brands like Huawei and Samsung were launching foldable hardware devices, while Microsoft and Apple were also working behind the scenes. The foldable Web is coming. Should we really be thinking about what a foldable Web might do for me? If and when that day comes, will our technology be able to support the device? Simply put, we’re developing Web pages that run perfectly on foldable devices and dual screens.

Foldable and dual-screen devices

Foldable devices use a type of flexible screen technology that was developed in the 1970s but didn’t really take off until the turn of the century. Especially in the last year, there’s been an explosion — you can see some foldable devices on the market. The Samsung Galaxy Z Flip, for example, mimics the old Flip phone:

Samsung’s Galaxy Fold, for example, has a small screen when folded and a wider screen when unfolded:

The Huawei Mate X, for example, has a screen wrapped around the phone:

In many cases, like e-books, the two internal displays merge when the device is fully open. There is usually a separate small screen on the outside so that the user does not have to open it while using it.

Dual-screen devices are portable devices with two symmetrical screens that work together in a unique way to provide productivity in a flexible form. Dual-screen devices like Microsoft’s Surface Neo and Surface Duo allow people to get things done faster than ever before. If you’ve used a dual-screen device like the Surface Neo, you can take notes on one screen and view the full project proposal in transit on the other:

Although there are different foldable, dual-screen devices on the market today, and there will be many more, we believe there will be a common approach to designing apps for these devices. We hope this will help your application run on more devices without having to do special design and processing for different devices.

In other words, on a foldable or dual-screen device, users can do more, such as split the screen and open multiple apps at the same time:

You can also open the same app, split the screen in the app and open different pages, for example:

Like the one above, applications are displayed on two screens in what is known as a cross-screen layout. By default, the application will behave as if it is displayed on a larger screen. You can also change your existing application layout to fit the gap between the two screens, or you can go one step further and create different layout controls specifically for dual-screen devices. For example, the iPad version of hand wash can be displayed in a split screen:

New Web standards, new experiences, and new problems

Foldable and dual-screen devices are emerging. This is no longer a concept, nor is it hype. That’s even more beside the point. The point is:

How foldable and dual-screen technology will affect Web developers, user experience designers, and others whose business is to provide high-quality browsing experiences.

First of all, foldable and dual screens will make a big difference in the way visual designers design.

The whole foldable concept is based on the idea that you can turn your phone into a tablet. Most tablets on the market have a 4:3 aspect ratio, so a phone/tablet hybrid should have a 4:3 aspect ratio. This reaches 3:2 using the folding device. None of these ratios guarantee a 16:9 or 18:9 real video experience. The 4:3 aspect ratio is better for tasks and work in a variety of text and graphics editors, like the iPad, but it requires greater resolution, which foldable devices can’t do. This leaves most foldable phones in a twilight zone where the user experience is terrible, because the 16:9 ratio is impossible on traditional phones.

For a foldable phone to be a useful media device, it has to be converted into a 16:9 or 18:9 device, and then folded into an 8:9 or 9:9 device — basically a square. @Nathan Cunn calculated that the perfect aspect ratio for a foldable phone would be 1.4 times its width.

This will also be the ratio of width to height that the iPhone folds:

What’s more, the biggest feature of both foldable and dual-screen devices is that the screen becomes larger and looks like a tablet when unfolded. As a result, there is more space available.

Foldable and multi-screen devices break the shackles of mobile devices (phones) with limited available space!

The space is large, the content can be placed more, if the design is still according to the previous ideas, directly stretch flat full screen, it is too wasteful. Faced with such a scenario, in addition to responsive Web design can help us make better use of available space, we can also refer to a concept proposed by Taobao Design:

Let your Content flow like water (” Content is like water “)

Here’s a picture:

There is a more detailed introduction to this aspect, you can pay attention to taobao design wechat public number

You can search for “foldable” and find some articles on the subject, such as:

Don’t be surprised, this is how a folding screen should be designed!
Exclusive reveal taobao folding screen design and adaptation development
Cross – end design and double 叒 come, just responsive change the name?

For details about the changes that dual screens bring to design, or the details that should be paid attention to in design, please read the official Introduction to Dual-screen Devices from Microsoft.

There are other design and experience changes that come with folding screens.

One (two) hand movement design

As the states change (in this case, fold and unfold, single-screen and multi-screen), the entire experience itself changes. Most users are used to using one hand to operate their mobile device (phone), and when unfolded, like the iPad, it requires two hands to operate the device (or app).

Mobile versus tablet

Screen continuity and spacing

There is a clear difference between a foldable device and a multi-screen device.

When a foldable device is expanded, its screen is continuous, and our experience in design should seamlessly transfer to the full screen.

For this scenario, if you just roughly zoom in to full screen, the layout won’t change much, but some objects on the Web, such as images, will be blurred. Of course, you can also consider the difference in design, such as split screen design:

For multi-screen devices, it is possible that the screens are not continuous, such as Microsoft’s Surface Neo and Surface Duo, where there is a gap between the screens:

When designing and layout, you need to avoid Web objects between two screens, such as:

Or:

Multiple Windows, multiple applications

As mentioned earlier, one of the biggest features of foldable and multi-screen screens gives us more space to work with. This is more user-friendly for users to multitask and do more things at once. Therefore, we should always consider that a user may be running multiple apps at the same time. For example, looking at a calendar, looking at a map, and watching the news:

In addition to having multiple apps open at the same time, you can also do different things in the same App on separate screens. For example, you can watch live broadcasts while browsing Taobao:

Folding screens and multiple screens present new challenges for designers as well as Web developers. When Huawei Mate X came out last year, I had the honor to participate in some Web adaptation of Mate X. H5 applications are perfect for foldable devices.

Since the relevant H5 business adopts window unit VW (I often call this scheme VW-layout), it can better adapt the corresponding H5 business to the state of folding screen expansion, but there are also some corresponding problems, the most prominent is the blurred image:

Of course, we also try to use responsive Web design to do different layout processing:

Although this approach allows our H5 application to maximize the available space of the foldable screen, it also has certain drawbacks. Therefore, corresponding concepts are proposed in the article “Talking about the Changes brought by Android Folding Screen to Interaction Design and Development” :

When we’re dealing with a collapsed screen, we should look likeDevices with bangs (like the iPhone X)Also, has unique detection characteristics to detect folding devices or multi-screen devices

Fortunately, over the past year, there have been obvious changes in this aspect, especially Microsoft’s team is very active in exploring and discussing foldable technology. In February, three Microsoft developers @Bogdan Brinza, @Daniel Libby, and @Zouhir Chahoud published an article explaining how to use JavaScript apis and CSS media queries to handle layouts for foldable and multi-screen devices.

The document proposes two concepts: CSS for two-screen layouts and a JavaScript API for window segment enumeration. It is intended to be the technical standard for discussing folding and multi-screen in Web development. That is, Web developers targeting foldable and dual-screen devices can efficiently lay out Web applications in Windows that span multiple display areas.

Future Web technologies that deal with folding or multiple screens

Web Platform Primitives for Enlightened Experiences on Github Foldable Devices. Web layouts dealing with foldable and multi-screen devices consist of two main features: CSS’s media query feature and JavaScript apis.

Next, we will focus on these two parts.

CSS features for building two-screen layouts

Note: CSS for two-screen layouts is still in the draft W3C specification, and everything is subject to change.

@Brinza, @Libby, and @Chahoud propose a CSS feature, the media feature, that determines whether a site spans two adjacent display areas and how those two adjacent display areas are configured. Another feature, environment variables (defined by user agents), has been proposed that will help Web developers calculate the size of each screen area in CSS pixels.

Why propose new CSS features

When the browser window is folded across the device, telling Web developers where to fold and display boundaries can help them develop better Web applications. Here’s a quick overview of possible patterns.

Bring the UI mode of larger screens to smaller portable devices

Due to screen size limitations, traditional portable touch devices rely heavily on “overlay views,” such as clicking on an email in the inbox list, causing the entire inbox list view to be replaced by the selected message content view. This behavior often creates additional steps; On larger devices, there will be a more natural configuration, where the inbox list view and the message content view are side by side.

This, of course, to recreate the pattern is not the only solution, only the folding screen and more equipment compared with traditional portable touch screen mobile devices for more than a display that is equivalent to add a screen space, so that can provide the unique opportunity for Web developers and designers to create new experience.

Easily improve existing Web applications and UI components

Web developers may not want to introduce major UI changes for such devices, but simply move some components around. In the example below, it makes more sense to avoid device folding for Modal dialog boxes (whether collapsible devices are seamless or gapped) and allow Web developers to progressively enhance their site to provide a better experience.

Because of these reasons, the corresponding CSS features and design principles are proposed.

CSS media features:`spanning`

A new media feature, Spanning, is proposed to detect whether a browser window spans multiple display regions.

The spanning feature has three main values:

Single-fold-vertical: This value matches when the screen is horizontal and the layout view spans a single fold (two screens) and the fold position is vertical (left and right sides)
Single-fold-horizontal: This value matches when the screen is vertical and the layout view spans a single fold (two screens) and the fold position is horizontal (up and down)
None: Describes the state of the browser window when it is not in span mode

Identify CSS environment variables for folded or multi-screen devices

This is a bit like the bangs device, which uses env() to identify environment variables, i.e., safe zones:

env(safe-area-inset-top): Set the amount (CSS pixels) in the security zone at the top of the Viewport
env(safe-area-inset-bottom): Set the amount (CSS pixels) in the security zone at the bottom of the Viewport
env(safe-area-inset-left): Set the amount (CSS pixels) in the security zone to the left of the Viewport
env(safe-area-inset-right): Set the amount (CSS pixels) in the security zone to the right of the Viewport

This recommendation pre-defines several CSS environment variables that recognize foldable or multi-screen devices: fold-top, fold-left, fold-width, and fold-height.

Web developers can use these variables to calculate the size of each screen fragment for landscape and portrait.

Note that the values of these CSS environment variables are CSS pixels and are relative to the layout view (that is, in client coordinates, defined by the CSSOM view). When not in the span state, these values are treated as nonexistent and the fallback value of env() is taken.

Consider a simple example: a mapping application that displays a map on one screen and search results on another. As shown below:

If implemented with CSS code, it looks like this:

@media (spanning: single-fold-vertical) { body { flex-direction: row; } .map { flex: 1 1 env(fold-left) } .locations-list { flex: 1; }}Copy the code

`spanning`The Polyfill

So far, the CSS media feature spanning and its environment variables are still in draft form, but if you want to try it out on foldable or multi-screen devices, you can use a Polyfill provided by @DarkTears.

This Polyfill is easy to use, you can use NPM to load the Polyfill into your project:

npm install --save spanning-css-polyfill
Copy the code

Once installed, import the corresponding spanning- CSS-polyfill. Js into the project via

<script type="module" src="/path/to/modules/spanning-css-polyfill.js"></script>
Copy the code

It can also be imported using import:

import "/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js";
Copy the code

So you can use the spanning new media query feature and the CSS environment variables fold-top, fold-left, fold-width, and fold-height in your CSS.

Of course, you can also manually change the display configuration. For example, by importing the FoldablesFeature object:

import { FoldablesFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js';
Copy the code

You can update equivalents like spanning, foldSize, and browserShellSize with the FoldablesFeature object. You can also subscribe to the Change event to be notified of changes to the Spanning media query feature or environment variable.

import { FoldablesFeature } from '/path/to/modules/spanning-css-polyfill/spanning-css-polyfill.js';

const foldablesFeat = new FoldablesFeature;

// Add an event listener.
foldablesFeat.onchange = () => console.log("change");

// Add as many event listeners as you want.
foldablesFeat.addEventListener('change', () => console.log("change"));

// Change a single value; results in one update (one 'change' event firing).
foldablesFeat.foldSize = 20;

// Change multiple values by assignment; results in one update.
Object.assign(foldablesFeat, { foldSize: 50, spanning: "none"});

// Change multiple values in one scope; results in one update
(function() { foldablesFeat.foldSize = 100; foldablesFeat = "single-fold-horizontal" })();
Copy the code

For a more detailed use of Spanning, check out the Github tutorial.

A JavaScript API for enumerating window fragments

Specifically, the JavaScript API for enumerating window fragments has been moved toW3C Second Screen Community Group. For explanations, questions, and comments, see GitHub’swebscreens/window-segmentsThe warehouse.

A new concept of a window fragment is presented, which represents a window region (and its size) on a separate (adjacent) display. Window fragment sizes are expressed in CSS pixels and allow Web developers to enumerate window fragments through JavaScript apis, placing individual content on the corresponding window fragments.

This recommendation is mainly for reactive scenarios, where Web applications want to take advantage of the fact that they span multiple displays and put them in that state through the user, window manager. It is not suitable for cases where content is pre-placed in separate top-level browser contexts with various available displays (this falls under the Window Placement API and Presentation API). Note that using the API of enumerating window fragments and existing features of the Web, you can use JavaScript to write rectangles of cross-displays and Windows, while considering devicePixelRatio to compute window regions across multiple displays. However, this does not properly address the extreme situations that exist in future device forms, so this proposal attempts to address Web developers targeting or thinking about displaying content screens as a practical starting point.

To put it simply, a Web developer can use getWindowSegments() to fetch an array of DOMRects, and from the data returned by each window fragment, the developer can deduce the number of available Hinge Hinge and its direction.

The user can take the browser window out of span mode at any time and place it on a screen or vice versa, in which case the window resize event is triggered to query and get the number of available screen segments.

Take the example we mentioned above:

If you use JavaScript, you can do something like this:

const screenSegments = window.getWindowSegments(); ScreenSegments [0]. Width === screenSegments[1]. Width === screenSegments[1] / / can update CSS classes, the realization of the layout of the different effect of the document. The body. The classList. Add (' is foldable - '); document.querySelector('.map').classList.add('flex-one-half'); document.querySelector('.locations-list').classList.add('flex-one-half'); }Copy the code

Let’s look at another example of what to do when the window’s resize event and spanning state find changes.

Let’s look at the CSS solution:

@media (spanning: none) and (max-width: 728px) { body { flex-direction: column; } .map { flex: 0 0 300px; } .locations-list { flex: 1; }}Copy the code

If you use JavaScript you can do this:

window.onresize = function() { const segments = window.getWindowSegments(); console.log(segments.length) // 1 if( screenSegments.length > 1 ) { document.body.classList.add('is-foldable'); document.querySelector('.map').classList.add('flex-one-half'); document.querySelector('.locations-list').classList.add('flex-one-half'); }}Copy the code

Real: multi-screen layout

Finally, let’s look at the actual case.

You may not have a foldable or multi-screen device in your hand, and you may not be able to see it in action. But you can use a Web-based simulator that simulates Microsoft’s Surface Duo and Surface Neo split screen devices:

With a couple of demos on GitHub spanning- CSS-polyfill, let’s take a look at index.html in the simplest basic.

The HTMl part is simple (the Demo itself is simple) :

<div class="wrapper">
    <div class="col1"></div>
    <div class="col2"></div>
</div>
Copy the code

Load a.js file before , handle some global styles with some methods from CSS Spanning Polyfill, and even build styles from the JavaScript API.

<script type="module" src=".. /.. /src/index.js"></script>Copy the code

The detailed code for index.js can be found here.

Let’s move on to CSS. Using the media query feature in the CSS:

/* CSS */.wrapper {display: flex; height: 100%; width: 100%; } .col1 { flex: 0 0 200px; background-color: lightgray; transition: background-color .2s linear; } .col2 { flex: 1; background-color: papayawhip; transition: background-color .2s linear; } .col1:before { content: "not spanning"; } .col2:before { content: "not spanning"; }Copy the code

Instead of a split-screen (or collapsible) device, you see something like this:

CSS that has a horizontal split (single-fold-vertical)

@media (spanning: single-fold-vertical) { .col1 { flex: 0 0 env(fold-left); margin-right: env(fold-width); background-color: steelblue; } .col2 { background-color: yellow; } .col1:before { content: "spanning single-fold-vertical"; } .col2:before { content: "spanning single-fold-vertical"; }}Copy the code

Note that the CSS env() function is also used in the example, calling the CSS environment variables fold-left and fold-width. At this point, you can see the following effect:

When you switch the Browser Mode to “Left” or “Right”, this is what you see:

The image above shows the Surface Duo emulator with Browser Mode Left

The image above shows the Surface Duo emulator with Browser Mode in the Right state

And then we have a single-fold-horizontal layout that has a single spanning:

@media (spanning: single-fold-horizontal) { .wrapper { flex-direction: column; } .col1 { flex: 0 0 env(fold-top); margin-bottom: env(fold-height); background-color: pink; } .col2 { background-color: seagreen; } .col1:before { content: "spanning single-fold-horizontal"; } .col2:before { content: "spanning single-fold-horizontal"; }}Copy the code

Switch the orientation of the device to portrait and the browser to Spanning and it looks like this:

Similarly, if you switch the emulator’s browser mode to “Top” or “Bottom”, it will look different:

Finally, you can also set the CSS with spanning: None:

@media (spanning: none) { .col1:before { content: "spanning:none"; } .col2:before { content: "spanning:none"; }}Copy the code

The above is a simpler example. So let’s make the page a little more complicated:

<!-- HTML -->
<ul class="card__container">
    <li class="card">
        <div class="card__object"><img src="//source.unsplash.com/300x300?01" alt="Psychopomp"></div>
        <div class="card__body">
            <h4 class="card__title">Psychopomp</h4>
            <p>Japanese Breakfast</p>
        </div>
    </li>
    <!-- ... -->
</ul>
Copy the code

Following the example above, in addition to media features, add a style (or global style, so to speak) to a normal device:

/* Body {width: 100vw; min-height: 100vh; margin: 0; padding: 2vh; } .card__container { gap: 2vmin; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-flow: dense; } .card:nth-child(1) { grid-column: span 2; } .card:nth-child(6) { grid-column: span 3; }Copy the code

Click here to see the effects on normal devices (non-folding and split-screen).

Resize the window while dragging the browser and see the following effect:

With no styling done on the Spanning media feature, this is what we see on split screen:

Also, let’s do the styling first with spanning: single-fold-vertical:

@media (spanning: single-fold-vertical) { .card__container { gap: env(fold-width); grid-template-columns: repeat(auto-fit, minmax(calc((env(fold-left) - env(fold-width) - 4vh) / 2), 1fr)); } .card:nth-child(6) { grid-column: span 2; }}Copy the code

The effect of horizontal split screen is as follows:

Next, let’s look at the vertical split screen. First, let’s look at the non-split screen:

So let’s do some layout processing with the spanning: Single-fold-horizontal feature:

@media (spanning: single-fold-horizontal) { .card__container { gap: 20px; grid-template-columns: 1fr; grid-template-rows: calc(env(fold-height) - 4vh); } .card__object { height: 250px; } .card:nth-child(1) { grid-column: span 1; } .card:nth-child(6) { grid-column: span 1; }}Copy the code

See the following effect:

In actual operations, you can use the corresponding media query feature with the CSS local environment to achieve different effects.

For a Demo on this, check out:

CSS Spanning media feature polyfill & example
Window Segments Enumeration API polyfill & example

summary

The advent of the collapsible Web has made mobile-first design more complex, but also more exciting. The foldable Web may be the first handheld device to feel an expansion of space rather than a limitation. For some Web applications or Web pages, some tweaking is required, while for others, it means a massive redesign. This range depends on developer innovation.

The resources

Web Platform Primitives for Enlightened Experiences on Foldable Devices
Window Segments Enumeration API
CSS Foldable Display polyfill
Split screen simulator