Read on Twitter
A guide to responsive design in @Bubble (THREAD)
Bubble has a reputation for being unfriendly for responsive design, but it's actually fairly simple if you follow a few basic rules.
Bubble has a reputation for being unfriendly for responsive design, but it's actually fairly simple if you follow a few basic rules.
1. Set your page width.
Bubble defaults to 960 width, but you can change this to whatever you want. This number will be important later on, so you'll probably want to make it the same on every page.
I'm choosing 1200 in this example.
Bubble defaults to 960 width, but you can change this to whatever you want. This number will be important later on, so you'll probably want to make it the same on every page.
I'm choosing 1200 in this example.
2. Show the grid.
In the Grids & Borders dropdown, select Show Grid. Change the steps to something like 20 or 25.
Select Snap to edges and grid.
Select Show distance on hover.
These will all be helpful for lining things up, which is very important in Bubble.
In the Grids & Borders dropdown, select Show Grid. Change the steps to something like 20 or 25.
Select Snap to edges and grid.
Select Show distance on hover.
These will all be helpful for lining things up, which is very important in Bubble.
3. Make sure your page isn't set to fixed width.
Sometimes this is set to fixed width by default. Make sure the checkbox is unchecked, otherwise your page will never be responsive.
Sometimes this is set to fixed width by default. Make sure the checkbox is unchecked, otherwise your page will never be responsive.
4. Use a group to make a container on the page.
Groups give you control over how the elements within them behave.
Set up a group on the page and drag it to either edge so it's the full width. You may want to set its max width % so it doesn't stretch in larger browsers.
Groups give you control over how the elements within them behave.
Set up a group on the page and drag it to either edge so it's the full width. You may want to set its max width % so it doesn't stretch in larger browsers.
5. Put a group within your container group.
You can nest groups within groups. This is how Bubble does margins and padding.
My page is 1200 wide so I made the group 560 width so I can have two and still have some space between them.
(The colours are to make it visible)
You can nest groups within groups. This is how Bubble does margins and padding.
My page is 1200 wide so I made the group 560 width so I can have two and still have some space between them.
(The colours are to make it visible)
6. Copy and paste that group.
Use the grid to space the groups evenly across the space. Use the "hover to show distance" to check you have the same number of pixels gap on each side.
This helps Bubble to behave predictably.
Use the grid to space the groups evenly across the space. Use the "hover to show distance" to check you have the same number of pixels gap on each side.
This helps Bubble to behave predictably.
7. Set the minimum width of each group.
This determines the "break point", i.e. the width at which the second group will drop below the first.
If it's too low (e.g. 20%) then the groups will just get narrower but never drop below.
This determines the "break point", i.e. the width at which the second group will drop below the first.
If it's too low (e.g. 20%) then the groups will just get narrower but never drop below.
8. Check the groups break as expected.
I set 70% min width for each group, so when they get to that width the second drops below the first.
I set 70% min width for each group, so when they get to that width the second drops below the first.
9. Copy and paste the container below and make some more inner groups.
Now I want three across. Dividing 1200 by 3 and allowing for some spacing, I made these each 360 wide.
Right click to get helpful options. I used "align vertical centres" and "distribute horizontally".
Now I want three across. Dividing 1200 by 3 and allowing for some spacing, I made these each 360 wide.
Right click to get helpful options. I used "align vertical centres" and "distribute horizontally".
10. Check it's responsive.
Great success! All is as it should be.
Note: The horrible colours are to make it easy to demonstrate. Groups can have coloured/gradient backgrounds, borders, shadows or be completely transparent.
Great success! All is as it should be.
Note: The horrible colours are to make it easy to demonstrate. Groups can have coloured/gradient backgrounds, borders, shadows or be completely transparent.
11. Add content within the groups.
Drag elements on to the page and into the groups. If you see a red border on a group while dragging, it means the object is inside it. Sometimes objects look like they're in a group but they're not.
Make sure everything lines up vertically.
Drag elements on to the page and into the groups. If you see a red border on a group while dragging, it means the object is inside it. Sometimes objects look like they're in a group but they're not.
Make sure everything lines up vertically.
12. Use the auto-alignment options.
No need to guess. Use "center horizontally" and "center vertically" when needed to make sure the distances on either side of an object are even.
This helps them to behave when the page changes size.
No need to guess. Use "center horizontally" and "center vertically" when needed to make sure the distances on either side of an object are even.
This helps them to behave when the page changes size.
13. Check responsive works again.
I've removed most of the colours from the groups, but they're still there, working their magic.
It probably needs a few more tweaks, esp with the way the image responds, but overall it's not a bad start.
I've removed most of the colours from the groups, but they're still there, working their magic.
It probably needs a few more tweaks, esp with the way the image responds, but overall it's not a bad start.
14. And don't forget mobile pages!
If you want your page to look massively different on mobile, you can set a different page as the mobile version. Users will be redirected automatically.
Don't forget you can also hide/show elements conditionally depending on screen width.
If you want your page to look massively different on mobile, you can set a different page as the mobile version. Users will be redirected automatically.
Don't forget you can also hide/show elements conditionally depending on screen width.
Summary:
- Wireframe your layouts before putting content on the page using groups
- Line everything up with things above and below
- Have even spacing on either side of everything
- Set your min and max widths
- Use the auto-alignment tools
- Wireframe your layouts before putting content on the page using groups
- Line everything up with things above and below
- Have even spacing on either side of everything
- Set your min and max widths
- Use the auto-alignment tools
For more info I highly recommend the @100daysnocode AMA session with @_gregoryjohn (I can't find the link to the video) - a lot of the wisdom in this thread came from him!
