Responsive web design default breakpoints are dead

Submitted by Marc Drummond on

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.

Tags: 

42 Comments

Agreed

Submitted by uxdude (not verified) on

I agree, though our organization (a big one) decided to go with 2 set breakpoints for our first responsive site design. However, this has been acknowledged as only a stepping stone as we learn and get better at making responsive design the norm here.

We're Designing for Break points, and testing in-between

Submitted by aidanfoster on

We're working though a batch of our very first responsive web projects and finding there's lots of trailblazing to be done with simple things like file, and coding conventions. Like yourself we're Drupal users so that opens a whole other can of worms. Responsive design is turning out to be equal measures of frustrating (simple fixes take a long time) and fun (then it works on everything!).

We're using the common breakpoints for the creative designs, then creating fluid grids layouts from them starting with the smallest mobile device. Then we use the old "drag the browser" to test the sizes in the middle. Strange bugs like text overlapping and will happen so we fix those. Time consuming but it works.

Is this the practice you're suggesting? Any pointers are very welcome.

Yes--always use natural breakpoints

Submitted by Zoe Gillenwater (not verified) on

I totally agree with everything you say! I've always thought the only logical way to go about media queries on liquid layouts is to place breakpoints where the design starts looking awkward. That's what I did in my media queries chapter of Stunning CSS3, written over a year ago now. This is one of many things I don't like about responsive web design frameworks--the dependence on common pixel resolutions for the breakpoints. I've always been a roll-your-own kind of girl. :-)

Superb Topic

Submitted by Chandra (not verified) on

I like the way to know more about the responsive web design. I always hear most of the web designers creating responsive web templates but i didn't understand what does it mean but now i understand by your this topic, thanks for your article.

RedFox Magazine

PREACH!

Submitted by knosleep (not verified) on

Lol. Me and a coworker are the two main advocates of Responsive Web for a fortune 100 co. We really appreciate your post. We had that "YES! we just talked about that!" moment. It gives us a sense of community while we're coding, doing small talks (corp. justification), and fighting the good fight on the web frontier. Keep up the good work Marc.

Web design has a fairly

Submitted by santa (not verified) on

Web design has a fairly recent history, it can be linked to other areas such as graphic design. However web design is also seen as a technological standpoint. It has become a large part of people’s everyday lives. It is hard to imagine the Internet without animated graphics, different styles of typography, background and music. Thanks.
Regards,
website design company

Typography in websites should

Submitted by painters Dallas TX (not verified) on

Typography in websites should also be careful the amount of typefaces used, good design will incorporate a few similar typefaces rather than a range of type faces. Most browsers recognize a specific number of safe fonts, which designers mainly use in order to avoid complications. Thanks.
Regards,
painters Dallas TX

The web design is normally

Submitted by reverse email search (not verified) on

The web design is normally used to describe the design process relating to the front end design of a website including writing mark up, but this is a grey area as this is also covered by web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines. Thanks.
Regards,
reverse email search

The person designing is

Submitted by santa (not verified) on

The person designing is called a designer, which is also a term used for people who work professionally in one of the various design areas, usually also specifying which area is being dealt with such as a fashion designer, concept designer or web designer. A designer's sequence of activities is called a design process. The scientific study of design is called design science. Thanks.
Regards,
reverse email

Amazing thoughts you have! No

Submitted by John (not verified) on

Amazing thoughts you have! No more chasing high and low (resolution) makes now sense. Thank you for that.
What about making just fluid design (% and em) and using media queries only for small devices like smartphones? I think that’s the way I’ll go – with one breakpoint – for most of my projects.
Website design services

Designing often necessitates

Submitted by santa (not verified) on

Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. It may involve considerable research, thought, modeling, interactive adjustment, and re design. Thanks.
Regards,
Desert Ridge Homes

Do you really think that

Submitted by cioara (not verified) on

Do you really think that users will profit by getting these features? I can imagine lots of really confused (non-power-) users in the future. Some (like the accessibility options) are useful and necessary, of course. But all in all I think that it will be impossible to foresee what a website will look like on a particular device. I’d rather see designers and developers do what’s necessary to create a compelling user experience than Google or other websites related to bookmakers offering lots of different options (which will lead to placing the burden on the users to find the right settings for a certain site).
I think it might end up like this: “let’s do it someway, we can’t what it’ll look like on the users device anyway. They will just have to go and adjust their settings to make it work somehow.”

Web design is a broad term

Submitted by santa (not verified) on

Web design is a broad term covering many different skills and disciplines that are used in the production and maintenance of websites. The different areas of web design include web graphic design, interface design, authoring; including standardised code and proprietary software, user experience design and search engine optimisation. Thanks.
Regards,
Click Here

Finally..!!

Submitted by Jared (not verified) on

We're using the common breakpoints for the creative designs, then creating fluid grids layouts from them starting with the smallest mobile device. Then we use the old "drag the browser" to test the sizes in the middle. Atleast I do it while testing my motivational posters website for resolution-related issues and so forth. Strange bugs like text overlapping will happen so we fix those. Time consuming but it works.

hi

Submitted by asasd (not verified) on

I like this kind mutual communication very much. I can learn much from that. The opinion that everyone gives also can be as useful information.
i beam supplier

Nice oNE

Submitted by marshalreon on

Definitely agree with what you explained. Your explanation was certainly the easiest to understand. Tell you something, I generally get irked when folks discuss issues which they plainly don't know about. You managed to hit the nail correct about the head and explained out everything without complication.
Essay Help- Write My Essay -University Essays

I am sure that anyone would

Submitted by jasmeen (not verified) on

I am sure that anyone would like to visit it again and again. After reading this post I got some very unique information which are really very helpful for anyone.Seo This is a post having some crucial information.

Add new comment

More information about text formats

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><p><h1><h2><h3><h4><h5><h6><blockquote><div><span>
  • Lines and paragraphs break automatically.

Pingback filter

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.