2

The New Optimized Story Experience: Mobile Enhancements

 9 months ago
source link: https://blogs.sap.com/2023/05/30/the-new-optimized-story-experience-mobile-enhancements/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
May 30, 2023 6 minute read

The New Optimized Story Experience: Mobile Enhancements

0 1 185

Introduction 

Following Jie’s blog post about the new Optimized Story Experience, and Jason’s deep-dive into the responsive layout, which is available to customers as part of the QRC 2 / 2023 release, this blog highlights some of the improvements for customers designing their stories for mobile devices.

Classic Story Responsive Layout

Let’s first look at the feature which are supported as part of the Classic Story Responsive Layout:

Font Scaling

The Device Preview (accessibly in the edit mode toolbar under format) allows overriding the Font Scale, to ensure text fits appropriately on all devices:

Font%20Override%20setting%20within%20the%20Device%20Preview

Font Override setting within the Device Preview

Disable a tile on mobile

In edit mode, you are able to disable a certain tile (like a line which is used as a design element in the web layout, or a complicated chart you don’t want to show) for mobile devices:

Option%20to%20disable%20a%20tile%20on%20mobile

Option to disable a tile on mobile

However, this option is only available in the edit mode, not within the Device Preview.

Advanced Responsive Layout

Now we will go through the improvements released as part of the Advanced Responsive Layout.

Live device preview

Previously, only the font scaling was adjustable while the device preview was open. For all other actions, including hiding a tile on mobile, the user needed to disable device preview, do their changes, and open device preview again to see the changes.

Now, instead of a device preview button, we show a device bar at the bottom during edit mode, which allows you to directly select a device:

Device%20Bar%20in%20edit%20mode

Device Bar in edit mode

Regardless of which device you select, all edit functionally will be enabled, including actions like adding or moving widgets.

Custom devices

As part of the device selector, you now also have the option to add a custom device. While we kept the previous options like small and large phone as well as tablet for iOS, you can now add your own devices as well. With the existing categories we grouped similar screen sizes into one category, but with custom devices you can now individually fine-tune layouts for devices which were previously grouped together.

Dialog%20to%20add%20a%20custom%20device

Dialog to add a custom device

Responsive Rules

Responsive Rules are the biggest change to how you can design stories for mobile consumption. To access them, first select the device you want to modify the rule for in the device bar, and then open the builder panel on the right hand side and select a lane:

Responsive%20Rules%20Configuration%20Panel

Responsive Rules Configuration Panel

While editing these rules, keep in mind that that responsive rules automatically cascade from Auto or larger devices down to smaller ones.

To show you how to use them, I will adjust the following example story to look good on a phone using responsive rules:

Example%20Story%20in%20the%20Auto%20layout

Example Story in the Auto layout

When I change the device to Small Phone, it will look like this by default:

Example%20Story%20in%20the%20Small%20Phone%20layout

Example Story in the Small Phone layout

You will instantly notice several problems:

  1. The logo and company name are no longer next to each other
  2. The three numeric point KPIs are also scattered across the page
  3. The bar chart is not tall enough to display all bar at a glance, and requires scrolling
  4. When you scroll down in the preview, you will also notice that the divider we used on web to separate the input controls on the right does not look like it belongs there: (Note that for mobile all input controls and story filters are shown in a panel like before)
Part%202%20of%20the%20Example%20Story%20in%20the%20Small%20Phone%20layout

Part 2 of the Example Story in the Small Phone layout

The first problem we want to fix is the ordering of the tiles. In the Classic Story Responsive Layout there was no option to influence the positioning of tiles except via grouping them in different lanes. The Advanced Responsive Layout offers multiple ways to do this.

Widget%20Position%20options

Widget Position Options

Free Positioning allows a flexible positioning of each widget in the lane, including overlapping, while auto-flow reassembles more of the Classic Story Responsive Layout where widgets are automatically arranged. The later is the default positioning for phones, and it now comes with a new option to flow the widgets by row or column. As our layout is designed to be read row by row, we can switch the option to row and have a look at the updated preview:

Update%20layout%20of%20the%20Example%20Story

Updated layout of the Example Story (1)

You notice that problem one and two have been addressed. However, there is further room for improvement to the layout of the title as well as KPI widgets.

You are now able to configure widgets to display side-by-side on phones! For this, simply modify the Widget Size rules – you will notice the default rule on phone is the show each widget at 100% width, however you can override or even delete this rule:

Widget%20Size%20settings

Widget Size Settings

To ensure the KPIs fit nicely, we can also tweak some of the already existing options of the widgets, like hiding the scale and unit, as they are already present in the subtitle. (Please note that these settings continue to apply to all devices.)

Let’s have a look how our story looks now:

Updated%20layout%20of%20the%20Example%20Story%20%282%29

Updated layout of the Example Story (2)

Next, we should hide the vertical line. On the Classic Story Responsive Layout you are only able to hide a tile for all mobile devices at once, but now you can configure show/hide in the responsive rules per device. This allows you for example to display some elements on web and tablets but not phones, or even add phone specific elements.

Widget%20Visibility%20Settings

Widget Visibility Settings

Our story now looks like this, and problem four is fixed:

Updated%20layout%20of%20the%20Example%20Story%20%283%29

Updated layout of the Example Story (3)

As a last step, we need to make sure the bar chart displays all bars without scrolling, to fix problem number three. As part of the widget sizing, you can now control the height of widgets as well. This allows you to make sure all content is displayed at a glance without requiring any interactions:

Widget%20Height%20Settings

Widget Height Settings

Finally, let’s reveal the finished story:

Finished%20layout%20of%20the%20Example%20Story

Finished layout of the Example Story

Conclusion

The new Advanced Responsive Layout offers story designers lots of flexibility when it comes to making their stories mobile friendly. The device preview bar allows making changes while previewing, and custom devices enable fine-tuning layouts per device resolution. But the biggest change are responsive rules, which give designers complete control over widget sizing and positioning for each device, including side-by-side widgets on phones.

For a more detailed view into the Advanced Responsive Layout I recommend reading this blog article.

Frequently Asked Questions

How can I use developer tool in a browser to simulate the look and feel of the Safari native browser or Mobile App?

Using Chrome for example, open the Device Mode from the developer tools and configure the device your want to see the layout of. Afterwards, load the embed mode URL of a story in this mode. This gives you a good preview of how the story would load on iOS Safari. Please note that a story loaded from the mobile app behaves slightly different, especially in regards to the navigation bar, as additional options are available in there, like share, annotations, as well as a back button to go back to the main screen of the app. For more information on supported features refer to the help.

Also note that while this is helpful to get a preview, it is neither guaranteed to be 100% accurate nor a supported way of using a story.

For Unified Story, is Safari native browser and the Mobile App both supported? Any guidance for when to use what?

Yes, both Safari on iPads as well as the mobile app on all iOS devices are supported to load unified stories – refer to the help for more information about supported devices. Please note that to open a story in Safari, you should directly open the embed mode URL of the story.

We recommend using the app, as it offers more features, both within the story (like sharing and annotating), as well as outside (like caching, support for the file repo and catalogs, discussions, notification, and more)


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK