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.

web designer wall breakpoints

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.

best web gallery breakpoints

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.

post container

What is your view on breakpoints?

Do you have a different approach or opinion about setting breakpoints? Please comment in this post.

96 Comments

Jaap
Jun 6, 2012 at 11:40 pm

This approach to breakpoints is freakin awesome…keep up the good work.

john
Jun 7, 2012 at 1:57 am

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…

Paul van der Heyde
Jun 7, 2012 at 2:46 am

“To be more bulletproof, breakpoints should be based on the design and content.”

That’s excellent advice!

Leo Lanese
Jun 7, 2012 at 3:07 am

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

Mathieu AV
Jun 7, 2012 at 3:41 am

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

Brett Jankord
Jun 13, 2012 at 8:30 am

Yeah that makes sense, especially since photographers and graphic designers don’t have mobile phones

Ryan
Jun 18, 2012 at 1:41 am

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.

Web Design Wolverhampton & Birmingham
Jun 7, 2012 at 3:46 am

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.

Kev Adamson
Jun 7, 2012 at 3:48 am

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 :)

Ethan Hackett
Jun 7, 2012 at 7:42 am

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.

Dexter Adams
Jun 7, 2012 at 7:47 am

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!

Chris
Jun 7, 2012 at 8:19 am

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

Jon
Jun 7, 2012 at 10:36 am

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.

MJ Meyer
Jun 7, 2012 at 11:09 am

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

Sue
Jun 7, 2012 at 1:57 pm

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.

Stuart Robson
Jun 7, 2012 at 2:14 pm

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

Skweekah
Jun 7, 2012 at 8:54 pm

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.

Eric
Jun 7, 2012 at 11:17 pm

Start mobile first, expand until it looks like shit. Pretty good rule to follow!

Slavyanskiy Boy
Jun 8, 2012 at 12:30 am

Thank You for Best Web Gallery. Very interesting and inspiring resource.

Nick
Jun 8, 2012 at 12:13 pm

Yeah totally agree, that’s the way I approach it. Refresh, resize, adapt. Rinse and repeat.

Wouter J
Jun 8, 2012 at 4:57 pm

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? :)

custom icon design
Jun 9, 2012 at 4:42 am

absolutely useful website. but I think the breakpoint is based on content and structure about the website you designed.

Mohammad
Jun 9, 2012 at 6:47 pm

I think you hit the nail on the head when you said that you can’t simply use the different device resolutions to set break points.

My belief (and experience) has been that the breakpoints COMPLETELY depend on the layout of the site. There’s no telling what breakpoints are necessary until you know what elements you are dealing with.

That’s my main complaint against responsive grid frameworks such as twitter bootstrap. Sure, its great to have a set of “defaults” for how columns should act. But what if one of your elements spans a few columns but shouldn’t “break” until a certain width (other than the standard resolution points) is reached? Then you’re stuck reassembling the layout and hacking up what was set as a default action in the framework.

End of the day, if you are creating truly custom layouts, you will need to utilize a truly custom set of actions – including media query break points.

The market value of this comment is .02 cents, of course.

Shubham Sharma
Jan 16, 2019 at 3:38 am

Indeed an awesome article to refer. Thank you, Mohammad.

Alessandro
Jun 12, 2012 at 3:27 am

I would say that each design will present its own challenges when resized. This means that breakpoints should vary from project to prject to accomodate the new resized design. I fully agree on the article.

Mitch
Jun 12, 2012 at 1:37 pm

Agreed. The goal of responsive design is to look good at any resolution. That means taking advantage of however many pixels the user may have. In my workflow I prefer to let the design elements define their own break points.

robe avocat
Jun 13, 2012 at 4:00 am

usually, i used to set breakpoint to 980px, because it’s seems to be the most common (pc) resolution. (1024 – the scroll bar on the right side). but, you can try to make full liquid design, which is more adaptable but more difficult to succeed. but bmore beautiful too :)

Maneet Puri
Jun 13, 2012 at 8:10 am

Great and really informative! I agree with @Mitch. A ‘Responsive’ web design is all about making a website user-friendly and setting breakthrough points in a responsive website depends on the site design. A responsive website may look good at any given resolution but certain website elements prove to be a vital deciding factor when it comes to setting breakthrough points!

Suzi PPC
Jun 14, 2012 at 9:33 am

Absolutely agree. Design and content first, then when it looks awkward/broken then bring on a breakpoint.

Rex
Jun 17, 2012 at 9:43 pm

It’s fun.

Ryan
Jun 18, 2012 at 1:36 am

