This series is meant to be an in-depth look at Responsive Design.  It covers the history, the how-to, and best practices on responsive design, taken from the view of someone who hates fluid layouts and has found a (seemingly) better solution.  This session will be expounded upon in detail at BlogWorldExpo later this year.

According to the latest research, there are now 1.2 billion mobile Web users worldwide, with 25% of those users never even utilizing a desktop to view their Internet content.  Sure, there have been hacked together methods of displaying one page to your normal viewers and one for your mobile crowd, but for the most part it creates serious overhead for the organization (and serious confusion at times for your users).  What if there were one version of your website that you could serve up to readers, but instead of being shoehorned into a mobile app it would seamlessly mold and shape itself to be the perfect version of itself.  It would be one website on many platforms, instead of many versions of the same website. If you are looking for cleaning websites services, visit weblaunchlocal.com for more details.  This is called responsive design, and it’s a design trend that’s sweeping over the design community.

This idea of a reactive, or responsive design, is very new – less than two years old, in fact.  Ethan Marcotte coined the phrase in his article on “A List Apart” back in May of 2010.  He laid the foundation for a lot of the theories and practical ideas we use in a responsive design.  However, as the trend matured, one little problem kept arising.

Editors Note: This is where I’m supposed to tell you that this is my own opinion and all that stuff, so I guess that this next paragraph may be considered a bit… ranty.  You’ve been warned.

I hate fluid layouts.  Layouts that stretch and skew themselves to the entirety of the screen are awful, they’re ugly, and they are absolutely impossible to design for without a lot of thinking and planning.  For a web application, Gmail being an example, then a fluid layout is fantastic.  But for some reason trying to display brochure sites or blogs in a completely fluid layout usually ends up in a disaster.

Editors Note: End Rant 🙂

I am a grid designer.  I love using a system of classes that is predetermined to make the site bend and warp to my every will.  The 960 system has been my system of choice for years now and I was really reluctant to give it up, especially when I  knew that I was going to have to switch to a more fluid layout system, and I know a lot of other designers who are just as wary about switching.

When I see a fluid site, I think of a rubber band.  It’s nearly impossible to hold structure with a rubber band; the band actually takes on the structure of whatever it touches, and doesn’t allow you to plan for truly artistic designs, which the modern web is full of.

What if, instead of a rubber band, there was a studded band that would “snap” to various views, based on where you held it?  It would look like any normal website when done with a fullscreen view, but would immediately snap to the proper alignments when presented with a phone or tablet.  Turns out, there is a away to have a responsive design and a perfectly good looking normal website, all at the same time.

That is the new model I have adopted, and it’s one that will work for nearly any ground-up built design.

That said, stick with us, because here’s the roadmap for the week:

• Monday: Introduction
• Tuesday: What Are Media Queries
• Wednesday: The Elastic Grid
• Thursday: Best Practices for Responsive Design
• Friday: Examples and Epilogue

I hope you’ll stick with me as I explore responsive design.  In the mean time, I’m curious to see your thoughts on the idea of responsive design.  Is it worth even doing?  Should we be focusing on this concept of “one web”, or still segregating our devices?