There’s no doubt: if you want to stay competitive in web design and development, responsive web design is a must-have tool in your belt. As more and more people pick up mobile devices and are connecting more frequently through a variety of screen sizes and resolutions, you have to be able to deliver websites and services that will work where ever they are accessed. This is particularly frustrating for the graphic or web designer who tends to hang on to old habits. Any forward-thinking web designer knows: fundamental sea changes occur every 1-2 years in the industry. The need for responsive design highlights a big difference between print design and web and UI design: print design is a snapshot, frozen in time, whereas web design needs to be interactive, transient, and adaptable.

Thankfully, setting up your site to respond to the device it’s being viewed on is relatively simple with the application of modern CSS. There are two main CSS components to set up: a flexible grid layout and media queries.

Flexible Grid

First things first. I like to use me some reset CSS at the top of my stylesheet, and I highly recommend (as do most people) Eric Meyer’s Reset CSS for the job. A really important line in any reset should be font-size: 100% for all selectors, because this overrides the browsers default font-size and lets us set up flexible type using ems (more in a bit).

There are two approaches to implementing a flexible grid. I’ll just be going over what you need to know to get started. Every site and every programmer is different, and you’ll ultimately need to come up with your own custom CSS to suit your own needs.

Column Approach

One is to define columns in your stylesheet. This site has a width of 960px, and it’s been divided in to 12 columns (80px each). Here’s the CSS – all praise and thanks to Emil Uzelac and his beautiful WordPress Responsive Theme:

We see that the columns are named for where they fall within our 960px width (notice that the first column is 60 and the last is 940 – this is to account for margins in the container element). We also can see that each column’s width, starting with .col-940 and working back to .col-60, is expressed as a percentage of our overall 960px container width. More praise for Emil, who has posted a visualization of our grid here.

All that’s left is to consider our layouts (full-page, one-column with sidbar, etc.) and decide which classes to use to express the width of our container elements. This page, for example, is grabbing the class .col-620 for the content, and .col-300 for the sidebar. If we chose to use .col-940 for, say, a full-width page, then the content of that page would always occupy 100% of the viewable area (or 940px, which ever is less).

Elastic Approach

This approach is losely based on visualizing our site in columns, but allows for more flexibility in defining our element’s widths. Ethan Marcotte, the handsome fellow who coined the phrase “Responsive Design” and wrote a little book about it, suggests that we do away with expressing anything in pixels in our stylesheet (except our outer most container elements), and instead use ems and percentages on individual elements and block styles. For example, if you have a container element that is 960px wide, and you want to fit a 620px content element and a 300px sidebar block within it, you would apply a little formula to find the width you’re looking for in a percentage – inner element/outer parent element=percentage. In our example, our content would be 65.957446808511% (620px/940px), and our sidebar would be 31.914893617021% (300/940). The left over percentage is allocated to margins, just like in the column approach. It looks like so:

Similarly, type and padding can be set as ems instead of pixels using the same formula. Remember when I said that font-size: 100% was important in our reset? It’s also important to define a font-size for the body to act as a base for our em calculations, i.e. 12px. If you want your h1 tag to be 36px in relation to your overall body font-size of 12px, you would use 36/12=3, or 3em:

So, the two approaches (flexible and elastic) are basically the same, one just establishes columns beforehand, and one lets you define your column and element widths on-the-fly.

The next bit is where the real magic happens.

Media Queries

Thanks to the evolution of media types and media queries since the arrival of CSS2 and CSS3, respectively, you can easily apply responsive design, right inside your main stylesheet. This is just a quick overview of the components to responsive design.

CSS2 introduced us to media types, a way to address your audience by calling different styles for different needs. The default media type is “all,” which, like it sounds, applies your styles to all media types that might be accessing your site. For browsing on a desktop or laptop, “screen” is the most used. The most famous outside of these, probably, is the “print” media type, which allowed designers to trim down a page to make it’s content more prominent and suitable for printing. CSS3 expanded upon this by introducing media queries. Media queries give us a way to call different styles based on a more flexible set of rules, such as screen resolutions.

In order to apply styles to your site based on a media type and query, for example, you could tack this bit of css to the bottom of your main existing stylesheet:

“Screen” is the media type, and “(max-width: 480px)” is the media query, which says that when the screen hits 480px the new set of rules take over. You can also call your stylesheet externally, like this:

Generally, folks set up three different media queries to handle the three main screen resolutions in use. On this site, we’re using @media screen and (max-width: 980px), @media screen and (max-width: 650px), and @media screen and (max-width: 480px), but you might also want to include a @media screen and (max-width: 1200px) to account for TV and console browsers. Remember our formula inner element/outer parent element=percentage? Well, width percentages can also be express in values greater than 100%. If you want your container element to stretch to, say, 1200px, you could apply the following style to your media query:

How’d we come up with that? 1200/960=1.25, or 125%.

Things to Consider

Keep it Tight

Media queries obviously offer a lot of power in the way of redesigning your content to suit your mobile viewers. Remember why you’re adapting your site to be responsive – you want to stay relevant and accessible. So, don’t go crazy redesigning the look of your mobile site. Keep it simple and make sure it reflects your original design, whether it appears on a desktop or smartphone.

How Does it All Stack Up?

It’s useful to think of your new mobile view as a one-column affair for smaller screen resolution browsers (iPhones, Androids and the like). If you have a sidebar or grid layout somewhere in your site, spend some time thinking about the mobile layout, and how your content will “stack”.

Images Need Love, Too

I didn’t even touch on image resizing, which is cruel and thoughtless of me, since images are abound in the web. This is just meant to be an intro, and there’s a lot to say about image resizing, so I’ll leave it to you to do some research. Ethan’s book on Responsive Design talks about it at length, and 24 Ways’ Jake Archibald also has some things to say.

Cr-IE Me a River

There’s a fair amount of frustration that one can incur when trying to get responsive design to work with older versions of IE. I know, shocker. Again, I refer you to Ethan’s book. Just buy it, already.

For the Pokers and Swipers

Lastly, remember that fingers are fatter than mice. The menu you currently have, with all of it’s children and grandchildren, might be a slick way to navigate your site as presented on a desktop, but that menu will be hard to use for someone who’s swiping at a small screen. Redesigning your menu items to span the screen, and giving them an appropriate amount of padding, will make things easier on your mobile user.

Need inspiration? Inspirationfeed has put together this great list of creative, well-executed responsive designs.