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 ever again, the UI Bakery low-code apps builder can help you.
Here is how.
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.
The app development platform provides for 5 screen sizes:
Let’s see what we have in UI Bakery now.
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.
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.
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.
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.
To master what we’ve just learned, let’s watch a step-by-step video guide on how to build a web application and make it responsive in the UI Bakery apps builder.
Have we satisfied your hunger for information? We hope not, since that’s not all for today.
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 design tricks.