Automatic Responsive Apps

Creating a responsive web application is a smart strategy—it can get you to market on multiple devices very quickly as well as reduce cost and maintenance. However, building a responsive application is not an easy task, it takes time and requires specialized knowledge and expertise. This is a problem that a RAD low-code platform is designed to solve.

In this blog post, we will see how one such low-code platform provides an automatic, built-in responsiveness system to make it a breeze to create responsive applications.

Responsive Apps: A UI for Every Device

Responsive web applications were invented because it quickly became very difficult and too costly to maintain separate websites for the multitude of devices out there.

With a low-code platform, to build applications that span smartphones to desktop devices to big TVs, you don’t need to hire specialists or learn the intricacy of the Bootstrap grid system. Instead, you design your pages in sections as you would with many systems and just decide how many columns you want per sections for the largest devices; then you simply drag widgets to section columns. The platform will take care of rendering each section appropriately on each device class.

Let’s look at some simple examples. In this first example, we have two sections, one with two columns and one with four columns on the widest screen. To make things easy to understand, we use simple HTML fragments with a colored border and an identifier for the row and column the html fragment belongs to. This will illustrate where the columns are on largest screen size and where they move to on smaller screen size.

Since the behavior of the responsive system is independent of the column content, this serves well for our demonstration purpose. As a reminder, a column can contain a form element, an image, a video, a map or a widget (any items you can drag to section columns in the page designer).

On the widest screen, you can see that all four columns are displayed horizontally:

And here is how the same page will render on a medium sized screen (For example on a tablet device):

A couple of things happened:

1. The second section is now too wide to render as four columns, so it automatically renders as two columns. The blue and yellow columns are now nicely fitted below green and red respectively.
2. Columns that were grouped vertically remain together (as illustrated with the colored border and the column and row numbers). We will see later how we can group columns horizontally if we so desire.
3. There is no change to the first section, which still has enough space to render as two columns.

Now let’s look at what happens when we go to mobile device size:

Both sections have now automatically changed to fit nicely into a single column.

The last column to the right (yellow) on a large screen ends up as the last row on a small screen. Another way to explain this behavior is what you read left to right on a wider screen reads top to bottom on the narrower screen (for left to right languages).

Right to Left Language Support

In a global world, it is also important to work just as seamlessly when using right to left (RTL) languages like Arabic, Farsi or Hebrew. A good low-code platform needs to support RTL out of the box.

Here is the same application when using an RTL language:

A wide screen, which again displays all four columns horizontally (now from right to left):

When rendered on a medium size screen:

 And on a smaller or mobile sized screen:

Responsive Design with Horizontal Grouping

The previous examples showed section columns grouped vertically, but you can design your sections with a horizontal grouping instead. To give you even more design choices we let you decide how you'd like to group columns—horizontally or vertically. As a no-code responsive system, this of course is a simple configuration option in your application.

Rather than describe this in text, let's use a visual example that will be clearer. Here, we want all cells in the same row to remain grouped together on smaller screen size. 

When viewed on a wide screen:

When viewed on a medium size screen:

And finally when viewed on the smallest screen:

As an aside, the example also shows that you can have empty columns (on both vertical and horizontal design modes) and the platform will take appropriate actions to fit all columns correctly.

Deploy Faster with No-code Responsiveness

With a RAD/low-code platform such as Rollbase you can code web applications that work well across devices in a matter of hours as opposed to weeks and months. The no-code responsiveness in the platform is the key for this level of performance. By using sections and simply specifying the number of columns per section, you can very easily design pages that fit all device sizes letting you focus on solving your business problem.