A common set of breakpoints to start

On Thursday (26/04/12) the fantabulous Jeremy Keith wrote a short post on common breakpoints in responsive web design where he expands his thoughts on a question asked to Ethan Marcotte in a Q&A article on the .net magazines's website.

Ethan was asked -

"What devices (smartphones/tablets) and breakpoints do you typically develop and test with?"

His retort can be summed up just by the last sentence of the response -

"...we should focus on breakpoints tailored to the design we’re working on."

Where as I completely agree that we shouldn't be just 'designing' sites for specific devices. For me it's quite hard to not think about how something would look on a popular device viewport.

How I like it...

As I'm a freelance front-end developer that codes by candlelight I'm sure you can understand I don't work (well, not yet) on too many really big projects I generally think out most of my designs rather than initially draw a wireframe / open up photoshop. Doing this I tend to 'think' how the design would look on my iPhone and my iPad and my MacBook Air (yes, I use Apple products). 

Therefore I always start with a 'boilerplate' of media queries. They're aren't a hard and fast of rules to stick to, just a starting point. Of course the first starting point when coding a design is as perfect as Bryan Rieger puts it

The lack of a media query is your first media query

So I do all of my basic stuff here, all the typography stuff, things like that before I even get to a media query. Then after that I start designing (well, coding?) with this list of basic media queries -

/* ===== == = === Base Styles === = == ===== */


/* ===== == = === 20em (320px) === = == ===== */

@media only screen and (min-width : 20em) {
}

/* ===== == = === 30em (480px) === = == ===== */

@media only screen and (min-width : 30em) {
}

/* ===== == = === 37.5em (600px) === = == ===== */

@media only screen and (min-width: 37.5em) {
}

/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (min-width : 48em) {
}

/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width : 56.25em) {
}

/* ===== == = === 68.75em (1100px) === = == ===== */

@media only screen and (min-width : 68.75em) {
}

/* ===== == = === 81.25em (1300px) === = == ===== */

@media only screen and (min-width : 81.25em) {
}

Em, How many?

I lied, it's not really basic it's slightly more than that. Once I've designed (well, coded) with some or all of these breakpoints I then start getting my resizing thing down. For me that's the key bit. Not where or when you include your media query 'breakpoints' in earnest, but what goes in between. 

"Start with the small screen first, then expand until it looks like shit. Time to insert a breakpoint!"

Although I don't follow Stephen Hay's words to the letter, the next part along my design(coding?) process is to resize the browser until it 'looks like shit' then I'll add a breakpoint to fix it. I may even add a min-width and a max-width rule, or a max-width rule. Whatever works to make the design look nice at any viewport size, as best I can. Don't forget to test on as many devices as possible either.

You'll also not I'm using ems for my breakpoints instead of px. This helps for users who zoom and ties your media queries more to the design than device viewport.

But, what about the future?

How long in the future are we going? Well as phones are being released (well, Android OS'd ones) faster than you can say Jack Robinson so are list of possible viewport sizes we're going to have to deal with but there are still going to be more popular devices that'll (I'm in) know doubt will keep to roughly the same pixel screen resolutions they do at the moment, if not a few years to come (in the future). 

Content first?

Well, content blocks first. My expectations of a client to deliver everything I need before I start are unfortunately not going to be delivered soon. The project I was working on January - March (sshhhh, we're still working on it) this year had content that would have been provided by it's users so I had to work with what the content could be expected to look like and where it would go etc. This worked, it worked just fine. I'd love every word to be presented, that's not going to happen, nor should it. The web is a breathing beast, so is it's content.

My Point.

I don't think that having a set of 'common' media queries harms your desiging of a site as long as you resize that bad boy and fix anything that looks shit. Like all things I do when I'm coding though, this idea is subject to change.