Convert Classic Responsive Pages in Optimized Story Experience
As a story designer, you can convert classic responsive pages to optimized ones so that you can use more features on responsive pages that are exclusive to Optimized Story Experience. Also know about what happens after the conversion.
Convert to Optimized Responsive Pages
When you convert your story to Optimized Story Experience, all the classic responsive pages are converted to optimized ones.
For stories converted to Optimized Story Experience before version 2023.19, you may have legacy classic responsive pages. For supported and unsupported features, refer to the section Feature Compatibility of Classic Responsive Pages in Optimized Story Experience in Story Pages. To use more features exclusive to Optimized Story Experience, you can convert all the classic responsive pages to optimized ones by selecting Convert Responsive Pages from Edit in the edit time toolbar.
The conversion is one way and applies to all the classic responsive pages.
The converted responsive pages might not be identical to the original ones. Check out in the following section.
Therefore, we recommend using device preview bar to test your story and configuring responsive rules to adjust the layout accordingly after the conversion. For more information, refer to Design Responsive Layout (Optimized Story Experience).
What Happens After Conversion
| Device | Notes |
|---|---|
| Devices of width more than 1024px | No major adjustment's needed. |
| Devices of width between 768px and 1024px | Lanes don't reflow in optimized responsive layout, so lane arrangements might be different in some special cases. You might need to adjust the widget positions. |
| Devices of width between 480px and 768px | Devices of such sizes aren't listed in the device preview bar, but you can add custom device and define responsive rules for it. |
| Tablets (iOS, Android) |
Unsupported widgets, such as clock and value driver tree, or invisible ones don't show up, which leaves space. However, other widgets won’t reflow to fill the space, and their positions remain unchanged as designed. To make the responsive layout similar to the classic one, you can either define responsive rules to adjust their position, or directly set widget to Auto-Flow in responsive rule configuration. |
| Phones (iOS, Android) |
There's a default responsive rule where widgets auto-flow by row. Each widget occupies the full width like before, while the height might be slightly different. You can further adjust and customize the rule. For text widgets on phones, the height won’t be automatically resized based on contents. You can define responsive rules for such devices to adjust the height. |
Header Widgets
The height and font might be slightly different compared to classic responsive layout. The height won’t be automatically resized based on contents. You can define responsive rules for different devices to adjust the height.