Bubble's Responsive Design vs its New Responsive Design Engine
In this Bubble.io tutorial video we discuss the differences between the old UI Builder and the new Bubble Responsive Engine that launched in June 2022.
Uniform design made easy: Learn how to align elements perfectly using the new Bubble responsive engine.
Grouping magic revealed: Discover how to efficiently distribute form fields and adjust spacing with just a few clicks in Bubble's responsive editor.
Plugin compatibility alert: Find out which plugins work seamlessly with the new responsive engine and how to overcome potential drawbacks.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.