Is bubble Responsive?

The mobile app and website are different, is this because bubble is not responsive? how do I know what width etc to set page?

Bubble is not responsive yet. Key word yet. Quick google search will bring up common screen widths to help you decide.

I’ve set my page width at 1024. Mostly because my potential customers are Doctor Offices, and they tend to have older low resolution monitors. Also, we use Mixpanel, so we’ll be able to see what screen resolutions our future users have, so that we can adjust accordingly.

And then you can duplicate your page, and set you width for mobile, and when your user is using a mobile phone, it will default to that page.

2 Likes

Do you have an expected date when responsive design will be implemented?

1 Like

I echo this as the most glaring limitation in building with Bubble considering the world of user devices we have to cater to. It’s no surprise that it’s top of the ‘features lab’ requests, though I also note that it’s been there for exactly a year (I recently posted on this forum about the broader need for a clear roadmap with this in mind).

For a start, how about ‘simply’ enabling an option for non-fixed-width pages, so builders are empowered to control their entire page layout fluidly for every screen from mobile to TVs? It’s great that we already have access to the ‘Page width’ element on pages, but I’ve found that to be frustratingly unusable given every page is preset as fixed-width. I know it’s never trivial to make changes, but adding a “fluid/none” option when setting page sizes would be a really useful starting point; you can even add any beta disclaimer if need be for people who badly need this option right now and are prepared to take the risk that things may not work so smoothly (just like you’ve done with native mobile apps).

1 Like

It should come soon (few weeks), but we have to do a few architecture-performance-reliability stuff first.

What you can do right now is to have two versions of the page, with one for mobile. It’s not ideal as you have to repeat a bit the work, but the experience to the end users is the same as true responsiveness and given how much faster bubble is to build compared to coding it by hand, it’s an acceptable trade off I think.

That’s what we did for our own app (Bubble).

1 Like

Funny. Our expectation are different.
My dearest wish would be to be able to have the same Workflow tab for a Design tab in “Web” page width and another Design tab in “Mobile” page width. So I don’t have make changes in two pages each time.

@NicolasDap that might help in the current restricted implementation, but the basic issue lies with the concepts ‘web page width’ and ‘mobile page width’ as there are so many permutations of these - and rising. unless you are only building something for one type of user with two known devices, it’s more work to add predefined design views than just one canvas where the same elements respond dynamically to whatever ‘page width’ the user is on

@emmanuel is it viable at the moment to change the page width property “full width” to truly be full screen width, and in essence every other set width becomes “custom”?

1 Like

@wahome. I agree with you. I was just trying to come up with something simple to implement. In Webflow, for instance, they offer to build your design based on 3 free different width : mobile, centred (mostly for tablet or phablet) and web (>1200 px).
With 3 three widths, it’s possible to be adapted to most of the devices on the market. Idea here is not to make things perfect on every screen in my sense anyway.

Hi @emmanuel , how is it going with the responsiveness feature. Understand it`s hectic with lots of things to do, but just curious if this is something we could hope for before Christmas or if it might be pushed as a January deliverable.

How do we handle the responsiveness with the new feature, do we just add/change media queries directly in the foremost UI (main builder view) or do we have to click all the way in to the CSS settings view and then go back to testing it in the builder. Just curious here :smile:

This is definitely not for Christmas (which is in a week). Early 2016 is likely, but again, we can’t hard commit on that, especially since you can have 2 versions of your page, which makes the same experience for your users (not for you, I agree).

As a brand new user I have to say that finding this out was extremely disappointing, and possibly a deal killer. I thought the WHOLE point of Bubble was to easily make an app that could be simultaneously a web and mobile app. Given how popular easily responsible frameworks like Bootstrap are, I can’t fathom how this wasn’t a core feature from day 1!

Any update on exact timing here? I think it’s a non-starter for us.

1 Like

Given how fast you can develop screen in Bubble, once you have the underlying data and workflows, I would probably still develop “smartphone” sized screens even if it were responsive. What I want phone users to be able to do is different to desktop users. It isn’t just smaller.

2 Likes

Users moving between devices / screen sizes expect though to be able to do the same stuff

There are plenty of big real world examples where that isn’t the case. Yes, it is true most of the time, but not always. “Responsive” isn’t always the answer. Just ask…Apple, Amazon, Facebook etc.

That’s on our roadmap, but we can’t really commit on a timeline for this yet. As you can design a mobile version for a page, for your users, the experience is exactly like responsive. It’s a bit more work on the app builder, but as Bubble is pretty fast to build interfaces and backend features, it’s not too bad right now. That’s how we did for our own app (bubble.is).

That’ll come at some point :slightly_smiling:

1 Like

As @NigelG points out, as app complexity increases, you’ll have to cater to web and mobile individually. Massive amounts of data can easily be presented on a webpage, but the same data would have to be partitioned such that it is more digestible on smaller screen sizes. Also, each native environment has their own conventions and guidelines that each user will be expecting. Responsiveness would be ideal, but I haven’t came across a use case where I’m hindered by not having it.

2 Likes

Thanks for the responses. I can definitely see both sides of the coin and have started toying around with the “mobile version” feature. So far seems good. Just to be clear so I won’t be missing anything: the workflows are entirely separate, so I’ll need to maintain two sets right? I imagine the best way to build something, if we want it to be mostly identical, is to build it ENTIRELY in web or mobile, then copy each page and edit? Any future edits have to be done in both places?

The more I play though, the cooler this becomes. Great stuff.

3 Likes

Yes, that is right. Each page can have a mobile version (or not). But you need to edit both.

Not ideal, but hopefully livable with until we get responsive.

speaking of Responsive, how about adding for all controls an Anchor property like in Windows Forms and Delphi VCL? You have Anchor Left/Right/Top/Bottom checkboxes at properties (in WinForms they show four toggle buttons forming a cross shape in fact in the property editor). They’d anchor to their parent that is

We’re working on this, hopefully not too far away.

2 Likes