Building Web Layouts For Dual-Screen And Foldable Devices

on

 a). Before responsive design

In 2007–2010, during the start of the mobile phone boom, the web was facing a fork in the road.
These devices were able to access the standard desktop-only web. This new mobile format of devices gave web developers a problem. How do you support both large screens with mice and keyboards, and small touchscreen devices?
In the early part of this era many developers opted to build two versions of their websites:
. A site for desktops and
. A redirection to a separate m-dot website when the User Agent string from a mobile phone was detected.
Making a separate Web for mobile devices had been done before in the form of WAP websites.(WAP was a version of the Web for feature phones that went out use when phones could browse the regular web.)

b).Responsive Design
Responsive design is building a single website which uses HTML and CSS to give an appropriate experience based upon the detected features of the display and the user's preferences. It is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones). To create a responsive website, add the following <meta> tag to all your web pages:

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

This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. With media queries you can define completely different styles for different browser sizes.

c). Dual-Screen And Foldable Devices

Dual-screen devices have been on the market for nearly three years
  1. Motorola Razr 5G
  2. Microsoft Surface Duo 2
  3. Oppo Find N
  4. Samsung Galaxy Fold
  5. the Galaxy Z Fold 3
  6. Z Flip 3
  7. Surface Duo 2

The above phones are popular dual-screen gadgets that readily come to mind.
In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices(dual-screen foldable). These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them.

## Challenges with Dual-Screen And Foldable Devices

Folding and unfolding can change the screen size. Again, this is not a new problem in web responsive design, re-sizing the screen already happens in non-folding cases. Some basic tools that will help us build a responsive layout are CSS Grid and Flexbox. The challenge when we talk about foldable devices is that we need to provide a great user experience when our web app transitions from one screen to another which can be really quick. For devices that have more than one screen, for example, the Samsung Galaxy Fold, which has one outer screen in addition to the main one, we need to have a smooth transition between both two screen sizes which means, not losing any kind of information and present the content properly.
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.


## Solutions

Broadly speaking, there are two variants of foldable devices: dual-screen devices, and single-screen devices that take advantage of the flexible display technology. Both have a lot in common: they are portable, multi-posture devices that allow users to rotate, flip and fold.


On this form factor, applications can reside on one side, or can be spanned across both display regions. A website that responds to this spanned state integrates with the semantics and intent of logically splitting the presented content.


I’ll take you through enhancing an example e-mail client layout to demonstrate how the newly created browser capabilities work.


## Detecting Foldable Devices With New CSS Media Features

a).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.


@media (horizontal-viewport-segments: <count>) { }
@media (vertical-viewport-segments: <count>) { }
The count reflects the number of segments



The viewport-segments media feature by itself won't help you design around that annoying hinge.
we 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.

The environment variables populated on foldable devices also needed to be updated, and introduced the concept of indexing to rows and columns of segments.

env(viewport-segment-width <x> <y>)
env(viewport-segment-height <x> <y>)
env(viewport-segment-top <x> <y>)
env(viewport-segment-left <x> <y>)
env(viewport-segment-bottom <x> <y>)
env(viewport-segment-right <x> <y>)

The x and y coordinates refer to a conceptual grid that begins with 0 0 in the top left. you would use these values to use coordinates from each view segment.




$$ CALCULATE THE HINGE WIDTH
We can also calculate interim values (such as the hinge dimensions):
When we have a device that has a hinge obscured by hardware features, we’re able to calculate it using the environment variables provided.

calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));

/* dual-portrait hinge width */
calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))
/* dual-landscape hinge height */
calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0))




b). Using JavaScript To Detect Foldable Devices

Viewport segments represent the regions of the window that reside on separate displays that are adjacent to each other. To detect a dual-screen device you would query the segments property with the following code:

const segments = window.visualViewport.segments;

The window.visualViewport.segments property returns an array containing the DOMRects of all the display-regions the browser window is spanning across.

window.visualViewport.segments
let screens = window.visualViewport.segments;
console.log(screens.length);

/**
* Output:
* Surface Duo with browser spanning: 2
* Surface Duo with browser and another app side-by-side: 1
* Desktops, Macs, Etc: 1
**/

Developers may listen to the window resize event or orientationchange to detect whether the browser was resized or the device was rotated.

/**
* Browser state: spanning on Surface Duo device
**/
let screens = window.visualViewport.segments;

console.log(screens.length); // prints 2

/**
* Some time later.. user resizes the browser
*
* Browser state: residing on 1 display
**/

window.addEventListener('resize', () =>{
screens = window.visualViewport.segments;
console.log(screens.length); // prints 1
});


### WHEN TO USE THE JAVASCRIPT API VS THE CSS MEDIA FEATURES TO DETECT DEVICES

Both the CSS media features and JavaScript segment property will detect a dual-screen device, but the JavaScript property is best used when there’s no CSS being used, which can happen when you’re working with objects in Canvas2D and WebGL. An example would be a game that you’re developing that could leverage both screens.
Location: New Delhi, Delhi, India

Comments

Post a Comment