Web Responsive Design for the new generation of foldable devices
Get your web app ready for the next generation of smartphones
In previous articles, we've already introduced you to the history behind responsive design, its evolution including dark mode and we even had the courage to make some predictions about its future, but to be honest, we don't have to go much further in time to see how the future could look like. A major innovation in terms of hardware and screen is happening now: foldable devices.
Foldables are devices in which the screen folds within a hinge, there are mainly two different physical form factors: devices with a single flexible screen (seamless), and devices with two screens (with seam). Samsung launched two main devices which are seamless: Galaxy Z Flip and Galaxy Z Fold 2, followed up with other announcements from companies like Huawei and Microsoft, giving us a new technology trend.
The concept of folding is not something new, it started with newspapers, that’s why headlines were (and still are) so important. Back in the days when it was a looong piece of paper, the main goal was to grab readers' attention before they throw the news into the trash. Later, with the new “folding format”, readers were able to have more information at glance and manage the newspaper more comfortably. When we talk about technology and specifically smartphones, foldables lead to new ways for the user to interact with one or multiple screens, inspire, and unlock new mobile experiences. As developers, it’s important to take a look into what does this means for Web Design and how to make our web apps ready to ship for the new generation of devices.
New ways to deliver content
Developers that are familiar with responsive design won’t find any difficulties adjusting the content to these new devices. Responsive design is a must that will help your web app improve its SEO and make it accessible. For users, foldables bring new functionalities that can be a productivity game-changer and even make the tablet experience more portable, let’s explore some of these new features.
Multiwindow
With multi-windows the user can perform multiple tasks opening more than one app and display it on the screen at the same time, therefore the device can even function as a dual-screen. Recently, in its most recent version, Samsung Internet launched app pair for Edge panel, which makes it possible to have more than one tab of the browser open at the same time in multiwindow mode. In terms of responsive design, it means new screen sizes to consider instead of fixed sizes based on the device size, you can check the last measures recommended for testing in this case scenario here, keeping in mind that viewports can be more stretch and we need to avoid horizontal scrolling.
Galaxy Z Flip supports top and bottom split Multi-Active Window mode while Galaxy Fold 2 supports three multi-active window.
Pop Up View
The Smart Pop-Up View feature is designed to allow selected applications to notify you when a new notification pop-up, the application will then be viewed as a chat head, where you can adjust the transparency of the Pop-Up Window as well as minimize and expand the window size.
Even though this not a specific feature of foldables, this is also related to re-sizing and provide multi-tasking, therefore it leads to one of the principles of responsive design: let the user resize the screen without missing content.
Posture
Besides the new features that lead to thinking about responsive design, the main innovation is taking into consideration the different form factor of the screens of the device itself. Let’s review the Samsung Flip, for example, if we have a web app open that contains video, the same page can behave differently when it’s flat than when it’s in flex mode. We are currently working in efforts to create standards related to this premise to make it useful for developers the ability to detect in their web app what is the current posture of the device so they can make the page layout appropriate for device shape. We will go deeper with some examples specifically talking about postures in other articles but in the meantime, I invite you to join the conversation and think about how this would be convenient for you or which are the new ways that this posture can lead to creating new types of content.
Challenges
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 you 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. Usually, we focus on the smaller screens following mobile design first but sometimes we forget to take advantage of bigger ones. Let’s see some examples.
Content Margin Generation
Problem: When unfolding the device, the content in the inner screen contains extra margins which are distractive and the content looks more narrow instead of taking advantage of the extra space.
Solution:
- Set the maximum width of the content to be smaller than the real screen size, check that layouts don’t exceed width:100 %
- Set up minimum / maximum margins through content scaling.
- Set up a container to define left and right margins using relative units and even media queries to adjust margins according to screen size.
.container {
margin: 0 5%;
}@media screen and (max-width: 600px) {
.container{
margin: 0 8%;
}
}
Right Margin Optimization
Problem: When the device is unfolded the content is not well aligned and the right margin is larger. This usually happens if your content is not centered or you have an extra column reserved for ads for example.
Solution:
- Use width 100% when is convenient and avoid using fixed units in your layouts. The same advice that we mentioned above about extra margins applies here.
- Avoid losing quality when scaling up your content and scaling font sizes too large. Use media queries to provide different image resolution and font sizes if it’s necessary.
External Screen Optimization
Problem: When the device is folded and unfolded, the layout of some areas is not readjusted, causing, for example, some of the images to be invisible or cut. In the case of Samsung Galaxy Fold cover screen, an image can be out of the cover screen when the device is folded.
Solution:
- Use media queries to re-adjust the image to fit the cover screen when folded.
- Use relative units instead of fixed
- If you have your content distributed in different columns as layouts, you can use flexbox to display items as a single row, or wrapped onto multiple rows as the available space decreases.
.items {
display: flex;
justify-content: space-between;
}
Testing
Besides testing using your favorite devtools resizing the screen, if you want to test in a folding device, Samsung released a number of easily accessible online resources, including a ‘remote test lab’, this allows developers to test-run apps on their PC using a virtual Galaxy Fold device, and an emulator. This is an effort to offer developers a chance to familiarize themselves with the device’s foldable UI and open the door for more developers to innovate within this foldable ecosystem. Give it a try and let us know how it goes!
Final Thoughts
We are pretty excited to see which are the products that the web community is building and how they take advantage of these devices' new forms. Responsive Design, folding or unfolding the web, still has a key role in web development and CSS led the way to make it easier to take advantage of features like CSS Grid and Flexbox. We hope that besides the innovations created during the development process like Multi-Active Window, and the development standard efforts that we are currently working on not only create a better user experience but also set a standard for the next generation of foldable phones.
