Everybody is currently talking about responsive web design. Be it when following the current web design discourse on blogs or when speaking with colleagues – responsive web design is on everybody’s lips. 2013 even was named the year of responsive web design. In this brief introduction to the topic I will deal with the origins of this trend and its implications for user experience at SAP.

In classical web design, pages were viewed only on desktop computers. With the emergence of smartphones and tablets the diversity of devices has multiplied. This variety requires that content be optimized for each display format. To cater to the diverging device types, there are three options:

  • You can use different URLs for different devices. But different URLs also lead to separate user experiences.
  • You can create different HTML content for different devices. Yet this approach increases the amount of code-lines and thus is difficult to maintain.
  • By means of responsive web design you can achieve one experience for the user across all devices while reducing maintenance for the development team.

The term responsive web design was first coined by Ethan Marcotte in an article in his blog A List Apart in May 2010. Later, he further theorized on the practice in his book Responsive Web Design from 2011. For Marcotte, responsive web design possesses the following characteristics:

  • Web pages and their contained elements are no longer laid out in absolute units such as pixels, but rather percentages.
  • Media queries, a feature introduced with CSS3, enable the page to use different style rules on different devices and resolutions. By means of media queries it has become possible to provide smartphones, tablets and desktop computers with the same content in HTML, but to apply CSS styles specifically for each device.
  • A fluid grid system, a set of layout rules in CSS, serves as an abstraction layer to adapt the page to the various device contexts.

You can start your responsive web design project by designing first for a smartphone. This approach is called Mobile First. In this way you narrow down the content to what actually is needed for your users on a very small screen. In the next steps, you design for larger resolutions and gradually adapt your content to them. Prioritize your content elements and show important ones on all devices while showing less important ones only on the bigger screens.

With SAP UI5, you can use the Grid control to enter the world of responsiveness. It enables you to layout SAP UI5 controls such as tables and forms and other interface elements and to apply device-specific rules to them. In this way, you can show less important content underneath the main area on a mobile phone, for example, while on a desktop computer with bigger available screen real estate you show both areas side-by-side. It is also possible with the grid to show and hide elements depending on the device used.

An important tool for responsive design will be something recently developed we call the Grid Designer. With it, you do not need coding skills to apply the layout rules to the grid control, but you can use a graphical user interface to define the responsive behavior of your layout. With it you will be able to experiment and test different possibilities until your responsive layout feels right.

In the context of SAP, where user interfaces have to deal with complex representations of data and are used to derive meaning from them, responsiveness is particularly challenging. For SAP Fiori for example, our goal is to achieve device-specific user experiences with suitable levels of feature-richness for mobile devices and desktop computers. This leads to user interface patterns and controls that are no longer solid blocks as on desktop, but rather combinations of smaller, fine-grained functional parts. Here the tailor-made grid control serves as an abstraction layer to handle different levels of complexity and to beautifully lay out SAP Fiori controls.

Not logged in
  • d. Z. Tin  4 years ago

    Good to know SAP is also (finally) moving towards a responsive web development strategy. But why build your own grid designer and not use any of the freely available ones in the OSS community?

    • Team SAP UXC   4 years ago

      Hi, and thank you for your question. There were several reasons to create a custom tool:

      1) Most of the tools in the Open-source community are based on Twitter Bootstrap. UI5 uses a custom grid layout to achieve similar responsive behavior. This control is adapted to the UI5 control library and handles spacing between interface elements in a better way.

      2) As far as I know, many open-source tools can be used to create your own responsive behavior and export a CSS file with media queries according to user input. UI5 handles breakpoints centrally with another control. So such a tool would not make sense in the context of SAP UI5 since the grid layout is not changed by the user.

      3) When we designed the Grid designer it became clear that the user interfaces of existing tools could be improved. The Grid designer for examples offers a preview panel that shows different device contexts at the same time and thus makes it easier to keep an overview of your responsive layout and how it adapts to your different devices.

      4) And there are many small improvements in the UI that made it worth going for a custom solution.

  • Roel Vossen  4 years ago

    The Gird Designer looks very interesting, especially since it especially geared to SAP UI 5. When will it be available?

  • Frank Luzat   1 year ago

    Why wasn’t the grid designer released to the public??