Summary

Desktop panels mode was initially created as a visually rich UI to display stories on large landscape screens. Since then we’ve introduced new features such as the amp-story-player, amp story animations and amp-story-panning-media which rely on a one panel view. These new features either do not work in the desktop panels mode or look broken. This leads to design compromises, fragmented UX and technical debt.

In the effort to modernize, futureproof and accelerate innovation on the Web Stories format we are implementing a one panel desktop experience to put focus on a primary UI type that can support immersive experiences consistently on all displays.

This change does not impact desktop full-bleed (supports-landscape) stories.

Motivation

We are currently maintaining 2 different UX display types. Refactoring this to 1 will fix bugs that arise from trying to fit our experience into the desktop panels display. It also unlocks opportunities currently infeasible due to desktop panels, such as page transitions or a desktop player carousel.

Any story that is viewed on a landscape display that is not full-bleed (supports-landscape) will look different. These stories will now appear as one panel.

The aspect ratio in the one panel desktop experience will be 69 x 116 which is slightly wider than the three panel desktop display (3 x 5).

Large landscape screens:

Small landscape screens:

The inline-page-attachment content will display as a drawer within the desktop UI:

As a result:

• All screen sizes and ratios will be supported #32503 #32500 #31034 #30294
• Animations will be consistent on all displays #29753

Alternative Solutions

The desktop one panel mode will be developed behind an experiment allowing the feature to be previewed with any existing story. In this way any context that is currently relying on the panel layout will be able to preview the new desktop UI.

Once the code is complete the feature will be rolled out behind an experiment to catch any edge cases, then launched to 100%. At that time the desktop panels UI will be removed in favor of the desktop one panel UI.

Additional context

This is in an effort to support the experience of Web Stories on all screen sizes and ratios, and display immersive content consistently.

As a follow up we intend to implement a performant background blur for a more visually rich experience:

This also paves the way for a desktop carousel player player so users can more easily access other publisher’s content or related stories (Design WIP):

Launch Tracker

Dashboard

Notifications

/cc @ampproject/wg-approvers