One Web to Rule Them All: Media Queries
This series is meant to be an in-depth look at Responsive Design. It covers the history, the how-to, and best practices on responsive design, taken from the view of someone who hates fluid layouts and has found a (seemingly) better solution. This session will be expounded upon in detail at BlogWorldExpo later this year.
Yesterday we mentioned the who and what behind responsive design – how it allows one website to (without relying on external services or subdomains) serve up the appropriate version of itself to the reader based on what device it’s viewed on (be it tablet or mobile phone). But, how is this possible? How does the system know what device you’re on? The answer is very simple, and yet complex at the same time.
Media queries use a value and expression to define the specific medium that the content is shown on. CSS2 already uses a very simple system of media querying: the “media” key:
<link rel="stylesheet" media="screen" href="example.css" />
CSS3 expounds upon this concept by allowing more flexible variables to be entered, such as color, width, etc.
Types of Queries
First off, one major difference between the old version and the new is that CSS3 queries can be run right in the stylesheet. This means that instead of having a “mobile stylesheet”, you can use one stylesheet and organize your styles by screen type:
@media screen and (min-width: 400px) and (max-width: 700px) { … }
This allows you to have specific styles for only screens between 400px and 700px wide. That said, there are a number of different queries you can run, based on a number of different set-ups:
- screen width
- device width (there is a difference)
- screen height
- device height
- color
- orientation (portrait vs landscape)
- aspect ratio
- device aspect ratio
- resolution
- scan (for televisions)
- grid (tty terminals, for example)
There’s a LOT of different variables here, but if you’re just starting out, the only one you really need to focus on is screen width, since you can set a lot of different values.
Most websites today are built on a system of 960 – whether that’s a grid or otherwise, it’s a fairly standard screen width. Without going too far into what we talk about tomorrow, here’s a sneak peek at the system I use:
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
Notice how this allows you to have different CSS setups that tailor to the specific views. It covers normal sizes, tablets, and landscape/portrait mobile phones. Dropping this into your stylesheet will allow you to set up styles that are specific to those views.
However, setting up a specific media query for each site is cumbersome – it means that you have to basically design 5 different sites, and who has time for that? What if there were a way to consolidate the different classes we need to automatically format themselves, and then use these values to tweak our existing design?
But I’m getting ahead of myself. Tomorrow we’ll talk about why grid layouts are still important, and how we can marry the flexible and the rigid into something that works magically together.