I haven’t posted anything to my blog in way too long of a time, but all I can say is, being a new Poppa can be all consuming. There’s good and bad to that… but mostly good as far as I can see. :-) Anyway, I’ve been excited by the possibilities I’ve been seeing with “Responsive Web Design” for well over a year now, and figured I’d post a little something about it.
Previously, if clients were concerned about how their site was viewed on mobile devices, firms would build separate device-specific sites for the more popular devices for their users. Typically the iPhone, for the clients that could worry about and pay for the extra design and development.
So, “Responsive Web Design” is basically creating CSS for your HTML pages that listens to what sort of environment the end-user is using to view the page, and serves up typography, graphics and layout that is best for that environment. What do I mean by “environment”? Well, it’s the difference between viewing a site on your maximized 1600×1200 desktop browser, 1024×768 laptop, or maybe viewing the site from your iPhone oriented vertically. Those are some very different environments, and can be treated differently to make for a better viewing experience for your end user in any of those viewing environments.
The first article I took notice of for this technique was, of course, from the folks at A List Apart:
(Specifically, this article was written by Ethan Marcotte from the famous web blog unstoppablerobotninja.com)
And he even created an example website that had pretty good cross-browser adaptability even for May of 2010. It can be viewed here:
(If you are on a non-mobile device, try resizing the browser, and watch the page completely respond to your changing environment. If you are on a mobile device, you can rotate the orientation of the device to see 2 potentially different layouts.)
If you’ve ever been tasked to make a beautiful and usable website for a client, and then asked as an after-thought to make an iPhone version of the site, this new methodology can be amazingly exciting.
Just as an experiment, to try and play with this a bit, I made a page using my usual technique of cobbling together other people’s online tutorials and examples and then bashing it into something close to what I want it to look like. I need to read up more about Fluid Images but here is what I have so far:
Some Light Reading
If this is as exciting to you as it is to me, here are some additional links to get more details:
The Basic Concept
Lots more details and examples
A great grouping of additional articles that would prove quite helpful
What about applying this to Email Newsletters?
(Not sure about the cross-browser/email-browser support of @media queries, but this is potentially a powerful application of Responsive Web Design)