Overview

Responsive and Adaptive software enables BTP users on the go to access our products and services. Additionally, responsiveness is an accessibility standard that SAP products must follow. As users switch across devices, the apps automatically accommodate the resolution, image size, and scripting. This way, our users can work however and wherever they want, regardless of device.

Usage

When creating and implementing responsive and adaptive designs, there are certain rules which would make your life easier. We have enlisted them in the recommendations below. These recommendations are specific to the integration and extension tools in BTP.

1
do
false

Recommended

  • BTP tools should run on all three devices: desktop, tablet, and smartphone.
  • Design for desktop, but always consider tablet and mobile.
  • Use responsive components.
  • Use responsive methods if tools can offer functionality and content equally on all device types.
  • BTP tools can mix adaptive and responsive methods.
1
dont
false

Not Recommended

  • Avoid using letterboxing. Always use the full width of the browser.

See also:

Fiori Design Guidelines - Multi-Device Support: Responsive vs. Adaptive

Responsive Design

One of the most compelling factors of the SAP Design System is that products are developed, configured, and maintained only once for all changes to become effective across all devices. SAP UI frameworks simplify responsive design by offering various UI controls that automatically adjust to different form factors and interaction styles. Additionally, the frameworks let developers change the size of the controls to match the type of interaction (such as a touch device or keyboard/mouse). The advantage of responsive design is that tools can adjust to different screen sizes without requiring additional coding and maintenance efforts.

Responsive Grid

Responsive grids allow designers to position UI elements in multi-column layouts. The grids display a variable number of columns depending on the available screen size. With responsive grids, it is possible to achieve flexible structures and line breaks for large, medium, and small-sized screens, such as desktop, tablet, and mobile.

See also:

Visual Design Wiki - Responsive Spacing System

UI5 DemoKit Sample - CSS Grid

UI5 API Reference - GridResponsiveLayout

UI5 DemoKit Sample - Product Home Layout

Breakpoint Table

Designers and Developers can configure responsive grids in numerous ways. For BTP tools, we recommend the following configurations per container size. In addition to the responsive grid layout, apply responsive paddings to achieve the target design properly. Use the following table:

<div> <div>Size</div> <div>Range</div> <div>Columns</div> <div>Column Gutter</div> <div>Row Gutter</div> <div>Padding</div> </div> <div> <div>Size S</div> <div>from 0 to 599px</div> <div>4</div> <div>0.5rem</div> <div>0.5rem</div> <div>padding: 0 0.5rem;</div> </div> <div> <div>Size M</div> <div>from 600px to 1023px</div> <div>8</div> <div>1rem</div> <div>1rem</div> <div>padding: 0 1rem;</div> </div> <div> <div>Size L</div> <div>from 1024 to 1439px</div> <div>12</div> <div>1rem</div> <div>1rem</div> <div>padding: 0 1rem;</div> </div> <div> <div>Size XL</div> <div>from 1440px to 1679px</div> <div>16</div> <div>1rem</div> <div>1rem</div> <div>padding: 0 1rem;</div> </div> <div> <div>Size XXL</div> <div>from 1680px to infinity</div> <div>20</div> <div>1rem</div> <div>1rem</div> <div>padding: 0 1rem;</div> </div>
xml
<cssgrid:CSSGrid class="sapUiResponsiveContentPadding"> <cssgrid:customLayout> <!-- Defines the standard Cloud Platform responsive behavior --> <cssgrid:ResponsiveColumnLayout /> </cssgrid:customLayout> </cssgrid:CSSGrid>

See also:

Visual Design Wiki - Margins and Paddings (Fiori 3)

UI5 Documentation - Enabling Responsive Paddings According to the Control Width

Adaptive Design

There are specific 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 smaller 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 approach requires app developers to define designs for various form factors manually. It means slightly more effort but also allows for more targeted support of device-specific use cases.