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.

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.

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.