Updated: November 24, 2020

Adaptive Design

SAP Fiori for iOS supports the auto layout and adaptivity concepts that allow you to create a great user experience for all devices on iOS and iPadOS platforms. The concepts provide a mechanism that helps dynamically rearrange and resize content in response to changes in the device’s orientation or when using the app on different screen sizes.

iOS defines 2 main size classes: regular and compact. These classes apply to both horizontal and vertical space. 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

Adaptivity concept defines how the UI changes and adapts to different devices and orientations. There are 2 main size classes: Compact and Regular. These size classes affect horizontal and vertical space separately.

Same design viewed on different devices
Same design viewed on different devices
Same design rotated from landscape to portrait
Same design rotated from landscape to portrait

 

Horizontal Space

By deriving from the main size classes, adaptivity behaviors on horizontal space are divided into 4 variants.

  1. Compact Width
  2. Regular Width
  3. Readable Regular Width
  4. Full-Screen Regular Width

 

1. Compact Width

The variant defines that full-width components have 16pt layout margins by default. The spacing between UI elements inside the components can be fixed or flexible with Auto Layout depending on each case.

2. Regular Width

This variant defines that full-width components have 20pt layout margins by default. The spacing between UI elements inside the components generally is larger than the compact width variant. Some components utilize the extra wide space by having 2 columns of content or showing extra information inside the components

3. Readable Regular Width

Readable Regular Width is an extension of the Regular Width variant. It sets a maximum inner width of components to 672pt as the largest width for readability. It is the maximum width of content that the user would still feel comfortable to read through.

4. Full-Screen Regular Width

Full-Screen Regular Width variant is only available on full-screen iPad specifically. It defines that the full-width components have 48pt layout margins.

 

Vertical Space

UI component height adapts to the availability of space of the current screen. There are 3 variants when applying the main size clasess on vertical space.

  1. Compact Height
  2. Regular Height – iPhone
  3. Regular Height – iPad

 

1. Compact Height

Compact Height layout variant is only available on landscape orientation in a limited number of iPhone devices. Inner paddings and spacings between UI elements need to be descreased and allow more content to show on the screen.

2. Regular Height – iPhone

This variant is specific to iPhone devices that allows the Regular Height size class. It is a default height class for all components.

3. Regular Height – iPad

This variant is specific to iPad devices. This only applies to some of the components that requires more space.

Sidebars

iPadOS introduces a new navigation paradigm to utilize extra horizontal space. The new sidebar design will affect every floorplan on iPad.

Upcoming Changes
The current iPadOS sidebar design is being developed at the moment. It will be released in 6.1.

 

Modality

Modality is a method to present content in a temporary mode. With Adaptive Design, Modality on iPhone and iPad devices will adapt to the screen sizes and utilze the available space.

Full-Screen Modal, Modal Sheet, and Popover

In Compact Width, popovers are displayed as either full-screen modals or a modal sheets. On the other hand, they appear as a popover window next to the area that activates it.

Information
Differences between Full-Screen Modals and Modal Sheets are explained in the Modality guideline.

Modal Sheets

In Compact Width, modal sheets slide in on top of the parent page, and the parent page will shrink a little. In Regular Width, modal sheets will stay at the center of the screen as an overlay window together with an overlay layer that dims down the parent page.

 

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.