Responsive Web Design Challenges

The redesign process is in full swing and up until last week, it was all smooth sail­ing. Then we ran aground as we embarked upon the DESIGN por­tion of our trip. Early in the process, I threw a cur­sory glance at respon­sive web design,  assum­ing that it was some morsel of cod­ing magic that I needn’t worry about because our devel­oper would be the cap­tain of that ship. I was wrong. Not Titanic wrong, but wrong nonetheless.

While it is true that Nick is respon­si­ble for build­ing and cod­ing the site to spec, respon­sive web design required me to think very dif­fer­ently about the con­tent on the pages. So dif­fer­ently, 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, nav­i­ga­tion, images, every­thing. It all needs to shift and com­press and breathe to fit vary­ing widths. Con­tent 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 the­ory and process. Essen­tially, there are two major camps form­ing on this

  1. The RWD folks who advo­cate build­ing full-meal sites with all the con­tent and fea­tures for desk­top and then mod­ify the way the con­tent is dis­played for var­i­ous 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 rec­om­mends sep­a­rate mobile-optimized sites that cut fea­tures and cut content.

The real­i­ties of imple­men­ta­tion aside, I would opt for some­thing closer to Nielsen’s approach due to the fact that I am a con­tent per­son. But with­out the proper research on what our users are look­ing for on mobile plat­forms, we are choos­ing the sim­pler RWD route and will mod­ify over time or apply a hybrid ver­sion. We are a uni­ver­sity with lim­ited resources and we have to make com­pro­mises for the sake of mak­ing progress.  Our web­site needs a bail out now.

We decon­structed our process and had a healthy dis­course. We met with David Con­rad, found­ing part­ner at Design Com­mis­sion, who gave us some great guid­ance on how to approach this project.  We read many arti­cles and shared sev­eral exam­ples. We involved BJ Miller, an Infor­mat­ics stu­dent who works in IT, and he brought some good ideas to the wire­fram­ing process. We were finally all on the same page.

Some great resources:
How to Design a Mobile Respon­sive Website

Top Respon­sive Web Design Tools

Respon­sive Web Design by Ethan Marcotte

Grid­pak: The Respon­sive Grid Generator

Pod­cast from The How and Why of Respon­sive Design

Top Respon­sive Web­sites in Higher Education

Exam­ples of Good Respon­sive Design