It’s incredible what Bubble is able to accomplish as far as building no code apps goes. But the tools available to make the app responsive are beyond sub-par. Making my app responsive has been the absolute worst experience I’ve had building sites/apps probably ever. Complete shit show to be honest.
Sorry for the harsh feedback, hope to see it improve one day. Try to get some ideas from Webflow. Probably will do everything possible not to use Bubble for future apps because of this alone.
Hopefully when the upgrade the responsive system later this year you’ll come back. Although Bubble does have its quirks, it blows every other web builder out of the water in terms of total product potential. Bubbles TPP far outweighs web flow. Responsiveness is next in line and will probably make bubble even way more cool than it already is
I also like to design for mobile first now. I like to plan on the user having a smaller screen and then make it larger. Generally speaking I said all pages to 375 pixels wide before starting. Another idea might be to have a desktop version and a mobile version.
I am still working on the desktop/laptop version of my app. It is going well but I am dreading doing the mobile version when I am all done.
I will probably create a seperate site just for mobile to keep it simple because adjusting things for mobile without messing up the desktop version is a headache. I have read that this is possible? If anyone can elaborate on this last part I’d appreciate it.
I think most professional sites have a different look for their mobile than they do their main store website. There’s always going to be more features or more stuff in the desktop version because they know that there’s going to be more space on the end display. If you’re making an app for mobile make it for mobile. If you’re making an app for mobile and desktop you should probably have two versions of it for best responsiveness.
In my experience it is better to take care of responsiveness as you are building, otherwise, the task just gets bigger and bigger the longer you leave it.
This is absolutely true if you are using similar designed tables/elements in multiple parts of your app. Once you set up the responsiveness in one, then copy the elements somewhere else you don’t have to build the responsiveness from scratch in the copied elements. Yes, you may need to tweak it, but when you copy and paste the elements the responsive rules come with it. This has saved an endless amount of time when I’m building apps.
I absolutely dreaded responsiveness in the beginning, because I didn’t understand it, but once it clicks, it actually starts to make a lot of sense. There are some great tutorials on youtube to help you understand it better which will make it much less daunting. I agree the system is not perfect though, hence why they are rebuilding it with CSS.
With regards to creating a separate version for mobile. This is possible yes, and it’s the route I originally went down, but it probably adds more time than it saves. If you want to make changes to your app it takes twice as long as you have to change it in two places, it’s annoying as hell. In my experience it is better to bite the bullet and make your desktop version responsive, you’ll be in a much better place after it.
I did see an option where you can do this. It’s in the page edit options:
But yeah as Andy mentioned, if you ever want to make changes down the line, you’d have to do it for both pages which could be a hassle depending on the amount of changes.
Thanks. I am thinking I will make separate mobile pages for all the normal webpages (home, about etc) but for the particular internal pages that contain the actual app workflows I will have to make them responsive
Yeah I guess it would also depend on the complexity of your design/layout too when deciding whether or not to use that option. Sounds like you got the right plan.
For the app I just built, I put all of the landing pages/sign up flows on Webflow and set up webhooks/integrations to create an account for them in Bubble for access to the app itself after they checkout.
Yeah quite a few people do that. The funny thing is I think Bubble is actually very powerful from a web-design aspect as well, not just for its app building capabilities, because you can use workflows- custom states etc to achieve nice aesthetics as well. The problem however is what your thread here is all bout, that it sucks when it comes to the ease of making it all responsive.
I mean this in the nicest way possible and not trying to troll you, but I think the problem here is not the responsiveness in Bubble but rather the fact that you have not taken the time to understand how Bubble works. Once you understand the logic building a responsive page or mobile page is pretty easy and looks professional. Spend a bit of time learning to use and understand Bubble and I think you might be surprised at how easy it is to build responsive pages. As @cmarchan mentioned Greg’s video’s may be a very good place to start. You can also search for his stuff via “Buildcamp” on YouTube.
I’m sure it’s possible to build a responsive app that looks nice, and unfortunately I had to go through that hair pulling process with my own. And yes, it looks pretty nice. But the point of the thread was, is that worth my sanity?
Sure it may be possible, but there’s no getting around the fact that after using quite a few no code builders, Bubble was by far the worst when it came to responsiveness – although it blows the others out of the water when it comes to function and capability.
If by understanding how Bubble works means accepting the fact that it’s based more on function and not design, then sure – ok I get that. Would be nice to one day use it as more of a final product rather than just an MVP though. Because design and responsiveness definitely matters.
And I agree, the function of it is fantastic. I wouldn’t have made the post if I didn’t care to use it enough to hope that they build a better set of responsive tools so that I can continue using it with happiness, and a bit less stress. And from what I’ve heard, those updates are coming – so that’s great news.
@jack.wabbitr Bubble’s founders consider their product as a visual programming language. A blank canvas where even the structure of the UI needs to be built. Other app builders use a ready-component or ready-block approach where structure, function and even dB model is built for the user.
This is what differentiates Bubble from the rest.
Considering it this way may explain to some folks why it is that a responsive structure needs to be built for each app. This of course assuming one wants this feature. There are many apps whose use case does not require it. And if you want to build a complete custom made UI you can do so via a blank canvas approach.
When I watched that video that I recommended before I came to grips with the founders vision.
