Preparing Stories for Mobile

Learn how to enable your stories for either the iOS or Android mobile apps.

  • You can use Responsive or Canvas pages to consume stories in the Optimized Story Experience on your mobile app. It is however recommended to use Responsive for a better experience.

  • Stories created using the Classic Design Experience must be created using Responsive pages (not Canvas or Grid). When creating your story, you can preview how it will look on a device by choosing (Device Preview) from the story toolbar. Select either Android or iOS for your Device type and specify a Size from the list provided.

Note
The size previews for Phone and Tablet correspond to the following Android device specifications:
  • Generic Phone: Viewport equal or under 768 px width
  • Generic Tablet: Viewport between 769 to 1024 px width
  • Large Tablet: Viewport equal or greater than 1025 px width
Note
The size previews for Phone and Tablet correspond to the following iOS devices:
  • Small Phone: iPhone 11 Pro, iPhone XS, iPhone X, iPhone 8, iPhone 7, iPhone 6S
  • Large Phone: iPhone 11, iPhone 11 Pro Max, iPhone XS Max, iPhone XR, iPhone 8 Plus, iPhone 7 Plus, iPhone 6S Plus
  • Small Tablet: iPad Pro (9.7-inch), iPad Air 2, iPad (9.7-inch), iPad Mini
  • Large Tablet: iPad Pro (10.5-inch, 11 inch, 12.9 inch), iPad Air (2019)

The mobile apps can only be viewed in portrait mode for phones and landscape mode for tablets. The apps do not rotate orientation.

You can set different font sizes for the resolutions of different device types. This allows story designers to target how text is displayed for a single story when viewed across multiple mobile devices. First select a device and size, such as an iOS Small Phone. Then with a tile in the story selected, open the Designer panel and select Styling. Fonts can be changed for individual tiles in the story.

You can also hide an individual Responsive story page so it doesn't appear on mobile devices. Select the page tab in the story designer and choose Hide in mobile.

Viewing Geo Maps on Mobile Devices

Below are guidelines to best design stories containing geo maps for an optimal mobile experience.

Scenario A - One map per story page
Maximum one geo map per page
Each map should contain three or less map layers
Choropleth layer should contain less than 500 regions
Scenario B - Multiple maps per story page
Maximum three Geo Maps per page
Each map should contain only a single map layer
Choropleth layer should contain less than 500 regions

Story Optimization in the Mobile Apps

The optimized story experience enables content within an SAP Analytics Cloud story to load faster, but not all features and story options will be available when you enable the Optimized Design Experience or Optimized View Mode features. These usage restrictions will be removed over time or changed into improvements. For the latest information on feature support, see Optimized Story Experience Restrictions.

For stories that have been created using the Optimized Design Experience you do not need to enable optimization settings for either the iOS or Android mobile apps. Supported features will be automatically available to mobile app users. Simply select either Android or iOS for your Device type and specify a Size from the list provided.

For stories created created in either the classic (non-optimized) mode or the Optimized View Mode, two optimization settings are provided:
  • Optimized iOS: this mode enables stories to load faster on iOS mobile devices by leveraging the embedded browser. This setting is not relevant for stories viewed using the Android app.
  • View Time Optimization: this mode enables mobile users to benefit from improved performance of dashboards (in certain scenarios) and leverage usability improvements in stories on iOS and Android mobile devices.
Note
Not all features and story options will be available when you enable these modes.

Enabling the Optimized Modes

  1. Access your story:
    • From the Home Screen, under Recent Stories, select the story. OR
    • From the () Main Menu, go to Browse, then Files, and then select the story.
  2. Next to Controls, select Edit.

    From the (Edit Story) dropdown list, select Story Details.

  3. Under Optimized iOS, turn on the Enable for iOS App setting. Your story will now run in Optimized iOS mode on your iOS device.
    Note
    Android app users do not need to implement this step.
  4. Under View Time Optimization, turn on the Enable Optimized Mode setting.
    Note
    Stories must be enabled for Optimized iOS for View Time Optimization mode to work on your iOS device. Classic stories enabled for mobile will by default now have Optimized iOS set to ON. Also, when Enable Optimized mode is turned ON, Optimized iOS will automatically be set to ON. Story designers can opt to turn off either setting.

For a listing of supported features on the iOS app see iOS Mobile App Feature Compatibility.

For a listing of supported features on the Android app see Android Mobile App Feature Compatibility.