Responsive Web Design in Higher Ed

[This paper is an excerpted version of the ECAR Working Group paper, "Understanding Responsive Web Design in Higher Education," now publicly available. ECAR Working Groups bring together higher education IT leaders to address core technology challenges. Individuals at EDUCAUSE member institutions are invited to collaborate on projects that advance emerging technologies important to colleges and universities. —Author]

In higher education, nearly every user interaction that takes place on a desktop or laptop browser is also attempted using phones, tablets, watches, and more. From visiting websites to registering for classes, finding campus locations, and checking grades, people interact daily with institutions using mobile devices — often while on the go — regardless of whether the information is optimized for those devices.

People accessing higher education institutional sites from mobile devices often get their first impressions from that experience. A well-designed responsive site, transparently optimized for viewers, is needed to efficiently and proactively provide an effective user interface, regardless of device size and type. Someone viewing a responsive site does not have to know anything about responsive design; they simply have a great experience that feels catered specifically to their device.

There are costs associated with implementing responsive web design (RWD), such as devoting more effort to planning a website, more effort to designing the user experience, and more effort to do the coding. However, not implementing has costs as well. The best web developers currently see mobile as an extension of their environment, not as a separate effort. Mobile-friendly app stores often will not link to websites not using RWD. Most higher education mobile apps eventually deposit users on their campus gateway sites; do you want your students to feel as if the experience was seamless and smooth, or clunky, slow, difficult, and outdated? Will you welcome students with awkward scrollbars and pinching activities, or with an experience that feels modern, fluid, and fun? If you can't communicate a technology-savvy brand with students on the devices they prefer, both your institution and the students lose. RWD offers the most cost-effective way to meet this demand for a good user experience by using a single site with a flexible interface to cater to all types of devices, including tomorrow's.

What Is Responsive Web Design?

Responsive web design is a future-friendly approach that applies standards-based technologies to create websites that transform to fit the user's needs and capabilities, considering aspects such as screen size, pixel density, context, bandwidth, and battery life, among others. Content collapses to fit on small devices and expands to make the best use of more real estate on larger devices. It allows web developers to create a single site supporting all types of devices instead of having to create different views for phones, tablets, desktops, TVs, wearables, etc.

Three concepts lie at the core of responsive design:

1. A fluid grid with the layout defined proportionally rather than with fixed dimensions
2. Flexible images and video that scale to fit within the grid
3. CSS rules designing layout and typography for devices based on their size

Together, these concepts allow a browser's rendered web page to adapt and transform based on the dimensions of the device used to access it.

Responsive design has matured substantially from its early days. Today, a number of frameworks exist that jumpstart development and solve responsive challenges. Additionally, frameworks provide training, documentation, and communities of practice. As the web platform continues to grow, so too will the practices around responsive design. Currently, responsive design focuses on device dimensions, but browsers are exposing additional details needing attention, such as network telemetry, ambient light, and battery life. With this information, responsive sites might soon also adjust media quality and colors and exhibit other behaviors to best fit a user's needs and a device's capabilities.

Although several approaches guide developing a responsive website, any approach should follow several best practices for keeping the site organized and usable.

• Content Inventory: Catalog all content, keeping the best and most relevant information, condensing areas that overlap, and eliminating anything that's not required.
• Navigation: Where a desktop site easily accommodates multiple navigation regions, a smaller screen needs highly intuitive and organized navigation. It must be as simple as possible so that users can easily and logically reach the information most relevant to their needs.
• Maintenance: A responsive website requires that — like existing content — new content be as effective on the smaller screens of mobile devices as it is on larger screens. Additionally, care should be taken so that the responsive site does not lose sight of its goal and, over time, turn into a collection of non-mobile-optimized content, including tables, high-resolution images, PDFs, and extended lists.

Critical Success Factors

Three critical success factors underlie the ability to consistently produce RWD websites:

• Look and Feel: Without a consistent design and navigation providing continuity and brand recognition across your site, you risk confusing or, worse, losing your audience.
• Usability: RWD ensures that content is equally available across devices. Poor usability means that users won't be able to find or consume your content.
• Performance: Poor performance will lead users to perceive a site as outdated, if not broken. Content that isn't digestible by mobile devices — such as when websites try to send large images over a "small" data pipe — will cause users to see your web pages spin and spin rather than producing the content they seek.

RWD fundamentally shifts the web development landscape. It requires expanded skill sets and closer communication, forcing web teams to rethink how they develop sites and interact with one another. Understanding RWD is not just about things working — it's about them working smoothly all the way through the experience.

When implementing responsive design, you can't rely on web designers, developers, and writers working in isolation; instead, consistently delivering high-quality RWD sites requires a new team. An effective team is an integrated team that includes:

• Web Designer: Pixel-perfect mock-ups and wireframes do not fit the responsive design paradigm; instead, web designers must consider an ever-changing screen size and work closely with web developers to create designs that reflow based on the visitor's device.
• Web Developer: A programmer who is expert in web applications, the developer implements the brand the designer has created.
• User Experience (UX) Designer: The reduced screen size and capabilities of mobile devices present challenges around site content and navigation. A UX designer guides design decisions and coaches content owners on their expectations to ensure an experience that behaves well on all devices.
• Web Writer: Print material, and even material written for desktop sites, does not necessarily comport to a responsive context because of the reduced screen size on some devices. A web writer reduces and transforms content to make it effective and consumable on all devices.
• IT Cloud Provider: When working with cloud providers, IT departments need to be aware of the provider's commitment to RWD at the onset of a new agreement and include it as a requirement in RFPs and a clause in their contracts.

Conclusion

More and more, responsive web design is becoming a critical pillar of an institution's overall mobile strategy. Device manufacturers continue to develop web-enabled devices in ever-expanding resolutions and capabilities. Whatever new devices appear, they will likely add yet another set of dimensions and capabilities, and there is no guarantee that any particular types of devices will remain the primary delivery platforms for information. As a result, it is critical to ensure that the data and content that power our websites and applications can be consumed in many different ways.

Our job as IT agents equates to that of the traditional packaging, warehouse, distribution, and delivery person. We represent the final link in a long chain of effort that builds our institution's reputation and brand because our product — aside from educating students — is largely information. We need to make the consumption of our institutions' information easy, seamless, and pleasant. This is the core value-add of responsive design: It is future friendly and optimizes websites for the devices of today and tomorrow.

Karen A. Wetzel is program manager for the ECAR Working Groups at EDUCAUSE. She has worked in higher education for nearly 20 years, joining EDUCAUSE in 2011. In her current role, she works with a variety of constituencies to ensure that current IT issues, emerging trends, and opportunities of special interest are identified, supported, and communicated. Previously, she served as standards program manager for the National Information Standards Organization, and managed the Association of Research Libraries' distance learning initiative. She holds a BA from the University of California, Los Angeles, an MA from Boston College, and an MLS from the Catholic University of America.