University of Vermont

UVM Self-help Web Guide

Migrating to Mobile/Responsive Web Design at UVM

Visitors are accessing websites with an ever increasing array of devices and browsers from desktop computers and laptops to netbooks and tablets, and, of course, mobile phones. The challenge for institutions like UVM is to devise a mobile-friendly, device-agnostic web strategy that encompasses a large number of pages maintained by a large group of people.

In a nutshell "responsive web design" is a method of web design using CSS and other techniques to allow the layout and content of pages on a website to respond according to the screen resolution and orientation of the device viewing the site. This means making your design and images shrink and grow to the browser window and altering the layout (often the number of columns) at specified resolution thresholds. Additionally responsive web designs allow easy interaction when using a touchscreen and contain video and audio that plays across a wide range of devices. The result, when implemented well, is a highly functional and attractive website regardless of the device used to access it. The technique often eliminates the need to create multiple sites and designs which is particularly appealing to a large and varied site like uvm.edu.

Here are a few non-UVM websites already using responsive web design (note that what makes these sites responsive is visible only when viewed on different devices and/or if you drag your browser corner smaller in an attempt to emulate a smaller device screen):

Rolling out responsive at UVM

The UVM Web Team rolled out a new responsive design for the homepage and top tier of the UVM site on Monday, January 7, 2013. This means that the homepage and all of the main pages of navigation off the top tier (including sections like About UVM, Academics, Admissions, etc....) are responsive at this time. On larger screens such as laptop and desktop computers, these pages don't appear noticeably different than before. It's really when pulled up on smaller mobile devices or scaled that the difference is seen.

UVM homepage on an iPod, iPad and laptop

A glimpse across several devices at the future UVM homepage.

Making your UVM website responsive

Continue to check our Web Guide for updates. If you wish to bring your current publishing system site into the responsive fold, see the directions on how to retro-fit your site, as well as info on help available. For most, the conversion will be relatively fast and easy. If you wish to create a new site at UVM, and wish that to be responsive, our HTML templates are responsive and available for download.

Here’s your short list to help prepare for the transition to responsive design:

  1. Remove the ROT (Redundant, Outdated, Trivial) content from your site
  2. Verify that you have clean, well-structured HTML pages
  3. Focus navigation and content on only the most important data and actions
  4. If you have a mobile device and are not already doing so, spend time navigating the web. It can be an enlightening exercise in discovering the benefits and challenges of accessing websites from these smaller mobile devices.

Last modified January 23 2013 10:31 AM