Back in April we mentioned that we were working on a new responsive design for the main W&M website (www.wm.edu). After a few browser fights (thanks Internet Explorer), a dozen test devices and many hours of coding and tweaking, we launched our new design on July 23, 2013. Now every office, every academic department and every other page on the W&M site adjusts its layout to best accommodate your device (desktop, laptop, tablet or mobile).
The announcement
To announce the launch our office made a little stop-motion video (our first!) starring the computers, phones and tablets of various Creative Services staff members:
The motivation
Desktop/laptop view of the W&M website. The green bar on the left is the page navigation, center light tan area is the main content, and the darker tan boxes down the right side are the supplementary content.
The idea behind this change was spurred in large part by the fact that our mobile and tablet visits have gone from less than 2% of our site traffic in 2009, to over 17% of our traffic this summer. With so many mobile and tablet visitors (and more sure to come) we wanted to ensure everyone could easily navigate and view all of the content on our website, not just our homepage (which we made responsive last year).
Prioritizing content
So what was involved in this redesign? Up first was evaluating which parts of any given page are the most important. As you might expect, it’s the main content. That main content is why you search Google, click a link in a social media post, or work your way through navigation menus. This needs to be front and center (and top) regardless of how you are looking at the website. So, after our global site navigation and header, the most prominent thing you will see is the main content.
The major changes
Tablet view. Here the right column has been moved below the main content area and the top “global” site navigation has been adjusted from one row to three.
As you begin decreasing the width of your browser (or view the site on a tablet or similar device) we adjust the global navigation to become three rows rather than one. We shift the right column, which contains “widgets” with photos, Twitter feeds, related links and other supplementary content, down below the main content. As the page width narrows further (or you view the site on your phone) the global navigation and search are collapsed, and the left menu drops below as well (keeping its familiar green background for continuity). Keeping in mind the importance of page navigation, announcements and events, we add convenient links to these elements just above the main content.
Throughout these incremental steps the content is shaped to fit the width of the page, and photos and tables are resized to be as visible as possible. Nothing is removed, only rearranged to best showcase the content. This is a key feature of responsive design.
Those with a careful eye may also notice a few style tweaks made to enhance the user experience. One of the most prominent usability improvements was to ensure that our treatment of text links is consistent throughout the site—if a word is bright green (underlined or not) it is always a link. In addition we removed busy lines from menus, adjusted the color and size of content headings, and increased the font size and line height of the main content. These and other small updates were made to give the site a bit more space to “breathe” and to make things easier to read.
Cheap as free “mobile version” for all, no app needed
Mobile view. A link to the site menu replaces the menu itself and the main content comes up front and center, with supplementary content following.
One of the best parts about a responsive design is that it is a seamless improvement for the folks creating the web content. Nothing changed in Cascade (our web content management system) from the web editor’s perspective. They still enter their page title, content, photos, links and so forth, just as they always have, except now the content they entered is mobile (and tablet and desktop) “friendly.”
What’s next
Currently our team is focusing on updating our four graduate school sites with their own responsive designs. Along the way we’ll also be making a variety of supporting sites responsive (those W&M sites not hosted in Cascade, like the directory, W&M Experts and W&M Events).
What do you think of our new design?
~Tiffany Broadbent Beker (@tb623)