Recently I wrote about media queries and how they can be used to serve up device sensitive styles based on logical conditions; like maximum and minimum widths, heights, screen orientation, and more.
You can use these media query logical conditions to create ranges, where when the condition is met, certain styles and content will be served or revealed, and other ranges where it will not be. The point at which the conditional logic switch is flipped on or off is referred to as a "breakpoint".
Here's a practical example, let's say you want to render fonts at 15 pixels for screens that are less than 1024 pixels wide, and at 20 pixels for screens that are 1024 pixels wide or greater. In this case your logical condition would test for minimum widths. When screen size widths fell below 1024 pixels, the breakpoint, the
font-size: 20px style would no longer be served, and the
font-size: 15px style would be served in its place.
Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.
- Defining Breakpoints
What Devices Should You Target?
So now that we can target different devices using breakpoints, which devices should we target?
To answer this question we need to ask another; what devices are my users using? The best source of this information comes from your weblogs, but in general, here are the most common screen sizes out there today:
- 320px (iPhone portrait, default)
- 480px (iPhone landscape)
- 768px (iPad portrait)
- 1024px (iPad landscape)
- 1140+ (Desktops)
So which should you target? Read the following:
When you first begin to work with Responsive Design you will define your breakpoints at the exact device widths that you are looking to target. Most often these are the smart phone (usually the iPhone at 320px and 480px), the tablet (usually the iPad at 768px and 1024px) and finally anything above 1024px.
I hope I didn't hurt your feelings but seriously, you're approaching this in the wrong way.
- Defining Breakpoints
The Right Way
The take away from this quote is don't generalize, start with content and see how it looks on different screen sizes, and then define your breakpoints. But despite this, I don't think it's such a bad idea to start with some common devices you expect your users will visit your site with. Base your breakpoints off of these dimensions, and redefine as content dictates. Here are some common dimensions:
To further refine take a look at StatCounter Global Stats to figure out what devices people are really using today. The following table is based on statistics for North America over a three month period; it looks like there are five devices we should address if we were addressing everyone in North America:
Implementing Your Research
So now I have some basic research, and with it creating breakpoints for all the devices I'm targeting is easy. I like to use a breakpoint mixin when I'm not using Sussy (which is rare):
@if $point == xxs
@media (max-width: 130px)
@else if $point == xs
@media (min-width: 240px)
@else if $point == s
@media (min-width: 320px)
@else if $point == m
@media (min-width: 768px)
@else if $point == l
@media (min-width: 1200px)
@else if $point == xl
@media (min-width: 1400px)
@else if $point == retina
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
What I've done here is applied my research (media definitions from my table), and used variables to designate devices – to easily make changes in one location. I like to use generic variables starting with
xxs (extra extra small) to
xl (extra large) to avoid marrying a specific device name to oyur code base, things change.
Remember, the point of all of this is to give your code a way to say:
Ah ha! You want something from me, but before I give it to you I need to figure out a few things... If your viewport is between this width and this width then you are a [insert-device-name], and therefore you need this code...
The above mixin does exactly that...and to specify what style is returned based on screen size you can write something like this:
In this style any device with a screen size less than 1400 pixels (as defined by the
xl breakpoint) will use a blue font color, and red for everything that is 1400 pixels or greater.
And that's it! Now repeat 50 million times throughout your styles. = )
To drill a point home I quote Happy Cog founder Jeffrey Zeldman:
The most popular size is every size. If you're not thinking in a mobile-first, content-first way, if you're not planning an adaptive or responsive redesign, if you still think we have a standard canvas that ‘everybody’ uses, and if you can't feel the hot breath of mobile singeing the hairs on the back of your neck, you don't deserve to be a designer, or a consultant, or whatever these people think they are.
- Browser screen resolution stats rile devs
... And a little bit more tongue-in-cheek:
Want to know when the next article is published? Subscribe here. Thanks for reading!