Mastering Foldable Screen Design: 9 Essential Responsive Principles

With the launch of Samsung Galaxy Fold and Huawei Mate X, front‑end developers now face a new task: adapting to foldable screens.

Foldable Phone Overview

Huawei Mate X

Technical specifications (data may vary as the phone is not officially released).

Samsung Galaxy Fold

FlexPai

Small‑scale brand with limited information.

Microsoft Surface Duo

Recently released dual‑screen phone, details are scarce.

From these devices we can see that the screen transitions from folded to unfolded resemble the shift from iPhone to iPad.

The Essence of Foldable Screen Adaptation

When a product manager orders "adaptation for foldable screens," reactions differ across teams.

Product & Design

How to make better use of space?

How to avoid empty‑looking pages?

How to display content in both folded and unfolded states?

How to transition smoothly after unfolding?

…

Developers

Does the page render correctly?

Does it meet the product and design expectations?

…

Therefore, developers must first define interaction and design expectations before evaluating implementation effort. Foldable adaptation starts as a design problem, then becomes an implementation problem.

Even if product and design teams have not yet considered foldable support, developers still have work to do.

Foldable adaptation is essentially responsive design, which follows nine widely accepted basic principles.

Responsive Design 9 Basic Principles

1. Responsive vs Adaptive Design

Responsive design uses fluid layouts that automatically adjust to any screen size with a single codebase. Adaptive design employs multiple fixed layouts selected based on device type, which is more complex.

2. Content Flow

As screens shrink, vertical space increases, causing content to flow downward. Therefore, avoid fixed heights; handle overflow and scale images proportionally.

3. Relative Units

Absolute units cause issues across devices. Use relative units such as em, rem, vw, vh, etc., to achieve scalability.

4. Breakpoints

Breakpoints define critical widths where styles change, typically implemented with media queries.

@media (min-width:800px) and (max-width:1800px) { /* styles */ }

5. Max/Min Values

Setting max‑width prevents content from stretching excessively on large displays while allowing full‑width on small devices.

6. Nested Objects

Wrap related elements in a container to apply a single responsive layout, simplifying management.

7. Mobile‑First vs Desktop‑First

Choose the starting point based on project needs; for foldable devices, a mobile‑first approach is recommended.

8. Web Fonts vs System Fonts

Web fonts offer style but increase load time; system fonts load faster but lack flair.

9. Bitmap vs Vector Graphics

Use bitmaps (jpg, png, gif) for detailed images, vectors (svg, icon fonts) for scalable icons, considering browser support and file size.

Common Foldable Adaptation Issues

Violating the nine principles leads to problems, as demonstrated on Samsung Galaxy Fold.

Breaking Max‑Width Principle

Improper max‑width causes empty gaps when unfolded.

Child elements exceeding max‑width overflow.

Breaking Relative Units Principle

Using fixed px for a button looks fine on regular phones but appears too small on a foldable; switching to rem resolves the issue.

Future Visions for Foldable Screens

1) More folding mechanisms will widen screens, approaching laptop dimensions.

Patents suggest triple‑fold devices; sci‑fi concepts may soon become reality.

2) Richer front‑end interactions. The folding action could be treated as an event, enabling novel UI patterns such as half‑fold split‑screen.

3) New experiences from wider displays. Users could watch live streams while browsing products side‑by‑side, or view larger images with detailed previews.

Reference

https://blog.froont.com/9-basic-principles-of-responsive-web-design/