Responsive Web Design and 4 Higher Ed Websites That Are Getting It Right

“A responsive website adjusts to various screen sizes, not only giving a consistent experience across platforms but also eliminating the need for a separate mobile site. Streamlining website maintenance saves time and resources, allowing you to invest in other areas without sacrificing excellence.” – Mark Neal, C. Grant & Company, Integrated Research, Strategy and Marketing

In years past, desktop devices were the most popular tools used in conducting Internet searches. Desktop web designs took front row seats ahead of mobile design, and many never believed they would see a day when PC/laptop use for online searches would fall to smaller, handheld devices. Now, with the explosion of smartphone and tablet Internet use, it is no longer a question of designing a website simply to get your message across to visitors – now it is more about designing your website to fit the growing needs and demands of those visitors and the avenues they’re using to access your online content.

Let’s take, for instance, this infographic on Most Popular Devices Used in a recent report by Smart Insights:

Desktop vs Mobile Stats

Infographic from Smart Insights.

The closeness in use of PC’s and laptops to conduct online searches (91 percent) compared to smartphones (80 percent) is startling, to say the least. Add to that the growing number of emerging devices and you’ve got yourself a recipe for a point of no return – the way in which people are accessing online information is forever being altered by the various – and growing – options they now have to get the information they need. According to a Pew Research Center report, almost 35 percent of Americans say they access the Internet primarily through the use of a mobile device. Karen McGrane of Harvard Business Review said in The Rise of the Mobile-Only User that marketers and web designers do not get to choose which device customers use to access the Internet but instead, it is our responsibility to deliver the same experience to them across whatever device they choose. With this rise in alternate access points comes the need for an integrated, multi-screen-adapted Internet viewing experience.

Enter Responsive Web Design (RWD).

Responsive Web Design

Examples of how multi-screen use of RWD.

Web Developer John Polacek offers a simple definition of RWD as “websites that respond to their environment,” or, rather, websites that are built with the capability to automatically adapt to whatever screen size a user is viewing the site on. A good starting place with RWD, is designing with a mobile-first approach. A more effective experience can be had by enhancing your site for each device instead of starting with desktop design and trying to edit your website to fit mobile.

At the end of this month, RWD will become even more important to marketers when Google’s new mobile-friendliness search algorithm launches, rewarding in rankings those websites that are fully optimized for mobile platforms.

While brands everywhere should be feeling the pressure to adapt their online presence to RWD, no field has seen quite as many benefits from the trend as that of higher education institutions.

Admissions recruiting has never so heavily had to rely upon, not only the aesthetics of an online presence but the usefulness of it as well. According to research from Edison in 2013, more than 75 percent of people, ages 18-24, own smartphones, and 75 percent of teens – a prime demographic for undergraduate institutions of higher learning – are more apt to use devices other than desktops to go online. In addition, an annual report from the Higher Education Research Institute at UCLA in 2013, revealed that 97 percent of students visited a college’s website on mobile, and most of those students didn’t find the experience satisfying. At a minimum, colleges and universities should be optimizing pages such as academics, cost and aid and admissions for mobile usage.

Mobile Web Use

Mark Neal of C. Grant & Company writes in Responsive Websites: Four Reasons Why Universities Should Make the Switch, that responsive web design “gives prospective students, parents, and potential donors alike the best user experience possible on your website. A responsive website maximizes the impact of your institution’s web presence across multiple platforms.” College and Universities that have made the leap to utilize RWD have opportunities to shine a light on their ability to adapt to the changing times by delivering exactly what their target audience needs while other brands are still struggling to catch up.

Here are four higher education institutions that are getting – and in some instances, have been getting – responsive web design right.

#1. Sewanee – The University of the South

Sewanee desktop

Sewanee’s desktop homepage

Sewanee mobile

Sewanee’s Mobile site

Sewanee’s mobile site is a mini version of its desktop design. In fact, if it weren’t for the mobile-friendly menu located at the very top of the smartphone-adapted design (which makes up for the missing horizontal, top-of-page navigation), you might not even be able to tell the difference, the experience is so seamless. Sewanee’s RWD is definitely a mobile-first creation, with a focus on content. When clicking on the smartphone-adapted version of the site, the first few options are “Academics” and “Admissions and Financial Aid,” a few of the most important searches to prospective students visiting a college website for the first time. The load time for Sewanee’s mobile site is impressive, especially considering the large flashing banner images, and is a testament to the benefits of RWD.


#2. George Fox University

George Fox desktop

George Fox University desktop site

George Fox mobile

George Fox University on Mobile

