Hi,
Do you normally build desktop pages separate from mobile pages? And do you make your tablet pages based off of desktop or mobile? And what pixel sizes do you normally build off of? I heard that 1090px is popular for desktop.
These are all probably somewhat personal decisions, so definitely good to take any and all responses with a grain of salt, test them out and see which ones you prefer.
Bubble recommends 1200pxā¦a bubble designer whose opinion I hold in high regard recommended to me to use 1280pxā¦I still use 1200 just because that is what I got started in and it is a bit easier for my brain to handle the math on it.
I use 20px
Desktop, because tablet on landscape is 1024px which is the same width as the smallest desktop width
No, for me personally I am adept enough with Bubble responsive design that I can build for desktop first and scale it down for a mobile view. The only times Iāve used the mobile page option is when Iāve had complex features/UI that it was just easierā¦I built desktop first, copied the page and rearranged things for a mobile page.
I think usually designers prefer to build for mobile first and then scale up and add for desktop, but for me personally it is easier to build for desktop in Bubble and remove things when I scale down.
1 Like
So then when youāre building on the desktop size, whatās the min & max sizes that you build for? I heard some are 2,000+ px. And do you use conditionals for font sizes & element heights for separate screen sizes?
Desktop I usually max the content at 1200px and allow the header to stretch the page. I use conditionals for font sizes when needed. I use CSS for element heights if Iām designing something that should be completely responsive for mobile devices.
These templates use CSS for element heights
This template uses element height on the calendar portion to get a full page fully responsive calendar just like google calendars, and has a separate mobile page for it as I needed to scale down some features like not having a year view on mobile devices
1 Like
1366px gives me a great canvas for big screens and 767px tends to be great for mobile apps.
This is what works for me.
2 Likes
Interesting, whatās your min/max for mobile & desktop? And why the obscure numbers?
I like to have fun with numbers 
It just works out well with the margins for me.
767px works well in having tablet responsive designs without focusing too much on making it work on smaller mobiles.
At the end of the day the page width doesnāt really matter for me as long as I have a wide canvas to play with.
Making a 300px width design work for tablets is one of my worst nightmares.
1 Like
talked to a consultant and he said 1280 is good too. think thatāsā what iām gonna stick with
Bubble itself tells us 320 (mobile), 768 (tablet-vertical), 992 (tablet-horizontal), and 1200 (desktop).
Bubble is primarily Engineers, not designersā¦you may have noticed that from how Bubble looks 
Personally, I do what Iāve seen the ābig boysā do, and I make my page breaks relevant to the page and the elements on that pageā¦no one size fits all page breaks for me.
1 Like
I am gonna check how Greg teach about the new breakpoint function:)
Probably 320, 640, 960, 1280
But, those are just guidelines for understanding a grid concept.
In reality when building pages and making the design as it should be based on the designers conceived design, you will have different breakpoints, so not always will you break at the same page widths and will need to still analyze via a responsive testing environment to see at what page width do certain elements need to break.
Youāll also still want to set break points for specific container elements so their child elements break based on the width of the container element.
You should also look at the statistics for worldwide device sizes to get the min/max width of different types of devicesā¦for example 1020px is the smallest desktop width. Knowing these will help you set breakpoints appropriately for desktop, tablet and mobile. For me, I try to keep things as simple as possible, and I generalize this so that, desktop is 1020 or higher, mobile is 500 or lower and tablet is between 500 and 1020. But of course, every page in every app has a different layout and design, so I just use those as guides to know if my current breakpoint required by the page specific design are going to happen for all tablets or just some (I say this because some tablets can be 630px wide while most are 730+ wide)
Even Bubble doesnāt tell us that. They just havenāt updated their Responsive builder in a decade.
Are you not using the flexbox responsive builder released 18 months ago?
What do you mean, an update? upside_down_face: I used the term āresponsive builderā in reference to this precise demonstration of what Bubble itself indicates.
320 px for phone width; emulators donāt even give you that option! 
To follow Bubble and build for 320 means a less than optimal UX for 95% of your users and is terrible practices.
I just used a round number (a decade) without knowing how outdated it was, just that it was super outdatedā¦ and I stumbled into the actual time as the only phone you can find with 320w iPhone 5s which was releasedā¦ 
in Sept 2013 so exactly 10 years ago 
I thought that was related to the responsive builder in the sense of the ability to build apps that are responsive and the Flexbox responsive engine was released around 18 months ago.
I didnāt know you were referencing the Responsive tab where people can test and preview the responsiveness of the app. Most the reason I didnāt think the Responsive Builder was referencing the responsive tab is because I do not use the Responsive tab for testing at all because it is a hunk of junk that only got slight modifications when the flexbox system was released (most of which brought functionality of the responsive tab backwards and I and others needed to protest to get them added back in). It is even more of a hunk of junk now with the flexbox system than it was in the past is because it doesnāt incorporate height at all, which is hugely important to testing the responsiveness of the app.
I always use the Firefox Developer Tools Responsive Design Modeā¦I used to use the Google Chrome one, but with the Flexbox system it doesnāt work as well as Firefox.
You may not have known that there was a different Responsive Engine/Builder prior to November 2021, so the Responsive Builder did get updated, not 18 months, but more like 24 months ago now.
Huge improvement over the past Responsive Builder, however, the responsive tab is just as bad or even worse than ever.
No worries. Just providing context for my comment above about 320px. āResponsive Builderā was a poor choice of words