Webflow vs Bubble: 7 lessons we learned from building our website on Bubble

Keep reading to learn more.

A couple of years ago, Bubble launched their new responsive engine right when we went through a full rebranding. So we decided to take the risk and build our new website in Bubble instead of again in Webflow.

This was a tough decision. While Bubble.io is the visual programming language of choice for web applications., web apps are not the same as websites. Unfortunately, websites are where Bubble seems to underperform. Especially compared to Webflow, which is quickly becoming the gold standard among website builders.

This article from Tinkso, will help you decide which tool to use. As a no-code agency and Bubble Gold partner, we're well-versed in the pros and cons of each tool.

TL;DR:

Use Bubble for websites if you also plan to build an app and need to use its data.

Use Webflow for standalone websites due to its speed, design, and built-in CMS features.

Webflow is cheaper, but you get less extensibility in return.

What is Webflow?

Webflow is a web design and hosting platform that includes a built-in CMS. Above all, makers choose Webflow because of how easy it is to execute beautiful designs. The granularity you get with this tool is frequently compared to graphic design software. As such, it's beginning to rival tools like WordPress and Squarespace in its reputation as the go-to website builder.

Webflow’s Advantages

Webflow is easier to use than Bubble for beginners.

Integrated CMS and automatic SEO features.

Extreme control and flexibility in design. Create advanced animations with only a few button clicks.

What are the downsides of Webflow?

Has few native integrations, requiring users to inject custom code.

Webflow is not suitable for building comprehensive web apps like Bubble is.

What is Bubble?

Bubble is a no-code app development platform that enables builders to create highly customized web apps. Those already familiar with app design principles will find Bubble’s drag-and-drop features a breeze to use compared to writing and deploying their own code.

Why we like Bubble

Flexibility, we can easily build anything from a quick prototype to a full-scale B2B SaaS platform using Bubble.

Bubble is scalable with its sophisticated database management tools.

Create complex workflows and logic without writing a single line of code.

What are the downsides of Bubble?

Performance can be a drag on more complex apps.

Bubble is not automatically compliant with industry standards like HIPAA, requiring some power users (like medical service providers) to spend extra on security and testing.

Bubble’s pricing tiers escalate fast and could price out certain users.

Webflow vs. Bubble: Key Differences

A couple of years ago, we made the conscious decision to choose Bubble over Webflow to rebuild our website. We aren’t thinking of making a change anytime soon, but if we had to take our pick once again, these are the criteria we would consider. Here's how Webflow and Bubble stack up.

7 takeaways from building our website on Bubble instead of Webflow

You just got a high-level overview of what to consider when choosing Webflow vs. Bubble. That said, we examined many of our choices in more detail. Here are some of our insights:

💰 The price is right

Here is the pricing on Webflow’s website, as of July 2024:

By contrast, here is Bubble’s pricing:

After looking at this, we can see that Webflow is definitely cheaper than Bubble, especially when you consider the extra cost of the Headless CMS. But again, Bubble is primarily an app-builder and as such, it offers great value for money. Using it 'only' to build a website is like using your smartphone only to make phone calls.

So, while Webflow is great for animations and as a CMS, it does much less than Bubble. You can't build a full-scale app in Webflow. Hence, it's cheaper. As we noted earlier, Webflow requires custom code injections to do things that Bubble has built in. Custom code means more developer hours. That will likely cost you more than even the $349 per month for Bubble's most expensive plan.

We even think it makes sense to use Bubble for your website if you're already building an app on Bubble or you need to display data from your app on your landing page.

When Is Webflow Worth It?

If you do not need to use much dynamic data on your website or landing page or you do not build an app on Bubble, there is little reason to use Bubble to build your website. In that case, Webflow is a better choice with a better CMS.

🖼️ Which is easier to use, Webflow or Bubble?

Overall, designing your page in Webflow is easier than with Bubble. Webflow has more out-of-the-box elements and layouts tailored to website design. Plus, the editor is simply better designed.

Weblow's editor UX is superior to Bubble

When it comes to things like animations, Webflow has a clear advantage. We have been tinkering with the GreenSock Animation Platform (GSAP) for a while and you can see it in action at check.tinkso.com. It is great when it comes to web animation.

Webflow uses its own animation library and the interface they provide definitely makes it a better no-code experience. However, GSAP is extremely versatile, and learning the basics at least won't be a waste of time. We needed to have similar or better web animations than with Webflow, and the responsive editor has definitely made implementation easier.

[Image: Image]

GSAP animations, not super straightforward, are possible with Bubble.

📱Mobile responsiveness

