The topic of responsive design has reached such a point of popularity that I almost feel dirty using the words. To me, they are beginning to sound like buzzwords. I do have a copy of Ethan Marcotte’s book Responsive Web Design but haven’t had a chance to open it up yet.
At work we just finished our fifth responsive web site, four of which are launched. I had a thought about this. We dove into responsive design without reading THE book. There are no rules, but it’s obvious from the buzz around the book that Ethan knows what he is talking about. So I thought I’d get some thoughts down about what I think about responsive design before I read his book and realize I’ve been doing it all wrong.
My first exposure to a responsive site was Hicksdesign, a beautifuly designed site. When I saw what happened when you resize the browser my mind was blown. Months later I came across the “1140 grid”:http://cssgrid.net/—a CSS grid template for fluid layouts. After poking around the 1140 CSS files and trying to wrap my head around it we just went for it. The result worked welll. It was a redesign for an existing client, so we had all the content to start—I was simply giving the existing structure a beautiful overhaul and creating a site that can be accessed from nearly any device. It was fun resizing the browser and adjusting CSS to make it work.
Now, for some clients we had been providing mobile specific stylesheets already, optimizing their site for certain devices. We also always test to make sure the site at least loads and looks proper on various devices and screen sizes. That is adaptive. Responsive is a fluid layout that responds to the device / screen.
In my limited experience with responsive design I’ve come to realize I need to give more considered thought to things like the flow of content on a page. I run into questions like “Which is more important, the content of the page, or the secondary navigation?” When dealing with a mobile phone do you really want users to scroll a few screen lengths to get past your navigation and some fancy slideshow? Probably not. Some content is best reserved for desktop experiences.
There are plenty of resources on-line, and lots of great thinkers on the subject. Here are a few of the articles and sites I’ve used to shape how I currently approach responsive design or just some good reading on the subject. I’m excited to see if my thinking changes after reading Responsive Web Design.
- Responsive Web Design: A List Apart : my first real introduction to the concept
- 1140 Grid : The only tool we used to tackle our first responsive site
- Content Choreography : An article I read just recently that captures the thought required for content in a responsive site
- HTML5 Boilerplate : Amazing work by Paul Irish et al and a solid foundation for a new web project
- 320 and up : Andy Clarke knows what he’s talking about
Please note, though I am writing about responsive design this site is by no means responsive. I built it over two years ago and have been itching for a re-design. I have learned and grown a great deal since then. So much so, that I feel embarrassed of this site. I now have twin infants at home and find myself with little time to spare for side projects. One of these days.