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 & Responsive Web Design
- Using CSS
- Using Templates
- Linking to non HTML documents
Responsive Web Design uses CSS techniques that allow the webpage to respond to the user's system constraints such as screen or window size. At Western we are converting our sites to Responsive sites and ALL new sites will be responsive to allow, at a minimum, phones, tablets, and desktops to view the pages in the best format for those screen sizes.
Frames or Tables are no longer acceptable as methods of laying out normal webpages. 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.
Excuse 1: 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.
Excuse 2: 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:
- make it very clear that the link goes to a non-html document by using a PDF icon or (PDF). See automatic file-typing icons
- 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
Wide text columns are difficult to read because the eye has difficulty following a long sideways path. Keeping text columns narrow presents a challenge for web developers 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.
Also note that text sizes are getting larger - gone are the days of tiny tiny text. The default text size for the Western Template is now 16 pixels and the line height is nearly 20. This gives a decent font size and adequate white space for reading the text. For body text Verdana is a very readable font.