I think CSS-Tricks has an amazing responsive system. I’ve looked over it a million times for my projects and get stumped on how it’s so freakin smooth during transition (not to mention that kick ass little frog that changes with it!). I’m guessing that it utilizes some crazy combination of set breaks and JavaScript. I think it’s a site to be modeled after on “perfect responsive utilization”.

TheloniusMonk
Jun 29, 2012 at 8:38 am

Yeah it’s nice. That little frog has got some serious swagger! Smashing Mag is also crazy in terms of it’s responsiveness.

Nick, your tutorials rock, and your site design; man I can’t get enough of it. The drawing you’ve got at the top… Just Beautiful!

Best.

patent search
Jun 18, 2012 at 4:43 am

In today’s market responsive website has too much important because everybody want to see their website in all screen like web, mobile, ipad, etc. So we should make it in responsive form. And above points are very much useful for making it more easy. Thanks a lot for sharing this blog.

Carl Brown
Jun 19, 2012 at 9:00 am

Responsive web design and break points are one of those new ideas that is blurring the lines between the science of web development/ user interface design and the art of design.

It has to do more than just look good. We have to remember that it’s about creating an elegant and seamless user experience that works effortlessly on all device resolutions.

there is no formula for that. it takes a fresh take and original thought about what the content you have to display is and why you display it.

I’ve worked with everything form 2 to 5 breakpoints in projects and there is no magic number.

the new MacBook Pro with retina display is going to change the way we think about that again. And probably require some of it’s own new considerations for high pixel density screens.

picjew
Jun 19, 2012 at 2:04 pm

Thank you
It was a great help

طراحی وب سایت
Jun 19, 2012 at 7:16 pm

Thanks dear

Chris Devlin
Jun 20, 2012 at 5:35 am

I agree with @Alessandro. The break point will vary for each every project according to the design.
Very useful comments regarding responsive design. Thanks all.

Paul
Jun 20, 2012 at 11:58 am

I think many people miss the importance of responsive design. While I agree that one cannot predict the various screen resolutions in which a site is viewed, you can choose the most common sizes based on market usage. I start down at 240 and work up through the largest layout set by the designer. I have yet to find a screen size that my sites have not looked optimal in. A true responsive layout should be constrained to only the layout … use different images for the different sizes of your media query to ensure your site is still fast loading for small devices … and PLEASE be respectful of peoples download usage on mobile, note that most mobile providers are charging users for a fee for data usage … A 10 mb image scaled down for 320 is still a 10mb file … . The sites that I have developed using responsive all take a unique perspective tot he layout by switching imagery up on various size layouts.

Webdesign - NL
Jun 20, 2012 at 3:38 pm

Image dimensions are the biggest problem with most websites. Luckily our own CMS is able to dynamically resize / resample / crop and compress images on the fly so they suit the needs of the visitor. When we find out a certain sizes needs more compression the system uses the original image to fix that. Makes our work a lot easier ;-)

Glen
Jun 28, 2012 at 12:42 pm

A quick note, just because someone is using a mobile phone doesn’t mean they’re viewing your site on it. They could be tethering and looking at it on their laptop with a larger screen. How in the world are you going to account for users that tether devices?

Moreover, today’s image tools allow us to optimize larger images better than ever (i.e. 450 x 300 @ 16k isn’t all that bad). There are sites that use scripts larger than that.

Developers and designers need to work together to optimize their entire site. Images aren’t the only type of file with size that can swallow your data usage. I would bet scripts consume just as much data, or more than the images do.

I’m not against optimization and I absolutely love responsive design, so don’t get me wrong. Just saying there’s more to it than images alone.

Bakirkoy Arcelik Servisi
Jun 22, 2012 at 6:23 pm

Thanks for sharing.
arcelik beyaz esya servisi bakirkoy

Kenzie
Jun 22, 2012 at 7:19 pm

Shrink, Share & Get Paid!
Go To http://netfly.com/?r=1 to get paid for your posted links!

Chris
Jun 23, 2012 at 10:19 am

I agree that designs vary from project to project. Breakpoints should be applied as needed. Great post and comments!

YJA
Jun 28, 2012 at 5:49 am

Ho’oh aku nganggo iki cung :D
max-width: 1000px
max-width: 850px
max-width: 700px
max-width: 550px

ex:
http://aku.cahcepu.com

uxzeal
Jun 30, 2012 at 12:44 am

Impressive Article…

Debbs Hosting
Jul 7, 2012 at 2:46 am

