Web Publishing Guidelines » University Template, Design, Accessibility and Usability
- University Template
- Design Credibility
- Standard Page Layout
- Typography
- Writing for the web
- Additional techniques to improve accessibility
- Usability and testing
2.1 University Template
A University web template is available for use. Use of this template would help ensure that your site meets many of the web requirements and go a long way towards meeting many of the guidelines detailed in this document.
2.1.1 Who can use the template?
This template is for use for official University web publications.
As the concepts and code used in the template are complex it is envisaged that it will be used by experienced web developers only. Those who are not experienced web developers and who wish to use the template for their site should contact the relevant member of the Web Team for support and advice.
2.1.2 Scope and Philosophy
Use of the template will help the University unify visual standards for online communication.
The templates are designed to form a flexible but disciplined framework - it must be stressed that using this template does not prohibit or inhibit the ability of faculties, departments, institutes or projects to publish content that is geared towards their subjects or are branded to their specifications.
Through consistent placement of navigation and page structure users will become familiar with the University's web pages, increasing ease of use and engendering confidence. Users of mmu.ac.uk should instantly be aware that the page they have visited forms part of the greater University whole.
2.1.3 University Web Requirements and Guidelines
The web template conforms to the University's own Web Publishing Requirements policy. These requirements include accessibility, identity and meta tags.
The template also conforms to many of these University Web Publishing Guidelines.
2.1.4 Code structure
The templates are currently offered in XHTML and PHP.
The templates are built using valid code. Clearly content will be added to the template or certain elements changed before publication - therefore publishers should make sure that the finished page is valid by checking them via the W3C's Markup Validation Service.
2.1.5 Design Approach
Representing the University's visual brand and values online raises it's own set of challenges. There are elements that must remain constant to ensure clarity of identity, and elements that are flexible.
The templates have been designed to address these principal aims:
- Clear MMU brand identity
- Clear communication
- Consistent page structure
- Flexible elements to portray departments, faculties, projects etc..
- Accessible
- Quick to download
- Work across a wide variety of browsers / platforms (including NN 4)
- Fit in a 800 x 600 pixel screen resolution
- Not forgetting - useful and positive experience for the user!
2.1.6 Template structure and Implementation Guide
The following graphics and list show the elements which must remain constant, those which are flexible and those which are open.
A constant element is an element that cannot be changed.
A flexible element is an element that can be changed within certain parameters.
An open element is an element that can be changed.
It must be emphasized that in using these templates you are publishing information that represents both the University and your department, faculty, project etc. It is important therefore that, as an official University publisher, you should not undertake to change any element that has been deemed constant.
The template is made up of the following elements - banner, content and style.
The style elements affect the whole document especially font and colour.
2.1.7 Banner
The banner is made up of elements that can be applied to any page across the MMU sites. It is MMU branded, and contains the MMU logo, section identity, global links, text only link & search box that tie any page into the overall MMU structure. It acts as unifying device and ensures no page becomes a dead end. It engenders confidence in users as they know they will find 'lifelines' within the banner [search, homepage etc.] that act as conduits to useful information should they visit a page whose content is not what they were looking for.
The banner structure consists of the following elements and their status;
| Element | Status | ||
|---|---|---|---|
| i. | Logo | Constant | The logo is constant and therefore must not be changed. |
| ii. | Global navigation | Constant | The global navigation is situated at the top of the banner, these link to main and useful sections of the MMU site. These links are regarded as 'lifelines' and the familiarity of the branding style aids usability. This navigation is constant and therefore must not be changed. |
| iii. | Search box | Flexible | The search box is located in the top right of the banner, and appears on every page. This function performs a contextual search that returns results relevant to the content of the page searched from; with options to search the entire site, or perform an advanced search from the results page. This element is flexible - it should always be a search box however publishers could change this to a local search rather than MMU wide. |
| iv. | Text only link | Flexible | The text only link is flexible. A text only link should always appear here however the background colour and style could be changed by a web publisher. |
| v. | Breadcrumbs | Flexible | The breadcrumbs are a trail of main sections that a user has been through to reach the current page. e.g. "MMU homepage > Style guide > Page design". The previous sections are hyperlinked, and use the breadcrumb style found in the style sheet. These are located in the light blue bar at the bottom of the banner. This navigation is flexible - a breadcrumb trail should always appear here however the background colour and style could be changed by a web publisher. |
| vi. | Section identity | Flexible | The section identity is flexible and can hold imagery and text as well as different colours. The section should always be used for identity and therefore publishers could change the content/colour to suit their needs. Please see the examples at section 2.1.11 to see how this section identity can be used. |
2.1.8 Content
The content element is almost entirely open . It consists of the section navigation, page content and footer.
| Element | Status | ||
|---|---|---|---|
| i. | Section navigation | Open | The section navigation is a menu of links is situated on the left of the template. This element is optional and open for your use. |
| ii. | Page content | Open | Page content is open for your use. |
| iii. | Footer | Flexible | A common set of footer links appear on every page - legal, feedback, and copyright. This navigation is flexible - the links must appear on the page to comply with the university web publishing requirements however it is up to the designer where and how they should appear. |
2.1.9 Style
The style of the template consists of the following elements. All elements are contained in the style sheets.
| Style | Status |
|---|---|
| /*Redefined HML Tags*/ | |
| body | Flexible (except padding) |
| p | Flexible |
| table | Flexible |
| td | Flexible |
| form | Constant |
| /* Headers */ | |
| h1 | Flexible |
| /* Links */ | |
| a | Flexible |
| a:hover | Flexible |
| a.link | Flexible |
| a.link:hover | Flexible |
| a.body | Flexible |
| a.body:hover | Flexible |
| /* No Margin Body Class */ | |
| .mmu_no_margin | Constant |
| /* Global Navigation Links */ | |
| a.mmu_global_nav | Constant |
| a.mmu_global_nav:hover | Constant |
| /* Site Search Box */ | |
| .mmu_search_cell | Flexible |
| .mmu_search_box | Constant |
| .mmu_search_button | Constant |
| /* Banner */ | |
| .mmu_banner_cell | Flexible |
| .mmu_banner_corner_cell | Flexible |
| .mmu_banner | Flexible |
| .mmu_banner_title | Flexible |
| /* Side Navigation Cell */ | |
| .mmu_side_nav_cell | Flexible |
| /* Side Navigation Links */ | |
| a.mmu_side_nav | Flexible |
| a.mmu_side_nav:hover | Flexible |
| .mmu_side_nav | Flexible |
| /* Text Only Cell */ | |
| .mmu_text_only_cell | Flexible |
| /* Text Only Links */ | |
| a.mmu_textonly | Flexible (only colour) |
| a.mmu_textonly:hover | Flexible (only colour) |
| /* Breadcrumb Cell */ | |
| .mmu_breadcrumb_cell | Flexible |
| /* Breadcrumb Directory Links */ | |
| a.mmu_breadcrumb_directory | Flexible |
| a.mmu_breadcrumb_directory:hover | Flexible |
| /* Breadcrumb End */ | |
| .mmu_breadcrumb_end | Flexible |
| /* Footer Links */ | |
| a.mmu_footer | Flexible |
| a.mmu_footer:hover | Flexible |
| .mmu_footer | Flexible |
2.1.10 Template Files
| Directory/File | Description |
|---|---|
| /images/ | Directory which contains all images used. |
| /includes/ | Directory which contains all include files. |
| /includes/phpsniff/ | Directory which holds the browser detection script - phpsniff. It is doubtful developers would want to change anything present here. |
| /includes/breadcrumb.inc | File for setting the breadcrumb function. |
| /includes/browser.inc | File which sets the correct css and other variables. |
| /includes/customise.inc | File which sets the breadcrumbs. |
| /includes/footer_inc.php | File which includes the template's footer. |
| /includes/header_inc.php | File which contains the template's banner. |
| /includes/side_nav_inc.php | File which contains the template's side navigation. |
| /styles/ | Directory which contains the template's css. |
| index.php | Main index file. There are variables here. |
2.1.11Example Use
Some examples of the templates in current use are shown below:
 |
 |
 |
 |
 |
 |
 |
 |
