For our typical users who work on-the-go, the ability to switch between desktop and mobile devices is critical. As users increasingly come to expect consistent performance and a coherent look and feel across their devices, how can we make sure that we deliver a great user experience with our Fiori apps? The answer is through responsive and adaptive design.

Responsive and adaptive design allow Fiori apps to run on desktop, tablets, smartphones, and hybrid devices. As users switch across devices, our apps automatically accommodate the resolution, image size, and scripting. This way, our users can work how and where they want, regardless of device.

Responsive Design

One of the most compelling factors of SAP Fiori is that our applications need to be developed, configured and maintained only once for all changes to become effective across all devices. This way, the end user gets a consistent experience no matter which device he or she uses. SAPUI5 makes responsive design easy by offering a wide range of UI controls that automatically adjust to different form factors and interaction styles. Additionally, SAPUI5 lets you adjust the size of the controls to match the type of interaction (such as touch device or keyboard/mouse). The advantage of responsive design is that apps can adjust to different screen sizes without requiring additional coding and maintenance efforts.

Responsive Grid

Adaptive Design

There are certain use cases where a responsive approach may not be appropriate. For instance, you would probably prefer to enter large amounts of data on your desktop. At the same time, you may only want to view the data you entered or perhaps enter a small subset of data on your tablet or smartphone. In such cases, it makes sense to design for different devices and adapt the complexity of the use cases according to the specific device. This is what we call adaptive design. This approach requires app developers to manually define specific designs for the different form factors. It means slightly more effort, but also allows for more targeted support of device-specific use cases.

Examples of Responsive Design

The following 3 example shows how a standard list report floorplan would translate to different devices in a (semi-)responsive way.

For these examples, the following responsive design concepts apply:

• Content density: Compact content density mode is activated on desktop mode. On touch devices, the finger-friendly cozy mode is activated. Read more about content density.
• Filters: On a desktop, the filter fields are fully displayed. On a tablet or phone, the filter bar should be collapsed as default. Read more about filters.

• Responsive controls: The responsive table moves content into a pop-in area as the available space decreases. Read more about the responsive table.

Example of Adaptive Design

Sometimes, less is more. For the same app above, the smartphone version might simply show fewer columns per item by default – enabling the user to see more items at once.

Implementation

Think “mobile first”: Starting with mobile design first helps you stay focused. Begin with the core functionality and progressively enhance features when moving to larger devices.

• If you are using desktop controls, replace them with responsive controls when running on a mobile device. You can still use the sap.ui.table library. However, we do not recommend using the sap.ui.commons library.
• If you are using the ALV (analytical table), replace it with the responsive table (sap.m) or another specific solution for the use case (for example, charts, texts, and KPIs).

Use responsive controls: Most SAPUI5 controls are based on mobile controls. This means that they work on touch devices, or with a mouse and keyboard.

Properly configure the controls: Follow the guidelines to configure the responsive settings for the different controls.

Use the correct size settings: Set your apps to “large” on touch devices and to “medium” for devices operated by mouse or keyboard.

Use responsive layouts: There are several layout options available, which allow you to adjust to different sizes.

Use letterboxing: Many of the worklist apps do not have much content. By letterboxing them (restricting their width to a maximum of 1280 px), you can optimize the layout of the app and achieve a more compact look.

Too many functions? If the desktop app has too much functionality and is too complex to be used on a tablet or smartphone, you might have to switch off some functionality on your mobile device:

• Hide editing functionality and focus on display
• Hide functions from toolbar
• Hide alternative columns and views in tables

Summary and Quick Guidelines

• SAP Fiori apps must be able to run on all three major device types: desktop, tablet, and smartphone.
• If app functionality and information can be offered equally on all device types, responsive methods should be used to automatically adjust the app.
• If app functionality and/or information cannot be offered unaltered on different device types (due to the use case, the available screen real estate, or the device capabilities), the app should be adjusted manually according to device-specific requirements.
• Adaptive and responsive methods can be mixed.