Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Amp Story Desktop One Panel I2I #34479

Closed
processprocess opened this issue May 21, 2021 · 1 comment
Closed

Amp Story Desktop One Panel I2I #34479

processprocess opened this issue May 21, 2021 · 1 comment
Assignees
Labels
INTENT TO IMPLEMENT Proposes implementation of a significant new feature. https://bit.ly/amp-contribute-code WG: stories

Comments

@processprocess
Copy link
Contributor

processprocess commented May 21, 2021

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:
Screen Shot 2021-05-21 at 1 40 30 PM

Small landscape screens:
Screen Shot 2021-05-21 at 1 42 07 PM

The inline-page-attachment content will display as a drawer within the desktop UI:
Screen Shot 2021-05-21 at 1 41 15 PM

As a result:

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:
Screen Shot 2021-05-21 at 1 43 32 PM

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):
Screen Shot 2021-05-21 at 1 43 50 PM

Launch Tracker

Dashboard

Notifications

/cc @ampproject/wg-approvers

@processprocess processprocess added INTENT TO IMPLEMENT Proposes implementation of a significant new feature. https://bit.ly/amp-contribute-code WG: stories labels May 21, 2021
@processprocess processprocess self-assigned this May 21, 2021
@processprocess processprocess added this to To do in wg-stories Desktop One Panel via automation May 21, 2021
@kristoferbaxter
Copy link
Contributor

Discussed during design review today and there was agreement for going down this path. Thank you for presenting!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
INTENT TO IMPLEMENT Proposes implementation of a significant new feature. https://bit.ly/amp-contribute-code WG: stories
Development

No branches or pull requests

2 participants