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.
Another tip related to this is to use
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
Ermm what would you name a breakpoint in between medium and large??? pic.twitter.com/Lw9OFqLgiH— Daniel Furze (@furzeface) December 11, 2013
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”.