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.
Thanks for showing us how to set breakpoints. Worth reading!
General guidelines that you gave me is very helpful
I agree setting breakpoints is not wise when a lot of visitors access our website from Mobile Phones and Tablet PC’s that have different screen resolutions
very nice tricks.
Designers are constantly trying to adapt their designs to the way devices are made but it’s inevitable that new technology will come out that changes the game all over again. We should build sites and not have to make hacks, eg. for IE and resizing like in your article, but rather let the companies adjust their tech to the web.
I’m not saying it’s a bad thing to make things responsive but we shouldn’t have to be the ones to take on the heavy load.
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.
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?
Good advice for starting on a responsive design. My biggest question is how to best deal with large images?
hmm its a good tecnique.thanx for sharing
General guidelines that you gave me is very helpful
Thanks for showing us how to set breakpoints. Worth reading!
I agree setting breakpoints is not wise when a lot of visitors access our website from Mobile Phones and Tablet PC’s that have different screen resolutions…
The article is excellent sharing valuable tips..Good job.
Found this article and it gave great insight to breakpoints! Thanks.
Same approach and opinion i have but the fixing point is useful.
Nice article! Hope you write more in this direction! :)
Hello,
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
Thank you
yes true. I guess breakpoints makes your website looks good. :)
I want to set a breakpoint in my responsive design and i will try it for sure. :)
Thank you
Great thanks !