Responsive Design Best Practices
Having a standardized workflow can help tremendously when building responsive apps in Adalo. Find our preferred workflow below.
Last updated
Having a standardized workflow can help tremendously when building responsive apps in Adalo. Find our preferred workflow below.
Last updated
Skill Level: Intermediate
It's highly recommended that you read through the other guides in Responsive Apps first, so that you have a good understanding of how to use this workflow.
Note that while we believe this workflow works best, you can certainly build in the way that you find works best for you.
For instance, if you are building a social posting app, you might start with mobile first. If you're building an inventory management app for your company, it might make sense to start with a desktop app first. Chunking the app into audience usage can keep you from becoming overwhelmed in trying to design for all screen sizes at once.
PRO TIP: We definitely recommend starting with mobile first if you plan to offer it. It's easier to make screens bigger and rearrange components, than it is to make them smaller - components tend to hang off the mobile screen in that scenario.
Will your app need a profile screen? How about a settings screen or a screen for adding new records? Do you have signup and login screens? Even if you don't place components on these screens initially, having them already built can help you think more deeply about what you might need to include on these screens.
When designing for multiple devices, it can quickly become quite messy if the information you want to display doesn't have a place to live. Dividing pieces of similar information into boxes or containers can help later on when those pieces of information need to move around to accommodate different screen sizes. Looking at other apps that you use can really help you think about sections of information. Let's look at these help docs as an example:
Notice that each piece of information lives within a red rectangle or container on the page. As the screen size changes down to a mobile view, notice how these containers change and shift to accomodate the difference in screen size. The page list is now hidden within a menu button and the page navigation is now completely inaccessible, even through the kebab icon in the upper right:
Now that you're thinking in terms of containers of information, it's time actually build some layouts with these containers in mind. In the same way the red squares above represent sections of information, you can use the Rectangle component to make these containers in your own app, then place the relevant components that you need inside of them.
Having the Rectangles respond to screen sizes without actually having other components inside them lets you focus solely on the responsive aspect of the content sections, before adding in all the detailed bits.
These detail components are your text labels, images, buttons, lists, and anything else you want to display to your end-users. If you're wanting your containers to not appear as a "card" or container, you can set the rectangle background to invisible or the same color as the screen background.
Try adjusting the screen sizes with all of the detail components added in. Chances are it's already looking pretty good, but if you need to adjust individual components inside Rectangles or Groups, you can tweak those components' layout settings separate from their parent component.
It probably goes without saying, but you still need to build your app just like any other Adalo app, responsive or not. That includes setting up your database, adding actions to components, connecting screens, and adding in magic text where needed!
This is obviously just one preferred workflow of ours, but it's the one we like the best! Let us know your own workflow in the forum - it may help other makers as well!
If you need additional help with this article, you can always ask in our community forum or hire an Expert to help! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? Let us know!
