Thoughts on Responsive Design

Posted: November 11, 2012 under Web Design

Earlier this week, Karen McGrane published an article on A List Apart about optimizing content for mobile devices and it got me thinking. Responsive web design offers huge advantages over traditional design, but it also presents some unique challenges for not only designers, but for content producers and site owners as well.

Before I talk about two of the challenges that have been on my mind, I'd like to highlight a few statistics from Ms. McGrane's post:

  • 31 percent of Americans who access the internet from a mobile say that it's the way they always or most always go online.
  • 51 percent of Black Americans rely solely or mostly on their mobile device for Internet access.
  • The same is true for 42 percent of Hispanic Americans and 43 percent of Americans earning less than $30,000 per year as well as 39 percent of Americans with a high school or lower education.
  • 45 percent of the 18-29 year old demographic say most of their Internet browsing is on their phones.

The implications of this are truly stunning. How many organizations that work with underprivileged or economically stressed populations have a responsive or mobile site? Very few indeed, and this is both an enormous challenge and an opportunity.

I've spent much of my career working with small organizations and have seen firsthand how prohibitively expensive websites can be for non-profits and startups. It keeps a lot of great ideas from coming to fruition and we see from the statistics above how it may be hindering outreach to some of the segments of US society that could benefit the most from mobile optimized sites.

Responsive Design Process

Once upon a time, web designers would produce mockups in Photoshop and present the proposed designs to their clients for review and revision. Actually, a whole lot of designers still do this, but it just isn't conducive to responsive design with all the fluidity and variation in the page layouts at different browser widths.

A while back I came across a piece by Mark Boulton, the guy behind the most recent redesign of the website, and was pleased to read that the process I had hashed out for myself was something he and others had adopted as well. The outline of the process is listed below and is quoted from Boulton's original post:

  1. Sketch. Get the ideas down *amongst* the requirements. Meaning, we don’t have design specification documents, we dont have lengthy requirements documentation. We have user stories (or something similar) and we combine them with research, thoughts, sketches, ideas to document the scope of the project.
  2. Prototype. In HTML. This allows us to get the product – in whatever form – in front of the client. The aim is to remove The Big Reveal. It also lets them see how the site responds on different screen sizes. Also, we can start to think about problems that may arise due to a responsive approach *now* instead of when the templates are being integrated into a backend, or at other production sensitive times.
  3. Design. However you increase the fidelity is up to you. I use Photoshop, other people use Fireworks, some do it in a browser.
  4. Iterate. Have a project structure that embraces change. That means a focus on priorities.
  5. Talk. This approach requires much more collaboration with a client. I mentioned The Big Reveal: the thing designers do where they squirrel away for a few days and then come back and go ‘ta da, look what I made!’. That’s just so risky.

So, the challenge here is re-educating clients and colleagues on a process that is unfamiliar and may feel a bit...loose? It's just not as structured as the previous waterfall design process and that makes sense considering the nature of responsive design, but it's new and requires change and flexibility and some explanation.

Content for Mobile

This is perhaps more to Ms. McGrane's point, but it's a big challenge coaching content producers to think about their content in a multifaceted way. How will this look when on a mobile? What about on a tablet? 

One example I've had in mind is how to handle inline images. Imagine you have a blog post and the author wants an image in the body of the post aligned to one side. If you've got a WYSIWYG installed, by default it's probably going to set that image at a fixed dimension.

But as the page is dynamically changing in a responsive design, that image isn't playing along. The container is getting narrower and narrower as it approaches mobile dimensions but the image stays the same size, causing the text to wrap in an unreadable way.

Now there are some pretty easy fixes for this from a technical point of view, but the content producer will be better off if she understands the constraints that any technical solution will impose. That's my point here. Responsive design doesn't just ask more from designers, it asks more of everyone involved in working with the site.

It's Worth It

Obviously, I think all the extra work that goes into creating responsive sites is worth the extra effort. But the challenge of educating everyone on the team, or in my case design clients, on the mindset required to make it all work, is not insignificant.

I wish I was able to close this post with something brilliant, an easy tip to make these issues sort themselves out, but I don't think that's possible. It took years for everyone to become familiar with the previous web design practices and the paradigm shift of mobile will require the same period of adjustment.

But the shift is underway, no question. Lots of challenges, lots of opportunity.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.