The university’s web templates were last updated in the spring of 2012, following the launch of the Big Orange. Big Ideas. campaign. Three years later, and following the recent announcement of a new logo for the university’s flagship campus, it is time for another update.
The new templates were presented to the Chancellor’s cabinet on March 16, 2015. Following cabinet approval, the templates were then presented to campus communicators at a public forum on March 26, which was announced on the CAMPCOMM listserv group (campus communicators, graphic designers, and web designers, you can join CAMPCOMM here).
The presentation covered our process for developing the templates, which involved face-to-face interviews with campus communicators, two rounds of usability testing (mobile and desktop), ongoing accessibility testing, “competitor” research, and a mobile-first mindset.
The new templates will be made available for download on June 1, 2015, as HTML/CSS files and as a WordPress theme. Ideally, all campus units will be able to complete migration of existing websites to the new templates by June 2016.
- Design templates with users of mobile devices first in mind
- Improve campus website usability by developing a consistent, clear navigation scheme that works equally well on desktop and mobile
- Create a clean canvas upon which campus communicators can share their unique messages, while at the same time clearly identifying each unit as a part of the University of Tennessee, Knoxville
- Develop a flexible, usable template that can accommodate sites of varying sizes (whether a center, department, institute, or college with four pages or 400)
- Develop a template that is accessible to visitors who use assistive technologies to access the internet
- Address common, valid concerns about the current templates, especially about required elements taking up too much space at the top of web pages
- Fixed width (960px)
- Required: university header with logo, university Google search, and universal “toolbar”
- Required: unit header image with unit name “written” in Gotham typeface in specific size/weight
- Required: university footer with Big Orange. Big Ideas. graphic
- Customizable unit header image background (color/image)
- Optional, customizable giving bar
- Optional, customizable expanded footer
- Lots of graphic textures in the header, expanded footer, and background
- Responsive (i.e., mobile friendly)
- Required: new primary university logo (at top left)
- Required: unit name (HTML text, no image requirement)
- Required: unit contact information (appears above the university footer)
- Required: university footer with Big Orange. Big Ideas. graphic, university Google search, and universal quick links
- Customizable giving link now included in main menu
- Customizable site background color and highlight box colors, etc.
- Mobile-friendly, left-hand primary navigation menu with flyouts allowing for improved usability
- Content “filter” functionality for database-driven websites
- Multiple options for presenting content at varying widths, with different layout options for images, sliders, accordion folds, callout quotes, etc.
- Site content begins 158 pixels higher on desktop
- Site title appears 142 pixels higher on desktop
The screenshots provided here show how the site scales down for presentation on a mobile device or tablet with a narrow viewport. The second screenshot shows the menu (with “Find a Page” filter) that is revealed when a visitor interacts with the “Find Page” button. The third screenshot demonstrates the “typeahead” functionality that provides a content filter for the website (available for database-driven websites).
For development purposes, we imported content from one of our larger sites, McClung Museum, to test various page layouts and navigational depth. In the screenshots provided here, you will see examples of a landing page, what that same page will look like if a visitor scrolls to the bottom of the page, interior pages, examples of a site using different background colors, and examples of the fully extended navigation panel. These are all screenshots of the desktop view.
We will be posting additional screenshots as development continues and will also link to pilot sites as they are launched starting in May.
TRAINING & DEVELOPER ROUNDTABLES
We will post information about template training sessions and developer roundtables as we draw closer to the template launch date of June 1, 2015.
E-mail your questions to email@example.com. We’ll collect your questions and assemble a list of “frequently asked questions” to post here.