Updated: June 11, 2021

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



The 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


SwiftUI offers a new way to customize and override layout margins at the view container level. The cell will fill in the rest of the space automatically.


Horizontal Space

There are 2 main classes for the horizontal space.

  1. Compact Width
  2. 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.

With the expansive horizontal space in Regular Width, we recommend considering using 2 sub-classes:  Readable Width and Full-width Regular

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 reading through.

Full-width Regular

Full-width Regular variant is used for containers with at least 768pt width. The layout margin of the container is 48pt.


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.


iPadOS introduces a new navigation paradigm to utilize extra horizontal space. The new sidebar design will affect every floorplan on iPad devices. View more details of Sidebar



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.

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.



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.