This guide aims to help Monash web designers, developers and content authors of all skill levels create, maintain and manage high quality websites. It provides information on branding, usability, accessibility and technical requirements.
The design and branding guidelines apply only to Monash University web pages. They do not apply to course materials in MUSO. Monash University web templates must not be used on personal pages.
To make the Monash website a success, we need to design for our users. This section provides information about the target audience groups for the Monash website, and suggests ways in which you can work with your users to better understand their needs.
The Monash website is used by three main audience groups:
In addition, a number of external groups are also part of the target audience for the site. These include:
Some Monash websites have may not have all these groups in their target audience, while others may need to cater for groups that are not identified in this list.
If you identify your audience, your website has a far greater chance of catering to their needs. It is important to work with business representatives, particularly those in marketing, to identify your target audience groups, as well as any secondary audiences.
Once you have identified your target audience groups, you need to develop an understanding of their information needs, and the issues that affect how they use your website.
A number of methods can be used to assist with the task of understanding users' needs. These include:
When identifying users' needs and preferences, consider some of the following questions:
Monash University's strategic vision, as outlined in "Monash Directions 2025", challenges the university to deliver a high level of quality in all areas of activity including teaching, learning, research, and professional and community activities.
A commitment to quality assurance is critical to the success of Monash websites.
To ensure the accuracy and quality of the information published on Monash websites, all content should be subjected to an editorial review process and an approval process.
The Web Resources and Development group (WRD) run a free workshop for Monash staff and students - Establishing a quality assurance process for your website.
Using the university's content management system (CMS) can assist in automating these processes.
Content should not be published without planning how it will be maintained. A regular maintenance/review schedule should be developed and followed for all online content. Using the university's CMS can assist in automating the maintenance/review schedule.
All webmasters/persons responsible for maintenance of a Monash website should ensure that a quality assurance process is developed and adhered to. A quality assurance process should include:
A website that is usable is one where the user is able to clearly identify the information they need and/or perform the task they came to the website for.
To assist the user in this, there are several things you need to consider.
Navigation is how users get to where they want to go. It is the pathway they take through a site.
User orientation consists of the visual clues that allow a user to know where they are in the structure of your site. Without these clues, users often feel "lost" and can find navigation more difficult.
One of the most important things on your website is the content you are presenting. The more clear and relevant the content is to the user, the more usable it is.
In its broadest definition, "web accessibility" is an approach to web design that aims to include the widest number of people and user agents as possible. Commonly, when people speak of web accessibility they are referring to access for disabled user groups.
The university has a legal obligation under the Disability Discrimination Act 1992 to develop and maintain accessible web pages. Our websites are required to comply with the accessibility standards developed by the World Wide Web Consortium (W3C). These standards are the Web Content Accessibility Guidelines (WCAG).
WCAG1.0 contains a number of checkpoints. These checkpoints are grouped into the following priority levels:
All Monash websites must meet all of the priority 1 checkpoints. In addition, all priority 2 checkpoints should also be met, except for checkpoint 3.3 that requires layout to be handled by stylesheets. Stylesheets cannot be used for layout because of the difficulties with stylesheet implementation across different browsers.
The Monash web templates have been authored to achieve compliance with these standards. They also meet some of the checkpoints listed as priority 3 requirements in WCAG.
Other areas in the Web Style Guide that deal with accessibility issues.
Amendments to the Education Services for Overseas Students (ESOS) Act 2000 include a legally enforceable national code for all registered providers of education programs to international students in Australia. The introduction of the Act coincided with amendments to the Migration Act and Regulations governing student visas.
To comply with the Act, Monash websites must include the university's CRICOS Provider Number in the footer of each page, as shown below.
Ensure the text "CRICOS Provider Number: 00008C" is linked to the CRICOS and Visa information for international students web page.
The standard web templates have been set up with the required CRICOS Provider Number in the footer. To get a copy of the web templates, contact your faculty or divisional web team
For more information on ESOS requirements, visit the Monash International ESOS web page (staff only).
All official Monash University websites must display copyright information in the footer of each page in the following format:
Copyright © 2007 Monash University
The standard web templates have been set up with the required copyright statement in the footer. To get a copy of the web templates, contact your faculty or divisional web team
Many countries have legislation or policies relating to accessibility of information or services online. In Australia, Section 24 of the Disability Discrimination Act 1992 states:
Section 24 of the Disability Discrimination Act 1992
Failing to put content online in an accessible format may leave the university open to legal action. In addition to complying with accessibility standards, ensure that the link to accessibility information appears in the footer of every web page.
The standard web templates have been set up with the required Accessibility information link in the footer. To get a copy of the web templates, contact your faculty or divisional web team.
Monash University is subject to the Information Privacy Act 2000 (Victoria). The university is committed to protecting the privacy of people using our websites. The Monash University Websites Privacy Statement, sets out how the university will deal with personal information recorded through the use of its web sites.
Please ensure that a link to the Monash University Websites Privacy Statement, using the link text 'Privacy', is included in the footer of every web page, as shown below.
The standard web templates have been set up with the required Privacy link in the footer. To get a copy of the web templates, contact your faculty or divisional web team.
All university websites must link to the caution page in the footer of every web page, as shown below. The caution page details how Monash withholds the right to change published information when required and that previously published information doesn't bind the university.
All official Monash University websites (excluding the sites of our international campuses and centres) must display the university's Australian Business Number (ABN) in the footer of every page.
ABN 12 377 614 012
The standard web templates have been set up with the required caution link and ABN number in the footer. To get a copy of the web templates, contact your faculty or divisional web team.
The Monash University brand is more than the logo. The brand includes the university's name, courses, history, people, and reputation. The users' experience of the Monash University website is also an integral part of the brand and it is important that this experience is one that enhances the brand.
The Monash branding for websites is captured in the approved web templates and these should be used wherever possible.
All administrative and business units of the university come under the Monash University masterbrand unless an exemption has been obtained from the university's Marketing and Student Recruitment division. To contact the Marketing and Student Recruitment division, email marketing@monash.edu.au.
Centres with cross-faculty affiliation should also use the masterbrand as attempting to use multiple faculty sub-brands and colours on a website may be unworkable.
Masterbrand websites must use:
The approved masterbrand colours for websites are as follows:
| Page component | Colour |
|---|---|
| Global navigation bar and data table header | #339 and #FFF |
| Global utilities bar | #36C and #FFF |
| Highlight box header | #36C and #FFF |
| Section navigation column | #EAEFFA and #339 |
Each faculty has been given a distinct colour and a modified sub-brand.
For centres that have two or more faculty affiliations, the masterbrand should be used.
Websites for all schools, departments and centres within a faculty must use:
Faculties can use grades of their faculty colour though adequate contrast between text and background colours should always be maintained. To determine whether a selection of colours has adequate contrast, a colour contrast testing tool is available.
The approved faculty colours for websites are as follows:
| Page component | Colour |
|---|---|
| Global navigation bar | #3B3838 and #FFF |
| Global utilities bar | #B1AFAF and #000 |
| Highlight box and data table header | #B1AFAF and #000 |
| Section navigation column | #EBEBEB and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #911C11 and #FFF |
| Global utilities bar | #CFA19C and #000 |
| Highlight box and data table header | #CFA19C and #000 |
| Section navigation column | #F4E8E7 and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #00889C and #FFF |
| Global utilities bar | #99CFD7 and #000 |
| Highlight box and data table header | #99CFD7 and #000 |
| Section navigation column | #E5F3F5 and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #C7B34C and #000 |
| Global utilities bar | #DFD499 and #000 |
| Highlight box and data table header | #DFD499 and #000 |
| Section navigation column | #F7F4E5 and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #E9B050; and #000 |
| Global utilities bar | #F9E8CD; and #000 |
| Highlight box and data table header | #F9E8CD; and #000 |
| Section navigation column | #FCF3E6 and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #653579 and #FFF |
| Global utilities bar | #C1AEC9 and #000 |
| Highlight box and data table header | #C1AEC9 and #000 |
| Section navigation column | #EFEAF1 and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #968D81 and #000 |
| Global utilities bar | #C3BEB7 and #000 |
| Highlight box and data table header | #C3BEB7 and #000 |
| Section navigation column | #F0EEED and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #75BDEB and #000 |
| Global utilities bar | #B1D9F4 and #000 |
| Highlight box and data table header | #B1D9F4 and #000 |
| Section navigation column | #EBF5FC and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #B8C160; and #000 |
| Global utilities bar | #D8DCA5 and #000 |
| Highlight box and data table header | #B8C160 and #000 |
| Section navigation column | #F5F6E8 and #339 |
| Page component | Colour |
|---|---|
| Global navigation bar | #195E4A and #FFF |
| Global utilities bar | #99B7AF and #000 |
| Highlight box and data table header | #4C8172 and #FFF |
| Section navigation column | #E5EDEB and #339 |
Some organisational units have been granted sub-brand status. For example, Monash South Africa, Monash University Malaysia, Monash Research Graduate School, Monash University Accident Research Centre, Monash University Library, and Monash International.
Sub-brand websites must use:
The approved colours for sub-brand websites are as follows:
| Page component | Colour |
|---|---|
| Global navigation bar | #000 and #FFF |
| Global utilities bar | #339 and #FFF |
| Highlight box and data table header | #339 and #FFF |
| Section navigation column | #EAEAF5 and #339 |
Commercial entities with links to the university also use a sub-brand but without the Monash University shield. For example, Monash Commercial, and Monyx.
Websites within this category:
Websites of other entities associated with Monash University, for example, student associations:
Where Monash University is just one of a number of organisations involved in a project, centre or activity, use of the Monash University brand, while necessary, must be negotiated with the needs of other entities involved.
Further information on co-branding requirements is available from the Monash Brand Guidelines (staff only).
Entities within Monash who have existing logos should contact the Marketing and Student Recruitment Division at marketing@monash.edu.au to discuss the continued use of these logos under the Brand Guidelines.
Personal pages should not use or attempt to mimic any of the branding or visual design aspects of the official Monash University web designs. Professional profile pages that are part of a faculty, school, centre or department site are exempt from this requirement.
For examples of images for different target audience, see the Monash Brand Guidelines (staff only).
Photographic images used for decorative or promotional effect on official Monash University websites must be approved by Marketing and Student Recruitment. For image approval email uniweb@adm.monash.edu.au.
Other images and graphics (such as diagrams, process charts, and screenshots) appearing on Monash web pages must be of a high quality but do not need official approval.
Images appearing in the header of the university's top-level pages cannot be re-used on other Monash University websites.
Navigation is closely tied with the structural organisation of a website. It is important to get the structure right before designing your navigation. Often you will need to consider the design of the structure and the navigation as part of the same exercise.
The information architecture of websites includes an organisation scheme (content categories) and a structure (usually hierarchical).
Information can be structured according to a variety of organisation schemes.
On the web, hybrids of two or more of these schemes are usually used. For example, on the Monash home page a hybrid of audience-specific and topical organisations schemes is used.
Organisation schemes work best when users understand them. Work with target audience groups when creating or refining the site's organisation scheme. Card sorting and content agreement analysis (see resources below) are user-centred methods for designing an organisation scheme. Usability testing can confirm that the resulting scheme is workable.
Avoid designing an organisation scheme that mirrors the structure of the organisation. Users who are unfamiliar with the organisational structure may find it hard to locate resources. Also, organisational changes will require changes to the organisation scheme.
There are two main approaches to organisation structures on the web: hierarchical or top down, and bottom up as in database models. Some sites also use a linear structure, though this is generally unsuitable for anything other than very small sites.
Hierarchies are simple and effective ways of organising information and everyone is familiar with how they work.
Three important things to remember about designing hierarchies are:
The database model is useful with relatively homogenous content. Course information and staff directory content are good examples.
In the database model, metadata is the key. Here, the metadata relates to structural elements of content objects. For example unit code, unit name, unit description, prerequisites and year offered are elements of the unit content object.
Use of a linear structure assumes that users will move through the content starting from point A, and progress through an ordered series of page to point Z.
This may be useful for material that requires a linear approach, e.g. some instructional material, but this approach is generally unsuitable for websites with more than a few pages.
Each of the following is available from the Monash library.
One of the main functions of a home page is to provide users with an overview of the content and resources on offer. Generally, home pages should present users with the top levels of the information hierarchy (for faculties and sub-brands, some of this might be included in the global navigation bar). A set of quicklinks is sometimes used on home pages to allow users easy access to popular resources. Home pages may also include feature content (e.g. promotions, expos, open days) and news items that are updated regularly.
Guidelines for home page design:
The Monash home page devotes most of the screen real estate to showing users the content available on the site.
Section home pages play a similar role to home pages. They act as a gateway to the content within a section of a website and can be designed in a similar way.
Guidelines for designing section home pages:
If the site is master brand then section navigation can be developed to act as global navigation around the site. The following figure shows a site with three sections. The section home page has section navigation which links to each of the three sections along with a link at the top to the site's home page.
A second option, if the section home page doesn't have section navigation acting as global navigation, is that the page will simply link to content pages underneath it.
The following figure shows a site with three sections. The first two sections contain a number of grouped content pages. Each group contains an index and a number of sub pages. For these two sections the section home page contains a link to the index of each one of these content groups.
The Monash staff page is an example of good section home page navigation. The main content available for staff is highlighted through a series of links that occupy the primary screen real estate.
Content pages provide content and should form the majority of a website. They are destination pages rather than pages that users pass through to reach information.
Content pages exist below the section homepages in the site map hierarchy, as shown in this content site map.
The kind of navigation that appears on content pages depends on the navigation structure chosen for the section home pages. There are three different options.
With some sites, such as masterbrand and faculty sites, the global navigation forms part of the web template and cannot be changed. As a result, sites and subsites sitting under these templates (for example, the Research at Monash subsite) can use section navigation for navigation around all the sections contained within the site. In effect, the section navigation acts as global navigation. Please note that section navigation should never appear on the site or subsite's home page (see Designing home pages).
The following figure shows a site with three sections. Each section home page includes section navigation that allows a user to access all other sections of the site. This section navigation also includes a link to the site's home page. All of the subsequent content pages will carry the same section navigation.
If the section home page doesn't use section navigation as global navigation, then the section navigation can be used to navigate around content pages that exist within that one section (rather than the whole site or subsite).
The decision of whether the content page needs to have this form of section navigation depends on the size of the sections and the amount of information they contain.
The following figure shows a site with three sections. Each section has its own home page and its own section navigation. Content pages within a particular section will use that section's navigation.
If the size of a section is small and the section page doesn't use section navigation as global navigation then the content page does not need to include section navigation.
The following figure shows a site with three sections. Due to the small amount of content included in each section, it isn't necessary to include section navigation.
The Monash web templates support a range of navigation systems. You will need to design your navigation systems and customise your templates to reflect your design.
Faculties and sub-branded sites must customise the global navigation bar. This will provide site-wide navigation and requires careful planning. Options for global navigation include links to the main content sections on the site, or links to the most-used features.
Design global navigation in conjunction with home page navigation. Home page screen real estate must be used well and should not simply repeat the items in the global navigation bar. Section navigation will also need to be considered at this stage.
The navigation for the main Monash website was designed through a series of workshops with a range of stakeholders. Global navigation focuses on providing access to information about the core business of the university, through links to Faculties, Campuses and About Monash. Primary contact information is also provided. The home page navigation provides access to the same content, but the focus is on catering to target audience groups.
Global navigation must:
Using Monash Commercial as an example, the relationship between the site map and the global navigation can be seen. The following site map shows the Monash Commercial home page and its four sections (research commercialisation, products and services, about us, and contact us). This site map does not show the number of content pages under the section home pages.
The following screenshot shows how the four sections in the site map become the links in the global navigation - with each link pointing to the appropriate section home page.
The screenshot below shows the global navigation used on all Monash Masterbrand websites. It includes the following links: Monash home, About Monash, Faculties, Campuses, Contact Monash.
On the Adobe website, the global navigation provides access to the main sections of the site: products, solutions, support, purchase, company
The global navigation elements on the Macromedia website (Home, products, support, solutions, store) are similar to those on the Adobe website, which is not unusual given the similarity between the two companies.
http://search.monash.edu.au/emailThis example shows how the limited scope search is used on the Web Style Guide sub-site.
A script generates the breadcrumb bar used on Monash web pages. A configuration file allows for customisation of the bar.
Guidelines for the breadcrumb bar:
Section navigation provides navigation around a section of a website. In the case of Masterbrand sites, section navigation may provide site-wide navigation (eg the ITS website).
Guidelines for section navigation design:
The screenshot below shows the section navigation used within the Web Style Guide sub-site. All navigation options were available from the style guide home page.
Contextual navigation is used to provide links to related information. These links may be embedded within the text of a web page or grouped together and labelled "related links" or "see also".
Guidelines for contextual navigation:
title attribute to provide more information about the target pagetitle attribute to distinguish one link from another if this cannot be avoided.See the <a href="tutorial-navigation.html" title="Advanced tutorial on navigation design">tutorial</a> on this topic.
The web templates provide a skip link that allows users to skip over repeated blocks of navigation to access the content of a page. Without this, navigating through each page would be very tedious for some users. Those using screen readers would have to listen to the content of the page header being read out every time they visit a new page. People who cannot use a mouse would have to press the tab key to get to section navigation or a form located within a page. They would have to do this on every new page they visited.
The image below shows the location of the skip link at the top right of the page. The arrow points to the area on the page that is given focus when the skip link is used. Ensure that you do not remove the skip link.
For some disabled users, a site map or site index might provide a less confusing alternative to navigating your site. For others, search may provide an easier means of locating resources. These supplementary navigation features must be provided on all Monash websites.
To assist users who navigate using the keyboard, a series of shortcut keys have been implemented in the Monash web templates. These shortcuts use the accesskey attribute to provide keyboard shortcuts for important navigation options. The following accesskeys have been defined in the official Monash University templates and should not be removed.
To use keyboard shortcuts, hold down the alt key (Mac users need to use the control key) and press the relevant number key. In some browsers, the enter key also needs to be pressed.
Note: accesskeys do not work reliably for all users. Some keys may be reserved by other programs that the user may be running. However, we have provided them as they may be of benefit to some users.
Framesets are a collection of two or more HTML documents loaded into individual frames to create the appearance of a single page. Frames are not recommended as they are hard to implement well.
If frames are used, ensure the title attribute provided for each frame set is meaningful. People using speech readers or text browsers rely on the title attribute of each frame set to assist in navigating the site.
The title attributes should be descriptive enough to enable users to identify the contents of a particular frame, understand how one frame relates to another, and navigate between the frames that comprise a page.
A noframes element must also be used. It must provide access to the site's content for those using browsers that are not capable of dealing with frames.
<frameset rows="30%,70%">
<frame name="nav" src="nav.html" title="Site navigation" />
<frame name="content" src="content.html" title="Page content" />
<noframes>
<body>
<h1>Our home page</h1>
<ul>
<li>About us </li>
<li>Courses </li>
<li>Teaching </li>
<li>Research </li>
<li>Staff profiles </li>
</ul>
<p>Welcome to our home page</p>
</body>
</noframes>
</frameset>
Image maps are images with hotspots that act as links to other pages. Image maps are not recommended for navigation on Monash websites.
Where image maps are used, it is important to ensure the image map is client-side, its hotspots are at least 15 pixels squared and its hot spots have meaningful alt attributes.
<img src="navigation.gif" width="500" height="212" usemap="#navmap" alt="Site navigation" />
<map name="navmap">
<area shape="rect" coords="203,114,258,129" href="/aboutus.html" alt="About us" />
<area shape="rect" coords="277,113,348,129" href="/courses.html" alt="Courses" />
<area shape="rect" coords="364,113,401,128" href="/research.html" alt="Research" />
<area shape="rect" coords="418,114,488,130" href="/staff.html" alt="Staff profiles" />
</map> Do not use Java applets and JavaScript for navigation on Monash websites. For consistency, clarity and simplicity, all Monash websites must use the navigation systems provided by the Monash web templates.
A navigation label represents a chunk of content. For example, the label 'Contact us' usually represents the name, phone number, fax number, address, and email address of the organisation that owns the site. This label should trigger this association in the user's mind.
Even the best site structure and navigation systems will be undermined by poor labelling, so it's important to get it right. Some tips on improving labelling include:
Links are often included within the text on a page as a way to provide access to background or supplementary information. When links are placed within chunks of text, users sometimes click on the links before reading the text nearby. They can then end up moving away from the information they were looking for. If you include links within text, try to place them at the beginning or end of a paragraph. Avoid using too many links in any text chunk as they can distract attention away from the content.
A better approach may be to group the links together at the bottom of the page or paragraph using the heading "related links" or "see also". Highlight boxes can also be used for links to related or background information.
Always use the Monash style for links: blue underlined text. Never underline text that is not a link.
Wrong: To find out more about our new Science courses click here
Right: Find out more about our new Science courses
Do not use a URL (web address) as the text for a link. Where necessary, rephrase your text so that you can add the link to text that clearly describes the target of the link.
Wrong: For conference details visit www.scienceconference.com
Right: For more information, visit the Science Conference website
Where any link takes the user to a page that is not in HTML format, the format and size of the linked resource must be indicated and included as part of the linked text, using the following approach:
Wrong: Annual Report 2002
Right: Annual Report 2002 (pdf 250kb)
Where a document is provided in multiple formats either of the following approaches is satisfactory, although the first is preferred as it aids visual scanning and the link target is immediately clear to screen reader users. Where the latter is used, ensure that each link has a title that provides complete information about the linked resource (also shown below).
Right:
Acceptable: Annual report 2003 (pdf 286kb, rtf 510kb)
<a href="annual-report-2003.pdf" title="Annual report 2003 in PDF, 286kb">
docpdfrtftxtxlspptexezipWhere any link takes the user to a page that is not publicly accessible, the access restrictions must be indicated and included as part of the linked text, using the following approach:
Wrong: Monash staff policies
Right: Monash staff policies (staff only)
The link text for email links must be the actual email address:
Wrong: Contact the webmaster
Right: webmaster@monash.edu.au
If you are linking to an online form or a contacts page make this clear.
Wrong: Email us
Right: Feedback form
A step-by-step approach to page creation and design will help you create pages that have a logical and clear structure. The information shown here will help you make the best use of the screen real estate for effective page layout, provides advice on writing good page titles, and will help you choose sensible file and directory names.
On a web page, the most important elements should appear on the first screenful of information. As people set their monitors to different screen resolutions, the amount of information seen on the first screen varies. Browser toolbars also take up space. It is safe to assume that about 300 pixels will fit within the first screenful. Use this space to provide users with a clear indication of the page contents.
On content pages content, not navigation, should be the primary focus. Resist overdoing navigation on these pages. Site designers may be interested in navigation, but users are interested in content and see navigation only as a means to an end.
Navigation should dominate on navigation pages (e.g. home and section home pages). See website navigation.
Place images and text on pages in a way that creates a clear visual hierarchy. Creating a visual hierarchy helps to:
It is important to keep page length in mind when designing pages.
Named anchors provide navigation within a web page rather than around a website. Except in the case of the skip link, avoid using named anchors. They are often used in the belief they help users move around a long page, however:
Named anchors may cause problems with users:
Because named anchors and links appear the same when users click a link they expect to go to a new page. They can become confused/frustrated or think the link is broken when the same page reloads.
Users often use the back button to navigate a site. If the user has clicked a named anchor they have to click the back button twice. Clicking the back button once will just reload the page they are presently looking at. This may cause confusion or frustration and may lead them to conclude that the browser back button is broken.
Despite the availability of faster download speeds there are still many users with slower connections. For example, off-campus students in rural areas may only have access to dialup modems. People accessing the web via their mobile phone may also have a very slow connection:
Apart from the last two, web authors cannot do anything to improve page loading time.
Complex tables and frames can slow down display speeds, so:
Page size can be measured by adding up the size of all the page components (HTML file, images, stylesheets, etc).
Netmechanic's load time report measures page size.
These are available from the Monash University Library.
Web page titles are used in a number of ways. They:
If you are using a visual web page editor, you may need to look at the HTML source code view of the page to see the page title. It will be located inside the <head> tags at the top of the document, within the <title> tags. It should look like this:
<title>Page title</title>
Page titles must be written so that they:
A title should start with the specific and move to the general. Begin with a title that reflects the content of that page and then move to include the context in which the page exists. When describing an organisational unit, abbreviate as much as possible. For publicly accessible Masterbrand sites, refer to the organisation as "Monash University".
Do not use:
<title>Monash University, Prospective Students Office, Prospective Students</title>
Use this approach instead:
<title>Prospective students, Monash University</title>
Do not use:
<title>Usability guidelines, Web Style Guide, Monash University</title>
Use this approach instead:
<title>Usability guidelines, Monash Web Style Guide</title>
The page title and the page heading (<h1>Page heading<h1>) will convey similar information. When a user reads the page heading, the rest of the page helps gives context to the user. For example the logo, branding, breadcrumbs, section navigation, etc, all help the user understand where they are and what they are looking at.
Page titles are often read out of context, for example in a search results page, browser favourite or bookmarks lists, or in a browser history list. Because of this the page title needs to contain more information than the page heading to give more context to the user.
| Page title | Page heading |
|---|---|
| Page titles, Monash Web Style Guide | Page titles |
| Usability goals, Monash Web Style Guide | Usability goals |
| Courses for prospective students, Monash University | Courses |
Most search engines use the words in the page title to index the page. Accurate and descriptive page titles will make it easier the page easier to select from the listing of results. It also means that it will be placed nearer to the top of the search engine's results.
The address of a web page is determined by it's file name (eg. file-names.html) and the directories it lives under (eg. /staff/web/pages/). To ensure these addresses are easy to use and remember, follow these naming conventions.
Use whole words in file and directory names where possible, and when using abbreviations, only use those that are widely known.
It is much easier for a user to remember, to read out (on the phone to a friend, over a desk to a colleague), or to type in a web address where whole words are used.
Users who attempt to locate information by guessing web addresses will be more likely to find information on your site if you use whole word file names or common abbreviations.
Using appropriate whole word names also makes site maintenance easier. A file named privacy.html in a directory named policies can be readily identified as the policy document on privacy for your organisation.
File and directory names must use lower-case characters. As most web servers are case-sensitive, if users get the case wrong they won't find the page.
Combinations of upper-case and lower-case characters in file and directory names are also more difficult to type and to remember.
Never use spaces or non alpha-numeric characters in your file or directory names. They are not legal characters in web addresses and will be converted to their hexadecimal equivalent with a preceding percentage sign (%). This results in URLs web addresses that are difficult to type and remember. Some older browsers cannot access URLs web addresses containing hexadecimal these values.
For example, a file named my holiday.html in a directory named travel info would be translated to travel%20info/my%20holiday.html
If you must use a character to separate two words in a file or directory name, use a hyphen rather than an underscore. When web addresses are formatted as links (i.e. as underlined text), underscores cannot be seen and users may think there is a space in the address. The image below shows how the underscore in a hyperlink cannot be seen in a Word document.
Underscores also require two keystrokes (Shift key, plus the hyphen key), whereas a hyphen requires only one.
When http://www.monash.edu/students/ is entered as a web address, the Monash University web server sends the index.html file from within the students directory to the user's browser. This means that all directories on the web server must have an index.html file within them. If not present the web server will show a listing of all the files contained within that folder.
The default file that is sent to the browser is sometimes customised to default.html or welcome.html, please check with your web server administrator.
Using the default index file name means you can use shorter web addresses: http://monash.edu.au/students/ instead of http://monash.edu.au/students/index.html.
The generic templates are based on a set of standard file and directory names. These should be used when the templates are customised. The standard names include:
assets which includes sub-directories called includes, images, errors, and optionally styles and scripts assets/includes directory .shtmlassets/images directory assets/errors directory assets/styles directory assets/scripts directory should include all scripts except CGI scripts which should sit in a centrally-maintained cgi-bin directory sitemap.html a-z.html .html not .htm.For content to be successful it must be written for the web and presented in a way that makes it easy to use. Images should be used appropriately and document formats chosen with care.
Most people do not read word-for-word when reading online. They scan instead. They are also likely to skip or ignore large chunks of text or content that are not relevant to their immediate goals.
When writing for the web aim for a concise style of writing that uses clear and simple language, can be understood by your audience, and is organised into clearly labelled sections.
Plain English is a writing strategy that can help improve communication. It involves:
Using everyday words makes content easier to read and understand. Here are some examples:
Sentences that are short and simple make content easier to absorb. Long sentences that include a number of clauses quickly become confusing and may be misunderstood.
Most sentences have 3 parts:
With active voice the subject of a sentence takes the action while with passive voice the subject is acted upon. For example:
Active: Maria returned the book to the library.
Passive: The book was returned to the library by Maria.
Using the active voice makes writing clear, direct and dynamic. It can also help reduce the length of sentences.
A lot of writing lacks a clear goal. If you aren't sure of what you're trying to say, your writing will suffer.
When writing or reviewing web content, write a list in point form of the things you want to say. Check your written content against this list and remove anything that doesn't need to be there.
Don't publish pages with "under construction" or "more information coming soon" messages. These pages can frustrate users looking for information. Either the content exists or it doesn't.
Don't publish pages without first having them reviewed and edited.
It is important to keep your audience in mind when writing. Before you write anything, consider:
Usability improves when writing is concise, easy to scan, and when it gets straight to the facts rather than being boastful, fluffy, or pushy.
These are available from the Monash University Library
Multimedia is necessary if you want to show movement or change over time or demonstrate three-dimensionality.
Where an image is used to provide information, a text equivalent must be provided by using the alt attribute.
<img src="openday.jpg" alt="Monash University Open Day, 2 and 3 August" />
Some images require a longer description. There are two recommended ways of doing this.
First, the longdesc attribute can be used. It should link to a page giving a full description of the image.
<img src="room.jpg" alt="A student room at Halls of Residence" longdesc="room-description.html" />
However, some older screen readers and text browsers do not recognise the longdesc attribute, so you must always also use a visible link to the long description. The screenshot below shows an example of this approach as used on the Monash senior management page. The page lists the senior management at Monash in a hierarchical chart format. The chart is an image. A longdesc attribute together with a visible link to a text description of the image are provided.
An alternative is to give a full description of the image on the page on which it is used. This is the approach used on this page to describe the image above.
Where images are used for decorative or layout purposes, the alt attribute must still be used, but should not contain any content. The best approach is to use an alt attribute that contains a space. The space is a workaround for older screen readers. They attempt to alert users to the existence of an image by substituting the file name. Newer screen readers accept that an empty alt attribute is deliberate, and ignore it. Using this workaround causes a small square to appear when a user mouses over an image when using Internet Explorer. To avoid this, use an empty title attribute in conjunction with a space in the alt attribute.
Where an alt attribute is missing, screen readers and text browsers will alert users. Sometimes the file name will be displayed, or the word "image" or similar may be used. This can cause unnecessary confusion. It is not acceptable to omit the alt attribute.
Wrong: <img src="spacer.gif" />
Right: <img src="space.gif" width="100" height="1" alt=" " title="" />
Recent improvements have been made to Flash, but the format is not considered fully accessible. In August 2002, the Australian Human Rights and Equal Opportunity Commission issued the following statement on the use of Flash:
"... work is currently underway to make Macromedia's Flash technology accessible to people who use screen-reading software. While some positive progress has been made, it will be a considerable time before most users will benefit, and even then, Flash may be accessible only in certain specific circumstances. It is certainly wrong for web designers to assume that improvements in the accessibility of a technology mean that it can be used indiscriminately without regard for the principles of accessible web design."
To provide accessible video and audio:
Captions can be created for a range of multimedia formats. Tutorials for Quicktime, Real Player and Windows Media Player are linked below.
Wherever possible publish in HTML format because it is the most widely accessible. If you publish in other formats:
If PDF is used, an alternative accessible version of the content must be made available online. RTF (Rich Text Format) or TXT (text) format are acceptable alternatives. Although there have been significant accessibility improvements to the PDF format, a PDF document is only accessible when all of the following conditions are met:
As a result of these extensive requirements, PDF documents are not considered accessible. In August 2002, the Australian Human Rights and Equal Opportunity Commission issued the following statement on the use of PDF:
"The Commission's view is that organisations who distribute content only in PDF format, and who do not also make this content available in another format such as RTF, HTML, or plain text, are liable for complaints under the DDA [Disability Discrimination Act]".
Some web authors may put information online in PDF format in the belief that this protects it from unauthorised change or use. This belief is incorrect. Online content in any format is at risk of misuse.
While the Microsoft suite of office products is standard on university operating systems, some Monash staff do not use standard machines and some Monash website users may not have access to Microsoft products.
Where Word documents are used:
To make Word documents accessible to people with disabilities:
To make PowerPoint files accessible to people with disabilities:
To provide an accessible HTML version of PowerPoint slides, use the Illinois Accessible Web Publishing Wizard for Microsoft Office.
OperaShow is a useful alternative to PowerPoint. Presentations are created in HTML format and a projector style sheet (supplied with OperaShow) is attached. This converts the document into a presentation format.
See making images and multimedia accessible.
When used well, HTML tags provide information about the structure and meaning of content chunks on a page. However some web designers use HTML tags just for visual effect. These two approaches are called "structural" and "presentational" markup.
Presentational markup: I want to <b>draw attention to this phrase</b>
Structural markup: I want to <strong>draw attention to this phrase</strong>
Only graphical browsers will display text wrapped in the <b> tag as bold. Other types of browsers treat this text the same as other text on the page, so the effect of bolding to draw attention is lost. On the other hand, using the <strong> tag draws attention to the text wrapped inside it on all sorts of browsers. For instance, screen readers will read the text in a louder or different voice.
Here is another example:
Presentational markup: <font size="large">My page heading</font>
Structural markup: <h1>My page heading</h1>
In this example, increasing the size of a page heading by using the font tag will only work in browsers like Internet Explorer, Netscape and so on. Text browsers, screen readers and handheld devices will show the text in the same size as the rest of the text on the page. Using heading tags, like h1, h2 and so on will mean the headings work in every sort of browser or device people might use.