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
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
Landscape & Portrait
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 rotated from landscape to portrait
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
Popovers on different devices
In compact width, popovers will be displayed as full screen modals. In regular width, they appear simply as popover windows.
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
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.