|
University of Waikato Web Style Guide
This document does not specify technical implementation details of templates for any particular platform. Rather, it is a guide to the form templates should take, their mandatory elements, design issues and rationale. More information on the ITS server hosted implementation is also available
These templates are being phased in to the university, being applied to the central university pages initially. It is intended that ALL university public webpages use this template . You may also be interested in an overview of the process the PR & Marketing Committee undertook developing the web templates.
Layout
The University web template consists of three sections, explained below:
Header Format
Every public webpage must include a header which contains:
"Global" Navigation Links Bar - The top navigation contains hyperlinks
which are "Global" to the sub-site. The global links should stay the same on every page of the sub-site, so users become familiar with them.
Typically the global links will be the significant sections that the sub-site is
structured into. The template allows room for 7 hyperlinks.
Ideally users should not have to learn new terms when they enter a different
part of the university website. Therefore, where possible sub-sites should use
the same wording and order as the central university homepage: Learning, Research, Library, Enrolment,
News, About Us, Contacts. For example, all sub-sites should use the link
"Contacts" rather than variations on this such as Contact Us, Contact Info,
Address, Enquiries. The common "News, About Us, Contacts" links should
appear at the right-hand end of the list.
The top navigation links are written in full uppercase. As prominent and
persistent navigation, it is expected that users will read them once and
become familiar with them. -
Sub-site Title - The title of the sub-site can be included in the top navigation
bar. The title can be text or an approved School wordmark graphic, and
should include a hyperlink to the sub-site homepage.
University crest (and optional School wordmark) - a horizontal, web-optimised
university crest (both the coat of arms and name) should always be included on
the top-left of publicly accessible webpages. This image file should never be used
in printed communications, such as in Microsoft Word.
Higher resolution crests are available for downloading from the Public Relations and Marketing office website
An optional variation of the web template using a condensed University Crest
and School Stationery Wordmark in the same space is available for situations
where the School name or wordmark cannot appear as the sub-site title (e.g. a
department name has been used as the sub-site title). However, this is not the
preferred option as it reduces the prominence of the School and University name.
It may be possible to include the department name as Heading 1 in the page
contents, rather than as the sub-site title. -
Search function - The search is carried out on the contents of the sub-site by
default (i.e. the division or school being viewed, rather than the entire university)
and the search results will make this clear to users. A link to "Advanced
Searching" is included below for more options.
If the page content also contains a search function (e.g. the catalogue of papers) then a variation of the web template with the
header search function suppressed can be used to prevent confusion between the
two search mechanisms. The "Advanced Searching" link can still be used for
users wishing to do a university-wide search.
-
Breadcrumbs - Breadcrumbs (or a "backpath") allow users to see where they are
and assist navigation within the complex university website. The breadcrumbs
show where users are in the site structure, not necessarily the path they have
taken to reach that page. All breadcrumbs should begin with the "Waikato Home" link, and do not include the name of the currently viewed page.
The page names that appear in the breadcrumbs are defined in the
template parent include file for each sub-site. The space between the breadcrumbs
and the Advanced Search / Print Version options should be left empty to
accommodate long breadcrumbs when users are several layers into a site.
User Functions: Advanced Searching / Site Index / Print Version / Text Only - Important user functions should be included at the top of the page for easy
location, and so that they do not distract the eye significantly.
Footer Format
Every page should include a Footer which contains consistent user and technical hyperlinks:
-
Copyright and legal statement - a link to the copyright and disclaimer notice
-
Address - a link to UoW address page, or a similar sub-site page
-
Contact Author - a link to the contact author tool if available, allowing
users send a message to the author of the webpage. The author of the page
is specified by the HTML "author" meta tag.
-
Back to top arrow - using the official Back to Top widget from the University of Waikato widgets collection.
-
Organisation Name - The name of the sub-site division,
faculty or school appear at the bottom of the page. The name should be in
italics, both English and Maori (separated by a dash "-")
-
Last modified & personalisation features generated by the web server.
Additional "bottom of page" navigation features should appear above the Footer. The footer should be the final element on the webpage.
Page Contents
Waikato University webpages use a 2 or 3 column layout. The third "see also"
column is recommended, but can be removed if extra space is required.
Left-hand column - for "local" navigation within the sub-site.
Hyperlinks should be categorised into logical groups. Research suggests users
have difficulty choosing from lists of more than about seven items. Hyperlinks
should be short and concise, using language familiar to users. E.g. "Students"
rather than "Current Students", "Services & Support" rather than "Services
and Support". The local navigation links should use the "sidemenu" class/style. The strong
red background used on "sidemenutitle" ensures key navigation headings are
prominent, and in a colour palette that does not clash with other parts of
the template. The left-hand column is recommended to be 160 pixels wide. Middle column - for the main content of the page. It should contain the
"Heading 1" class/style followed by the main page content.
Authors should use the classes/styles (e.g. Heading 1, Heading 2) built-in to the
University of Waikato 2004 Cascading Style Sheet (css), rather than manually formatting with
Bold, Italic, colour and size options. This ensures every webpage is formatted
exactly the same and will allow all pages to be updated with new templates
easily in future. See the css guide for details and examples UoW styles/classes.
The middle column is recommended to be 460 pixels wide, which restricts the
length of a line of text to a readable length (even if the left and right-hand
columns are empty). Right-hand column - the "see also" column. As the last column to be viewed,
this column should contain secondary information. This could be a summary of
the page's contents ("on this page" links), photos, ads (text or graphical)
promoting information we want readers to know (such as events), links to other
services that readers may be seeking, or other relevant cross-referencing.
The "ltdwidth" class/style may be useful for the narrow right-hand column, as it
does not fully-justify text. The right-hand column is recommended to be 140
pixels wide, but may be altered or removed altogether depending on the page
content.
Other Design Elements
Page Title
The page title appears in the web browser title bar and is used when webpages
are bookmarked or appear in a list of user's favourites. Page Titles should begin
with their specific title and end with the organisational unit's name including
"University of Waikato", so that a specific description of the page appears first
a list of bookmarks. E.g. "Degrees - Faculty of Arts & Social Sciences - University
of Waikato."
Photography
The use of vibrant, relevant photography is a useful way to express the identity,
strengths or topic areas of a sub-site. See Section 2 of the University of Waikato
Brand Style Guide (4MB pdf) for advice on photography. Clear, vibrant photography (not
faded, feathered images or collages) is recommended.
Adequate spacing around images, such as a horizontal spacing of 10 pixels and
vertical spacing of 2 pixels, is recommended.
Pop-up Windows
A variation of the web template designed for pop-up windows is available.
variation includes a simplified version of the red header curve, and does not
include the complete header and footer in order to maximise the available
window space.
Common widgets/graphics
A library of common icons, such as the "back to top", "bottom of page", "home",
"email" icons, is available for authors to link to in their webpages. The icons are
stored in the main images folder. The icons should not be copied
or replicated to allow for any future updates. Consistent use of these icons
further reinforces the professionalism of the overall university website.
An arrow shaped favourites icon is also used
when university webpages are bookmarked.
|
