WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
Aug 22, 2024

Creating compelling cross-device foldable experiences on the Web

Matthew Atkinson

Are foldables breaking your web layouts? Discover how the new Device Posture and Viewport Segments APIs let you build hardware-aware web experiences without overhauling your existing code.

Pause
Mute Enter Fullscreen
#1 about 5 min

Adapting web applications for new foldable device interactions

Evolving responsive design handles unique hardware capabilities and dynamic screen configurations.

#2 about 4 min

Detecting physical hardware states with the device posture API

Global variables and CSS media queries allow web content to react dynamically when a physical device transforms.

#3 about 2 min

Modeling divided screens using the viewport segments API

Targeted CSS properties track dimensions of logical screen subdivisions for optimized multi-area web layouts.

#4 about 5 min

Navigating the W3C standards publication and review process

Technical specifications undergo rigorous progression from working drafts to official recommendations through structural and architectural review.

#5 about 3 min

Minimizing privacy risks and enabling accessible foldable layouts

Limiting specific hardware properties like fold angle prevents browser fingerprinting while maintaining strong accessibility patterns for users.

#6 about 3 min

Demonstrating reactive CSS capabilities on foldable mobile hardware

Real-world mobile browser previews display native layouts reacting instantly as screens transition between flat and folded boundaries.

#7 about 2 min

Shaping web platform capabilities through active community involvement

Filing technical issues and participating in working groups directly impacts the forward progression of experimental browser features.

#8 about 6 min

Testing simulated foldable layouts and anticipating multi-fold hardware

Software simulation tools facilitate responsive layout verification while emerging specifications prepare for advanced hardware form factors.

Matching moments

3:35 min

Identifying and exploring upcoming web API concepts

Nikita Dubko · JS Congress

9:56 min

Expanding browser capabilities with modern web APIs

Ire Aderinokun · JS Congress

6:48 min

Understanding Interop 2025 and new CSS capabilities

Chris Heilmann Chris Heilmann +2 · LIVE

6:37 min

Strategies for keeping up with advanced CSS evolution

Onur Gumus · LIVE

2:06 min

Addressing browser support for legacy capabilities and modern frameworks

Peter Kröner Peter Kröner · World Congress 2023

2:08 min

Relinquishing pixel-perfect control to embrace the resilient web

Keith Cirkle · Coffee With Developers

Related videos

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • 13 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more thumbnail
1:04:50
LIVE • over 1 year ago

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more

Chris Heilmann, Daniel Cranney, Christian Schaefer

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Explore new web features before everyone else thumbnail
44:43
JS Congress • almost 5 years ago

Explore new web features before everyone else

Nikita Dubko

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw thumbnail
1:13:35
LIVE • over 1 year ago

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney, Rowdy Rabouw

Project Fugu: Extending the web thumbnail
58:12
LIVE • almost 3 years ago

Project Fugu: Extending the web

Lucien Immink

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.