Responsive design

What is responsive design?

Responsive design is a method that gives your users a great experience no matter what kind of device they are using to access your app.

Responsive design ensures your app looks as intended on all resolutions and screen sizes by adjusting the layout and content to fit properly.

Instead of having to set up separate pages for different devices, the goal of responsive design is to create a single page that automatically adjusts its layout and content to fit the screen size and resolution of the device being used to access it.

Responsive design is important for several reasons:

• It gives the broadest number of users access to your app as they can access from all types of devices

• It reduces development time since you don't need to design and maintain separate pages

• Search engines tend to favor pages that are accessible on all devices which can help these pages

Bubble's responsive engine

Bubble features a design environment that lets you control every aspect of your app's responsiveness in the same visual editor that you use to build your pages. It uses a grid-based layout to change the appearance of the page depending on the screen size and orientation of the device.

For example, on a larger screen like a desktop computer, your page might have a three-column layout with a navigation menu, main content area, and a sidebar. But on a smaller screen, such as a smartphone, the same page might rearrange its content into a single column layout with a "hamburger" menu icon to access the navigation.

In the next article we'll explore the basics of how this design method works.

Article: Building responsive pages

Other ways to learn

Video lessons

We have several video lessons that can help you learn about designing responsive pages.

• Understanding the column container layout

• Understanding the row container layout

• How to build a sidebar layout

• How to build a responsive navigation bar

• Dragging and dropping elements in the element tree

• Layout and sizing properties in Conditionals

• Padding in a container element

• Scrolling overflowing content

• Gap spacing for row and column layouts

• How to use the align to parent container layout

You'll find our full Youtube playlist about the responsive editor here.

Bubble's responsive engine is a feature that was introduced in 2022. In older applications you may need to activate the feature on a page-by-page basis and convert those pages to the new engine.