Responsive Web Design… It sounds pretty sexy. At least from a web developer’s viewpoint it does… sexy, new, exciting. No doubt you’ve heard somebody mention it at some point in the last year as it’s becoming the “web 2.0” of buzz words in 2012. Truthfully, there is a lot to be excited about around this idea, some justified, some maybe inflated, so let’s talk about it all.
First and foremost, what exactly is Responsive Web Design, or RWD for short? Well, this website you’re on right now is a responsive design. Doesn’t look special or different does it? The magic comes in when you start seeing the site on different screen sizes. Fire this site up on a tablet or your smart phone and you’ll be presented with a different organization of the content on each page! Specifically the pages are re-organized into an optimal presentation for the device you are viewing it on.
No tablet or mobile on you right now? Check out the screens below for a quick preview.
I’ll give you a minute to pick your jaw up off the floor… Better?
Ok, pretty impressive, huh? It’s a great technique pioneered by Ethan Marcotte for delivering the same website, same content, same features to your visitors no matter what size screen they have in front of them. In years past a popular convention was to manage a separate mobile version of your website. It seemed like a great idea at the time, but as technology has sped forward like it tends to do, we now have devices of all shapes and sizes to consider – from a television all the way down to a handheld device. With this degree of flexibility people have in viewing your website, it just isn’t practical to be able to address each device individually – a more flexible approach was needed. This is the problem that RWD directly addresses: serving an undiluted version of your site to visitors no matter how large or small the screen they are using.
So why not just build everything using this magical technique? Well, that’s a good question, and one that people in the web design field are actively debating right now. From our perspective, there is one thing that needs to be considered and that’s the context in which visitors would be using your website. For some websites it may be important for visitors to have a complete experience with all features represented on all screen sizes, while for others that may be overkill. Each website is a unique case and the tools utilized should be dictated by that.
Surprised to hear that? You shouldn’t be since we’ve never had a one-size-fits all solution up to this point and RWD isn’t about to change that. What we do get is another powerful tool to consider when trying to deliver the best possible experience to our visitors.
If you’d like to see some other examples of Responsive Web Design in action, check out this inspirational gallery.
Or, if you’re feeling a bit techie you can check out some great resources to learn a little more about Responsive Web Design and the techniques to achieve it:
A List Apart – Responsive Web Design by Ethan Marcotte
A Book Apart – Responsive Web Design
Smashing Magazine – Responsive Web Design Guidelines and Tutorials
nettuts – Responsive Web Design: A Visual Guide