Responsive Design: What are the best best practices?

Dave94954 · 2020-09-02T18:12:41.299Z

Hi all -

I am quickly learning bubble and realizing that one of the weakest points, by far, is the ability to create responsive front-ends. Coming from a background of a full-stack developer, then later working a lot of webflow, this is super-frustrating.

My feeling is that the developers at bubble created an architecture for front-end that is just not ‘idea’ for creating responsiveness and now they are sort of stuck trying to incrementally improve it because it’s so integrated with the editor. Fair enough - it’s amazing what bubble can do so this is just an obstacle to overcome.

Right now, I am working with Canvas/AirDev and my impression is that the only value Canvas really brings is that it gives you responsive elements right out of the box .Unfortunately, it’s clunky and each element has tons of extra groups and arbitrary naming, making for a confusing environment to work in. Also, it’s still a bit fragile to tweak around in there without breaking responsiveness, and when that happens it’s not the tidy environment that a developer strives for.

I am torn about whether to really get into Canvas and just get to know it better OR to stick with core bubble - keep it simple, and learn to work with the editor to make responsive websites even if it’s a bit painful to do so.

I am really interested in the experiences of others. Is creating responsive websites in Bubble as tricky as it seems, or just another learning curve? Is Canvas valuable if a developer already knows how to make things responsive in Bubble?

How do you do it? I’d love to learn from the experiences of others.

thanks!

J805 · 2020-09-02T18:48:51.182Z

Hey @Dave94954

I think Responsiveness is just mostly a very high learning curve. Once you understand it, it works like it is supposed to work. I think Canvas is cool, but you have to understand Bubble first to be able to really use it.

Check out some resources here:

Post 1: Responsive Concepts

Post 2: Need help with layout

Bubble Reference: https://bubble.io/reference#Elements.GeneralConcepts.Responsive

Bubble Manual: https://manual.bubble.io/building-a-user-interface/building-responsive-pages

@emmanuel’s 17 minute video about how to use the responsive engine: https://vimeo.com/169882386

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

One-on-One Tutoring
eLearning Hub
Video Tutorials
No-Code Classes

Dave94954 · 2020-09-02T19:03:18.742Z

Hi Jason -

Thanks for your reply. Bubble definitely has a tricky implementation of responsive design in the editor. I know from learning webflow that people who don’t really ‘get’ the box model/flex struggle with the responsiveness even though the webflow interface is much closer to what really happens in the html/css .

So, I wonder if bubble must be even more confusing for people who need responsive sites but really don’t understand how html/css is rendered.

I think Canvas is cool, but you have to understand Bubble first to be able to really use it.

Can you clarify your statement above? Do you use Canvas in your every day work, or do you find it just as easy to create responsive designs without Canvas?

Thanks for the resources I will go through those!

J805 · 2020-09-02T19:14:34.562Z

I personally don’t use Canvas at all. I create my own templates to use so they are unique and have their own design. If I was going to use something like that, I would probably rather use https://www.openbuild.io/ instead. Seems to be easier to work with. You just copy and paste their templates onto your site. Really easy and you can customize it easier too. @vincent56 and @mattmazzega are the founders and they have created an awesome tool. Just my opinion though. I think I didn’t like Canvas because the whole page just looked blank or something. I’m not sure if they have changed this or not now.

Hope that helps a bit.

Dave94954 · 2020-09-02T19:19:02.743Z

J805:

ate my own templates to use so they are unique and have their own design. If I was going to use something like that, I would probably rather use https://www.openbuild.io/ instead. Seems to be easier to work with. You just copy and paste their templates onto your site. Really easy and you can customize it easier too. @vincent56 and @mattmazzega are the founders and they have created an awesome tool. Just my opinion though. I think I didn’t like Canvas because the whole page just looked blank or something. I’m not sure if they have cha

Thanks I look forward to trying this out!

J805 · 2020-09-02T19:19:38.621Z

No problem.