#6 Bubble Makers: If you build an app, build it in style 😎
#6 Bubble Makers: If you build an app, build it in style 😎
Hey! Pablo here.
In 2021, this newsletter will be published every two weeks. I want to spend more time building products, and sending one email every other week will allow me to create better content across different platforms. Quality >> Quantity!
As usual, this newsletter issue includes:
One section for Bubble beginners
One section for more experienced Bubble makers
One cool app built with Bubble
One tweet related to Bubble that I found inspiring and helpful.
Feel free to skip to the section you think you’ll enjoy the most.
The Beginners Bubble
When I first started building on Bubble, I loved that I could just drag & drop elements in the blank canvas and have a functional app in hours. However, if you want to build an app with consistent design, there are 2 things I strongly recommend you do before you start:
Go to the Settings page and change the colour palette to match your brand colours.
Choose 1-3 colours and different shades of black & white Create a Styles page to define the colours, buttons, fonts and text sizes of your main elements.
Screenshot of a simple Styles page with titles and buttons
There are various reasons why you should be using styles inside your app:
To be consistent in your design.
To be able to edit all elements with the same style at once instead of having to go one by one. This is especially important if you have a lot of pages or if you need to work on a project after a long time without touching it, as you won’t remember where all your elements are.
Because it makes your app faster. Bubble creates a CSS file with all your different elements’ properties when you load the page. Having styles means this file will be smaller.
“Okay, but what if I have an element that needs to be centred-aligned instead of left-aligned? What if I want the text to be just a bit smaller?”
Fair question. You’ll be tempted to click Remove style and edit it by hand, but I strongly recommend you not to do this. Once you start it’s hard to stop and you’ll end up with a bunch of elements in your app without style, which might make it hard for you to keep a consistent design in the future.
Instead, there are 2 things you can do:
Have different style versions of the same element (H1 centred, H1 left, H1 right), so that you can choose the right one for each use case.
Click the conditional tab of the element you want to change and change it when This URL is not empty. The image below shows a text that has the H1 style but is formatted to blue because the condition always applies (the URL is never empty).
The Makers Bubble
It’s usually a good practice to create a Styles page. That said, you might not need it if you’re using a template.
Templates are an amazing way to kickstart your app without much effort and learn how different elements work in Bubble.
However, it might be more difficult to build with them than without them. Only by having experience using Bubble, you’ll be able to easily tweak them and adapt them to your needs.
If you want to check all templates that are available for Bubble, you can find them here and filter them by category (landing page, marketplace, CRM, etc.)
A few templates I like
Canvas by Airdev: Incredibly complete. They just released an update that lets you create pages for your Bubble app with a chrome extension. This is by far my most used template and all I can say is that it is worth the learning curve.
Template Preview (click on any of the images once you're in the page)
EZ Dashboard: Very complete dashboard with graphs, forms, tables and tab menus.
Clean Login Signup: Simple page with signup flows.
There are a few other templates I want to try in the future, such as Tasky - Project Management or Headstart Lite. However, learning how to use Canvas has kept me quite busy!
Do you normally use templates? Any good ones that you recommend?
Bubble App of the Week
This week’s app is Rate My Excel, an app created by Lianna Gerrish that helps companies quickly vet candidates' Excel skills with a fully automated testing platform.
After creating an account, the company manager can invite candidates to do an Excel test and review their score reports. Candidates receive an email invite, log into their assessment, answer questions and submit a work sample.
There’s a free demo in case you want to try it. It might give you some ideas for your own projects. Here’s a GIF that shows the manager interface:
This app shows the power of Bubble when building SaaS. I can see many companies needing a solution similar to this one, to assess candidates’ skills in different fields.
Tweet of the Week
This week I want to share a tweet by Nigel Godfrey. Nigel has been commenting in the Bubble forum since 2016, which is amazing. Not many people were building in Bubble 5 years ago!
He raises an interesting question: Are there performance issues with no-code apps?
I would love to hear your thoughts on this. I haven’t hit many limits myself but I know it’s because of options a and b!
I hope you enjoyed this issue as much as I enjoyed sharing what I’m learning.
If you want to talk a bit more about one of those questions, you can DM me on Twitter or reply to this email. Thanks for reading!
Thank you for the shout out on Rate My Excel, Pablo! And I've definitely run into performance issues. For example, my Google PageSpeed score for Mobile has never cracked 12/100. I worry about getting penalized in search results for that reason but haven't been able to make any improvements.