Bubble's Responsive Design vs its New Responsive Design Engine

Benefits of the New Responsive Engine

In a previous tutorial, I've demonstrated how to take this design which is built using the old or the current responsive engine and rebuilding it using the new Bubble beta responsive engine. So what are some of the benefits and maybe some of the drawbacks at least while the responsive engine is in beta? One of the benefits I'd say is your design, once you get the hang of how to group your elements in groups and align them correctly, your design is going to look much more uniform.

Improved Alignment and Uniformity

If we go back to here, my boxes, you can have the snap elements turned on but everything can quite easily, even if it's just by an odd pixel or two, end up out of line. Now of course you can realign them quite easily by right-clicking and selecting "align to left". You can end up with a nice uniform design using the current responsive engine. In fact, that's highlighted that these are not lined up, but with the new responsive engine by containing everything in a group, if I show you in my elementary, everything is within this group I've named form body.

Flexible Element Sizing

Each of these is set to fit content, but it could just as easily be set to make this element 100% because inside I have those elements set to 100%. This means that everything lines up because it is restricted by the fixed width of 340 that I've given the box that is the parent container of everything in my field.

Efficient Element Distribution

Another benefit is that I have this group G which in fact I've renamed form fields, and that has enabled me to really neatly distribute and then not have to go through a whole right-click process level adjustments. If I want to increase the gap between them, I can just enter a larger number here and I don't have to then fiddle around with applying a margin to the bottom of all of them but the final one.

Simplified CSS Application

Using CSS, it just applies the gap between each of the children. To illustrate this, if I was to take this out of there and then that out of there, I need to group together my label and my text field because otherwise the 35-pixel gap gets applied and that's the distance in there. So that's why it's groups within groups.

Drawbacks of the New Responsive Engine

How about drawbacks? Well, a lot of plugins rely on placing a visual element on the page. Here is a plugin that displays the user's time zone that the browser passes across. Demonstrate on the front end: Europe London. The benefit of the old responsive engine was that you could kind of just hide this anywhere you liked on the page.

Plugin Compatibility Issues

Yes, you can still do that, but if it's important that it sits in this group, it takes up real height on my Bubble app. This header here is taking up real height. You can notice that there is a larger gap on top compared to the bottom when it should be centralized vertically. There is a way around that: I can just set the height here to one pixel. Now if I go back into the preview, you can see that the height has gone back up there.

Workarounds for Plugin Issues

One pixel is probably not going to make much difference, but it does become a little bit frustrating that when the plugin requires a visual element on the page, you basically have to hide it by setting the height to one. Then you can forget it's there and you'd have to find it in the elements tree. It's frustrating to say the least.

Plugin Updates Required

Now I do know from looking at the Bubble forums that one of the things at play here is that plugin developers have to actively update their plugin in order for it to be fully operational in the responsive engine. It will be interesting to see whether a plugin like this browser time zone gets updated and even if it does get updated, how Bubble is going to handle it when the plugin requires a visual element but actually doesn't need that visual element. It just has to be placed on the page so that you can refer to it whether in a workflow or on text.

Limited Options for Some Plugins

Another drawback that I've seen with other plugins is that you don't get the full options. For example, with laying out this group here, I get all of these options of how I want it displayed. But I've seen that some plugins, as many of them haven't been updated for the new responsive engine as of May 2022, don't give you these full options. You aren't able to set like a percentage width; you have to set a pixel width and you can't really adjust that.

Future Updates and Solutions

Hopefully, and you can see this on the forum, plugin developers are going to pretty swiftly update their plugins as the new responsive engine, even though it's in beta, is gaining momentum. But you might find at this stage in the beta release of the new responsive engine that the plugin that is critical to your app working doesn't quite display so well if you're using the new responsive page builder.

Hybrid Approach as a Temporary Solution

One way of dealing with that is perhaps half of your app uses the new responsive page builder because it gives you that more uniform approach, and then just where it's essential for you to use a visual element from a plugin that hasn't been updated, you could still use the old page builder for that.