You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

A couple of little insights on media queries that I’ve learned whilst building a new site.

I’ve been doing a ton of responsive website building recently and I wanted to share a little awesome tip with you.

When writing media queries, most of us go for a similar standard set of media queries to the ones defined by Chris Coyier here.

Something like this:

And I’m sick of the sight of them! These media queries seem to only target popular smart phone and tablet devices and they are far too rigid for my liking - I find myself having to compromise on layout and style when using them most of the time.

It’s not right to assume that users will only be viewing on these sizes as people fail to consider the user who has many windows open on a huge desktop screen, as I do at work - what if one window is actually 785px wide and another is 485x383px?

Your layout may break if you’re only targeting the popular device widths.

Begone, specificity

Another tip related to this is to use em or rem based media queries to ensure that when a user zooms in or manually resizes the font-size of your site, it doesn’t break for them either.

It also helps to define your media query widths in variables if using SASS or LESS, to avoid rewriting them or going off the rails and tweaking them for every element.

Small, Medium, Medium Rare...?

I had trouble naming some of my variables....how does $medium-rare sound?

New, improved

Here’s my new, improved media queries and an usage example:

No screen size left behind!

I’ve started building sites for mobile first properly now, from the ground up. The media queries I now use rely on mostly min-widths, not max-width and this ensures that even the smallest screens get a decent layout.

An invaluable tool for testing this kind of thing - your site in every screen size possible - is 'Ish' by Brad Frost. I just had this open for around 2 hours testing a new build I’ve just started working on. Have a play. Two words - “Disco Mode”.

TL;DR

  • Use non-specific, em or rem based media queries
  • Lose the specific, popular device width media queries - I’m looking at you, 320x480px
  • Use 'Ish' to test on, cos it’s ace!

There’s more to be said on this - I’m learning a lot on this new project by starting to build 100% mobile first - so I expect I’ll be writing more little tips!