Setting Breakpoints in Responsive Design 122
Lately, I've been blogging a lot about Responsive Design. I've covered the technical side of media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites. Today, I want to talk about setting breakpoints in responsive design. How should you set the breakpoints? What is the general guideline? I'm going to share my view on setting breakpoints.
Do you have a list of generic breakpoints that are commonly used?
Some like to set the breakpoints base on the devices' resolution. For examples: 320px for mobile, 768px for tablet, 1024px or higher for desktop. Personally, I'm not a big fan of setting breakpoints base on device resolution because there are too many devices out there. And what if the device resolution changes? To be more bulletproof, breakpoints should be based on the design and content.
So what is the general guideline?
In my responsive design workflow, I generally test the design by resizing the browser window. Watch how the content flows when resizing and add a breakpoint whenever the design breaks. There is no specific rule on how many breakpoints a design should have. The rule of thumb is to make sure the design and content flow nicely on any viewport width. I will use two of my sites as examples: Web Designer Wall and Best Web Gallery.
Web Designer Wall
On Web Designer Wall, I have 5 media queries: 1000px, 760px, 600px, 480px, and 320px. But in term of major layout changes, I only have three: 3-column with fixed side header, 2-column with top header, and a single column layout where the sidebar drops below content.
The 2-column layout breakpoint is set at 1000px. The single column is set at 760px. The other breakpoints are necessary to ensure the content flows nicely across all breakpoints.
Best Web Gallery
On Best Web Gallery, I have 3 media queries: 1240px, 800px, and 480px. In term of major layout changes, I have two: 4-column and a single column layout.
In this case, I don't think it is necessary to have more layout breakpoints (ie. breaking the 4-column into 3-column or 2-column) because the post container doesn't break on small viewports.
What is your view on breakpoints?
Do you have a different approach or opinion about setting breakpoints? Please comment in this post.
This approach to breakpoints is freakin awesome…keep up the good work.
I let the site build it self… So i guess my break point could be anything really… I dont do moble sites because as u said there are to many devices out there…
“To be more bulletproof, breakpoints should be based on the design and content.”
That’s excellent advice!
setting break points, for testing proposes, is OK. The number it depends on the project but we can easily use:
0-320, 321-480, 481-768, 769-1024 and 1025-1366
covering: MF, S, M, L and XL
setting breakpoints depends on your content, your audience and devices…
You have to deserve the best experience for your user on each device.
For instance, if your website is about photography, images and videos, your audience is photographers, graphic designers (with 26″ wide screen)… you should provide a normal 960px desktop version, a wide screen version, a tablet version, (a TV version ?) and may be forget about mobile phones…
http://www.nealite.fr/blog/wp-content/uploads/2012/06/nealite_responsive_breakpoint.jpg
Yeah that makes sense, especially since photographers and graphic designers don’t have mobile phones
Not sure I can agree with that – unless the website in question has Analytics to support the idea of not being mobile compatible. To ignore mobile all together seems short-sited otherwise – especially considering the common projection of mobile taking over desktop usage by 2016 or sooner.
Very interesting article, thanks. We usually base it on the content. If it looks pleasing, then that’s where it will go, if not then we’ll put the breakpoint elsewhere.
Good stuff Nick :)
Indeed, a manageable approach is to allow the content and layout to dictate – what I would call – “hard” breakpoints. When a design “breaks” when you re-size your view, that’s a good indication that a hard break-point is required (an overall layout shift). When re-sizing and certain areas look a bit odd, then it’s perhaps a good idea to add a “soft” break-point (something which merely tweaks one or more elements on the page to suit). A fluidity should cover all points in-between.
For anyone interested, this is “How I’m skinning my responsive cat”:
http://www.kevadamson.com/talking-of-design/article/how-i-am-skinning-my-responsive-cat :)
I also like your view of breakpoints. Though I instinctively followed that anyway.
I use Foundation (by Zurb) as my responsive framework. They based their framework off of lots of device testing but occasionally I will change the breakpoints to occur sooner if the design needs it to.
Definitely have to be conscious about setting breakpoints…I know how frustrating it is to see a great design sullied by horrible display. Great post!
Thank god. I just built my first fully responsive website and instead of using device specific breakpoints I resized the browser and made a note of when it broke.
To help I wrote a little script which outputs the current viewport width to an absolutely positioned div so I know what the break point should be. I’m sure there’s something better out there but it really helped me decide.
Really really glad I read this. I had it at the back of my mind that they should all match the devices but went against that.
Thanks for the reassurance.
Chris
Very much agree. As Mathieu said above, it will depend on content, but I’ve always advocated to the people at my company that if we are doing a responsive design, we absolutely do not base it off of devices (or solely devices). Of course, it was the first thing they wanted to do (“Let’s make an iPhone, iPad, and desktop layout… that should do”). I was easily able to convince them that not only are you cutting out who knows how many devices, its also easier to maintain both now and in the long run.
The article that made me want to go with the “design breaks” approach was this article: http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
So far it works very well and makes much more sense than doing a “device breaks” approach.
Great read! I agree 100%. You never know what tomorrow’s device dimensions are going to be. I’d rather do it this way, than design a 100 sites and have to redo all of them in a years time…
I would like to add though, I do believe the way you set breakpoints and the way you “do” responsive design is exactly that. Responsive. I don’t believe that setting generic breakpoints is responsive design, that’s adaptive design.
I’ll leave you with a quote from Jeffrey Zeldman: “Our understanding of ‘responsive design’ should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.”
P.S. Here’s a really cool Chrome extension that shows you your browser dimensions when resizing it to help determine where your breakpoints are… https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh
I think this is great. I agree with your method. I don’t have generic breakpoints, but I resize the window width gradually from large to small until I can’t go smaller. If the transition is not smooth I go back and make a breakpoint where the design breaks. I keep doing this process until every size works. Who knows what screen size someone will use. Sometimes people do resize the window to some obscure size so they can work on other things to the side.
Hi,
As mentioned via the twitters I kinda think that some ‘generic’ breakpoints aren’t a bad thing. If like me you can ‘see’ what a design might look like (albeit in your head) on a phone or tablet then you might as well start with some breakpoints to work out those designs.
I wrote about this here –
http://alwaystwisted.com/post.php?s=2012-04-28-a-common-set-of-breakpoints-to-start
Good writeup. Really important to think about structure of your site before even starting. I’d say the trend will be — think mobile, then think desktop.
Start mobile first, expand until it looks like shit. Pretty good rule to follow!
Thank You for Best Web Gallery. Very interesting and inspiring resource.
Yeah totally agree, that’s the way I approach it. Refresh, resize, adapt. Rinse and repeat.
I use breakpoints the same way.
But I make sure my page has at least 3 media queries: desktop, tablet and mobile. Not the hard sizes, but just something around there and fitts with the lay-out.
Why I do that? That’s because of the Responsive Typography, text should be other sizes on different devices. Some interesting article is: http://informationarchitects.net/blog/responsive-typography-the-basics/
PS: You first 2 intro sentences are just spamming links to other articles, aren’t they? :)
absolutely useful website. but I think the breakpoint is based on content and structure about the website you designed.