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.
Thanks for the article! It’s hard though with all the different screen resolutions…
Breakpoints give me issues sometimes, thanks for the great article
Thank you for this helpful haring about Responsive Design, media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites.Its really help every one a lot.Thank you so much great article,..
Thank for the article. It helps a lot regarding breakpoints.
Hello,
With your breakpoints, do you use max-width or max-device-width?
This can depend on what you’re trying to achieve. If it’s some sort of fix that you’re applying to only devices, I would use max-device-width. For general media queries, I prefer max-width, for smaller computers and in case a user-agent isn’t detected as a device.
Hey !
This is an effective post. Well after reading this post i totally agree with you on setting breakpoints.
Thanks.
Brian
Interesting article. Was wondering what happens now with retina displays? Essentially tiny iPhone screens that have nearly the resolution of a computer. If we use pixels to determine break points a website may not adapt, for example, on an iPhone 5, which has a 1136×640-pixel resolution at 326 ppi, if you see what I mean?
I was making a design with 3 classic breakpointsm, but suddenly I saw that my design was looking better by adding a new breakpoint.. but then I though “why” I have not seen yet 4 breakpoints.. and I had a quite a hard job to understand myself, but thnaks to this article I see I was not wrong at all. I agree with your oppinions here!!
Thank you
I’m seeking tips on how you can boost the volume of feedback by myself weblog, just how would you succeed in doing this?
Electronic commerce is generally considered to be the sales aspect of e-business. It also consists of the exchange of data to facilitate the financing and payment aspects of business transactions…^
Catch ya later
<http://www.caramoanpackage.com
Excellent post.. Setting break points in Responsive design are awesome i like it.
Excellent post. Break points are one of the best responsive design which you could ever have for your website.
Thanks