Updated: Long live natural responsive web design breakpoints

Stephanie Rieger, in her posts, “The ‘trouble’ with Ice Cream Sandwich” and “The ‘trouble’ with Android”, points out the myriad little ways that the pixel width of the browser can differ from the default pixel width of the device, from zoom levels to text scaling to browser views embedded within apps that have chrome on the sides of the browser.

If you are using responsive web design techniques (and you probably should be!), then this means that using default media query device-width breakpoints is mostly pointless.

It sounds nice and simple to test your design at 320px, 480px, 720px, 1024px, etc., and simply make changes to your layout at those breakpoints. However, in reality, there are a myriad other breakpoints that are possible, with all the tiny variations described in the articles above.

Not to mention, devices change. Android device manufacturers seems to be competing on who can create the largest, most unwieldy smartphones. Two years from now, the default breakpoints of today may be totally irrelevant.

So, instead:

• Make sure you are using a fluid layout, which can adapt to small changes in browser and device width, in ways that fixed layouts cannot.
• Testing your layout at default breakpoints is not enough. Use a tool like responsivepx.com to find natural breakpoints, where things begin to look awkward.

Use awkwardness as your guideline, not ephemeral default device widths.

Update: Jeffrey Zeldman referenced this post in State of the web: of apps, devices, and breakpoints. Make sure to read his post. I just wanted to clarify a couple things:

First, I love responsive web design! I simply think that using breakpoints based on device sizes (320px, 480px, etc.) isn't the best way to go anymore, because there are so many devices that don't have those device sizes, or because content might not appear within a browser width that matches that default device size. Instead, I still think that breakpoints should be set, but they should be based on the natural breakpoints found within the content, a content out approach. Maybe things look awkward at 350px or 570px or whatever. And the same principle applies if somebody sets breakpoints based on ems, rather than px. I'm just saying to find those points where things start to look wonky, and use that as the basis for a media query. I'm pretty sure Ethan Marcotte has advocated this approach as well.

Also, I did mean fluid design, as in the fluid grids and fluid images, which Ethan discusses extensively.

Update 2: Another thought: it’s not as if you can’t keep using common device sizes as breakpoints. If you are using a fluid grid and fluid images, there is a decent chance that a layout with a slightly different width will still look ok. I think what is important is to acknowledge that those breakpoints are not the only widths your design will encounter on its great adventure through the world wide web. It may be that when your design encounters a browser width slightly larger or slightly smaller than the one you envisioned based on common device sizes, your design may have a sad, and not look quite right. In that case, you might be better off finding a more natural breakpoint that may not exactly coincide with common device sizes, but could of course be fairly similar.