Responsive Design Best Practices

Having a standardized workflow can help tremendously when building responsive apps in Adalo. Find our preferred workflow below.

Skill Level: Intermediate

Before You Begin

• 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.

Video

Walkthrough

1. Start building with the smallest preferred screen size your users will be using.

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.

2. Wireframe the screens you think you might need for your users.

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.

3. Think about screens in terms of sections or containers of information.

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:

4. Add in placeholder containers and any components you may need to display information.

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.

5. Once you have the Rectangles laid out to represent your sections of content, it's usually best to go ahead and start adjusting their Shared and Custom Layout settings.

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.

6. Now that the Rectangles are in place and they're responsive across screen sizes, it's time to start dropping your detail components into the content Rectangles.

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.

8. Last but not least, make sure all your data is hooked up and you have actions in your app!

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!

Learn More

• 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!

Help

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!