Behind the Grid: What’s the Big Deal About Responsive Web Design, Anyway?

Responsive web design! All the cool kids are doing it. Since Ethan Marcotte wrote the book on the topic in 2011, it’s become the new, hip way of approaching web design amidst widespread device proliferation and the rise of mobile. If you were at the HighEdWeb 2012 conference, chances are you attended a session either dedicated to the methodology or touching on it in some way.

But what’s the big deal about responsive web design, really? The term, often abbreviated RWD, has become something of a buzzword, and its impact is often reduced to the parlor trick of showing a webpage reconfiguring itself as you resize the browser window. Beyond the visual whizbang and industry buzz, why is responsive web design an important approach to consider at our institutions? And what kind of impact does it have, both internally and for our users?

The truth is that RWD is not about something new and shiny; rather, it’s forcing us to revisit our fundamentals.

“What RWD has done is opened the door to the conversation to get back to our roots in terms of what web development is about and doing things the right way,” says Dave Olsen, programmer/project manager at West Virginia University and author of the blog  “Mobile in Higher Ed.” “That’s what ‘mobile first’  is all about. It’s about reintroducing usability with a buzzword. We tack ‘mobile’ onto it so it gets more importance.”

Indeed, “going mobile” has become all the rage in the past few years. Until relatively recently, most institutions attempted to serve mobile users by creating separate so-called “m-dot” sites–or, in some cases, mobile apps. But as mobile web usage becomes more ubiquitous and the number of devices (and screen sizes) keeps growing, the limitations of these approaches quickly become apparent. In addition, we now understand that our users are as likely to be using their iPhone to browse the web while sitting on the couch at home as while riding the bus, thus debunking the so-called “on the go” mobile use case.

“To address these visitors in the most optimal way, we need to come up with a solution that scales for each of these devices as elegantly as possible,” says Erik Runyon, a web developer at Notre Dame who maintains a directory of responsive web sites in higher ed. “Right now, that’s RWD.”

The best argument for responsive web design, says Runyon, is to bring out the numbers, including stats on mobile and tablet traffic and screen size reports. For instance, the Notre Dame Game Day site currently registers nearly half of its traffic from mobile devices–and very little of that traffic comes from on-campus visitors during game days, as Runyon initially hypothesized.

Matthew Klawitter, associate director of digital communications in the Office of Alumni Relations and Development at Northwestern University, thinks RWD just makes sense. “It’s ideal for a website to adapt its layout to the viewing environment or device. We will never control how, when, or where a visitor will access a website, so it is imperative that it work in all contexts.”

The perk of RWD, as Olsen implied, is that to do it right, we have to revisit the basics.

“RWD is a methodology that has a focus on content and IA as a really nice byproduct,” adds Runyon. “Everybody’s like, ‘oh yeah, we gotta support mobile,’ and it’s like, ‘well, then we’ve got to do these things.’”

Managing the Change

Klawitter sees most movement toward RWD coming organically, not from a top-down directive.

“Great digital teams are themselves responsive. They adapt,” he says. “The most successful digital teams right now were built when some other method was the norm. They made the transition to RWD because it suits their nature and the digital culture they’ve created.”

At Texas A&M, however, the move to mobile started at the top. CIO Pierce Cantrell came back from the 2011 EDUCAUSE conference committed to figuring out how TAMU should approach mobile. Allison Oslund, assistant director of IT product strategy and communication, became one of the leaders for TAMU’s Mobile Strategy team. The group embarked on a months-long fact-finding mission into how people were already approaching mobile across the institution and researching the different options, with communications goals and audience needs at top of mind.

Ultimately, the team arrived at the unanimous conclusion that RWD made the most sense. They proceeded to create gomobile.tamu.edu, an information-rich resource designed as a platform to explain the team’s findings and make the case internally for RWD.

Indeed, RWD represents a sea change. It’s not just about a new way of coding–it fundamentally transforms the way web projects are structured, how members of a web team work together, and how web teams work with clients. The waterfall web development approach of moving from Photoshop mockups to coded designs to filling content buckets is a thing of the past with RWD.

“There’s a little more cross-pollination and a little more fluidity in how you talk to one another,” says Olsen, who asserts that RWD done correctly requires a team, not just a solo developer. “You have to take a much more holistic view.”

More often than not, that means starting with the content. Olsen signaled this approach in his November 2011 blog post, “Mobile Strategy is Dead, Long Live Content Strategy.”

