Setting Breakpoints in Responsive Design 96
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 admire the valuable information you offered in your article Keep inspiring your readers thanks.
Great info, please keep on posting such informative post.
I am able to agree with you. The project is responsive means a good look at any rozdzielczości.Takie points in helping.
Just what I was looking for! Thank you very much for this article.
thank you for sharing this experience
very useful for proving
thanks
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.
Helpful information, great article
I really really agree with ur point of view u r right
http://www.gridpak.com/ Gridpak is a great tool for setting breakpoints.
طراحی سایت ، طراحی وب سایت ، برنامه نویسی وب سایت
، سی دی مالتی مدیا
please see my web site design
That’s a fantastic article. Many thanks
I love your site and all the articles you post.
Thank you for being out there, you are great inspiration.
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.
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!
Your post reflects extensive research..
Very helpful information. Many thanks
The project is responsive means a good look at any rozdzielczości.Takie points in helping.
awesome heads up!
thanks for the useful info!
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.
Great article. I was basing breakpoints on resolutions. An eye opener and I’ve definitely learnt my new thing today.
Thank you