Deciding your Media Query Breakpoints

Deciding your Media Query Breakpoints – Responsive Web Design

written by William Patton on March 5, 2013 in Web Development with 2 comments

← older posts newer posts →

When it comes to responsive web design there are two primary methods of response. Fluid Layouts and Adaptive Layouts. Fluid layouts rely on setting widths as percentages to make everything scale depending on the screen size while adaptive adopts fixed width design and media queries to re-size the content depending on the screen’s size normally using common device sizes in the media query as the breakpoint. Remember that the nav menu is going to be the hardest part of building a responsive design for someone unfamiliar with CSS/Javascript so you might want to check out how to make responsive menu in wordpress.

Responsive Layouts

One could argue that there is a third layout type. Responsive Layouts. I feel that both Fluid and Adaptive layouts have their own flaws and merits and a combination of both is the best way to approach things and that’s sort of what responsive layouts are. I first read about this kind of design from Stéphanie Walter on OneXtraPixel and I agree with it wholeheartedly. Breakpoints should be set when it looks right to do so, not simply based on common device widths.

Fluid Responsiveness – If you have a standard site design consisting of a header, content area, sidebar and footer then a purely fluid layout would run the risk of squishing the content in the sidebar but it’s layout does respond to re-size perfectly.
Adaptive Responsiveness – This one is more of a designers flaw than a flaw directly of adaptive design. There is always a risk of creating separate versions of your site. Separate mobile, tablet and desktop versions are the very things that responsive design attempts to combat. The point of responsiveness is that it’s the same version of your site for every device not simply custom build versions for each device.

Media queries should never be directly employed to create entirely new versions of your site and I noticed an article the other day titled Tweakpoints. The term tweakpoints tends to put across the general idea of breakpoints a bit better than the official terminology.

Of course it still makes sense to use some common device sizes as a starting point – like 320, 480, 768, 1024, 1280 or even higher if you want – but don’t be afraid to deviate or add and remove some where appropriate. 5 media queries is a good amount for a responsive css boilerplate, don’t go too crazy with the amount you use because it’s always best to start out using the most efficient css selectors possible. For me, as I’m building a WordPress theme framework with speed as one of the core missions, efficient css means speed but there are other good reasons to be efficient too.

Fully Responsive Web

A truly responsive layout is one that takes a content focused approach to the design. The design should be fluid and adapt when it looks right.

Consider this: a mobile first approach to the design with a fluid layout. You discover that the search button text “Search this site” is too small to read on your phone. When you test it using window re-sizing you see that the original text becomes readable only at 500px but the closest device size is 480px and it still doesn’t fit at that size so you change it to “Search this site” on widths above 499px using a @media all and (min-width:499px) media query. That is essentially what Smashing Magazine have done in their responsive layout.

500px will be your breakpoint, you might just use it for the button text and continue with a fluid layout from then on or you could use it to set some things as fixed if you wanted. The point is that if you had stuck to the standard device width media query formula then it wouldn’t work just right, that’s what separates a perfectionist from someone just making things responsive because they’ve been told they need to.

A Mobile First Approach to Responsiveness

It’s normal for people to take a desktop design and make it responsive. It’s one way of working but when your starting from scratch it makes more sense to work the other way and take a mobile first approach. Create your defaults and then modify them as the screen real estate increases.

In the desktop first approach things on mobile wind up getting hidden or pushed away out of view to make things fit. When you do it the other way around you simply add things that make use of the additional space, while it still ends up that elements are hidden or shrunk on mobile it’s not because things have been removed. It provides the best experience to your audience as a whole by building from the bottom up.

The Theme-Dev WordPress Framework

If your interested responsive design then consider taking a look at my CSS3 and HTML5 responsive WordPress framework built using mobile first responsiveness with a content focused approach, optimized for SEO, speed and ease of use then check out the Theme-Dev progress.

About Theme-Dev

PattonWebz