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 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 :)
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.
SPAM POST
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.
I admire the valuable information you offered in your article Keep inspiring your readers thanks.^^
thanks.^^
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!
The article is excellent sharing valuable tips..Good job.
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.
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.
The post from “Alquiler yates Ibiza” is a SPAM POST
Can i ask?? Is it easy to create a website in html??
Thanks for the tips and info about breakpoints! Very helpful article!
Helpful and very informative indeed
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 :)
Breakpoints are awesome to create different customized experiences to each screen resolution rather than just having an any-resolution adapting design.
Helpful read, Thanks.
I usually use generic breakpoints, is that okay?
awesome
thanks for the great pointers!
Incredible post
Your guidelines are incredible, thank you.
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.