Website Design

9 Questions Higher Education Institutions Should Ask Before Starting a Responsive Website Design Project

Feb 21 2013

Authored by Sarah Blecher, Partner, Director of User Experience

If you work in highered marketing or communications, you know that your university web site is the fulcrum of your recruiting platform or students, faculty and staff. On top of that crucial function, your site probably does double-duty as a communication platform not only with prospects, but also with alumni, the media, current students & families, and the general population.

At Digital Pulp, we’ve spent several years collecting best practices from our work designing web sites for higher education institutions including Harvard, Emerson, Dartmouth, NYU, and Pace University.

Today, the question that most of our highered clients are considering is whether to create future content with “responsive web design.”

Responsive design may be one of the pillars of the next generation of web design, as it solves the vexing problem of how to present content on different screen resolutions. (at this writing, there are 1,200 and counting!) The responsive approach to architecture and development results in a site that intelligently responds to the size of a user’s device (desktop, tablet, mobile phone) and magically reorients the content to suit the size of the viewport.

Responsive website Design Visual

Before starting any responsive web design plan for developing a new highered web site, it’s important to know the answers to these nine fundamental questions:

What’s the difference between a responsive university website and regular web site with a separate mobile site?

Responsive in its simplest form means that a single HTML markup is used to create the desktop, tablet and mobile experiences for a school’s web site but the layouts change per device to optimize readability and ease of use. Through JavaScript and CSS, we can now reorder and transform page elements (to some degree) to allow the entire site’s content to appear similar on these three devices, but with a custom layout and controls suited to the device.

Sounds great, right? Well, for some edu’s it is. For others it becomes a real challenge especially when you’re not thinking only about content but also university contact forms, course databases, faculty directory applications or custom marketing layouts that are extremely beautiful at their target desktop resolution. Tools such as these are essential to entice a broad range of prospective students to engage with the school, and may require significant redesign and effort to become responsive.

How do I know if going to responsive web design will yield a good mobile experience?

The truth is you won’t know until you try it. A good first exercise would be to take your university’s homepage content as it exists today and simply reorder and scale page elements for a mobile visitor. Does it work? Is the experience a good one – one that reinforces the quality of education at your college or university? If it is confusing or challenging to navigate, you may need to rethink your strategy.

Does it cost more?

Doing it well does. But there are compelling realities to consider about any university’s target audience. Today, 91%* of prospective students own a smartphone, and user studies suggest we start our research on one device and continue on another. Those facts certainly suggest it’s worth considering responsive web design.

Why would it cost more? Simply reordering and scaling elements that exist on the desktop seems easy to do, but once you start you’ll begin to consider the idiosyncrasies of navigation using a mobile device and will want to do more. You’ll see the benefit of optimizing the experience with more radical differences, such as creating smaller menu systems or completely new elements that only appear at the smartphone level to help mobile users get around more quickly.

Does it impact my .edu content management system (CMS) choice?

It shouldn’t. A responsive approach is all about using the same HTML markup and existing content management system to create unique layouts at various viewport sizes. So any CMS can be used as the administration layer for a responsive website since the code to power the transformations is relegated to the front-end code.

What about .edu site maintenance going forward?

Reusing single HTML code base for all devices does not mean there won’t be extra code to maintain! Because the same codebase is driving all experiences no matter what size, it’ll take more time to dig through and update the code when you go to change a layout or add a section with new content needs. And the quality assurance process will be tripled (at the very least) if testing for the three top breakpoints – more if you want to consider in-between sizes.

Does it put constraints on design?

It does change how you think about design. Designers can make the developer’s job easy….or very, very hard. Creating designs for a responsive site without lots of forethought and team collaboration is a recipe for disaster.  Simply aligning a faculty members photo in a right-hand column on the desktop, and that same photo to be the top item in the mobile layout could set the developer back hours as they figure how to insert that key content into the correct place in the mobile view. The User Experience team (designers and developers) must work closely and collaboratively on your college or university web site to get the most benefit from responsive design.

Does every page need to be responsive?

In short, yes. The header, footer, and main navigation are key elements on any device for both branding the university and allowing users to understand where they are and where they can go. The good news is that these elements are present on every page of the site, so once they are made responsive the only thing left to do is work on the interior page layouts for a completely responsive experience across your site.

Is a responsive approach right for my school’s site?

In general, .edu sites that are largely content-based will get the bang for your responsive buck. If your university site highlights a range of complex or custom contact forms, course databases, faculty directory applications and complicated design overall, responsive may not be for you. Layouts and interactions that are easy on the desktop with it’s expansive space become very difficult on the small screen (especially process-driven ones) and actually require more layout changes than a responsive approach will give you. A good rule of thumb: if you need to do more than reorder content or transform a page element or two to make a mobile experience that is great for your users – consider a dedicated mobile site. A dedicated site will give you that extra flexibility that you need to make those forms, databases, applications and complicated layouts sing.

If I don’t go responsive now, what is the implication?

Many factors will go into this decision, not the least is the extra budget that may be necessary for more complex technical implementation.

But here two things to consider when you decide:

The first is the audience you’ll be missing. Google reported that 15% of prospective students looked at highered sites on tablets and 19% viewed university web sites on their mobile phone last year. (If your mobile stats are much lower you can expect them to grow soon!) If you only have a desktop experience, you won’t be putting your best foot forward for up to a 1/3 of your prospective student audience.

The second thing to think about is the message you’ll be sending about your institution. Your desktop-only site may be a little ungainly, but usable on mobile devices. But the subtle message you’re communicating is that your university is not technologically advanced. And being behind the times in technology can tarnish the high quality reputation you’ve spent so much time establishing through other channels.

*Reported at the 2012 CASE Conference