Supported browsers and upcoming changes to the responsive engine

Hi Bubble community,

Revamping our responsive engine is one of our current high-priority projects. While the current responsive editor works and users can achieve the responsive designs they want, we know this is a common pain point - especially for newer users to learn - and we want to do better. Rolling this feature out has a few implications, one of which is browser support.


Upcoming Browser Support Policy

The project is in the early stages but under way. As a preview, the first phase will involve shifting Bubble apps to the modern web technologies of CSS Flexbox and CSS Grid, the current state of the art. Not only will this unlock more powerful design capabilities both sooner and later, but upon rollout it should also represent a performance gain for page loads, a performance improvement when showing / hiding elements, better compatibility with custom CSS, and more.

However, these frameworks are not supported on certain older browsers, so we also wanted to take this opportunity to clarify what our official browser support policies are. This is about which browsers we support for the end-user experience, i.e. when an app is running in runmode. The current proposal of the policy is:

  • Bubble officially supports Edge, Firefox, Chrome and Safari on web and mobile web
  • We encourage end-users to upgrade these browsers to the latest version widely available. Note that the supported browsers come with auto-update functionality; this is relevant in this case because when a new version of a browser breaks something, there will often be a fast follow-up version that fixes that bug
  • With the supported browsers, we will consider any bugs that only affect older versions of those browsers, but we do not guarantee we will fix them
  • In addition, if it’s a bug specific to one of these browsers when run on a much older operating system version, we will certainly triage the bug but do not guarantee that we will fix it

In case you’re curious, here’s a useful link to data about browser usage: https://caniuse.com/usage-table

We are publicizing this to allow for any comments and so that you can make any desired preparations. We intend for the policy to go into effect when the new responsive engine becomes available to everybody (i.e. at the start of our usual public beta rollout phase), which will be later this year (not before Q2 for sure).


About the new responsive system

You might also be curious how the rollout of the responsive engine will be handled: this will be a “breaking change” for Bubble. Like Bubble did when the current responsive engine rolled out several years ago, apps will have the option of staying on the current responsive engine for a very long time into the future. App creators will have the option of “converting” their apps to the new responsive engine. Although we’ll offer an attempted translation from current to new responsive system, it’s unlikely we’ll be able to get it 100% correct, so you’ll want to check and make any needed tweaks before deploying to live.

To call things out specifically - you’ll note, for example, that Internet Explorer is not in our list of officially supported browsers in the new policy. Indeed, even Microsoft has stopped supporting IE! Per the above, if it’s important to your app to continue supporting IE end-users, you have the option of staying on the current system for an indefinite time into the future.

It’s worth noting that when we transition to the new responsive engine, it’s not that everything will suddenly stop working on IE or older versions of common browsers. For example, IE specifically doesn’t support CSS Grid, which would only apply to your app if you use certain repeating group features involving CSS Grid. So, another alternative you have for supporting IE end-users is to use the new responsive engine but avoid the CSS Grid-specific features - but note that any bugs encountered with IE will be outside our official support policy above.


This won’t take place until later this year (at least a few months from now) and even then nothing should break for your app upon rollout. Let us know if you have any questions or concerns!

Best,

Allen

64 Likes

I personally can’t wait

11 Likes

Yeah this sounds great. Are you able to share any screenshots of what the new editor controls will look like?

2 Likes

This makes me so happy! Thank you so much!

I really tried hard to understand the existing responsive engine and I have to admit I failed to deliver good results without spending enourmous amount of time. Building a complex business logic on the backend is much simpler than creating a responsive solution which in my opinion is/was against Bubble’s mission.

3 Likes

The bulk of the changes (and the work) is behind-the-scenes, making the page rely on CSS instead of JS. There will be a few new editor controls to map onto controls needed / sensible for CSS flexbox / grid, but frankly that’s a more straight-forward part of the project that we’ll do later in the project plan.

6 Likes

Looking forward to an easier responsive engine to work with.

Great stuff

Thanks
ZubairLK

3 Likes

Thanks for the update, Allen! I couldn’t be more excited about this. (Also, really glad my target audiences are not on IE anymore, hah.)

2 Likes

This is great news :tada:

I’m always in two minds about injecting my own CSS to make my layout work, instead of fiddling with the current responsive editor.
I haven’t bothered with that yet and this is adding weight to my internal argument of continuing to avoid it, at least until the responsive engine is in a place where my CSS could actually work with the rendered code, rather than against it like I expect would happen now.

1 Like

Looking forward to learning the new way of responsiveness. Thanks @allenyang for keeping us posted. :clap:

Question: Would this change be helpful in possibly allowing for native app conversion by Bubble, without plugins, in the future too? I would love to see this feature, it’s something I am seeing with other no-code tools, just not really on Bubble’s roadmap anymore.

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
5 Likes

Second this!

2 Likes

Fantastic news! Thank you.

This will be a HUGE deterrent for Bubblers switching over to new competitors hitting the market (I recently saw a presentation from a new no-code, Bubble competitor coming to market and they talked about how much easier responsive design is vs Bubble.) Responsive + Bubble is always the thing my nocode friends talk about as to why they haven’t continued using Bubble so I’m excited to share this annoucement with them.

1 Like

To be honest - I don’t know :slight_smile: I don’t know what exactly these tools are doing to accomplish the conversion. I would be surprised if it completely prevents conversion, since we’re moving to a modern industry standard…

4 Likes

@allenyang I imagine it might bring us closer to it. At least, that’s what I’m hoping for. :wink:

2 Likes

Can’t wait Q2 2021, this will be huge! A real game changer, Bubble will have all assets to definitively be #1 !

Any beta tester required, please let me know! :wink:

1 Like

Can’t agree more… It’s virtually impossible to figure out how it works…

1 Like

@allenyang Are we keeping the canvas for us to manually create things on the new editor? This is a powerful feature that made me pick Bubble in the first place.

1 Like

Do you mean the drag-and-drop, WYSIWYG characteristic of our editor? That is not changing as part of our responsive work (though you’ll very likely see a couple new parameters about elements you can control on the responsive side)

4 Likes

If it’s anything like the prototype we’ve been testing I would argue it is a very big change from the current model.

The new editor is more like webflow and less like figma, so very different from the absolute positioning that we have now.

WYSIWYG in bubble terms is very relative of course because putting somewhere on the canvas doesn’t mean it will be displayed there due to responsive settings. In this light I think the new editor will be a big step forward but there is definitely a learning curve and perhaps less backwards compatibility than assumed.

For what I see, the html required in the new flexbox system is a lot less than what we need now in terms of groups to hold stuff together and make responsive. I’m not sure this is easily converted.

But all in all this is a great step forward!

1 Like

It is actually not as sharp a change as the prototype you were testing :slight_smile: Based on the feedback from the prototype we scaled back on the proposed UX changes.

2 Likes

Great news!
Keep up the good work! :crossed_fingers:t2:

1 Like