Designing for Dual Screen and Foldable Devices with CSS (2023)
summary
Modern CSS provides specific media queries and environment variables that allow developers to create layouts that adapt to dual-screen and foldable devices. By utilizing viewport segments, developers can position content precisely across physical hinges without needing to design for every specific device model. While current browser support is limited, implementing these features can help a product stand out and cater to a growing market of foldable users. Data-driven decisions should determine whether the investment is worthwhile for a specific project.
key points
- Viewport segment media queries allow developers to target devices based on whether they are unfolded horizontally like a book or vertically like a laptop.
- CSS environment variables provide dynamic geometry data, such as segment width and height, which can be used within CSS Grid to align content perfectly with the device's physical screen splits.
- Adopting foldable design early can serve as a competitive advantage and user delight, despite the fact that these devices currently represent a small fraction of the total mobile market.
who should read it
Web developers and UI/UX designers who want to learn how to implement responsive layouts for emerging foldable hardware.
discussion skeptical
consensus
Commenters generally agree that UI splitting based on device aspect ratio should be a user-configurable setting rather than an automated process. There is a shared sentiment that forcing a layout change based on hardware is intrusive, with several users comparing it to the unexpected behavior of an automated split-pane in text editors. The overall tone is skeptical of automatic layout shifts, preferring flexible, OS-level controls for display preferences.
top insight
The discussion shifts from software UI to hardware ergonomics, noting that the fold direction of a device determines its accessibility for left-handed users and those in right-to-left reading cultures. This perspective highlights that physical hardware design choices, like folding to the left, can inadvertently alienate entire demographic groups or regions. It suggests that true inclusivity in foldable design requires considering both physical interaction and cultural reading directions.
Generated by an LLM from the article and thread. Check the sources before relying on it.