Responsive Design

Earlier this month I learned about something called Responsive Design. I'm absolutely certain that I don't know everything about it yet and I'm a little late to the game, but better late than never, right? I've learned a bit, and I'm already working on some projects to use it. Before you even read about what it is, check out css-tricks and the Boston Globe websites (hint - resize your browser window from full screen to very skinny) for examples of just how cool responsive design can be.

Responsive Design is a way of designing your site to fit into all media types - desktops, notebooks, tablets and phones, without creating mobile versions of your site, often crippling your user's experience.  This is done with fluid layouts that change based on the screen (or device) width using CSS3's new feature called media queries. Media queries are style sheet labels consisting of media types and expressions regarding media features - the most common with Responsive Design being 'width'.

Media queries are supported in all major browsers except IE. Surprising, huh? Well, handily enough, there is a JavaScript library called Respond.js which brings media query support to IE. Now that the problem of browser support is solved, we can start using it! Below are some examples of media queries that I am using in some of my current projects.

@media only screen and (min-device-width: 480px) { ... }
@media only screen and (min-device-width: 600px) { ... }
@media only screen and (min-width: 770px) { ... }

These lines are media queries that tell the page what styles to change when the conditions are met. The best practice with Responsive Design is to first design your site for mobile - phones. Then, you apply style changes through the media queries until your site gets to its maximum width.

You can see that the first two media queries above are a bit different from the third. The reason for this is simple: min-device-width: 480px will evaluate to true on any device who's screen is 480 pixels wide or larger (the same with any other size, like the 600px query). min-width: 770px, however, will only evaluate to true if the width of the page being displayed is over 770 pixels wide. What this means, is that on a device with a screen larger than 770 pixels wide, and a browser at full screen, min-width: 770px will evaluate to true, but if the browser window is resized to less than 770 pixels wide, min-width: 770px will evaluate to false, and the style changes inside that media query block will not be applied.

The goal of using media queries to create a website with responsive design is to create sites that look and feel natural to the user on as many as possible of the many different screen sizes they may use. Ethan Marcotte has written a great post on Responsive Design that explains in more detail some of the hows and whys of Responsive Design. I'm currently using Responsive Design at work, and in one of my personal projects - a Responsive Design theme for Redmine.