“RWD champions content. It strengthens the imperative that designers and developers must work closely with content producers,” says Klawitter. “RWD encourages writers to understand the dynamism of the environments in which digital content is consumed, it forces designers to be agile, and challenges developers to never settle for a fixed definition of the web.”

At Notre Dame, Runyon’s team will start a project by sitting down with the client and discussing content priorities, thinking even at that phase about how they should be reflected on a smartphone-sized screen and how the content will react in a responsive design.

Similarly, at TAMU, Oslund says the process begins with brainstorming around content priorities and hierarchies and how those play out on a mobile phone, then scale up to a desktop. Meanwhile, designers aren’t working on pixel-perfect mockups, but rather mood boards and frameworks. From there, the work is passed on to the developers, who work closely with the designers throughout the development process

“Right now, it takes more time because we’re feeling our way through,” says Oslund. “What I can see is this is going to help us meet deadlines more quickly in the future.”

Olsen says that the added time may not be an issue. “At least from my experience, if you tell people it’s going to work well on mobile, they’re more than willing to give you the benefit of the doubt on time,” he explains. “They see that value-add.”

Bridging the Understanding Gap

Since it’s a new way of thinking and working, RWD may elicit some resistance–from clients, leadership, and colleagues alike.

“This is the first time something so drastic came along that the end users noticed it,” says Runyon, noting the lack of traditional mockups to which clients had grown accustomed.

To counter that, Runyon’s team engaged people through one-on-one conversations, campus-wide brown bag lunches and biannual mobile summits about what RWD was and why it made sense. “As soon as we started educating people on what it was and how it works, no one pushed back.”

At TAMU, in addition to the “Go Mobile” website, the mobile strategy team has been making the rounds giving presentations to audiences ranging from the president to campus communicators.

“As we’re figuring this out ourselves, we’re taking notes and creating case studies that we share with our different audiences,” says Oslund.

Going forward, the team plans to expand available resources to include a blog and branded RWD templates. The goal is to secure a formal top-level university directive requiring all key online public entry points to be responsive by a certain date. In the meantime, the grassroots momentum is building, as members of the mobile team bring insights back to their colleges and departments.

Still, obstacles remain. “The biggest challenge is trying to convince the department leaders and communicators and graphic designers that they need to care about this, too, and why they need to change the way they work,” says Oslund. “Web developers get it and know they need to do it, but if they’re the only ones doing it, it’s difficult if no one is accommodating them.”

One of the most difficult hurdles, she says, is getting through to graphic designers. Graphical elements have new considerations, such as creating touchpoints that can accommodate fingers and moving away from reliance on user behavior such as clicking or hovering.

“You’re asking them to be the bridge between developer and communicator, and telling them they can’t do what they’ve always done in the past,” explains Oslund. “They have to be willing to allow the device to change their design. It’s not going to be the same [from device to device] and that needs to be okay. That’s hard for them.”

Skating Along the Cutting Edge

Given how hot a topic its become, it’s easy to forget that responsive web design is only a couple years old–Marcotte’s book only came out in June 2011. That means we are still figuring out the possibilities, the implications, and the limitations of this approach. As always, the more knowledge we share with one another, the more we will all benefit, learn, and evolve.

“Higher ed isn’t behind in this area. If anything, we’re kind of even and pushing just as much as industry,” Olsen explains. “If somebody’s thinking about it and doing it, they’re definitely on the cutting edge. They’re going to find issues, but they’re also going to solve issues. I’d encourage people to step up and share what they learn.”

That said, what of the next new approach or the next revolutionary treatise that threatens to change the way we work all over again? The good news is, the work we’re doing now prompted by RWD to revisit those fundamentals will serve us well no matter what comes down the pike.

“At its core, if you’re doing RWD right, you’re focusing on good IA and good content. That’s not going to go out of vogue,” says Runyon. “If you have your content well-structured and well-written, that’s just going to be good for whatever the next thing is. It’s not like the next thing that comes along is going to say, ‘Now we need your content to be crappy.’”

Such is the way of the web: Everything is always in flux, except for the things that always remain constant.

“There will always be changes. This makes the industry what it is–dynamic,” says Klawitter. “But, we will always have users. If we are focused on the user at all times, and never stray, the industry will remain strong and vibrant.”

Photo Credit: jronaldlee via Compfight cc