Web Applications: Mobile First

One of the main concerns regarding responsive, business-oriented, web applications it is its mobile user interface. Due to the amount of information displayed, and multiple functionalities, that most business web applications tend to have, designing a mobile interface that can accurately provide a great user experience across all devices and screen sizes is a complex task.

This is why we’ve developed a simple, yet very powerful, way of customizing your user’s mobile experience, by  providing an option in every element, called “Minimal visible screen size”.

(Minimal visible screen sizes options available)

This simple option provides the developer with a choice of showing, or not showing, an element, depending on the device (or screen size) being used to access the web application. The options are:

– Mobile: element will appear in every device;

– Tablet: element will show on tablets and bigger devices (not mobile);

– Desktop: element will show on desktop and bigger devices (not mobile nor tablet);

– Widescreen: element will only show in widescreen resolutions;

By definition, the minimum screen size option works as declared, it will show the element in question only in on screen sizes equal or bigger than the option selected.

Mobile Customization Scenarios

The three environments where mobile customization is available in our development platform are Forms, Lists and Dashboards. These cover every layout your web application may have and allow you to customize your web application’s experience, depending on the device used.

Form and Dashboard mobile customizations work exactly the same way. You choose the element you wish to customize, via our User Interface Editor (see full blog post), and simply select the desired option. This is true for all elements available in our platform.

 

Note: Lists are considered elements in the context of dashboards and can be made visible or hidden entirely, however, it is possible to adjust the list itself, by customizing its columns, as demonstrated in the second animation below.

(Dashboard Element Customization)

Lists work in a very similar way, however, in this specific scenario the mobile customization options are available for the list’s columns, allowing you to control the amount of information displayed across all devices and screens.

(List column mobile customization)

Despite being a very simple option, it provides a solution for easy no-code mobile customizations that focus on cross-platform user experience, and allows developers to provide the best usability to its users, regardless of their device.

We hope you’ve enjoyed this post about our mobile customization tool, don’t forget to follow us on LinkedIn and Twitter, and subscribe to our newsletter so you don’t miss any of our weekly updates.