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 +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 · WWC 2023

2:08 min

Relinquishing pixel-perfect control to embrace the resilient web

Keith Cirkle · Coffee With Developers

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

From Software Agents to Physical Devices: Inside the Agentic Hardware Stack

Michael Yuan, Vivian Hu

Michael Yuan
Vivian Hu
Open session

World Congress 2026 North America

Offloading IoT State: Solving the Memory Crisis on Legacy Hardware

Pravin Nagare

Senior Software Engineer, Roku

Pravin Nagare
Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg

Related videos

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
WWC 2024 • almost 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 • over 4 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 • over 2 years ago

Project Fugu: Extending the web

Lucien Immink

Future-Proof CSS thumbnail
37:55
WWC 2022 • about 4 years ago

Future-Proof CSS

Ire Aderinokun

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.