At what width do you go responsive/mobile?

[siouxfan45]

I’ve seen many sites switch to their mobile menu at different widths and I’m curious what you think the widely accepted standard should be. I see a lot of sites shrinking things up between 800 and 1000 px. What’s the logic?

[chrisburton]

Usually whenever the design needs to break but also keep in mind of the width of devices.

[Melindrea]

I don’t think there can be a standard. It all depends on the design. After all, how long is a piece of string?

I’d overall try to avoid going from a “desktop” menu to a “mobile” menu (the understanding here being some kind of “hidden with a trigger”) until around 600px (ish), but it’s depending on the actual menu, not on theoretical “would be good”.

If you have a horizontal menu with many items, see if it can look decent in double-rows as an intermediate, for instance.

[nixnerd]

I think just like @JoshWhite said… you should code in such a way that ideally, there are no breakpoints. That being said, every design I code has about 3.

You should try as much as you can to make the breakpoints around the size of a laptop, tablet and smartphone.

There are no hard and fast rules because devices come in MANY different sizes. But give it your best shot.

Also, make sure to set a max-width on your wrapper or whatever. You wouldn’t believe the amount of people who have HUGE monitors. The trouble is… it’s REALLY easy to test the look of your site on smaller screen sizes. There are tons of tools for that. It’s a lot harder to test your site on a LARGER screen than what you code on. I’ve used some tools that attempt to do it but it’s kind of ghetto. Lots of scrolling, so you don’t get a real good picture of what’s going on. Just save yourself the headache and set a max-width.

[Author]

Posts