Mobile responsive design with unified story - SAC

[Punitharaj]

Overview:

Dashboards were primarily created for the web user but at times needs arises to provide the dashboard mobile enabled. With a responsive story it becomes easier, by following certain procedures the story created would suit any need and behave as planned in all screen sizes. Lets look into the tips and methods to create a story that suits all devices.

1.Lanes and break point at page level

The stories will be of the following hierarchy,

• Story


• Pages


• Lanes: A page may or may not have multiple Lanes in it.


• Containers: Used for clustering similar widgets


• Widgets: Elements or building blocks of the story

Each Lane would be used for different sections of the dashboard page. By default, the story will be in web mode. So, when we try to reduce the screen size the story will not be responsive.

Choose an appropriate breakpoint for the lane separation and provide it at Page level builder panel and save the story for the changes to be reflected.

Only one break point is applicable for the lane level responsiveness.

Each lane will occupy 100% width below the break point value

Save the story to make the changes reflect and view it.

2.Mobile optimising Lane/panels

A layout is created in the default auto mode for this example as shown below.

Now choose the desired device mode(Phone,Tablet or Desktop) and select the Lane that needs to be configured and open the builder panel.

The panel contains three actions,

• Widget Position


• Widget size


• Widget visibility

Widget position

Free flow: The widgets could be arranged manually for the device dimensions.

Auto flow: As the name suggests the widgets are arranged automatically from the auto mode either by row or column order.

• Specific widgets could be selected and removed from the arranged order to make overlaps by clicking on remove widget from auto-flow.

For tablet and desktops, the widget left/top gaps could be specified. Not available in phone dimensions.

Widget size

Width and height of widget should be provided, it applies to all widgets in that specific device mode only.

Widget visibility

Choose the widgets that need to be invisible at the initial view.

Note: All these settings options will be applied only to the immediate child of the Lane. Any widget inside a container element will not be affected by these settings.

The design could be maintained for multiple device modes so that dashboard suits those dimensions as expected.

3.Formatting and design

• Use default font size instead of fixed font sizing.


• Use % unit for widget sizing and positioning


• Change the load optimization to background loading from view port loading, go to refresh à load optimization setting à background loading.


• Use containers to combine the widgets that need to be beside each other.

Conclusion:

By making sure all these options were taken into considerations, The story would be reliable form small to larger form factors of devices.