Navigation | Coding | File management | Testing
Libraries web authors should follow this list of suggestions to improve the functionality, usability, accessibility and maintainability of new and existing pages on the Libraries web site. Also see a more comprehensive Web page checklist. To learn how to implement these suggestions, see the CSU Libraries Staff Web Authoring Information and Web Design Tips or contact me.
| What | Why |
|---|---|
| Navigation | |
| Every page should include a prominent link back to the home page of the site. | Users should be able to get back to the home page easily. |
| On every page, include a navigation bar of links to pages within the site. | Users can more quickly browse through the site. |
| Links for navigating the site should appear near the top of the page. | Users should not need to scroll down to navigate to another page. |
| If the site has more than about 20 pages, create a site map, index or outline that lists, describes and links to each page in the site. | Help users to see all available pages and their contents in a logical hierarchy. Assure search engine indexing and increase ranking. |
| If the site has more than about 20 pages, create a site search box on the home page or in the header of every page. | Help users to find pages within the site that contain specific content without having to look at every page. |
| Interlink pages and sections using contextual links (links embedded within paragraphs). | Contextual links increase usefulness and usability, promote services and inter-department cooperation, and improve search engine rankings. |
| Make informed, effective use of search engine optimization. | Make it easier for users to find information using a search. Improve search engine rankings. |
| Coding | |
| Use server-side includes to create headers, footers, navigation bars and other features repeated on multiple pages. | Page code should contain as little content as possible that is not unique to the page. Reduce code redundancy. Make code easier to update. Avoid inconsistencies from failing to update the navigation in all pages. |
| Use an external stylesheet and class= and id= attributes for all page formatting and presentation (instead of embedded styles or HTML tags like <font> and <center>, and HTML attributes like color, size, width and align). | Increase accessibility. Make the site load faster. Reduce code redundancy. Make cleaner and more consistently formatted code. Simplify maintenance and global changes. |
| Configure Dreamweaver to use CSS instead of HTML tags for formatting, e.g. strong and em tags instead of b and i. Search and replace all existing b tags with strong and all i tags with em. | b and i tags are deprecated because they directly format the text. strong and em are semantic tags and can be formatted using stylesheets. |
| Use div tags and stylesheets instead of hard-coded tables for page layout. | Make the layout easier to change. Reduce the amount of repetitive code in the content pages. Tables are meant for organizing data into rows and columns with headings. Page layout should be determined by the user's browser. Navigation elements can be moved after the body content to improve search engine rankings. |
| Convert all pages from HTML to XHTML using Dreamweaver. | XHTML is now the standard for web content. Assure cross-browser compatibility and improve search engine indexing. (XHTML is stricter than HTML and therefore more likely to work the same for more browsers and search engines.) |
| If you have created a fixed layout using Dreamweaver, create a Dreamweaver template (.dwt) file for authors who are allowed to change the content but not page layout. | Assure that the layout is not damaged. (But stylesheets are a better way to separate content from formatting.) |
| Use the search and replace feature of Dreamweaver or FrontPage to replace text in multiple files within a site. Back up the site, especially before performing search and replace that involves regular expressions. | Automated search and replace is faster, more powerful and less error-prone than manual replacement, though it is also dangerous and should be used with care. |
| Use relative paths instead of absolute paths within the site whenever possible. (Remove the http://lib.colostate.edu/mysite/ part of the URL.) | Reduce maintenance and broken links when files, the site or the web server is moved. Remove the repetitive part of file paths. |
| Use text instead of images or image maps for buttons and headings. Use the CSS a:hover style instead of Javascript and images for rollovers. | Text is more accessible, loads faster, and easier to change. CSS and background images can be used to make text buttons and headings that are as attractive as linked images or image maps. |
| Use relative dimensions such as percentages and ems instead of absolute dimension such as pixels and points. | Relative dimensions are more accessible. The user can adjust relative dimensions to accommodate various screen sizes. |
| Use a sans serif font by default for body text. | Sans serif is more readable on computer screens. |
| Use styles for printing, e.g. serif fonts, hidden navigation. | Some users may want to print some pages. It is easy to add styles to optimize for printing. On a printed copy, serif fonts are usually more readable and navigation bars are often unnecessary. |
| Use consistent formatting (layout, fonts, white space, graphics). | Uniformity looks more professional and coherent. It reduces the amount of learning needed to use the site. |
| File Management | |
| Remove all old, non-linked orphaned files and directories from the live version of the site. | Orphaned files have no links to them, so they are hidden from users. Obsolete orphaned files may be found by search engines and add to site maintenance. |
| Use subdirectories for sub-sites rather than placing multiple directories in the root directory of the web server. | The site hierarchy should be reflected in the directory structure. Make the site and all its sub-sites easy to search using search engines like Google. |
| Use an .htaccess file with a Redirect or RedirectPermanent command to redirect links and directories that have moved. | Assure that users with old links and bookmarks find the moved pages. |
| Use subdirectories for included files like headers, footers and navigation bars, and hide these subdirectories from search engines (by adding an entry to robots.txt). | Searches should not find headers or footers separate from the pages that include them. |
| Use separate subdirectories for graphics (images, photos, thumbnails, pdf, psd). | Better organize the different types of images. |
| Testing | |
| Use an accessibility checker such as WAVE or CynthiaSays | Assure that the page is as accessible as possible. |
| Use an HTML/XHTML checker, validator and cleaner such as W3C validator and those in Dreamweaver. | Assure that the page is coded using correct HTML or XHTML. |
| Use a link checker such as W3C link checker. | Assure that all links on all pages work. |
| Use a CSS checker such as W3C CSS validator. | Assure that the CSS will work in as many different browsers as possible. |
| Use a spelling checker (F7 in FrontPage, Shift-F7 in Dreamweaver). | Assure that there are no spelling errors. |
| Preview all pages in at least two different browsers and at least two different screen resolutions. | Assure that the pages work and look similar in different browsers and screen resolutions. |
| Usability test the site with representatives of the target audience. | Assure that the site is as usable and useful as possible for its target users. |
| Usability test early design prototypes of pages as well as the finished site. | Users will feel more willing to offer constructive criticism and contribute to the design if the prototypes look quick and unpolished. Testing of the finished site will probably only uncover minor errors. |