Multi-Device Support: Responsive vs. Adaptive

Intro

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

Responsive design is supported by a responsive grid.

The responsive grid positions UI elements in a 12-column flow layout. It can be configured to display a variable number of columns depending on available screen size. With this control, it is possible to achieve flexible layouts and line breaks for large, medium, and small-sized screens, such as desktop, tablet, and mobile.

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 case 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:

(1) Example of a list report floor plan on a desktop device. The filter bar is displayed and all the table columns show side by side.

(1) Example of a list report floor plan on a desktop device. The filter bar is displayed and all the table columns show side by side.

(2) The same application, this time adapted to the screen size of a tablet. The size of the controls is increased to allow for interaction by touch. The filter fields are hidden, and some table columns move into the pop-in area.

(2) The same application, this time adapted to the screen size of a tablet. The size of the controls is increased to allow for interaction by touch. The filter fields are hidden, and some table columns move into the pop-in area.

(3) The same application now displayed on a smartphone. Nearly all table columns move into the pop-in area.

(3) The same application now displayed on a smartphone. Nearly all table columns move into the pop-in area.

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.

Fewer default columns on a smartphone

Fewer default columns on a smartphone

[internal_only]

Why are Responsive and Adaptive Design so Important?

Business continuity strategies, which allow users to switch between devices and pick up where they left off, are becoming increasingly common in the workplace. Responsive and adaptive design are key enablers of multi-device support. By offering responsive designs that serve different channels out of one code line, we can keep up with the benchmarks established by other market players.

Take a look at how SAP’s responsive features allowed one of our customers to consider new ways of working:

Normally, I’d say we don’t need the app to be responsive. Our users mostly work on a desktop – though that might be because we’ve never found a way for this role to work on a mobile device.

But when I think about it, we already have users offering second and third-level support who may be out in the field, at home, or even on vacation. If they could work from their mobile devices, they could provide support in urgent cases, or work remotely whenever they need to. So, yes, we do need a responsive solution. We shouldn’t limit our options by only looking at how we work today

Bosch Siemens Hausgeräte, CIO

[/internal_only]

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.

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:

Summary and Quick Guidelines