A Blog Not Limited

to web design, standards & semantics

Responsive Design With CSS3 Media Queries

Feb 11, 2011

Published in

When I launched my freelance site, I did so with a fixed-width design. Why? Because working within the "known" parameters of fixed width was faster for me, and I needed to get the site launched ASAP.

Of course, I realized that this meant my site wouldn't resize with different browser resolutions, nor would it always display in the best fashion for mobile users. I knew at some point, sooner rather than later, I would need to address these critical design issues.

Fortunately, CSS3 gives me the tools to do just that.

Becoming Responsive

Ever since the brilliant mind of Ethan Marcotte introduced us all to responsive design, I'd been paying close attention to how my colleagues were using media queries. (In case you've been living under a rock, responsive design is the concept of using technologies — like CSS3 media queries — to allow a site to adapt and respond to whatever device renders it.)

So, when I had a few hours of free time a couple of weeks ago, I decided to try my hand at responsive design. And then I decided to share what I learned in a new article for Script Junkie, Respond to Different Devices With CSS3 Media Queries.

Not Entirely "There" Yet

As it turns out, a few hours wasn't enough for me to get my site's responsive design where I want it to be. The few media queries I created only cover three different resolutions. And by "cover," they don't really. There is much more I still need to do to fine-tune the design for those resolutions. And then I need to craft some media queries for larger resolutions. And then I have to test on different devices, which will no doubt mean more tweaks to my CSS.

But it was an amazingly good learning experience for me. Rather than me tell you here about the nuances I discovered or the lessons I learned about my design approach in general, just go check out the Script Junkie article.

Once I finish the responsive design of my site, I'll be updating this blog with the final results. Stay tuned!

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!

Tags:

Share the Love

Zoe Gillenwater's Gravatar

Zoe Gillenwater opines:

02/17/2011

Good for you Emily! I’m sure the end product will be great.

Emily's Gravatar

Emily responds:

02/17/2011

Thanks, Zoe! I hope it does turn out great, assuming I ever find that elusive “free time” to spend on my own projects ;)

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.

More

I Tweet, Therefore I Am

Follow @emilylewis on Twitter!