You are here

Internet Technology

One Design to Rule Them All?

Responsive web design in higher education
University Business, Feb 2012

Unless you have the print issue of University Business in your hands, you might be reading these lines on a wide array of different devices: smartphone (iPhone, Android, BlackBerry), laptop, desktop computer, tablet (iPad, BlackBerry PlayBook, Kindle Fire), game console (DS, Wii, Xbox, etc.), or widescreen TV. Maybe soon it’ll even be appearing on your refrigerator door.

Talk about options…

From the pocket screens of the ubiquitous smartphones to the huge computer or TV screens, institutional websites can now be viewed from a wide variety of resolutions, browsers, and devices. This is the age of abundance—and audience fragmentation—leading to increased complexity when it comes to website design choices. Long gone is the time when the website compatibility checklist used by professional web designers in higher education only listed several versions of Internet Explorer, Netscape, Opera and Firefox. The age of the multidevice web—not just the mobile web—is now upon us.

Don’t take my word for it. Just look at the data about the trends.

According to a survey conducted in May 2011 by the Pew Internet Research Center, 34 percent of U.S. adults owned a smartphone. The holiday season we’re just recovering from was predicted to increase this proportion to 50 percent. When narrowed down to the 18 to 29-year-old age group, the Pew survey found that 49 percent of Americans  owned smartphones. Now, post-holiday shopping season, there’s a good chance that the percentage  of college students with smartphones is now well north of that previously mentioned 50 percent prediction for all U.S. adults.

‘Responsive web design means designing the best site for your users based on what you know about them.’ —Stewart Foss, EduStyle Awards founder

Another interesting finding of the Pew study lies in multidevice usage from smartphone owners: 79 percent also used a laptop, 68 percent a desktop, and 18 percent a tablet.

Just before this survey, Google released its own study. In “The Mobile Movement,” published last April, 81 percent of the 5,013 respondents reported browsing the web from a smartphone, with 82 percent of the browsing being for doing research or reading news. And in August 2011, comScore found that almost 7 percent of total U.S. digital web traffic was driven by smartphones and tablets.

While  these statistics are impressive, tablets and smartphones are not killing computers—at least not yet—but they are definitely disrupting the previous state of web browsing by making it more complex.

Faced with this multiplication of devices used by their constituents (or target audiences as marketers call students, alums, parents, and faculty and staff members), most higher ed institutions have been struggling to find the “right” solution among all the options that have popped up in the past couple of years. Some have rushed to launch iPhone, BlackBerry, or Android apps. Others have invested time, and sometimes money, in multiplatform mobile solutions composed of several native apps or mobile websites optimized for a selection of the most popular smartphones. In the meantime, Apple changed the game rules again by introducing its iPad to the world, thus opening the doors to another family of connected devices: tablets.

What will be the most popular connected devices in a decade, five years or even just 12 months? Impossible to predict for sure.

However, institutions that don’t stay on top of the trends and adopt a multi-device web strategy will definitely alienate web visitors who don’t use the “recommended devices” on the institutional list.

That’s why the “Responsive Web Design” (RWD) approach, the strategy of designing a single website serving all current—and future—devices, has such a strong appeal for our industry, which has limited time, resources, and budgets.

Roots and Growth of RWD

RWD was first introduced in a May 2010 article by Ethan Marcotte, published in A List Apart, a well-respected online magazine “for people who make websites.” This new approach aimed to offer the key to designing websites once for all screen resolutions, web browsers, and devices. Marcotte made the case for responsive websites by extending the concept of responsive architecture to the digital world. “We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them,” he wrote.

Then, he explained with a real example how flexible CSS layouts, media queries, and JavaScript code could all be used to create a website that could automatically adapt to the display constraints of most devices.

Marcotte has since written a book on this approach: Responsive Web Design (A Book Apart, 2011), and worked on the high-profile responsive redesign of the Boston Globe website. Given a high degree of overlap between the goals of your website visitors across different devices, he believes serving a single, responsive design makes sense for institutions. “There are some fantastic responsive higher ed sites out there—the University of Notre Dame (Ind.) and Lancaster University (UK) spring to mind­­—so I’d imagine this could work well for many universities,” he says of RWD as the proverbial silver bullet for college websites.

Most early adopters in higher education concur. Over the past nine months or so, the RWD approach has been slowly—yet steadily—gaining supporters among university web designers.

The Approach in Action

Launched in May 2011 after a year-long redesign project by the design agency Happy Cog (owned by Jeffrey Zeldman, publisher of A List Apart), the new website for Arizona State University’s ASU Online was one of the first institutional responsive websites in higher ed. Beyond great feedback and online media exposure, the redesigned site has had very positive, and measurable, results. “We’re seeing higher overall conversions post redesign with significant improvements for visitors using mobile devices,” says John Devoy, information architect at ASU Online. 

Notre Dame’s new home page, launched in July 2011, has been the most talked about RWD implementation within the higher ed web community so far. “We’ve been providing mobile styles with our sites for several years now,” recalls Erik Runyon, Manager of Interactive Development at AgencyND, the university’s internal agency. As a result, RWD looked like the next logical step for the team to improve the browsing experience of mobile and other web users.

The University of Wisconsin, Green Bay rolled out a new responsive web design recently as part of the institutional website migration to a content management system. The web template developed for the CMS rollout was modified late in the design process. “We added on responsive techniques to the already existing template so it would effectively scale down to smaller devices,” explains Andrew Buckman, web developer at UWGB.

“The decision to adopt a mobile strategy based on responsive design techniques was motivated by our research into other higher ed mobile strategies—most of which are separately maintained sites,” recalls Catherine Farman, web designer at Bryn Mawr College (Pa.). For this smaller institution with limited technical resources, the RWD approach seemed more practical: designing and maintaining a single set of code to serve all connected devices. This conversion project took five months from research to launch and covered almost 5,000 different template pages.

More and more institutions, including Vassar College (N.Y.) and West Virginia University, have also embraced the RWD approach for existing websites or new web projects. “We have hit a point where screens sizes are moving in every direction, both bigger and smaller,” says eduStyle Awards founder Stewart Foss, who teaches a four-week online course on responsive design for higher ed. With several RWD conversion projects under his belt, he is a strong proponent of the strategy. “Responsive web design means designing the best site for your users based on what you know about them,” he says. For Foss, there’s no doubt that professional web designers need to rethink how they design institutional websites to make them work on every browser, on every device, and at every size.

And, 2012 might well be the year of RWD in higher ed.