Great tips! When I design sites, usually, this is the part that frustrates me the most. Yes, everything looks in place when you put the site together but sometimes, we tend to overlook this aspect that can be very important to the overall image of the site.

Jeremy Stroud
Jul 10, 2012 at 6:09 pm

I try my best to do liquid designs no matter what the final look will be just to avoid problems when viewing on new platforms. That said, choosing a breakpoint or two that work for the project is a fantastic idea and really helps avoid the problem of too many media queries that I’ve seen some come up with.

modernlogodesign
Jul 11, 2012 at 6:37 am

I admire the valuable information you offered in your article Keep inspiring your readers thanks.

Mariya
Jul 13, 2012 at 5:08 am

Great info, please keep on posting such informative post.

Agencja reklamy Bielsko
Jul 17, 2012 at 10:30 am

I am able to agree with you. The project is responsive means a good look at any rozdzielczości.Takie points in helping.

Prasad Sambari
Jul 19, 2012 at 10:56 am

Just what I was looking for! Thank you very much for this article.

Thiet ke logo
Jul 23, 2012 at 11:02 pm

thank you for sharing this experience
very useful for proving
thanks

Ryan Whitlie
Jul 25, 2012 at 4:33 pm

Hey thanks for sharing this. My first experience with media queries was using breakpoints to create an adaptive website. I’ve used other techniques, js, fluid layouts etc but I still almost always come back to lovely break points!

I think it’s because I just like the way you get a sort of snap each time the site layout changes a bit. It’s kind of an ergonomic thing I guess but I prefer it.

sam wightwick
Jul 26, 2012 at 5:33 am

Helpful information, great article

Ajeet Singh Baddan
Jul 27, 2012 at 1:07 am

I really really agree with ur point of view u r right

Matt
Jul 31, 2012 at 3:38 am

http://www.gridpak.com/ Gridpak is a great tool for setting breakpoints.

طراحی سایت
Aug 3, 2012 at 5:32 am

طراحی سایت ، طراحی وب سایت ، برنامه نویسی وب سایت
، سی دی مالتی مدیا
please see my web site design

gillian
Aug 6, 2012 at 6:49 am

That’s a fantastic article. Many thanks

Iwona
Aug 7, 2012 at 1:54 pm

I love your site and all the articles you post.
Thank you for being out there, you are great inspiration.

Chicago Website Design
Aug 8, 2012 at 8:33 am

First, great article, extremely informative. It’s interesting that it’s referred to as responsive design…isn’t web design supposed to illicit a response. Wouldn’t it be reasonable to refer to it as “Effective Design”. It still amazes me that the majority of so called “Web Designers” don’t implement responsive design.

Paul Johns
Aug 8, 2012 at 8:36 pm

Thanks, this article (and your advice in it) makes sense. About to jump in to making a basic web site with a responsive layout. Wish me luck!

rickymartin
Aug 11, 2012 at 6:37 am

Your post reflects extensive research..

Sandhya
Aug 17, 2012 at 9:02 am

Very helpful information. Many thanks

Alquiler yates Ibiza
Aug 17, 2012 at 11:11 am

The project is responsive means a good look at any rozdzielczości.Takie points in helping.

Web Design Malaysia
Aug 19, 2012 at 1:01 am

awesome heads up!

thanks for the useful info!

David Joe
Aug 20, 2012 at 5:38 am

Leading Website Design and Development company in India offering web application development, logo, flash, web 2.0 design, custom web application and SEO services. For more information logon to: http://www.itsinindia.com we provied 24×7 hours client support.

Alex Jones
Aug 21, 2012 at 8:01 am

Great article. I was basing breakpoints on resolutions. An eye opener and I’ve definitely learnt my new thing today.

Thank you

Rob
Aug 23, 2012 at 12:58 am

I have been toying with breakpoints all week as I found my design for my portfolio not working on smaller resolutions. I am using a background video as well and I didn’t want it to show on smaller resolutions. I set the main one at 1100px, lower than that and no video for you :)

hannahwimble
Aug 23, 2012 at 7:04 am

Tech Tron provides a full suite of world class, professional web design services providing the tools andexpertise to grow your business. At Tech Tron we believe that success starts with strong foundations,
understanding your customers, your goals and a complete focus on your onsite presence including SEO (Search Engine Optimization), Web design, functionality and Graphic Design. Implementing cutting edge technology solutions with clean functional balanced designs will help your customers flow through your website and ensure you stay ahead of the competition.
Whether you are looking for simple website or full automated ecommerce solutions, Tech Tron will help you grow your online business ahead of your competition.

Rob
Sep 11, 2012 at 5:29 pm

