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 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 (Thursday 20 October 2011)

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)

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.

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

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.

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.

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 isFTP (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

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.

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.

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.

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