How to

How UI Bakery allows for building web apps with responsive design


Tatiana Yudina

There is hardly any developer who enjoys making apps responsive manually. If you are tired of this routine activity, want to spend your time on more fascinating programming tasks, and don’t want to deal with the elements overlapping each other, the UI Bakery low-code platform can help.

Earlier, you needed to build “a one-size web app”, and further edit its code manually to make the application responsive. Now, with the help of the UI Bakery app development software, you can visually create a responsive design that fits different screen sizes at once. 

Our internal tool development platform provides for 5 screen sizes:

  1. Full HD – 1144 px.
  2. Desktop – 1024 px.
  3. Tablet – 768 px.
  4. Phone (landscape) – 480 px.
  5. Phone (portrait) – 320 px.

Let’s see what we have in UI Bakery now.

How to make a web app responsive faster using a low code development platform
Layout adjustment

Once you configure a layout that fits a particular screen size, its configuration will be applied to the smaller screen sizes as well. This way, you can manage all the screen sizes, or some of them separately.

Component configuration

You can create different layouts for different screen sizes in our low-code app development software. Within each layout, you are able to customize its appearance, change the paddings and margins, operate with the elements and their sizes, etc. 

While configuring the elements, you can notice blue dots near some of the parameters in the Configuration panel. These dots mean that the value you set for this or that parameter will be applied to the selected screen size, as well as to the smaller one(s). 

There are the parameters without blue dots near them. Once you change such parameter, the change will be applied to all the screen sizes, not only to the smaller ones. 

The UI Bakery apps builder responsive design provides for a regular 12-column grid used to set the element size. Working with columns has become much easier than setting the value in percentage or pixels. For instance, if you need your card to occupy 50% of the dashboard, just set 6 columns as its width.

Element visibility 

To hide or show an element, you can use a visibility parameter placed on the right of the Configuration panel. The element you select will be hidden or shown only on the screen you are currently working with.

Be careful when deleting elements. If you remove an element from one screen, it will be removed from all the other screens in the low-code app development platform as well.

Media queries in the code

Besides simplifying app building with responsive design visually, we’ve also put media queries under the hood of our low-code app development software. Thus, when you download the code of your app, you’ll see that it looks as if it was really coded manually by a software engineer.

Our UI/UX designer Victoria Romanovskaya has written an article with practical tips on building stunning web app designs easily and quickly. Check it out to know about the most useful UI/UX design tricks.

March 11, 2020

Latest articles