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.
WIRED magazine also uses letterboxing
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
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.