What Responsive Sizes Do You Normally Build?

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 :sweat_smile: 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 :rofl:

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! :point_down:
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… :drum:

in Sept 2013 so exactly 10 years ago :slight_smile:

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