Setting Breakpoints in Responsive Design 121
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.
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.
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.
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.
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 :)
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!
Absolutely agree. Design and content first, then when it looks awkward/broken then bring on a breakpoint.
It’s fun.
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”.
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.
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.
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.
Thank you
It was a great help
Thanks dear
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.
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.
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 ;-)
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.
Nice webdesign article!
Thanks for sharing.
arcelik beyaz esya servisi bakirkoy
Shrink, Share & Get Paid!
Go To http://netfly.com/?r=1 to get paid for your posted links!
I agree that designs vary from project to project. Breakpoints should be applied as needed. Great post and comments!
Ho’oh aku nganggo iki cung :D
max-width: 1000px
max-width: 850px
max-width: 700px
max-width: 550px
ex:
http://aku.cahcepu.com
Impressive Article…
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.
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.