I’m a front-end web developer but I’m really struggling to understand the responsive box margins and am spending way too much time just trying to get one element looking right on mobile.
My question is - can you add a standards guide with exact examples on how your elements are set up?
For example;
Showing how left image logo in a navigation bar at 1200px scales down to iPad/iPhone and the element settings for that. Then showing how a text only logo would do the same etc. Show this in relation to a hamburger menu icon and best practices and settings for that as well.
Repeat for footer and general layout examples - centred, right column, left column, etc.
At the moment I am so over it I am hiding and showing elements instead of relying on the resizing but this will add to the size of my app…
Your reference guide is awesome but it doesn’t say where in the platform the reference is, so I have to guess whether you are talking about the right click drop down, the elements menu or anywhere else. Can you state where in the app the reference is located?
Have you had a chance to watch their 30 minute brain dump of how to use the responsive tools? The logic is quite a bit different from typical front-end development, that’s for sure. If you haven’t seen the video, I strongly suggest it. If you have, I’m not sure what to say. I would imagine something like a standards guide (as you are suggesting) would come from the community, not Bubble directly. Some users are doing really great work with it, so maybe they would be willing to share their tips and tricks with the community.
No that’s okay. Thanks for answering. I have watched the video that explains each responsive setting. I have subsequently spent 3 hours (not exaggerating, though the glass of wine is slowing me down) trying to center one button for mobile and am just going to hide it now and replace it with another button just for mobile. I was flying through building the desktop app and thought ‘Hang on, I’d better do responsive screens as I go’. I discovered some elements were quick to fix but others just seem impossible. I guess my high level question is - would it be normal practice to just hide things that are breaking on mobile and replace them with mobile/ipad only elements? Even that would be slow going - wouldn’t it be better to be able to develop for mobile first and then be able to move things to the right when the desktop expands?
That’s a good question, and one I’m actually running into myself. For my software, it needs to work flawlessly on a 1024x768 screen, so I designed it initially at that resolution. Now, when the user has a bigger screen, it doesn’t look as nice as it should. I’m thinking I’m going to have to go back through and rebuild all the pages at a wide resolution, then fix any breaking that happens when screen width is 768. It’s a bit of a pain.
As far as the mobile-specific buttons, that’s what I’m doing in some cases where I just can’t get it lined up right, usually with centering. I just want something in the middle of the page! I don’t know if it’s “normal,” but it’s what I’m doing, and I know several other folks on here are doing the same.
My personal thought process has been to try the responsive stuff first, if that doesn’t work, go to width-dependent elements as a backup.
I’ve come to hide things instead of trying to get them aligned properly. I especially have issues with repeating groups. I have a lot of table headers for those repeating groups and when the screen gets smaller, the header labels move all over the place and I havent found a consistent way of dealing with this (fixed vs non fixed width, putting all the labels in one group etc, aligning left, right or center etc.).
Also, the full size table with all the elements is just too much to cramp onto mobile so I’m just considering what table items for the RG need to be visible on mobile, expecting some functionality to only be used on desktop.
If anyone else has suggestions, I’m very open to them
But I definitely feel your pain, the behaviour seems very inconsistent at times but I guess is very dependent on a lot of different factors influencing how an element behaves. Is it part of a group that spans the full width? Does the group have margins relative to the element in the group, alignment blablabla. So many factors!
Ok good to get that feedback guys. Yes Bubbles was fun until I swapped to the responsive tab. Now I’ve broken it terribly playing around. This will literally take me months if I continue at this rate. I need a mobile first strategy…hmmm thinking…
Hmmm The instructions say ‘hides when parent width’, but help guide says ‘hides when screen width’. It does appear to be parent width so only when the parent element/group is less than x…
Okay for anyone else struggling with Responsive this is a good video to watch (I was looking at the dashboard one and it just wasn’t sinking in).
Also:
Check your page sizes. Full width setting is 1200px and some of my elements were 1280px.
For Mobile, I’ve found the best way to control text for me eg. on a landing page is to make the text 1200px wide and select center horizontally = on mobile it will center. If you want a little bit of a margin on either side on mobile then make it 1180px for example. You can also put the element within a group and make that group 1200px wide and center the element within that group. You can also control left and right alignment on mobile in exactly the same way. Now that I am doing this, my text is resolving gracefully across devices.
I’ve noticed that when trying to “line up” elements in responsive mode, sometimes you are better off just making sure that you reload/refresh your browser window first (and every time you make a change). I did this and suddenly a text box was “responding” the way I expected it to.
PS. I just realised that groups are actually divs!
So am I right in thinking I extend the div to full-width for block content and… how do I float left? Put it in a floating group? Or as soon as group is not full-width, does bubble consider it floating left? So if my page is my parent div and I have 2 child divs, left one 30% and right one 70%, do i just put into 2 normal groups with those sizes or do I make the left one a floating group?
What happens if the left group is just 30% of the page and there’s no right group? Bubble considers the left group to be a full-width div?
Responsive is not good with bubble from my experience.
And it’s very hard to fix.
Now sure how bubble could solve this one, but responsive is a huge challenge with bubble at the momentum.
I made a awesome looking site, then switched to responsive and it was terrible. So I tried to fix a few things but just couldn’t not get them the way I wanted.
And you cannt just go make everything full width and centred either.
I know many of us have been able to make apps with pretty dang responsive functions, so I’d be curious to see what’s not working for you. If you have explicit challenges, we encourage you to post a link to your editor so we can see what you’re trying, and how you are intending it to work.
I have three items in a row (logo, search box, login/profile icon). (Like Yelp.com).
Now on a laptop I’m happy to display these in one row, next to each other, but in a mobile the search would need it’s own line, therefoe the logo would need to go above it.
So what I want is on a mobile it shows logo, login/profile icon, and then the search in a new box below.
But this is not possible from what I can see, because on desktop view o have them next to each other with login/profile icon at end, so the wrapping causes the logo on one line, then the search, then the login/profile icon
I want the login/profile icon on same line at top as logo.
But because of the sequence they are in on a desktop it doesn’t allow this to happen when going to mobile.
You could put a hiding rule (set hiding rules on the responsive tab) on the desktop logo to hide when less than a certain width and a conditional show rule on the mobile logo to only show it when page is a certain width.
Since I wrote my original post above, and having more experience with Bubble, I’ve found it’s easier to build mobile first and then widen as I go for desktop. I’ve also improved my UX design too, keeping mobile screens to 1-2 user interactions and desktop apps to no more than 5 user interactions (if possible). This makes building responsive easier as there is literally less stuff on the screen.
I still find Bubble behaves unexpectedly sometimes even though I have built responsive websites for years.
But you would only hide the desktop logo when on mobile then show the mobile logo in a different place for mobile (on a separate row above search - so 2 logos, one showing on desktop but hidden on mobile and vice versa and you could do this with an entire group as well).
Overall however, it would be better to get your components to work responsively to reduce page size.
You could copy the issue into a public project and share the link here.
Webflow: No, I build websites from scratch/bootstrap templates.
With less actions, I mean, I constantly look at both my mobile and desktop screens to see if I have too much going on, on the one screen. Separating out user paths so that the user has 1-2 key things to do in one mobile group (in the case of a native app) or less than 5 things to do on a desktop screen. This both simplifies your app and reduces the amount of responsive corrections you might need to do on one screen.
I see a few examples on here that cram in a hundred check boxes and have way too many user paths for a user to complete on one page. It confuses things for the User and makes responsive work more difficult.
I think copying it into a public view will be a good idea, I will do that at some point.
I would like to learn about your Usability strategy it sounds great. Are you able to share some of your site’s so I can look at them and just learn how your setting up certain things
My projects are private at this stage but for native apps I look to apps like the excellent Acorns investment mobile app to remind myself to keep things simple and beautiful.
It’s good to look at apps with either a volume of data or numerous user interactions needing to be completed to get ideas for your app. Eg. airnewzealand.com.au displays both a volume of date and has numerous user interactions that need to take place but they break up the steps nicely between pages.
If you narrow their screen down on desktop, you can see their site is responsive down to small laptop screen size, after which it is not, since for smaller screens than that (iPad/iPhone) they will be checking for the device used by the User and displaying the CSS for that device.
