I’m still very wet behind the ears but I decided to jump on the responsive engine early on. I don’t know whether because of this, or in spite of being a total newcomer, the responsive engine is beating me blue-black!
I was just wondering if any oldies out here have deliberately chosen to avoid the responsive engine altogether (maybe while it’s in the beta), and if you have, how do you get around doing some of the really useful things you can do with the responsive engine?
Also, can someone share some web apps that have been built with the old system? I’d like to see what might have been missing so maybe I can count my blessings. Cos right now, I’m just counting only troubles.
That would be…shall we say…“unwise”.
It will be out of beta quite soon. It’s pretty stable.
Have you seen the Bubble docs and video tutorials?
There is indeed a learning curve, but it’s not as steep as it might seem initially. There is also some 3rd-party training material which might help. Of course, the absolute best educational material on the new responsive engine isn’t available currently. Why? Because I haven’t created it yet.
@sudsy LOL…please do create that material. I’ll be waiting for it!
Honestly, if I go back to using the ‘old’ system (non-responsive), it is more difficult for me now. It took a few weeks to feel comfortable with the responsive engine, but I wouldn’t want to go back.
I didn’t convert my pages from the old to the new. I just re-designed my pages separately on the new responsive engine and then switched it out with the old page once it was working. My app is small, so it wasn’t that difficult or time consuming.
I put it off as long as I could, but I got to the point where anytime I wanted to create something new, I had to think that it would have to be created twice if I didn’t convert everything to the responsive engine soon. So I finally put all my new ideas on hold and told myself I needed to get it done.
I watched a few videos but they didn’t really click for me as usually what was being built in the video didn’t have much of a use case for me, so since it wasn’t relatable I just couldn’t follow.
The first thing I learned was, don’t allow Bubble to automatically restructure anything. Just copy as is, put it as fixed, and then I would work through how to get it back to how it worked before. I started with very easy stuff, then gradually moved on to my harder pages, but once it clicked, it clicked. Instead of dreading it, It was pretty smooth sailing. So essentially I was starting from a locked-in canvas, and worked through making it responsive.
Once you grasp the idea behind Columns and rows, it gets easier. If something doesn’t preform the way you want it to, take a step back and look at everything from a wide angle and ask, if I put it in a different group would it work?
It will click, I promise you. It just takes a little time but it will be smooth sailing after.
My old projects are still in the old engine. But the reason is that I don’t have time, for now, to update them. But it is in my roadmap and I will do it as soon as possible. Bubble’s automatic conversion process is bad (I mean, it is not magical ). So it requires us to make several adjustments manually. We are talking about hundreds of pages to be updated.
In addition to being much more customizable, the new responsive engine uses CSS to position the elements, so the site loads faster.
How were you building responsiveness pre-responsive engine?
How were you building responsiveness into your apps pre-responsive engine?
Would you say being locked into the old system already made it easier to learn the new one or harder, @bcart0v ?
How does your app look and act that is significantly different after you rebuilt it with the responsive engine, @doug4 ?
Just by adjusting the size of elements when the screen size changes (i.e. allowing them to shrink or grow to a certain percentage of their current width). Once I got used to the new responsive engine, this old method seems a lot more difficult to get good responsive results with.
The look can be exactly the same as the old system if I wanted it to. I used the opportunity to make improvements to the look, but that was only my preference (and not required). The app doesn’t act any differently on the new responsive engine, other than it handling the screen size changes better.
The new system is pretty different from the old system, so to me it was not easier. Initially the task seemed very daunting as I (thought) I had the old system down as far as responsiveness goes. My app is primarily used on desktop, but lots of people use it on mobile outside of work so it must function both ways.
It turned out that I’m pretty sure some aspects of my app just worked responsively because I hacked it to death, because trying to get some of the aspects to work in the new system (Navigation bars, headers, form layouts) was a huge headache that ended up being easier to start from scratch.
I will say, once you get everything working in the new system, it’s 1000x times easier to add to it. For example, in the old system if I wanted to add an option to my navigation bar, literally everything in it (currently 20 items) had to be moved around, then I had to space it out correctly, then I would have to test it’s responsiveness to make sure it didn’t break anything. Now I can copy and paste an item, change the name and workflow, and move it wherever it needs to go and it’s spaced perfectly.
But isn’t this the same thing you do on responsive engine, all that adjusting?
Yeah, I can imagine. Coming to Bubble, I suspected that if I continued learning the old system then I would eventually have to unlearn stuff in order to learn the new one. I was just wondering if this was the wrong way to think about it.
At first I was thinking I would have to make two versions of the most troublesome pages. But with responsive engine, every time I get something right and see it translate into mobile, I have to admit that is so satisfying.
No, not really. I just set the min width and max width and Bubble does the rest. I’ve found it much easier than the old method.
Good for you. You make it sound so easy!
Also, here’s something that helped me out.
Again, this helped me, so results may vary.
Every page is a column. At the base, your going to want things from top to bottom.
For things you need side by side, it’s a row. So you’ll have rows in the column.
If you need things to align side by side that’s both a column and a row, then you’ll need a Row Group to contain the Column and Row Groups. And we’re still working inside the Column. You’ll just need to change the alignments to match what you want.
That’s pretty much my working order when creating a page.
Totally agree. Now I can build everything much much faster than before.
I mean, I take 20 minutes to do what I took 1 hour. And the result is way more precise.