Though George Fox University in Oregon may have one of the most interesting desktop sites, utilizing video in place of its banner image, the schools mobile-ready site is what is under investigation here. The smartphone enabled site offers a variety of options right away for vertical viewing – including the school’s contact information at the top of the site and a menu built into the main body. The most interesting part of the George Fox RWD is that the mobile experience changes as soon as you flip your device to horizontal viewing. In horizontal mode, the site looks entirely similar to the desktop version. Besides its considerate menu in vertical mode, the mobile-ready site next lists tabs for the satellite locations of the university, followed by upcoming events and news.


#3. Regent College

Regent College desktop

Regent College desktop site

Regent mobile

Regent College mobile site

Regent College, a Canadian-based institution, has a very clean and modern-looking desktop design, with large, colorful tabs and high-quality photography. Like Sewanee’s site, Regent’s mobile-optimized sites are a mini version of the larger desktop site. With the bold tabs splayed across the top of the mobile-ready site and easily digestible blocks of content viewable upon scroll, Regent’s RWD may be the most polished so far.


#4. Samford University

Samford University desktop

Samford University desktop site

Samford University mobile

Samford University mobile site

Samford University in Alabama shows that content is top focus with their RWD. The mobile-ready site mirrors the desktop site but offers a few different pieces of content compared to the other institutions featured here – including a homepage section on interesting, eye-catching, infographic-style facts and figures about the university. This design is the only one of the four that utilizes more images in its RWD, and though this creates more of a need to scroll for a longer period of time, the images add more personality to the design.


These are just a choice few of the hundreds of colleges and universities taking steps to create great responsive web designs. Can you think of any higher education institutions that have fallen behind in the mobile-ready game?

Advertisements

2 thoughts on “Responsive Web Design and 4 Higher Ed Websites That Are Getting It Right

  1. Katie, thank for your post on responsive web design in higher education. It was a great surprise to see Samford University have a better website than most of the other universities in Alabama. Samford’s site is easy to navigate and looks great on a cell phone, tablet or desktop.

    The University of Alabama has a mobile version of the website, but it’s very stripped down. There are no graphics on the page other than the top rotating image.

    Auburn University (my alma mater) is very good when it comes to social media, but doesn’t even have a mobile version of its website. I viewed the full version of the site on my mobile device. I was constantly having to pinch to zoom in and out. The update is that I didn’t find any sites that couldn’t be viewed on a mobile device. It may have not been the best experience, but there was no Flash or fancy graphics that wasn’t compatible with my iPhone.

    Do you think responsive web design is more difficult to achieve when there are large websites involved? Is it necessary for universities to have a responsive website design?

    Links
    http://www.samford.edu/
    http://www.ua.edu/
    http://www.auburn.edu/

    Like

    • Hi, Bret,

      Thanks for reading. I’m not necessarily saying that Samford has THE best RWD site in all of Alabama. I realize that some of the larger universities probably have bigger budgets to spend on their websites – and do. Rather, I wanted to highlight a smaller, private university (in Alabama of course!) that is making an effort to stay relevant in the 21st century. Smaller, private colleges and universities do not have as much of a budget to work with as larger institutions – say like UAB – and expenses for things like website redesign often falls to the wayside (at least that has been my experience working in higher education). Only just a few years ago, Samford’s website was not quite as pleasing to visit (again, my experience). I found the organization to be not so intuitive and things were often outdated. The fact that they now have such a modern, clean and easily digestible website (that is RWD focused) is impressive to me (though it was hard to find ANY major college or university in Alabama that did not already have a RWD site). And, also, large universities like UAB, Auburn and U of A usually get all of the publicity – I wanted to call attention to a smaller institution doing great things (and I’m also kind of partial to private colleges).

      To answer your question, yes, I think RWD would be more difficult to achieve for a larger university. A university I worked for several years ago had thousands upon thousands of pages online – many of them outdated and no longer in use. Just one school within the university had thousands upon thousands of pages of content. In “Can Your Content Make It Mobile” by Giselle Abramovich of CMO, the concept that mobile content should be “liquid, linked and loved” is brought up. “Liquid means that the content works on all screens; linked means the content drives an action and never leads to a dead end; loved means the content should be interesting enough that an audience seeks it out.” Can you imagine trying to put this strategy to use on a website that is millions of pages deep? I think a university with a site this deep should perhaps just start over – start with the smallest school sites within the university and work your way up, applying RWD and creating mobile-ready content. It is ABSOLUTELY necessary that higher education institutions have responsive website design. With the proliferation of online learning programs (such as WVU’s IMC program), I think students are going to move online even more than they are already and, as my article states, they already start searching first for “the perfect match” online.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s