I’m experimenting with it by trying to recreate Kickstarter’s UI (not for a project, just for learning purposes) and I cannot for the life of me figure out how to make proportions stick and sections flow/resize correctly across desktop and mobile. Am using this page as the example I’m trying to emulate.
A frustrating part is that when I change a container’s child layout type - say from row to column and back to row as I’m experimenting - it appears the responsive engine will reset the defaults so that when I get back to row, the layout doesn’t look like how it was just moments earlier. I suppose we can just tap undo and that should fix things but in any case, it’s confusing.
Is anyone else struggling to learn how to use this? I’ve been following this video which I thought was helpful but for some reasons the insights just aren’t translating. Could just be a me problem - would love to see links to tutorials or other videos that have been helpful to you. Thanks!
You’re not alone! I find myself struggling with the new responsive engine too. I’ve made the responsive design system update thinking it would help me with the design of my app (it’s functioning but the design part prevents me from publishing it) but it is the opposite actually, I even want to go back to the previous system!
I am now hesitating: either I leave my app where it is now and start it from scratch on another platform that’s is more design-friendly, or I try to remake it with Bubble, but again from scratch!
To summarize, I don’t know what to do right now. I wish that Bubble engineers could make it easier for developers to use the design tools, but I don’t know if they can or want to
Hey KudzaiLX,
I imagined such a situation happening and so have been very deliberate to not switch any of my pre-existing apps over to the new engine - definitely not yet. Am sorry to hear of your experience.
In terms of Bubble’s intentions, I do believe they want to create a platform that empowers developers to quickly and easily make powerful apps. Their’s no doubt in my mind about that. And the new responsive engine does seem to have some promise in terms of giving abilities to easily resize the height of things without hacky workarounds (as are needed with the original responsive system). But this beta update or at least the documentation for it leaves something to be desired.
I think it is pretty easy to lose sight of that. I myself was expecting a bit more of a finished product when jumping into things, but it is clear at this point things are still being tested out. Most definitely not the time to start changing apps from the old to the new.
When I first started playing around I wanted to tackle some advanced designs that I normally use and there were bugs affecting them. Luckily I have been able to report these and get them resolved so I could continue to test and learn.
Overall, I think it is great and as others are able to learn it, I believe they would agree. For me, doing more simple stuff at first has really helped to understand how it works. For instance, just putting two groups of different colors onto the same page and make some changes to the layout of the page to understand the impacts.
Definitely not intuitive though. It is something that I plan to need some more information on flexbox itself.
I have recently added some tutorials to my youtube channel on the topic.
Appreciate your points on this! Would definitely encourage folks to wade in using simple colored squares to start as well.
I noticed that that youtube video I referenced earlier was helpful in terms of understanding how to setup a static-ish grided layout. But it didn’t go into detail on how to setup a page to handle screen resizings.
The biggest issue I have right now is trying to figure out how to make the first group (in a row) resize to fill the full width of the screen once the screen is narrow enough to cause the second group (which was also on the first row) to wrap onto the second row (and when it has wrapped onto the second row, it should fill the full width of the screen just like the first group). Anyone know if this is possible?
I can agree that the new design system requires some well-written docs or some sort of redesign for itself.
I redesigned one of the heavy pages and it was irritating as hell to figure out how to make simple things.
As someone who is familiar with flexbox, there are definitely some gaps that would make things a little more intuitive. I think I have figured it out, but it seems to require way more groups to work in order to be successful. The resetting issue is really frustrating and Im guessing that will be fixed with many of the other bugs. I also think a key feature that they plan to release, but haven’t yet, is the breakpoint logic/settings. Looking forward to seeing it improve!
Zelus…So un-intuitive. There obviously isn’t anywhere in sight at bubble. Even their own people say that Responsive is “notoriously tricky” and a developer that came to me by way of my technical co-founder to help un-tangle this mess, says that bubble is “goofy”. Did they launch too early before this thing (and the fact that they use the word “things” so much is kinda ironic) too early? I ran back to Wix and got done in a day and a half, what I couldn’t get done in two weeks (and still isn’t finished) at bubble.
A new slogan for Wix: You Won’t Realize How Much You Love Wix Til You Try bubble
So frustrating… and the side hustle to get folks to help you is too conspicuous for words.
Walton
Yes I too don’t like the new responsive engine, can’t bubble have have a modern WYSIWYG editor that has full control over mobile and desktop environment ?
@carltonriffel I did see conditional settings based on the page width can be set in the conditions of an element. Right now it’s limited to margins and other attributes but I think it makes sense to add the min/max height and width too.
@zelus_pudding Were you able to make some progress? It took a learning curve but I understand the use of the flexbox now pretty well. It requires the use of nested groups. For instance a main parent container group that is 100% and centered, within that a group that is 100% min-width but a max-width of whatever the max-width of the content should be (1100px for example). And from there it’s just using the min and max settings. I know how frustrating it can be to not understand something in bubble, I wish I could help more.
A way to do that kickstarter section is to make a 100% row, in that 2 columns (one for the left and right) with a min of 60% for the left and 30% for the right and a max of 100% for both. The right 30%/100% column would have left and right margins of say 30px and all the elements in that section can each be a group that is a row set at 100% width. Each of the text/elements can be put in each of the rows that should be stacked right on top of each other. You can set bottom or top margins on those rows to create the spacing.
I hope they improve the documentation or someone creates a template that others can look at to understand how to create certain outcomes. Godspeed.
min of 60% for the left did the trick! Thank you so much for the tip I had actually figured that out late last night and think I’m finally getting a handle on things. This new system is actually pretty nice in terms of eliminating a lot of the pixel by pixel shuffling the old system required. This would be absolutely stellar if they can improve the education aspect, maybe adding some simplifications or buttons for setting up common nested layout types, and I’m in 100% agreement that conditionals should also sport layout adjustments for height (in addition to margin).
I take back what I said above - this responsive engine is awful I’ve spent two days trying to make a super simple landing page responsive. Really frustrating how difficult it is to understand the right combination of layout choices across nested and sibling elements along with min / max width and height settings. This is something that should’ve taken me 3 hours tops to make under the old system but is still dumbfounding after 12
Bubble has always been so intuitive to use - that’s what’s made it the absolute favorite development tool of so many in this forum. Saw an unofficial poll earlier where a forum user was asking if Bubble should keep both responsive systems or only the new one. If they choose not to keep the old responsive system without some overhaul in education or ease of use improvement to the new system, then I think a lot fewer future people will convert into paying Bubble customers. I don’t like leaving bad reviews of things online but this application is too important a tool for me to watch this happen without saying anything. And if @bubble wants to sit down and review what’s not working I’d be happy to do so.
Although it’s packed with glitches, I think down the track when they’re all ironed out it will be a lot more powerful compared to the old responsive engine. I work with Figma a lot, and in some ways the new responsive engine reminds me of AutoLayout (also a variation of flexbox). Short term frustration, but long term I think it’ll be a good move. I think there’s truth in saying they may have released it a bit early though, I wouldn’t dare convert all my old pages to the new responsive engine.
I used webflow for the first time a year ago and that’s exactly what I thought - Webflow excels in UI / layout programmability but falters on backend programmability. Bubble is - as far as I can tell - the industry leader in low-code backend programmability so the dream really is to see them adopt more of Webflow’s front end magic, as you say.
I actually think it’s very intuitive. It all makes sense when you know about flexboxes, but I think the basics can also be learnt even for people who don’t know how flexboxes work.
What makes it difficult is that it has nothing to do with the “old” Bubble designer (really nothing). It’s not that it’s counter-intuitive, it’s just that you need to unlearn what you previously learnt about Bubble. It’s a whole new product, but fit for the web of 2021/2022, and one I actually like way more.
To get started:
Forget about “fixed” containers
Generally structure your page using row containers inside column containers
Use the elements tree a lot (not the version that only shows hidden elements - the full version)
You won’t be able to do everything you want with these 3 pieces of advice, but hopefully it will get you on the right path.
PS: when you convert an “old” page to the new engine, you will get a lot of fixed element: this is definitely not the right way to do it, and you’ll need to heavily modify the page. So you may want to start with a blank page to get used to the new responsive engine, and avoid to convert your existing pages unless you know what you’re doing.
Good luck!
Does seem to involve a lot of unlearning the old system.
And I agree with your point about having to use the elements tree a lot - it’s really the only quick way to select parent groups when their children are fully expanded / don’t allow direct selection of the parent. It would be very nice if we could multi-select elements from this tree to add them to a group (in cases where we realize several things should be nested in yet another group). Also yearning to drag items in the element tree so as to quickly change up their parent/child relationships without having to precisely try to click and drag a child into its new parent on the page. Find myself making a lot of clicks to do this when ideally it would be as simple as can be done in any other layer based system (i.e. photoshop, webflow)
Yes, I expect a lot of improvements on the elements tree, like being able to drag a new element (text, group, rg, etc.) directly in the elements tree, and being able to drag and drop elements to move them directly in the tree.
I had actually figured that out late last night and think I’m finally getting a handle on things. This new system is actually pretty nice in terms of eliminating a lot of the pixel by pixel shuffling the old system required. This would be absolutely stellar if they can improve the education aspect, maybe adding some simplifications or buttons for setting up common nested layout types, and I’m in 100% agreement that conditionals should also sport layout adjustments for height (in addition to margin).
I’ve spent two days trying to make a super simple landing page responsive. Really frustrating how difficult it is to understand the right combination of layout choices across nested and sibling elements along with min / max width and height settings. This is something that should’ve taken me 3 hours tops to make under the old system but is still dumbfounding after 12 