1.Introduction

In the previous article, we talked about the principle of visual dashboard design for web side -readability （How to design a Dashboard, Best Practices – Readable | SAP Blogs）.

We know that, readability guidelines can help you guys check your dashboards so that they can communicate information more accurately. In addition to web-side dashboards, mobile design has been gaining attention since the launch of SAP Analytics Cloud’s social media integration services. In this post, I’ll talk about the design points of a responsive interface for mobile.

1.1 “Content is like water”

When responsive interfaces became popular, designer Josh Clark came up with the phrase “Content is like water”, inspired by the famous words of kung fu master Bruce Lee.

Figure 1 Bruce Lee Quotes

That’s a good analogy. A good responsive interface is like the “flowing water” emphasized in Chinese kung fu. If you think of the screen as a container, the content flows in that container.

Figure 2 Content is like water

1.2 what is responsive layout？

Responsive design was introduced by Ethan Marcotte in 2010 to enable different ways of displaying the same web page at different screen resolutions.

From a technical point of view, when the width of your browser reaches a value ,also known as  Breakpoint, the layout and style of the page changes significantly, which is the most important feature of responsive design – Segmented display.

Figure 3 Segmented display

In the SAP Analytics Cloud story, users can already design using a responsive canvas, and these responsive pages already support adaptive presentation on mobile.

Figure 4 SAP Analytics Cloud Story Responsive Canvas

2. Responsive design guidelines for mobile

For mobile responsive interface design, in addition to the readability mentioned in the previous article, we need to ensure that the user’s browsing experience is smooth and consistent, with reasonable elements displayed in different interfaces. This means that the layout of the interface needs to be planned at the beginning of the design.

2.1 Fluid Images

Fluid images are the most common layout method for responsive interfaces, and it is often applied to the display of photographic images. When the width of an image is larger or closer to the width of the phone, fluid images are made to fit the interface by isometric scaling.

Figure 5 Fluid image

It is important to note here that fluid images are mainly suitable for scaling large resolution images to smaller sizes. If the image is small, enlarging it will affect clarity and readability. To avoid this pixel discrepancy, you may also choose to prepare multiple sizes of photos when building your website.

2.2 Adjustment of spacing

When there are more small elements in the interface, we choose to fit them into the mobile interface by adjusting the spacing. Like this bar chart（figure 6）, we only need to fine-tune the distance of each bar to adapt it to this canvas.

Figure 6 Adjustment of spacing

In addition, for page spacing, our colleague Roy Jin, after testing different scale units, found that leaving 2% space on each side of the screen could improve the user’s visual experience.

2.3 Canvas downsize

Figure 7 Canvas downsize

2.4 Pop-up box

Pop-up boxes provide a good option when you need more annotations for mobile data. You can set up pop-up box widgets in the SAC Analytics application, or you can use sub-panels to simulate pop-up box widgets.

Figure 8  Pop-up box

It is important to note here that the size of the popup box widget is fully controlled by the system. If you have advanced needs, using the sub-panel to simulate the popup box widget allows you to arrange the size and position more rationally.

2.5 Fixed-size content

A Fixed-size content is, as the name suggests, an element that is fixed to a certain location on the screen, such as a centered display, so that no matter how the canvas changes, the size and position of the element no longer changes.

If you want to design a Fixed-size content, then you need to use the mobile side, which has a smaller area, as the baseline for the design, which is also known as the Mobile-first design guideline.

Figure 9 Fixed layout

2.6 Component Replacement

Due to the large differences in operation and screen size between mobile and web, the changes in the plane size and position of components in responsive layout sometimes cannot meet the higher-order needs of users. This is when we often use the idea of component replacement to enhance the layout design.

Figure 10 Component replacement

For example, the top tab bar, which is more common on PC, is often adapted to a collapsible card component on mobile. If the tab bar has fewer options, it can also be replaced with a navigation bar at the bottom (figure 10) .

3. Summary 

For more information, please follow the SAP Analysis Cloud topic page (SAP Analytics Cloud | SAP Community), post questions and answers (All Questions in SAP Analytics Cloud | SAP Community)  and read other posts on the topic (SAP Analytics Cloud | SAP | SAP Blogs).

Thanks for reading my second blog post on community! For more information about dashboard design, please stay tuned to this channel for tweets. Also, I look forward to your feedback and comments in the comments.

See you in the next issue!

(All photos are made by auther. All rights reserved for the images used in this blog. No part of this blog may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.)