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 rank higher
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.
We have several video lessons that can help you learn about designing responsive pages.
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.
Last modified 7mo ago