2.1.12 Availability
Before considering using the template publishers should contact their relevant member of the web team for advice.
The template code is available from the Internet Manager - m.deyes@mmu.ac.uk , tel: 0161 247 2196.
2.2 Design Credibility
If not using the University template web publishers should seriously consider the design credibility of their web pages prior to uploading or during any redesign programme.
MMU's top-level pages and template are designed to stand alongside high-profile commercial standard websites and give the impression of a professional organisation with high standards and a commitment to quality.
Using amateur 'gizmos' can severely damage your professional credibility.
The graphical design of your site, while not the most important aspect, is the first thing a user sees upon entering and is the first opportunity you have for establishing credibility.
2.3 Standard Page Layout
If not using the University template Web publishers should strive to design their pages to the MMU Standard Page Layout:
 |
|
| A - Identity (and Navigation) | |
| B - Navigation | |
| C - Content | |
2.4 Typography
To promote consistency publishers should use one of the University's preferred web fonts; Arial, Verdana, or Helvetica.
2.5 Writing for the web
It has been well documented that people tend to spend little time reading most web pages, instead we scan them looking for words that catch our eye. As a result web pages could employ scannable text, using:
- highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
- meaningful sub-headings (not "clever" ones)
- bulleted and numbered lists
- one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
- the inverted pyramid style , starting with the conclusion.
- half the word count (or less) than conventional writing
Some further information on writing form the web is available from http://www.useit.com/alertbox/9710a.html
2.6 Additional techniques/best practice to improve accessibility
Many of the MMU web requirements are either aimed at improving accessibility, or improve accessibility as a side-effect, so this section is aimed at highlighting techniques and considerations which aren't covered elsewhere.
Principles worth considering
1. You can't predict the particular needs of every user of your site. A more fruitful approach would be to produce a design which works for as broad a range of users as possible, while avoiding design techniques which get in the way of your audience setting their own preferences or using specialised or adapted browsers. For example:
• Avoid using fixed sizes for text, as in most browsers this will disable the text resize/zoom functions which would otherwise allow visually impaired users to make the text larger.
• When using CSS styles, avoid using the !important keyword in style rules as this will make it difficult for some users to use their own style sheet to set up customised font, text size and colour settings.
• If you use tables for your visual layout, make sure the content makes sense when it's rendered linearly.
2. Consider the unstyled/text rendering as well as the graphical rendering at the initial design stage and throughout the process. It's far easier to work accessibility into the design from the start than to try to bolt it on later. This has been made much easier through the use of CSS, as to a great extent you can separate the underlying page structure/content from the visual layout.
An example of this can be seen on the MMU Library site (http://www.mmu.ac.uk/library), where the underlying structure is:
• Breadcrumb trail navigation. (This includes a first link to skip it and move straight to the page content, which is hidden when viewed in a graphical browser.)
• Main page content.
• Main navigation. (Placed here so people using audio browsers hear the page content first, then the navigation, instead of having to listen to the navigation links at the start of every page. This way round, you hear the links at a point where you want to move off the page anyway.)
• Small print. (Links to copyright statement, policies etc.)
When rendered in a graphical browser, though, the main navigation is positioned at top left, in accordance with the MMU standard page layout.
Standard HTML elementsIntelligent use of standard HTML elements can greatly improve your audience's experience of your site when using specialised/adapted browsers. For example:
- Headings and links: if you use the relevant markup correctly (properly nested and meaningful headings, meaningful link text), you will greatly aid users of audio browsers who may do the equivalent of skimming the page by listening to a list of the headings within the page, or a list of the links. Using meaningful text for links will avoid the user getting a list which reads something like "click here, click here, click here, click here", which isn't a great deal of use. Especially if the person doesn't use a mouse, so won't be clicking on anything, anyway.
- Using valid list markup is particularly useful for lists of links (it helps some screen readers to separate a continuous set of links accurately, for example), and CSS provides a means to do remarkable visual transformations on lists so they don't have to look like bullets etc if you don't want them to. Styled lists can be a particularly useful alternative to table-based navigation bars, for example. Check out the Listamatic site for ideas and examples (http://css.maxdesign.com.au/listamatic/).
- Alt tags on images are mandatory in HTML 4 and later, and are obviously useful for visually impaired users and others who use text browsers. However, just incorporating text into alt tags throughout a page without considering the end result in a text-only rendering of the page can make it unpleasant to use, with repeated information and inappropriate phrases interrupting the text flow. This hinders comprehension rather than aiding it. Blank alt tags (ie with nothing between the quotation marks - alt="" ) are usually completely ignored by text browsers, which can be invaluable for reducing text clutter. Many images in web pages are effectively eye candy rather than conveying useful information (spacers, icons which already have text equivalents included etc), so making them disappear completely in text browsers can be helpful.
HTML includes markup which allows you to incorporate additional navigational help for people who don't use a pointing device such as a mouse:
- The accesskey attribute allows you to provide a keyboard shortcut for a particular link or page feature. You do need to tell users what these shortcuts are, so this technique is probably more suited to providing shortcuts to standard navigation which is on every page, such as a search box, a home link etc.
- The tabindex attribute allows you to tailor the order in which the cursor moves around links within a page when using the tab key on the keyboard. This is particularly useful where the visual presentation of the page is different to the underlying structure, as in the example given above.
Avoid using inaccessible file formats without providing accessible alternatives. The main culprits here are Acrobat (PDF) files, which are often used for providing downloadable versions of documents. Acrobat files have many advantages, but they aren't accessible to some people, primarily those with visual impairments. Newer versions of the Acrobat reader have improved accessibility features, but they are still not ideal. So:
- Provide an accessible alternative alongside any Acrobat documents you provide for download.
- The ideal solution is to provide the same information in a standard web page (HTML).
- If page layout features are important, you can substitute a word processor file, but in this case it's important to avoid proprietary formats so that the file can be used by as many people as possible: not everyone has Microsoft Word, for example, or uses a computer for which it is available. A better solution would be to use Rich Text Format (RTF), which is supported by the vast majority of word processing software across a variety of computer platforms.
- State that alternative versions are available upon request (and make sure they are!)
Tips on accessible design from the DEMOS website:
| http://jarmin.com/demos/access/index.html |
| Listamatic: http://css.maxdesign.com.au/listamatic/ |
| W3C accessibility documentation: http://www.w3.org/WAI/ |
2.7 Usability and testing
The practice of ensuring that the pages you produce work properly in the real world with a real audience is called usability.
Important points of of usability:
• Consistent placement of navigation and page structure
• Remember [western] people read left to right, top to bottom
• Therefore: most important screen area = top left
• Create a logical screen hierarchy [following the above points]
• Clearly title all your content, and pages
• Keep your content concise
• People scan copy looking for relevant links [headings and bulletpoints are good devices . . .]
• Features supported by images can be very eye catching
• Use general language [avoid technical jargon where possible]
• Consider what your audience are likely to be looking for
The best way to ensure usability is to test your designs with real people.
After you have worked on a site for a few weeks, you can't see it freshly anymore, to only way to find out if it really works is to test it.
Recommended reading: 'Don't make me think' by Steve Krug [Available from the MMU library]
In a Usability test, one user at a time is shown something [a website, a prototype or even just sketches of pages] and asked either (a) what they think it is, it's purpose, or (b) carry out a task.
Important points about Usability testing:
Testing always works - Even a bad test with the wrong user will show you things that will improve the site.
Test early in a project - carry out a simple test early in the project while you have time to learn from it.
Target Audience - It's good to test with people who are likely to use the site but is more important to test early and often.