University of Vermont

UVM Self-help Web Guide

Develop a UVM Mobile Web Presence

An increasing amount of traffic to the UVM website comes from mobile devices. If you are also seeing an increase of mobile traffic to your site (Google Analytics can tell you this information), you may want to consider creating a mobile presence. We offer three different options for creating your mobile site.

Five basic principles of mobile Web design

All supported methods of developing a UVM mobile website advocate best practices in mobile Web design. As you design your actual mobile content it is important to keep the following principles in mind:

  1. Create a simple layout
    Mobile users want their information fast. Mobile screens are much smaller than computer screens so arrange your content in a single column layout. Mobile phones don’t use a mouse so try to minimize the amount of scrolling.
  2. Edit your content
    Mobile users want to access information quickly therefore your content should be easy to read and navigate. Edit your content so you only display your most important information. Think of prioritizing your content into one column — choosing the most important content to display becomes paramount.
  3. Reduce number and size of images
    Keep in mind smartphone users are paying for bandwidth. The longer they wait for images to load the more money they’ll have to spend. Limit the use of images and graphics.
  4. Minimize page size
    Mobile users usually get charged per KB of mobile Web data therefore page sizes should be kept simple and small. The maximum page size recommendation for a mobile page is only 20 Kb, so try to fit within this size.
  5. Design navigation for clickability
    Ensuring that your mobile layout has large and easy-to-press links and clickable objects is essential to streamlining the experience of navigating your site. Reducing the amount of clicks required to achieve an action is all the more important in mobile Web designs.

UVM's Kurogo Framework

UVM's official mobile site at m.uvm.edu uses the Kurogo Framework by Modo Labs. Sites using the Kurogo framework are optimized for a wide variety of mobile devices from feature phones to modern iPhones and Android phones, iPad users also have a design specifically designed for this larger mobile device.

UVM departments who wish to develop a site within the Kurogo framework work with the Web Team to identify and organize content that already exists on their full sites to be used in their mobile sites. The Web Team maintains the site's navigation and layout but the department retains control of the content itself by updating content on their full website.

UVM's Web Publishing System

The UVM Web Publishing System can be used to develop a mobile website using the specially designed mobile template. A mobile site using this method is constructed exactly like any site using the system with content and navigation controlled exclusively by you. The mobile template includes a limited set of features including main (and sub-) menus, a default graphic, and the content modules such as courses, calendar, etc. The mobile template integrates the jQuery mobile framework in order to tailor the browsing experience for mobile users.

To configure a site using the mobile template you need to add the following row to your magicoptions.html file:

template_file mobile2011

Standalone UVM Mobile Template

For Web developers who require a more flexible framework in which to develop their mobile site, we offer a downloadable template. The template includes the basic UVM Mobile header, footer and navigation design. The template can be incorporated into other CMS systems or used to construct individual HTML pages formatted for mobile.

Method Comparison

Method Advantages Disadvantages

UVM's Kurogo Framework

  • Customized experience across most mobile platforms
  • Includes existing data from your site (no need to replicate content)
  • Your RSS Feeds can easily be incorporated
  • Overall look and feel is centrally maintained
  • Your site will automatically be incorporated in the official UVM Mobile site (m.uvm.edu)
  • Low maintenance costs
  • High degree of guidance from the Web Team
  • Your site's structure must be maintained by the Web Team
  • Included HTML content must be contiguous and have a mobile-friendly format

UVM's Web Publishing System

  • Uses a self-service model (you maintain complete control over navigation and content)
  • Overall look and feel is centrally maintained
  • Uses a "familiar" publishing method
  • Integrates the jQuery mobile framework
  • Low maintenance costs
  • Supported by the Web Team
  • Content duplication is often required
  • Pages may require special coding to take advantage of the jQuery framework
  • Content must reside on UVM's zoo server

Standalone Mobile Template

  • High level of creative control
  • Can be used with or without the jQuery framework
  • Can be used with non-UVM servers or other CMS systems
  • Minimal support from the Web Team
  • Higher degree of maintenance required than other methods
  • Will require updating as UVM's mobile look and feel changes

Last modified September 13 2011 01:06 PM