Updated: September 3, 2018

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. In earlier releases, letterboxing to 1024 px was automatically enforced in order to avoid distorting content. In later releases, letterboxing became an optional feature.

Before SAPUI5 version 1.22, letterboxing was mandatory for all apps and was automatically set to 1024 px
Before SAPUI5 version 1.22, letterboxing was mandatory for all apps and was automatically set to 1024 px

Today, we can easily adjust content to different screen sizes by using responsive layouts and controls. To account for the increased average screen sizes in our customers’ IT infrastructures, we have increased the letterboxing to 1280 px.

Since SAPUI5 version 1.22, apps can decide to make use of letterboxing which will automatically set to 1280 px
Since SAPUI5 version 1.22, apps can decide to make use of letterboxing which will automatically set to 1280 px
Since SAPUI5 version 1.22, apps can also decide to switch off letterboxing to make use of the full screen width
Since SAPUI5 version 1.22, apps can also decide to switch off letterboxing to make use of the full screen width

If you want to use letterboxing for an application, set the setAppWidthLimited property of the sap.m.shell to true.

Guidelines

Switch letterboxing ON if:

  • 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 if stretching the app would lead to bad usability by distorting the content.

Switch letterboxing OFF if:

  • 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.
Information
Apps should not mix letterboxing and full screen within one app. Moreover, if a user frequently navigates between two apps, avoid changing between letterboxing and full screen settings between the apps.