Designing Your App

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

Before you start design

Think about how your users will access your app.

• Will they be interacting with it as a mobile app, downloading it from either of the or installed as a ?

• Or will they have the option of using a variety of different devices to user your app, like mobile, tablet, or desktop devices?

Adalo has two primary app types for both of these scenarios: Mobile Apps and Responsive Apps. These app types are fully compatible with each other in Adalo and you can easily switch between them at any time in your app’s Settings sidebar under “App Layout Type”.

Mobile Apps (Mobile Devices Only)

The Mobile app type allows you to focus on a mobile-only experience for your users. Use this if you don’t need to support users on different device sizes. If you’re just getting started with Adalo, this is a great way to learn as it is simpler than responsive. You can always switch to responsive later and even switch back to mobile at any time if you prefer it. You can publish your mobile app to Apple’s App Store for iOS, Google’s Play Store, and the web on your own custom domain. On the web, all of your users will see a mobile-optimized version of your app. The current version of Mobile Only apps was launched in December, 2023. All mobile apps created prior to this date will be legacy apps (see below).

Responsive Apps (Mobile, Tablet, and Desktop)

Responsive apps allow you to design a single app at three different screen sizes: mobile, tablet, and desktop. You can publish your responsive apps to Apple’s App Store for iOS, Google’s Play Store, and the web on your own custom domain. On the web, your users will automatically see the version of the app that’s best for their screen. You’ll know your app is Responsive if you see the screen size switcher above each screen in your app. The responsive app type was launched in April, 2023.

Responsive Apps Video Walkthrough

What is the new Adalo Builder?

The Adalo App Build has been through many iterations, but the latest version the most advanced app engine yet. This engine powers both Responsive and Mobile apps. Both of these apps be published to the native mobile app stores and the web.

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

Pages in this Section

Definitions and Terms

Creating an App

Using the Screen Size Switcher

Using the Layout Tab

Grouping Components

Responsive Navigation

Responsive 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?

Yes! PWAs don't have to be responsive, but the best ones are.

A PWA, or Progressive Web App, is a type of website that acts a lot like an app you might download from the Apple App Store or Google Play Store. One of the defining aspects of a PWA is that it can be installed on the user's device from the browser. All Adalo apps can be published as PWAs, even if you don't choose to build for all screen sizes.

What is the different between the new (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.

The new Mobile Apps are built on top of the Adalo Responsive App engine. This makes it possible for you to switch between this design modes at will. 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.