Responsive Web Design Challenges

The redesign process is in full swing and up until last week, it was all smooth sailing. Then we ran aground as we embarked upon the DESIGN portion of our trip. Early in the process, I threw a cursory glance at responsive web design,  assuming that it was some morsel of coding magic that I needn’t worry about because our developer would be the captain of that ship. I was wrong. Not Titanic wrong, but wrong nonetheless.

While it is true that Nick is responsible for building and coding the site to spec, responsive web design required me to think very differently about the content on the pages. So differently, in fact, that after 14 years of doing web work, I stopped and had a Dorothy moment. I’m not in Kansas anymore.Things can move around on the screen: text, navigation, images, everything. It all needs to shift and compress and breathe to fit varying widths. Content can and should be fluid. Where’s my compass?

So Daisy, our designer, and I took a major, unplanned side trip and delved deeply into RWD theory and process. Essentially, there are two major camps forming on this

  1. The RWD folks who advocate building full-meal sites with all the content and features for desktop and then modify the way the content is displayed for various screen widths and devices via the use of media queries and CSS.
  2. The other camp claims this is a faulty approach; among them the ever-controversial Jakob Nielsen who recommends separate mobile-optimized sites that cut features and cut content.

The realities of implementation aside, I would opt for something closer to Nielsen’s approach due to the fact that I am a content person. But without the proper research on what our users are looking for on mobile platforms, we are choosing the simpler RWD route and will modify over time or apply a hybrid version. We are a university with limited resources and we have to make compromises for the sake of making progress.  Our website needs a bail out now.

We deconstructed our process and had a healthy discourse. We met with David Conrad, founding partner at Design Commission, who gave us some great guidance on how to approach this project.  We read many articles and shared several examples. We involved BJ Miller, an Informatics student who works in IT, and he brought some good ideas to the wireframing process. We were finally all on the same page.

Some great resources:
How to Design a Mobile Responsive Website

Top Responsive Web Design Tools

Responsive Web Design by Ethan Marcotte

Gridpak: The Responsive Grid Generator

Podcast from The How and Why of Responsive Design

Top Responsive Websites in Higher Education

Examples of Good Responsive Design