SPAM POST

Brianna Deleasa
Aug 25, 2012 at 9:34 am

I just recently started to dive into responsive themes. I absolutely love the idea, it’s brilliant. For my blog/portfolio I chose to have 2 (well, 3) breakpoints. Everything above 768px, between 768px and 620px, and everything smaller than 620px.

I hadn’t planned my layout to be responsive, so I did that on the fly. These worked best for my layout and they look well on screens, tablets, and mobile devices whether portrait or landscape.

meddin
Aug 26, 2012 at 11:30 pm

I admire the valuable information you offered in your article Keep inspiring your readers thanks.^^

meddin
Aug 26, 2012 at 11:31 pm

thanks.^^

seo
Aug 30, 2012 at 2:54 am

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!

WordPress Desk
Sep 1, 2012 at 5:25 am

The article is excellent sharing valuable tips..Good job.

Richelle Anderson
Sep 9, 2012 at 1:17 am

I recently attended An Event Apart and had the privilege of hearing Luke Wroblewski he suggests starting with mobile and growing the site out as the design calls for it. The easiest way to explain it is to say set the breakpoint when the design breaks. You still must factor in the sizes of devices but there are so many that it is next to impossible to get them all spot on without a huge headache.

Alquiler yates Ibiza
Sep 9, 2012 at 3:18 am

Understanding your customers, your goals and a complete focus on your onsite presence including SEO (Search Engine Optimization), Web design, functionality and Graphic Design. Implementing cutting edge technology solutions with clean functional balanced designs will help your customers flow through your website and ensure you stay ahead of the competition.

Rob
Sep 11, 2012 at 5:33 pm

The post from “Alquiler yates Ibiza” is a SPAM POST

Janelle Dawn
Sep 12, 2012 at 1:52 am

Can i ask?? Is it easy to create a website in html??

Rhea Alonzo
Sep 17, 2012 at 11:48 pm

Thanks for the tips and info about breakpoints! Very helpful article!

Richard Perez
Sep 20, 2012 at 12:39 am

Helpful and very informative indeed

Wordpress installations
Sep 20, 2012 at 7:57 pm

Totally into responsive designs, its definitely the way of the future for modern web design and a cost effective alternative to developing a complete web app for mobile devices! Cheers :)

Banhawi
Sep 20, 2012 at 11:38 pm

Breakpoints are awesome to create different customized experiences to each screen resolution rather than just having an any-resolution adapting design.
Helpful read, Thanks.

Social Fire
Sep 21, 2012 at 8:46 pm

I usually use generic breakpoints, is that okay?

design-responsive-website
Sep 22, 2012 at 10:50 pm

awesome

Web Design Malaysia
Sep 22, 2012 at 11:59 pm

thanks for the great pointers!

Websites Cheap
Sep 23, 2012 at 1:01 am

Incredible post

Brisbane Website Designer
Sep 23, 2012 at 4:07 am

Your guidelines are incredible, thank you.

Serkan
Sep 23, 2012 at 5:20 am

My breakpoints are also usually based on design and content. This way you have more control over your design, because there are indeed too many devices.

Design Drop
Sep 23, 2012 at 10:11 am

Thanks for showing us how to set breakpoints. Worth reading!

How To Make Websites
Sep 24, 2012 at 6:38 am

General guidelines that you gave me is very helpful

alin
Oct 11, 2012 at 2:55 am

very nice tricks.

Rahul
Nov 15, 2012 at 1:24 am

Setting breakpoints are necessary for the website.because if we want to run our website on different device then we have to set the breakpoints but it should be in flexible manner.so choose the breakpoints wisely.

Transcendit
Nov 15, 2012 at 11:57 am

I’ve never encountered the issue yet mainly because I’ve never tried the latest MacBook Pro with Retina display but do high res monitors and mobiles devices have different breakpoints due to their high res definition?
In normal circumstances, I would use things like Twitter Bootstrap where main breakpoints are set for you (for quick jobs) but obviously work on a more tailored approach for more complex responsive sites…
What’s your views on High Res display?

Jim Gallaher
Dec 1, 2012 at 2:24 pm

Good advice for starting on a responsive design. My biggest question is how to best deal with large images?

Afzal
May 26, 2013 at 2:35 am

Sometimes I have to face problems because of break points but now all points are clear to me .. Thanks to your article.

Cleaning aids
May 26, 2013 at 9:50 am

Hello !
This is quite impressive. I liked this concept of breakpoints.
This is post is helpful for all of us.
Thanks.
Cleaning aids

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.