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!
♥ Share the Love