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.
Do you have an expected date when responsive design will be implemented?
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).
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).
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â?
@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
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.
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.
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
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.
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.
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.