Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
SteffenKoette
Advisor
Advisor

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 post 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 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 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 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 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 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 Story in the Auto layout


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


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 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 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:


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 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 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 Visibility Settings


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


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 Height Settings


Finally, let's reveal the finished story:


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)