It’s a fact: Responsive websites solve the challenge created by a world of multiple connected devices—from the latest smartphones to the newest tablets and the largest screens of desktop computers or TVs.
Responsive web design allows the same website to work on all devices. Its principles were first introduced in 2010 by Ethan Marcotte, and early higher ed adopters tried to rely on a traditional web workflow. But while the responsive web design approach should make websites easier to maintain, an already complex web-design workflow has morphed into a confusing monster for both stakeholders and content creators.
Frameworks
Many web teams need better, faster ways to develop the many iterations of deliverables required for a responsive project. Design frameworks, such as Bootstrap and Foundation, fit that bill, says Stewart Foss, founder of eduStyle. “Frameworks have well-tested solutions to many common design problems. [With] a few lines of code, you can integrate those into designs or templates.”
Frameworks cut many steps out of the process, says Nick DeNardis, director of digital communications at Wayne State University in Michigan. “CSS frameworks have advanced to the point where it seems silly not to use them.”
But using them successfully depends on having staff familiar with popular frameworks. That familiarity was the main reason UC San Diego adopted Bootstrap and Foundation, says Brett Pollak, director of the campus web office. “We’re moving toward supporting these frameworks with a UC San Diego branding twist to maximize adoption by developers on campus.”
Frameworks can also have their limitations. “Integrating a framework and making it look native to your site can be a bigger challenge than just creating your own solutions,” says Foss.
Building blocks
Ideally, developers want to create a responsive web design approach or use solutions offered by frameworks, depending on the design problem. They can do this focusing on underlying web design systems rather than pages themselves.
“It’s increasingly important to break down interfaces into their building blocks,” says Brad Frost, the leading voice of the future-friendly web movement. These blocks then become reusable components and help establish a common vocabulary across an entire organization.
That’s the idea behind Atomic Design—allowing designers and developers to break things down into their “atomic units” and assemble the building blocks into larger components until a complete design system is created, says Frost.
With Atomic Design methodology, it’s easy and quick for web developers to code all the building blocks—header, search box, headlines and so on—for a website. One tool that helps achieve that goal is the open-source Pattern Lab, developed by Frost and Dave Olsen, programmer and project manager at West Virginia University.
Olsen uses Pattern Lab and a style guide to develop and test common patterns, so campus designers can build and prototype their new designs. Wayne State’s DeNardis, who has followed this project with interest, says, “Pattern Lab can help institutions inventory and plan for consistent user interface elements.”
While it’s too early to say how many institutions will adopt the Atomic Design methodology and Pattern Lab, both will certainly be part of future workflow discussions on efficient ways to develop responsive websites in higher ed.
Feedback game changer?
The trickiest part of a web project is often dealing with stakeholder feedback. The bigger the project, the worse the feedback gets, since it usually involves a campus committee. That’s why Pattern Lab could become an ideal prototyping environment for responsive websites. It provides a code view for developers, annotations for explaining to clients how features work and a slider to show how elements perform responsively.
DeNardis says that by moving the discussion away from the subjective, superficial design feedback often associated with getting management approval for web reviews, this tool can help everyone focus on the building blocks, combinations and strategy behind crucial user interface decisions.
Karine Joly is the web editor behind www.collegewebeditor.com, a blog about higher ed web marketing, public relations, and technologies. She is also the founder of www.higheredexperts.com.
