Usability and Reusability
Good usability means that your users will understand how to navigate, be able to access links and linked documents, be able to use common browsers, and will be able to do standard functions like print the page or save a favorites link. Reusability means that your site can easily transition to a new server or new site design without major rewriting.
- General Layout Issues
- Using CSS
- Using Templates
- Linking to non HTML documents
- Resizeable and Narrow Pages
New designs should not use Frames or Tables as methods of laying out the page. These practices are being abandoned because they result in complexity in re-using content, difficulty in printing reliably, and lack of accessibility to all audiences. Instead we use Cascading Style Sheets (CSS) to define all formatting and leave HTML to handle the content.
Likewise, text formatting also belongs in the CSS file, not in the HTML file. This means that whether you're laying out the document or deciding on font colors, it's the CSS file that is doing it all, and your HTML contains just the content.
The previous paragraph discussed using CSS to layout your web pages - increasing clarity and reuseability. CSS can also improve the usability of your site. It's annoying to print out a web page and have the text chopped off, or wasted your color cartridge on printing the graphic banner which you didn't really need to print. So provide your users with both a screen and print css. The print css can skip areas such as banners and navigation that do not contribute to the utility of the print copy. The print css can also choose to print text in black if you think your users would prefer that. Here's an example of the code you need to put in the head section of your HTML:
<link rel="stylesheet" media="screen" href="basic.css" />
<link rel="stylesheet" media="print" href="print.css" />
Once your site is designed to use CSS, it's useful to provide several templates for your developers / editors to use when creating new content. Generally more than one layout will be required for image-heavy pages, text-heavy pages, introductory pages, photo-albums, etc. We recommend that for WWU department sites that you additionally provide these fields in all your templates:
- A link to WWU home page (often via a WWU graphic at the top or bottom of the page)
- A link to your site's home page (often via your banner graphic)
- A contact person or group email in case an error is found on the site
- A date that the site was last updated to give the user a clue about whether this page is likely to be the latest word on the subject (it's sometimes surprising what can be found using a search engine that is not meant to be found anymore. A date can help clarify this, although of course it's better to remove out-dated material!)
Note that ATUS can provide templates to get you started in the good practice of using CSS-templates for your web site - please email WebHelp for more information.
Whenever possible it is best to have your content in HTML pages since HTML is more generally accessible than any other document format. Some common excuses for not using HTML are just that - excuses. Let's look at some of these.
Ease of Printing - "I prefer PDFs because they're easy to print". Yes, but if you have a print option in your CSS file (see Using CSS above) this is not a problem for your user. Also PDFs require a plug-in that your user may not have. It also takes additional time to load the reader. Finally, screen readers can have difficulties with poorly prepared PDFs. Be kind to your user.
Ease for the Web Person - "It's already in Word..." Yes, but now your user has no navigation, just the Word doc. Are you going to have him hit back just to go on his way? And what if the user doesn't have a reader for Word documents? Be considerate of your user.
However, there are sometimes legitimate reasons to link to non-HTML documents. Some of these might be: a large body of work that is regularly published in print and would be prohibitive to maintain in two formats; a complexly formatted document that is also printed and should retain the footnote formatting; etc. In these cases you can be kind to your users by:
- opening the document in a new window so the navigation is not lost
<a href="xxx.shtml" target="_blank"> link here </a>
- including a good summary of the document in the original link so they are sure they need the document
- remembering that PDF is more web-friendly than Word or Excel if you have a choice
Whether to allow resizing or not? At ATUS we have chosen not to allow resizing, but it was a carefully made decision. First we made our pages fairly narrow - a wide unsizeable page can exclude your users with smaller monitors. Second we took our particular users into account - our users generally use university equipment or fairly up-to-date home equipment. Sites that support the general user population cannot assume the monitor size that our users generally have access to.
We also made our text columns narrow because narrow columns are easier to for the human eye to scan - think of newspaper columns. This of course presents a challenge because monitors are wide and short. If you have a lot of information to present you will need to provide multiple columns to make good use of the horizontal real-estate of a wide-open browser window.
To sum up - your text should be presented in multiple narrow columns or permit the user to resize the columns - i.e. please don't lock the user into wide columns for reading text.