New Responsive Engine [beta] is Live!

See this post

Hey,

Can somebody tell what " Laid groundwork for vertically scrolling groups in the new responsive engine" in the newest Release update means?

Is it available already or are you still working on it?

Thanks!

Still working on it.

This feature is live!

3 Likes

Can it be unchecked by default?

1 Like

Hey @nick.carroll, thank you so much for this feature. It was the missing piece in the puzzle for me.

I agree with this - Is there a way we can control our app’s default settings?

1 Like

Except Elementor is drag and drop, and this is more like “type and watch.”…

:cry:
As a somewhat advanced Bubble and Elementor user who has used both for years… I’m not yet a fan of the new engine from a usability standpoint. Maybe I’ll come to love it after spending some more time with it. My initial draw to Bubble was its feeling like a vector graphics editor like Sketch App, and this beta completely removed that for me.

IMHO, Elementor works because you’re largely working with pre-built components that you drag and drop and automatically snap to a grid. You can only go about 4 levels deep, which is really all you need in that scenario.

Now, imagine having to design those finely tuned components using the same method, (and with infinite levels of depth). Things quickly get complicated when you realize you can’t pixel push but have to type instead, and you have to make decisions about the responsiveness of every single aspect of each element while maintaining context of its neighbors as well as its parent(s) behaviors. Then take away the drag and drop to reorder feature, the drag and drop to a different container capabiliity, and the z index feature. Building something as simple as a form with a submit button with an icon in it, or a login field with a label, input, and envelop icon becomes very taxing.

Now what would maybe make it worth it is if you could at least “save” your components and reuse them similar to how Elementor or Sketch libraries work. (I know Bubble has “reusable” elements, but their usefulness is lost on me. Ex: I can create a reusable element composed of a standard text input field, label, and conditional helper text, but when added to an actual page you can’t retrieve any information from it, such as the input’s value… which is kind of vital).

Anyways, that’s sort of how this beta makes me feel… It’s less drawing and more typing, which to me feels closer to code.

1 Like

Thanks for the feedback! We will actually be bringing back a lot of drag and drop functionality, just optimized for the new system. We didn’t want designing and implementing this new UX to hold up the beta launch, though its been pretty clear from the feedback thus far that drag & drop is sorely missed.

I like your thinking around components as well… something to team is starting to noodle on as well :slight_smile:

10 Likes

Great to hear! And even the ability to contribute to an app’s “Element Templates” would be a game changer for sure.

Sidenote: I’m a senior UX designer for ADP (payroll company). If you ever want feedback during the design process, I would love to contribute my expertise in any way.

3 Likes

I hope that this is referring to element templates and not reusables.

I think I see what you mean. I can say that my first impression finished up with an “impossible to build with the new engine”, second attempt and “nah, is not ready yet”.

Finally, a few attempts and days later I got it, and I think the new engine is just incredible, much more powerful in every single way, that is easy to miss in a single sight. Is not only the responsiveness of the elements, is that building and modifying an existing design is just incredibly faster than before, just because you can move/add/delete elements in a second without having to resize and adapt all the elements surrounding.
And still, I think it is not ready yet, but I came up to the conclusion that the problem is the tools/settings for editing the page, which causes huge problems even to make simples things, is difficult to understand and very frustrating sometimes.

I think the main pain points are:
1) Left element’s tab options, it is not fully functional: It just needs to allow the same full right-click options as the page does. Because right now, you need to go to the elements on the page to get the full options, and since groups can be impossible to select due to the responsiveness and elements underlying, you need to keep playing with the size of elements continuously just to do right-click to some element.
2) Left element’s tab drag a drop: If it would allow moving elements between groups, it would just remove all the pain from the page.
This point and the previous one, I think are the key functionality and reason to be for an elements scheme/tab.
3) Default elements settings: just to allow to define default settings for new elements for important things like container type, width/heigh fixed checkbox, fit width/height to content. New responsive engine is much faster for building a page, and still, I think that more than half of the time you spend with it is checking/unchecking and changing all the properties that the editor keeps forcing to set on a fixed behavior.

  • Bonus point here: right now every time you regroup elements, the editor changes properties to the inside elements to fixed behaviour, for extra pain.
  • Regarding the reusable elements, the existing “reusable elements” is a different thing that has an important reason to be, as a header/footer, popups… so you can access certain pages/layouts/UX from different pages and places, to simplify/economize the design.
    I think you mean some kind of elements templates, so you can save some elements with certain properties to use them later. That would be nice to have, but with some default settings customization, I guess would be enough.

I’m not an engineer/programmer, so I’m taking the risk to get things wrong here. But holy cow, I see that the new responsive engine is much more powerful and has some huge advantages even now, with these major pains and chaos, and I can only put all the bets in this new path, and hope for these dysfunctions to get improved in the near future.

Cheers!

6 Likes

The width of the site cannot be changed from 992px after installing the Responsive Engine.Does anyone know the solution?
Thank you.

If you’re creating from an existing page it resets the page width to a fixed number. Go back to the UI builder and make sure the page itself isn’t set to fixed.

2 Likes

I got it!
It will take some time to get used to it :sweat_smile:
thank you

Hi everyone, quick feature update!

You can now animate the horizontal collapse of a group like you would the vertical collapse with the new Slide Left/Right animation style option (see below).

20 Likes

Very nice! Keep em coming!

There is a big library of templates available on the template marketplace, and from what I can tell some template developers have upgraded or have plans to upgrade their templates to be compatible with the new responsive editor.

When looking at the marketplace and scrolling through available templates, it’s impossible to tell which ones are compatible with the new responsive editor without requiring a page by page manual update. Are there plans to add filters by old and new editors for templates or something similar?

4 Likes

Hey all, quick announcement! We recently launched the ability to group elements directly into responsive containers in the new responsive engine. You can access this feature from the context menu accessible via right click, the Edit menu, and the Arrange menu while selecting multiple elements on a page that has been upgraded to the new engine. Elements now retain responsive properties when placed into non-fixed groups, and non-fixed groups are by default not fixed width. We hope this helps with the experience of more seamlessly grouping and designing layouts in your apps.

19 Likes