Designing Your App

With Adalo's new Responsive App Builder, you can build apps that look great on any device and can be published anywhere with just a click.

NOTE: Adalo makers who have signed up after July 27, 2022 will automatically be using Responsive Builder. Only paying makers before this date will have access to Legacy Builder and only until July 2023 when all plans will be transitioned to new pricing plans (Learn More).

Video Walkthrough

What is the Responsive Builder?

When you first create an app in Adalo, you may be presented with a few options for which Adalo Builder you want to use, depending on the pricing plan you are on. When making a new app, makers on any Legacy pricing plan, will see the options for Legacy Builder as well as Responsive Builder while new makers will automatically use Responsive Builder. Note that all Legacy pricing plans will be converted to a new plan in July 2023 (Learn More).

The Responsive App builder is Adalo's newest and most advanced app engine. You can use Responsive Builder for building native mobile apps for the app stores or responsive apps for mobile, tablet, and desktop web view. It is shown in the Create New App dialog.

NOTE: The Responsive Builder is different than the Legacy Builder. The pages in this section are specific to Responsive Builder. For help with design in Legacy Builder, please see this guide.

Select Responsive App when creating a new app to use the Responsive App Builder.

Pages in this Section

Definitions and TermsCreating a Responsive AppUsing the Screen Size SwitcherUsing the Layout TabGrouping ComponentsResponsive NavigationResponsive Design Best Practices

FAQ

What is responsive design?

Adalo’s Responsive Design allows you to design for multiple screen sizes with one screen and one app.

What is a responsive web app?

A responsive web app detects and adjusts the components on the screen to adapt to the screen size of the device being used. It’s not magic, but it’s pretty close. Using the Adalo Builder, you choose what your icons positioning and scaling.

Is a PWA different than a responsive web app?

A PWA does not allow for changes with different screen sizes. Using a Responsive Web App, you adjust your components to ensure the look and feel of how your apps will work on different devices.

What is the different between Responsive App Builder and Legacy App Builder?

Responsive App Builder is a complete rewrite of the Adalo Legacy Builder's codebase. It includes new layout options, screen sizing, component anchoring, new snap grid improvements, and much more - making it possible to build your app once, and publish to native and web at the same time. Legacy Builder is not designed to respond to screen sizes and typically worked best to create mobile or native apps separately from web apps. Additionally, Legacy apps have no component layout tools, dimished control of publishing, and unimproved snap guides.