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, UI Bakery 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 app responsive. Now, with the help of UI Bakery, you can visually create a responsive design that fits different screen sizes at once.
The 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. 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, a change will be applied to all the screen sizes, not only to the smaller ones.
UI Bakery responsive design provides for a regular 12-column grid used to set the element size. Working with columns in responsive design is 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 as well.
Media queries in the code
Besides making it easier to build your responsive apps visually, we’ve put media queries under the hood. Thus, when you download the code of your app, you’ll see that it looks as if it was really coded manually by a developer.
Any bonuses? Sure!
To master what we’ve just learned, let’s watch a step-by-step video guide on how to build a responsive application in UI Bakery.
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 designs easily and quickly. Check it out to know about the most useful UI design tricks.
Get updates on the newest stories, case studies and tips right in your mailbox.