Forum Academy Marketplace Showcase Pricing Features

New Responsive Engine [beta] is Live!

Good morning everyone!

Everyone here at Bubble is very excited to announce that the new Responsive Engine Beta is now live!

About a year ago to date, we set out to re-think how responsive apps are built in Bubble. Our goal was to empower our users to build more beautiful apps by providing a faster and more powerful way to build responsively in Bubble. Whereas the existing Responsive Engine tried to make ‘best guess’ assumptions on your desired responsive behavior, we wanted to bring more power and control to the user while still allowing them to opt into any additional complexity.

After numerous iterations, prototypes, and user testing sessions, we landed on a new direction for building Responsive Apps in Bubble based on CSS and CSS Flexbox properties. For those not familiar, CSS Flexbox is a modern web layout technology that makes building responsive web layouts easier by allowing elements to ‘flex’ (grow, shrink) and align in a prescriptive way. We also discovered a noticeable performance increase on pages that are upgraded to the new Responsive Engine.

Take a look at the overview video to learn a little more.

The new Responsive Engine [beta] is built on the following principles:

  • Build responsive earlier: Pages start out with the fixed, WYSIWYG behavior you are used to, but can opt-into responsive behavior early in the build process instead of at the end with the old system.
  • Container Layouts: Container elements (page, group, popup, floating group, etc.) now have ‘container layout types’ that define the behavior of its child elements as the screen or content re-sizes. These are Fixed, Align to Parent, Row, and Column.
  • Parent Container / Child Element relationships: Grouping elements into containers is now a lot more powerful as the controls an element inherits is based on its parent container layout. You’ll notice us talk about Parent container and Child elements alot :slight_smile:
  • Margins: All elements now have margins! Margins are extra space around an element and are added to the overall width and height of an element. Thus, elements will now align and snap to the margin border.
  • New Repeating Group controls: The new Responsive Engine [beta] also contains new repeating group controls that give you far more control over the behavior of your repeating groups as well as allow them to be fully responsive.
  • The upgrade to new responsive happens page-by-page. Existing page settings and behavior will be migrated to the new engine. Be sure to check the post-upgrade behavior though as its not a 1:1 mapping before putting anything into production.

Note: The New Responsive Engine is still in Beta.

This means the feature is pretty close to look, feel, and function but some design and functionality changes may still be made before the new Responsive becomes the default experience. In addition, there may still be some bugs present as we continue more robust testing. This is especially true for 3rd party plugins and templates that have not yet had an opportunity to upgrade. Keep this in mind if you plan on using upgraded pages in production.

In addition, it should be noted that this beta period is an important time to allow template creators an opportunity to update their templates to the new engine as well as collect feedback on how the feature is working.

The following Help Guide will give you far more detail into the new Responsive Engine, how to upgrade, and how to use the new controls.

We are very excited to see what you all build with these new controls as well as your feedback on how you are liking the new feature. Thanks everyone and happy (responsive) Bubbling!

119 Likes

Looks great! Can’t wait to start using it :raised_hands:

1 Like

Yay :tada::clap::raised_hands: Congrats on the launch!

2 Likes

Huzzah!
Glad to see this finally shipped :rocket: :rocket: :rocket:

Edit:
Just watched the video… oooh baby!

Finally! I look forward to trying it!

1 Like

BUBBLENAUTS RIGHT NOW BE LIKE:

Yea… a little excited.

21 Likes

Amazing…and congrat:)))

1 Like

Yes! Stoked! Congrats team! :grinning:

Awesome! We’re going to jump on this on all the StartupMill.co projects :wink:

1 Like

I have a dumb question…

The new mobile width is set to 325 not 375 like it was previously, is that generally what everyone accounts for in mobile view? I didn’t think mobile devices were still that small, but maybe I’m wrong.

Egg-cellent work, @nickc and team!

I’ve learned a few things while beta testing, tag me in questions in the forum and I will try to help you out. I might even set up an office hours type of recurring call to help out.

14 Likes

We chose a mobile width of 320 because it is currently the smallest phone screen on the market, though I imagine most users will be designing for widths in the high 300s and low 400s.

9 Likes

:raised_hands: :beers:

Quick question @nickc… can we update reusable elements to the responsive engine even if they are used on a page that is not using the new responsive engine?

9 Likes

Great Job! That’s exactly what I expected

That’s awesome guys ! :fire:

Congrats on the launch :slight_smile:

1 Like

That’s great news. Congrats!
@nickc How long do we have to switch from old to new responsive engine?
Do we have an option to not upgrade at all?

1 Like

Great job!

Wow! Amazing… Looking forward to use it!
Congratulations and thanks…

1 Like

Nice one! Okey, is there anyone that will offer the service to transform a current app into a responsive one?