Finally, after sending a bunch of projects out the door, and knowing that my own site needed some attention, I took the opportunity to learn about responsive design, and apply what I’d learned right here.

Wait, why?

Ok. So… backup. In case you’re still foggy on the idea, the term: “responsive web design” relates to the new techniques and practices that folks are using, which allow their websites and apps to “respond” to the increasing variety of devices that are being used to interact with the web.

As web designers, it is no longer safe to assume that our work will be viewed solely on a desktop monitor. Really, it’s never been “safe” to make many of the assumptions that we already/often make: screen size; resolutions; browser capabilities… and “responsiveness” helps with all of that… But it was really the popularity of tablet computers (the not-big, not-small screen!) that got people behind the responsive movement.*

Previously, developers would use a couple different stylesheets, or sometimes create a separate site for mobile users (think, m.google.com) to deal with small screen sizes, etc… And that still may be necessary, depending on the nature of the app or website that’s being built — but really, it’s just a heck of a lot of work for some one who just wants their site to look good, no matter what the device.

whatmoves.com – 1 site, 3 devices

So, how do we do it?

The number-one, go-to, must-have resource for learning responsive web design is the book, Responsive Web Design, by Ethan Marcotte. (Easy to remember, eh?)

*Let it be known! Most of this post is simply highlighting sections of this book. I highly suggest that you go directly to the source of this material if you’re truly interested in learning more about responsive design.

Mr. Marcotte lays out the three major elements of a responsive design as:

1. A flexible grid
2. Flexible images/media
3. Media queries

All of that flexible business basically means using percentages instead of pixels when structuring a site. A really simple example:

Before, my site was fixed at a certain width. Now I’m telling it to be 75% of your browser window. Try it!

The real fun in all of this, however, is when you add the third step: media queries. Fun, I say, because as a designer, you really get to take into consideration the end-user, and how/where/when s/he might be using your site or app.

A media query looks like this:

@media screen and (max-width: 960px) {
//do something!
}

What this is saying is: “Hey, if you have a screen, and the viewable area is 960px or smaller, do something…”

For this site, I set up a couple of min/max rules to try to change font sizes, widths, etc., based on some common browser and device screen sizes. None of this is perfect, yet. But I’m starting to get a good feel for it, and I’m excited to work it in to my future developments.

Other Resources

1. Media Queries
   

   http://mediaqueri.es – nice examples of responsive sites

2. Mr. Chris Coyier also just did a nice / quick run-through of some of the features of responsive web design. It’s not up on his site yet, but the link to the (video) podcast is here: Briandump on Responsive Web Design