Most people outside of the Web Design & Development community probably have never heard of the term “responsive web design”, and almost surely don’t know what exactly it is. I’ve been keeping up with Responsive Web Design for a while now since first reading about it on A List Apart, and looking curiously at sites by the likes of Simon Collison & Ethan Marcotte.
In the simplest terms I can describe it, Responsive Web Design is design that uses new HTML & CSS features to allow a single piece of content be flexible enough to allow easy viewing on many different types of devices. Well, that wasn’t quite simple, so lets take another stab at it; design that reacts to the device it is shown on. That is a bit better, but still vague. Either way, this is a new (and old) take on creating sites for the web now. 5 years ago, the web was generally restricted to a PC or Laptop Monitor. Just about then smart phones began to shake the world up with their tiny 320px screens. This sent us designers into fits. We’ve always been waiting for the days we can ignore 800×600, then 1024×768, and now they throw this curveball at us and we’re regressing! Well, not really. The Mobile Web is a huge part of the web as a whole now, and finding a solid solution to create websites that work well in both the PC Monitor and Smartphone was a challenging, but exciting thought for many designers. Up until recently, most people would create a site with a stylesheet for a Computer, and then create another site for mobile. This works in most cases, but its extra work, for designers who’d rather pretty something up than we’d want to code two sites instead of one.
On May 25th of last year, Ethan Marcotte wrote an article on A List Apart explaining a fancy way to create sites that work in any imaginable size constraints by using CSS Media Queries and semantic markup. It took a bit for it to catch on, but it finally is now. Creating a new workflow for designers doesn’t always go over well.
When I first started in Design, the web was just moving towards the at-that-time standards-based floated div layout from the dreaded table structure that had plagued the web up until that point. I’ve built many sites using fixed-width float techniques and while I don’t think its that hard, and feels more natural than table-based layouts I’ve used in the past. Sure there was always a bit of frustration with the issue of clearing floated divs, whether it be by a clearfix method, or another method. None we’re exactly elegant, but did get the job done.
Well what are my thoughts on Responsive Web Design? I’ve built a few sites using parts of this newfangled technology, but I’m currently in the process of making a full responsive site. I’ll be chronicling my inevitable excitement and struggles with it. I can say that so far, I look at it as a very large step forward. However, it is not a perfect solution. As web designers, we’re all very familiar with making things work the best they can, so its all about choosing the path of least resistance and right now this looks it’ll be that path.