I’ve just completed my article about responsive design in higher education. It will be published in University Business in a couple of months (February 2012 issue). I did a few extensive interviews with early adopters as part of my research for this piece. As usual, I could only use a fraction of what I found. I only had 1400 words.
But, thanks to the Web, I can make sure you get to see the rest of what these early adopters in higher education had to say about responsive web design (RWD) – and long before the article is published!
So, let’s start this series of posts about responsive web design in higher ed with Stewart Foss, founder of the eduStyle gallery and the eduStyle Awards. He knows higher ed web design in and out. That’s the reason why I asked him to create and teach our 4-week online course about responsive web design for higher ed, the first session of which will kick off on January 30, 2012.
Stewart worked on a few projects involving RWD conversions – and will walk students of the course through their own over a period of 4 weeks, so that’s why I wanted to hear what he had to say about the process.
1) You went through several RWD conversions. What is the most difficult part of the process?
The most difficult part was re-imagining the website for multiple resolutions. When you are working from a design that was never designed to be responsive, it can take a little imagination. In some cases you are painted into a corner based on design or coding decision that someone made years ago. You have to make the best of it you can and realize that though they may not get a perfect experience it will most likely be better than if you hadn’t done the conversion. If you have the liberty it can be easier to recreate the design than it is to convert the design.
The second most difficult part of converting an existing design was digging through the code to find all of the fixed width elements. We are so accustomed to using pixel widths that you find them scattered throughout the code. It is much easier to build from new than it is to convert a fixed width design, but you may be surprised at how little effort it can take to convert a well-designed and coded fixed width site to a responsive site. In most cases I was able to do a pretty complete conversion within a single working day. The more familiar you are with the code the quicker it can happen.
2) Many proponents of the dedicated mobile website/app approach says that these can better address the need for contextual information. Do you think this is indeed a shortcoming of RWD?
It doesn’t have to be. You have the freedom with responsive web design to make the mobile version just as focused as you can with a dedicated mobile version. When we design we make assumptions about user behaviour. Hopefully those assumptions are informed by research, but often we just follow the path laid out by others. If we are not careful the dedicated app/website approach can force the user into browsing based on our, possibly false, assumptions. Mobile users are not always on campus or looking for a phone number, map or bus schedule. Many times they are on a couch or in a grocery line up and they want to find out what course you offer, what programs are available, or how much tuition costs. The responsive approach not only gives them full access to all of content of your website, but also a tailored browsing experience so that they get the best of both worlds. I think it is a great fit for a higher ed audience.
3) Any lessons learned you could share with the larger community?
For the majority of the web era we could expect our user’s screens to get progressively bigger. We went from 640×480 up to 800×600 and now 1024×768 and beyond. We have hit a point where screens sizes are moving in every direction now, both bigger and smaller. This means we need to rethink how we design websites. We have moved past the days when we’d see “optimized for Internet Explorer” labels on websites, I think over the next few years we’ll move past optimized for x resolution designs. The new web will work on every browser, on every device and at every size.
Responsive design means designing the best site for your users based on what you know about them. It might seem daunting at first, but we’ve been employing the same techniques for years on print style sheets. We know they want to print the content so we strip out the extras and focus the design using a special stylesheet. The next step might be to have a special set of styles for mobile users. You can build on that until you have a fully responsive design. It doesn’t have to be a huge project with a huge budget.
(asynchronous with weekly lessons and assignments)