Bubble's pages are responsive. In other words, they will adjust automatically to the width of the device they're seen on. Bubble offers a few parameters to control how they look on different screens.
You should start designing the page as it should appear on a wide screen, for instance your laptop. Then, once you're done with the wide ("laptop") design, you can start working on narrower designs. That's what the responsive view mode is for (you can also just run your app and modify the size of the browser). The responsive view lets you modify a few parameters that will change how the page behaves when it's being squeezed.
You will find a dropdown above the New Element palette that lets you switch between the Builder View, where you can modify elements, drag new ones, and delete some, and the Responsive Viewer which lets you test your page under different configurations and modify the responsive behavior of each element. In this view, the ruler at the top of the page area defines the current page width. Just click or drag on the ruler to resize the page and see how the page behaves dynamically. You can also use the preset width icons on the left side of the screen to see how the page looks on iPhone in portrait mode, in landscape mode, on an iPad and on a laptop or a desktop.
When you click on an element, the responsive palette will display the different parameters you can modify to affect its behavior. Modify the different settings and you’ll see how it impacts the page in real time.
The algorithm that controls how the page is rendered follows a few core principles. While you can tweak and see in real time the impact of the parameters (see below), it is good to have an overall understanding of how the rendering engine works.
- In general, as the page gets resized, elements shrink and expand before margins do. Bubble only expands margins if all elements on a line are at their maximum widths, and only shrinks margins if all elements are at their minimum widths and everything that could break to the next line is already on the next line.
- By default, most elements are shrinkable and expandable. You can control this on an element-by-element basis in the Property Editor or the Responsive Viewer. We’ll cover the specific settings below.
- Overlapping elements move together: they expand or shrink together (unless one of the elements is set to fixed width or has a maximum width). In other words, overlapping elements both break, or neither breaks, and they are both shown or neither is shown by any show/hide rules.
- Groups (and other containers, such as Repeating Groups) work like mini-pages. Elements can break to new lines inside of them. By setting a minimum width on a group, you can stop that from happening by limiting how far the group can squeeze its contents. And by setting a maximum width, you’ll limit how wide an element can be. For instance, if you want your page to not be as wide as the screen (on a designer’s screen for example), you can put all your elements in a group and apply a maximum width for that group.
Bubble offers a responsive debugger, both in run mode (if the debugger is on) and in the Responsive Viewer (click on the grid icon in the top bar). Activating that mode will let you see how the page is structured, and how the elements on the page are grouped together. Behind the scenes, a Bubble responsive page is structured into lines and boxes. It’s important to understand these two concepts if you want to refine the responsive behavior of your page.
- Elements get grouped into boxes. Everything in a box moves together (for instance, overlapping elements are always in the same box). Boxes are the things that can break to the next line, and get shown and hidden. The left-most element in a box is the one that controls its show / hide rules (see below for what these rules are about).
- Lines are horizontal rows of boxes. Lines are as tall as the tallest thing in them, and everything in the next line is below the line above it. Boxes can break to a new line if there's no space for them on their current line.
You can tweak how an element/page behaves as the page is resized with the responsive parameters. They are accessible from the Property Editor and the Responsive Palette (when you’re in the Responsive Viewer). Understanding responsive settings is easier when you see the actual impact of the different settings. We strongly recommend watching this 17-minute video, as it will illustrate the different options you can use as you build responsive page.
- Make this element fixed width -- When you check this box, the element will stop stretching/expanding altogether. That will make most parameters below irrelevant. Note that by default, the page is fixed-width, so you will need to uncheck the box to start seeing responsive parameters apply to your page and the inner elements.
- Minimum width (% of current width) -- When the page gets narrower, the rendering engine will make elements narrower accordingly. If you want to set a minimum width, you can define it here. This is useful if you want to prevent a button, a list, etc. to get too narrow.
- Maximum width (% of current width) -- If you want to apply a maximum width to your element when the page is stretched, add a number here. It should be higher than 100%.
- Collapse margins -- when container width is lower than If the element's container's (in many cases the page) width gets squeezed below this number, we will collapse the left and right margins and have the element be flush against the edge of the page. This is useful on mobile devices where having a margin doesn't look as good as having a full width image. You can set this using the ruler in the responsive viewer mode
- Keep left/right margins or center -- This lets you set whether the element preserves its left or its right margin when the user resizes the window (or accesses your app from a phone). If not set, both margins stretch / shrink, keeping the element centered relative to its neighbors.
- Hiding rule -- You can set to hide an element is the screen width is below or above a certain number. In that case, the element will be hidden and won't take space in the page any more. You set this in the Responsive viewer mode, click on 'Add a hiding rule'. Then, the element will be hidden and will free some space on the line if the width is lower than what you've set. As you resize the page in responsive view mode, you'll see on the left of the screen the list of elements that are currently hidden, and you can remove the rule to have them displayed again.
- Keep element proportions as the page is resized -- Check this box if you want the height to change accordingly to the width, so that the proportion is kept. This is especially useful for maps, images, etc. Note that not all elements offer this option. This is mostly useful for images, maps, etc.
- Wrap to previous line if page is stretched -- If you want the elements on a given line to be moved up to the previous line if the page is stretched, check this box. Note that this applies to the first element in the given line, not the element you're currently editing.
- Cut off content -- If you check this box, the text element will cut the content if it's too high and add '...' at the end of the text.
- Shrink the element height if the text gets shorter -- If you check this box, the text element will adjust its height when the text changes (of the font size changes), even if the new height is lower than the original height you've set in the editor.
Building responsive pages can be a little unnatural at first. You may feel that the behavior of the page is not natural. However, once you master the different parameters above, you will be able to have very customizable behavior. As everything in Bubble, you have immediate feedback when you change a parameter, so tweaking is a good way to start. However, here are a few techniques we've seen to be useful when designing a responsive page.
- Grouping elements is very useful when you want them to move together on the page. Select a few elements and right click on them to group them. You can also use the keyboard shortcut CTRL/CMD + G. Once this is done, you can define a max width, a min width, an alignment, etc. at the group level.
- If elements overlap, their behavior will be similar. So if you want to show a group when the width is higher than 500px, and show another one when the width is lower than 500px, it’s important to have these elements side by side, and to make sure they don’t overlap.
- If you need to have a screen-wide stripe, you can use a group (or a floating group to make it float at the top) and make it as wide as the page area in the builder view. If you don't set a maximum width, it will automatically extend to the edges of the screen.
- If you want the distance between two elements to get smaller as the page is resized (instead of the elements' widths being squeezed), using a transparent shape can be very helpful. Remember that the algorithm keeps the margins constant, and not the widths. So if an invisible shape is between two elements, it will get squeezed and the visual distance between the two elements will effectively get smaller as the page gets narrower.
- You can change fonts based on the screen width. The Current Page Width datasource is available in the conditional tab of each element, so you can have a smaller font based on the width. A good practice is to put this at the style level, so that all elements follow the same rule. See the next section for more information about conditions.
- There is a difference between a 'hiding rule' and using a conditional state that hides an element based on the current page width. The hiding rule is more powerful because when it get applied (and hides an element), it frees some space for the other elements on the same line. Setting a condition doesn’t do this.
- If you want to have a radically different design for mobile, you can keep having a different page for a page. Just design another page and make this page the 'mobile version'.