Web content on your site
Apart from the information architecture of your website, you will also need to consider some or all of the following elements: text; images; hyperlinks; tables; forms; multimedia. The University's commitment to World Wide Web (W3C) Priority 1 accessibility necessitates asking not only whether you will use these elements but also how will you use them. All elements in webpages must be accessible using a variety of inputting devices (such as keyboard, speech input and other switching devices). Try accessing embedded objects (eg PDF files, Word documents and Excel spreadsheets), menus, forms and multimedia using the keyboard instead of a mouse pointing device to check your website's accessibility.
See the standards and guidelines for the following elements of webpage design
- Writing for the web (Powerpoint 43kb)
- Editorial style
- Page layout
- Page length
- Images
- Other files
- Hyperlinks
- Tables
- Forms
- Multimedia - including Flash files
Editorial style
Writing for the web is very different from writing for print. Consider the following
- reading habits of web users
- 79 percent of users scan the page instead of reading word for word; many readers print pages for reading
- Reading from computer screens is 25 percent slower than from paper
- users roam from page to page collecting bits of information from a variety of sources and need to be able to quickly ascertain the contents of a page
- characteristics of webpages
- webpages must be more independent than print pages; each page needs to be related to its parent page (home page) via links and orientation of the page's content
- hypertext links should connect a page to the rest of the web as well as the home page, and the wording of the hyperlinked text should be as close as possible to (if not exactly the same as) the heading of the page you are linking to
The following rules apply
- present web content using short segments (chunks) of text
- use editorial landmarks such as lists and headings to grab the user's attention during a quick scan
- be clear and concise
- use your page and section headings to describe the material
- start with the information rather than an introduction
- put your conclusion at the beginning of the text, with important facts near the top of a paragraph
- list the facts and stick to the point
- be frugal - users should be able to determine who you are by your navigation and page design
- cultivate a voice that is unique (and reflects UniSA's profile)
- think globally - eg when including dates, use the international date format (14 March 2003)
- avoid metaphors and puns that may make sense only in the context of your language and culture
- limit the length to 50 percent of the word count of its paper equivalent
- use terminology that can be understood by someone unfamiliar with the organisation
- spell out (initially) any acronyms
- avoid duplicating or recreating data that appears elsewhere (eg on another UniSA webpage)
- avoid using blinking or scrolling text for accessibility reasons
Refer to the University's house styleguide if you are unsure of style usage, eg capitalisation.
Page layout
The new templates have solved many of the issues of good webpage design for you. Cascading Style Sheets eliminate the need for tables to determine page structure. Through the use of headings, a speech synthesis browser (for a user who is blind) reads only section headings of a structured page so the user can select specific sections to read instead of having to read the whole page. This structure meets the W3C accessibility guidelines. See Design specifications of the templates for more details.
Page length
Because page layout is predetermined by the templates, your main consideration will be page length. In determining page length consider
- the content of your documents
- whether the reader is expected to browse the content online or to print/download the documents for later reading
More than four screens' worth of information forces the user to scroll so much that the utility of the online version of the page begins to deteriorate. If you wish to provide both a good online presence for a long document and easy printing or saving of its content then
- divide the document into chunks of no more than one printed page's worth of information, including graphics or figures, and use hyperlinks to link to the other pages
- provide a link to a separate file that contains the full length text combined as one page. If you do this, include the URL of the online version within the text of that page so users can find updates and correctly cite the source
- use content headings, bookmarks and 'top' links to break up the page so users can make sense of the information (see Inputting text and other style features for instructions)
In general, you should favour shorter webpages for
- home pages and other index pages on your site
- documents to be browsed and read online
- pages with very large graphics
Images
Images can make a website more interesting and encourage a reader to visit. However graphics used incorrectly can make a site slow and difficult to use, or inaccessible to the user.
Image types
The standard file formats for images on the web are GIF ('giff') and JPEG ('jaypeg'). The GIF format is more appropriate for logos, icons and graphics. The JPEG format is more appropriate for complex images such as photos.
Animated GIFs are several images sandwiched together into one file and displayed in sequence. The time between each frame can be varied, and the sequence can be looped. Animations greatly add to the size of the image and therefore download time. For this reason, animated GIFs should always be interlaced (the animation only starts when all the items are received). Ask yourself if animated gifs are essential to the design of your webpages or can non animated gifs be used instead. If they are necessary, be aware that the speed at which the animation is rendered will vary with different computers. Web accessibility guidelines stipulate that animated gifs should not exceed 30-40kb in size.
Image and file size
Try to keep images smaller than 600 pixels wide. The templates have been designed for monitors with resolutions of 800x600 pixels. Avoid creating individual images larger than 15kb (15000 bytes).
The specifications the corporate website has used for images is:
- portrait orientation pictures - 180 pixels wide
- landscape orientation pictures - 260 pixels wide.
While you can resize an image using FrontPage 2002 - go to Inserting images - it is best to use an image editing tool (eg Photoshop, Microsoft Image Composer, Paint Shop Pro). Some software has a 'Save for web' facility.
Download time
Using a modem connection at a transfer rate of 33.6kbps (standard PPP connection transfer rate) a page will load at approximately 2.5kb per second. An entire page (images and text) should not take longer than 30 seconds to load. The fewer colours used in an image the smaller the file size. The smaller the physical size of an image the smaller the actual file size and the quicker it will download.
Accessibility
Ensure that you use 'alt' (alternative) text with images so that those who do not have graphical browsers or need to rely on text readers can still obtain relevant information. When writing alt text, give a meaningful but short description of the image. See instructions for this in Inserting images. Keep images smaller than 15kb and animated gifs smaller than 30kb.
Other files
Whether inserting PDF or other files avoid inserting files that exceed 1Mb as these can take a long time to download, and users will probably leave the site rather than wait. If a user (eg a student) is required to download this material, having files bigger than 1Mb can be an accessibility issue. Provide information on the size of the file and the file type (eg PDF) and, if particular software is required to view the file, provide a link to a site where the user can download this software.
Example: Table of entry requirements for undergraduate programs (PDF 34kb - download Adobe Acrobat)
Hyperlinks
All files on the web have a URL, or web address, which web browsers use to find them. URLs are used to link to the page with the given address, or to tell the browser where to find files which will appear within your page, such as graphics, sound and video files. Styleguide information about hyperlinks.
A useful webpage will also include links to other pages within your site, the University's site, or elsewhere on the Internet.
There are two ways of representing URLs within a webpage
- absolute URLs include the entire address of a page or file (eg http://www.unisa.edu.au/template/index.htm). The first part of a URL specifies the transfer protocol the browser should use to view the file. Typically this is HTTP (hypertext transfer protocol). Another common protocol is FTP (file transfer protocol)
- relative URLs indicate the location of a file
relative to the current page's location on the server. A file's relative
location is the directory path from the current file to the target file
- if the target file is in the same directory as the current page, its relative URL is simply the file's name (eg 'picture.gif')
- if the target file is in a subdirectory of the current directory, then its location is specified by the subdirectory's name, followed by a '/', followed by the file name (eg 'images/picture.gif')
- if the target file is in the parent directory of the current directory, then its location is specified by '../' followed by the file name (eg '../home.html')
- if the target file is in a subdirectory of the current directory's parent, then the techniques for ascending the directory tree to a parent directory, and descending it to a subdirectory, can be combined
Relative or absolute
When you are creating hyperlinks within your own site/area use relative URLs. This means your links will work both in the development and production environments. It also means if you change a folder or file name within your site (or move files around), the relative link will automatically be updated in Frontpage. If you are linking to another area within the University or external to the University, use absolute links. Make sure you link to the live (production) site not to the development site when creating a link within the University but outside your own area.
Naming URLs
URLs should not contain spaces. For more details see Naming folders and files.
Accessibility
Make sure when using hyperlinks that the title to the link explains clearly where the link will take the user. This includes email, and any links to other applications. This also includes links opening in new windows. Generally it is best to have a hyperlink open the page in the same window so users can use the browser's back button. It is possible for users to open links in a new window if they wish. If you wish the link to open in a new window, say so in the link itself, eg Link to such and such (opens in new window).
This makes your hyperlinks more accessible for the user who relies on a screen reader.
Link maintenance
If you need to remove information, both the link and the file should be deleted from your directory. A file remaining on the server can still be accessed as a bookmark, even if the link has been removed, and other users may have created links to it on pages over which you have no control. Also, remaining files can be picked up by search engines. See Website maintenance for more information.
Tables
The templates already determine where content is placed on webpages, so you will not need to create tables for the layout of your pages. Restrict the use of tables to organising data.
Accessibility
Users who rely on screen readers and those who access the web using browsers that do not support tables benefit from well marked-up tables that also make sense when presented in non tabulated format. It is best to avoid tables altogether if possible, however if you must use them they need to be formatted a certain way if they are to be accessible to all users.
W3C Priority 1 guidelines specify that tables used to display data need appropriate mark-up to identify row and column headers. More complex data tables also need mark-up to associate data cells with column headers. For more detail see Creating tables.
Forms
Accessibility
Form elements (eg Last name) must appear near the associated input box. Identify the exact words that you want to use as the label for the form element. To help users navigate through a form using the keyboard, you should ensure a logical tab order - the order in which the cursor navigates through the form information if the user tabs through the form. Set keyboard shortcuts for all of the elements in your form field. This feature allows all users to navigate the form easily. For more detail see Creating and converting forms.
Multimedia
Accessibility
Programmatic elements such as scripts and applets must be directly accessible or compatible with assistive technologies. This is a W3C Priority 1 requirement if it is important for users to be able to interact with the object or script and it is not presented elsewhere on the page.
If new technologies are used in your site to communicate a specific point vital to the user's experience, consider offering a more traditional presentation instead of, or in addition to, your multimedia. If you must incorporate a new technology that requires a plugin (eg Flash, Adobe Acrobat Reader), the plugin itself should be accessible. Multimedia presentations offered through products such as Flash, Java, and Shockwave are seldom accessible to users who are not up to date with the latest technologies. (However, Flash MX content can now be viewed globally with support for assistive technologies functionality.) Numerous web browsers simply do not have the capability to integrate such technology into their platform.
A simple rule is to provide a text equivalent for every non text element. Non text elements may include sounds (played with or without user interaction), stand alone audio files, audio tracks of video, and video. For any time based multimedia presentation (eg a movie or animation), synchronize equivalent alternatives (eg captions or auditory descriptions of the visual track) with the presentation.
As a test, try accessing pages with scripts, objects (eg Flash) and JAVA applets using keyboard control only, using a screen reader (eg JAWS or Window Eyes) and ensuring that sound elements do not require captions.
Flash Player 6 automatically presents text content to assistive
technologies and the Macromedia Flash MX author allows designers to add
names and descriptions to the Flash objects. Flash objects need to be
created with the accessibility features enabled - similar to the