Updated: July 28, 2017

Adaptive Design

Intro

SAP Fiori for iOS supports adaptive layouts that allow you to create a great user experience with your app. This dynamically rearranges and resizes your content in response to changes in the device’s orientation or when using the app on different devices.

iOS defines two size classes: regular and compact. The regular size class is associated with expansive space, in most cases referring to iPad, while the compact size class is associated with constrained space, in most cases referring to iPhone.

Object Floorplan on different devices
Object Floorplan on different devices

 

Adaptivity

On different devices

When users move between devices that display content in compact or regular sizes, the margins may increase on the left and right sides of the screen. The layout of content may also rearrange to make better use the available space.

Same Design viewed on different devices
Same Design viewed on different devices

 

Rotation

When a user rotates a device from landscape to portrait mode and the device is displaying content in regular width, the content remains the same but the margins on the left and right may change.

Same Design rotate from landscape to portrait
Same Design rotate from landscape to portrait

 

Components

Object Cell

In regular width, the object cell’s description section is visible. When the user moves from regular to compact width, the description section becomes hidden.

Object Cell in Compact and Regular
Object Cell in Compact and Regular

 

Header

In compact width, object header content may be split onto multiple pages, accessible via a page control. In regular width, however, all the content appears at once in the object header.

Header in Compact and Regular
Header in Compact and Regular

 

Modals

Pop-over on different devices
Pop-over on different devices

Pop-over

In compact width, pop-over windows will be displayed as full screen modals. In regular width, they appear simply as pop-over windows.

 

Floorplans

Object Details

When moving from compact to regular widths, the object details floorplan will display increased left and right margins and the description section of object cells will become visible.

Floorplan: Object Detail on Compact and Regular
Floorplan: Object Detail on Compact and Regular

 

Suggestions

When designing applications in SAP Fiori for iOS, be sure to keep adaptive layout in mind. Designing apps that support adaptive layout can help to save development time down the road and provide users with a coherent and well-considered experience.

Here are some tips:

  • Consider how the app design would behave in both portrait and landscape modes early in the design process.
  • Design with screen rotation and device size in mind.
  • Evaluate how components and floorplans will change based on adaptivity.