Jump to Content

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

 


Editorial style

Writing for the web is very different from writing for print. Consider the following

The following rules apply

Refer to the University's house styleguide if you are unsure of style usage, eg capitalisation.

top^

 

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.

top^

 

Page length

Because page layout is predetermined by the templates, your main consideration will be page length. In determining page length consider

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

In general, you should favour shorter webpages for

top^

 

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:

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.

top^

 

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)

top^

 

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

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.

top^

 

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.

top^

 

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.

top^

 

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 and tags used for images. For more information on the accessibility features available in Flash and how to use them go to http://www.adobe.com/devnet/flash/articles/flash8_bestpractices_09.html

 

 

top^