Bubble's responsive editor, while still lacking some crucial features, has been a blessing when it comes to responsive design. We finished building our openBuild framework shortly after our website and it’s been great so far. Especially now that we have more conditional options to distinguish between viewports (margins, font sizes, width, and height).

However, Webflow still has a better interface for responsive design and makes smarter use of media queries per viewport. This way you can design a lot more granularly for different screens.

✍️Choosing a CMS

Bubble's CMS capabilities are almost non-existent. Quite infamously so. We opted for a headless CMS and tried a lot of them. Contentful, Preppr, Ghost, and Strapi are among them, but many had a pretty complex API structure - not very compatible with the way we use it to display data in Bubble elements. We settled on Storyblok with its friendly API structure, easy-to-use interface, localization options, image optimization, and affordability. This is a big step up from Bubble, loads super-fast, and even has more options than Webflow's native solution.

The downside of using a headless CMS is that you need to work to ensure your pages and content are optimized for search engines. Moreover, you may require HTML elements to display rich text which in turn requires a bit of custom CSS to guarantee your content looks good.

Storyblok features a preview of the story on the Bubble page and offers everything you need in a CMS.

👑 Is Bubble better than Webflow for SEO?

Webflow is generally better for SEO – it’s usually faster and comes with SEO features straight out of the box. Meanwhile, there are some small but important details to cover when it comes to SEO in Bubble. With a headless CMS, you must make sure that dynamic content and pages are served with the right SEO metadata. This either requires custom javascript or you need to store some of your content metadata in the Bubble database so you can set the right metadata tags on your dynamic pages.

Another important factor is using links elements instead of buttons or groups to navigate. Links allow Google to get a sense of your website's structure, but with Bubble, we’re used to using groups and button elements that do not carry any a href information. This confuses Google and keeps some pages from being indexed. Not using link elements can cause a big headache!

⚡Performance on Bubble vs. Webflow

Bubble's responsive editor has become a lot friendlier on page rendering because it uses flexboxes and CSS grids to reduce the HTML size. But there is still inline CSS that bloats the page. And the process of rendering the website or app client-side still takes a considerable amount of time. However, comparing both Webflow and Bubble through Google Lighthouse shows that for performance, Bubble is actually very similar to Webflow.

Bubble.io vs webflow.com web performance

🌍 Multilanguage & Localization

Both Bubble and Webflow have integrations with Weglot. While Bubble's responsive editor is a huge step forward when it comes to implementing Weglot, we still found it cumbersome and in many cases requiring custom support from the Weglot team. So for Bubble, we settled on the native 'apptext' functionality that works really well.

We export the language file into a Google Sheet and then run a Make.com scenario to translate into multiple languages using DeepL.

If you're using Storyblok, their CMS offers great localization options making our dynamic content also easy to translate.

The Final Verdict

After all that discussion, let’s check out the real-world implementations of both Webflow and Bubble.

When to use Webflow over Bubble: a case study

If it wasn’t clear by now, Webflow is the more suitable option for a standalone website. The type of website that requires only a few landing pages and a blog. Nothing complicated.

When to use Bubble over Webflow: a case study

We’ve talked a lot about how Bubble should be your top choice for building web apps. What does that look like in practice?

Enter Steelcase, a leading furniture and workplace designer. In hopes of improving their collaboration with their clients to support new design methodologies, Steelcase reached out to us to facilitate the process.

We soon learned that Steelcase’s main challenge was that they did not have adequate tools to help them support clients throughout their design workflow. Naturally, this required a tailor-made web app that would allow them to create, maintain, and communicate solutions in harmony with clients.

Being experienced in Bubble and no-code app building, the solution was clear. We did a quick 5-day design sprint to prototype a collaboration tool. Soon, Steelcase was able to offer specialized websites for their customers, and better understand their needs for a full collaboration app.

Without Bubble’s dynamic drag-and-drop interface, numerous integrations, and flexibility, it would have been hard to realize this project so efficiently. Coding would have taken much longer, and Webflow is completely out of the question. It didn't have any of the app-building integrations that we needed. For instance, Webflow can't integrate app data like Bubble does.

How To Build Your Web App On Bubble

As we mentioned in our analysis, the learning curve with Bubble is steep. While we produced a working prototype using Bubble in 5 days, a rank novice cannot churn out web apps on Bubble as fast as a professional.

If you already have ideas on what you want to build, but you aren’t sure exactly how to execute it, reach out to us for clarity. At Tinkso, we are Bubble Gold Partners, meaning that Bubble has verified our industry-leading skills with their tools.