Responsiveness in Stories - Update
Matias Szylkowski
Do you spend hours crafting the design of your story only to find that it does not quite display right on older devices or on the biggest phones? Ensuring a Story looks great on different phone sizes has been challenging for creators and Story tooling teams. In this update we are sharing common issues that creators face in laying out their Stories, a developer tool to inspect your Story in more layouts and a new layout solution that you can adopt to simplify making your Stories look great on all phones.
Web Stories Dev-Tools
Stories surface on a multitude of surfaces and platforms. If you want to preview how your Story will look on a specific screen, you can do so with the Web Stories dev-mode. Simply add #development=1 to the end of your story URL and you will enter the Web Stories Dev-Tools, a new portal to analyze your stories before publishing them. You can test it on this example story.
The main feature is a Preview tool for your story, where you can visualize exactly how it will look on multiple mobile devices, so your design gets tested on the most common surfaces. It will help you catch design inconsistencies in your story that you wouldn't be able to see otherwise from the editor view of your tool of choice.
While there are thousands of models released, we carefully chose a selection of devices to preview the most common screen sizes, aspect-ratios and platforms. You can even preview your story on common tablets and desktops in case it supports landscape mode.
For creators that craft their stories using traditional web development workflows, we also surface validation errors on the Debug tab. Make sure to fix all errors before publishing your story.
Common layout issues in Web Stories
Web Stories often run into the following common issues on different phone sizes:
Key text is cropped in on smaller screens
CTAs or tap targets are cropped or obscured
Shapes and images are deformed by changes to aspect ratios
Line breaks in text are misplaced
Background and foreground elements do not line up properly
To help creators and tools output better laid out stories, we are releasing amp-story-grid-layer presets that will behave more responsively in all mobile devices.
The new responsiveness presets order elements into background and foreground layers. Elements that should never be cropped (like text and decorations) are part of the foreground, and elements that can be cropped (like background images) are part of the background. This series of presets ensures:
All your foreground assets will never be cropped
Text and images will retain their aspect and position with respect to one another
Backgrounds will always cover the screen on all mobile devices, so there will not be letterboxing (horizontal nor vertical bands)
Foreground and background elements will scale and move together, meaning that the story will always look exactly the way you designed it
You can anchor layers to borders or corners to place logos and footnotes
