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

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 also decide to switch off letterboxing to make use of the 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 if stretching the app would lead to bad usability by distorting the content.

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.