Unless you’ve been living under a rock or have possibly gone full blackout mode in support of the occupy SOPA / PIPA festivities, undoubtedly you’ve heard of Responsive Web Design — RWD for all the hipsters who like their acronyms.
In this 4 part series, I will explain the following:
1. What Responsive Web Design Is.
2. What Does Responsive Web Design Mean For Normal Peeps.
3. Change In Our Methods & Thinking
4. A Quick Tutorial : “How-To” Create A Responsive Web Site.
What Is Responsive Web Design
Picture the ways in which you check your email, change your Facebook status, update your LinkedIn profile, Tweet an awesome dunk you saw on TV last night, and yes some still do this… edit your MySpace page. Now; think about all the mediums you’ve used to accomplish these tasks. A few of you probably said:
– Laptop
– Desktop
– Tablet
– Smartphone
– Google TV
All these items have various screen resolutions, sizes, and standards. It’s quite possible that you’re using all of these mediums to do these daily tasks. Enter… Responsive Design. Responsive Design is the technique used in “Responding” to a users actions and screen size. Ideally this is done with use of flexible grids, flexible images, flexible videos, flexible fonts, and the main ingredient css media queries.
In May of 2010 Ethan Marcotte wrote an outstanding article on The List Apart introducing the term responsive web design. In the article he relates it to responsive architecture; which he said to be;
“how physical spaces can respond to the presence of people passing through them“.
Apply that theory to the web, and you can clearly start to paint the picture of where and what responsive design is today.
Back in October I attended a conference an annual conference held in St. Louis called Society and Design. I was fortunate enough to see the team that created The Boston Globe website (really the first popular responsive website) speak on the who, what where, why, how.. etc. Not 30 minutes into the session, I thought to myself, this sounds a whole lot like Adaptive Web Design right? Yes it does, but it’s not… sort of. Adaptive is the thought of form and function. How a user’s experience changes based on capabilities of the user’s browser and or device. For example:
* Does this browser support “x”? If so, apply “z”.
It was very important to the speakers that we as a community (web dudes and dudetts) understood what Adaptive techniques are compared to Responsive techniques and that they aren’t all that different in theory. Logic wise yes, and we’ll get to that in part 4.
Responsive Web Design is rapidly catching on. I like to compare it to the mobile web firestorm still going on today. A concept that is literally on fire and sweeping across the industry.
Below I’ve listed a few resources to get your knowledge on in the Responsive Web Design category. In part 2 we’ll talk about what this means to normal people like people who don’t sit in front of a computer all day and how these concepts can bring an interesting approach to the way we get our message across to them.
Great Resources:
1. Ethan Marcotte’s Book – Responsive Web Design
2. Smashing Magazine : Responsive Web Design: What It Is and How To Use It
3. Gallery of Responsive Web Sites : Mediaqueri.es
Feel free to post comments and thoughts and I’ll try and address all of them in the next parts to this series.
