Layouts, Floorplans, and Frameworks Layouts Letterboxing

Updated: November 21, 2019
SAPUI5 Version 1.68

Letterboxing

Intro

In web design, it’s common practice to restrict the user interface to a certain width in order to preserve its original aspect ratio. This way, the interface does not become distorted or stretched when adapting to larger screen sizes.

If the screen is wider than the set width restriction, blank areas to the left and right of the user interface will appear. In many cases, these areas are used to display advertisements. This design element is called letterboxing because it restricts the user interface to a certain width similar to the shape of a classical letterbox.

SAP Fiori also offers letterboxing. Today, we can easily adjust content to different screen sizes by using responsive layouts and controls, so letterboxing is an optional feature. If letterboxing is switched on, the screen size is reduced to 1280 px.

Letterboxing switched on (screen width 1280 px)
Letterboxing switched on (screen width 1280 px)
Letterboxing switched off (full screen width)
Letterboxing switched off (full screen width)

Guidelines

When to Switch ON Letterboxing

  • You want to make the UI appear simple and focused.
  • There is too little content on the UI to require using the full width of the screen.
  • The content cannot respond to large differences in size, and stretching the app would distort the content and lead to poor usability.

Letterboxing should be switched on or off per entire application. In other words, apps should not mix letterboxing and full screen within one app.

If you want to use letterboxing for an application, set the appWidthLimited property of the sap.m.Shell control to true.

Information
If a user frequently navigates between two apps, avoid changing between letterboxing and full screen settings between the apps.

In some cases, applications may need to have the flexibility to change the width at runtime for different views. Example: fullWidth in view A and letterboxing in view B.

Through a new API, apps can change the width in the AppConfiguration service at runtime for different views.

When to Switch OFF Letterboxing

  • A lot of information needs to be displayed. This will require the app to accommodate the content to all intermediate screen sizes in a graceful way.
  • The user needs to have as much content as possible on the screen without having to scroll. This has to be handled carefully as it can create a crowded and messy appearance.