|
When designing web pages, consider the total user experience. Graphics enhance the look of a page, but you can easily lose your audience if the navigation is confusing, if the pages download slowly, if the text is unreadable, or if the user has difficulty moving around on a page.
Page Layout and Size
- Be consistent. Buttons, text links, graphics and text should be consistent from page to page.
- Design your pages to fit a standard monitor without the viewer needing to scroll to the right.
- Avoid long vertical pages. Unless you intend for your audience to print them out, limit page length to 1 to 1 1/2 screens.
- If you expect your audience to print the page, limit the width to 535 pixels. If you know the particular printers your audience will use, you may be able to use a wider dimension. Test different computers and printers.
- Page layout should not depend on exact positioning, monitor resolution or screen width.
- Test your pages on different computers and browsers.
Text
- Use HTML text unless you have a valid reason not to. For instance, some headlines may require a special font and must be made into a graphic. Don't forget to use the alternate tag.
- If using multiple columns of text, the top of each column should be the beginning of a topic. Preferably columns should not be longer than one screen, so that scrolling down and then back up to read the next column is avoided. Allow sufficient space between the columns of text.
- Avoid all upper case and initial caps on every word. Capitalize only the first word and any proper nouns.
- Do not allow text to flow from edge to edge of the browser page. Put space between the edge of the page and the text. The best column width for legibility is one that has 8 to 15 words per line.
- Avoid using disallowed characters (em and en dashes) which are not part of the standard HTML character set.
- Do not make everything bold.
- Do not try to hard wrap text or force line breaks.
- Remove extra paragraph breaks at the end of a table or page.
Tables
- Use tables to assist with the page design.
- Use fixed-size cells for selected graphics and navigation and flexible width cells to allow some content to stretch with the window width.
- Use cell padding and spacing to keep text from running together, touching graphics, or hitting the border of the table if the borders are visible.
- Select background colors and text colors for legibility.
- Use several short tables one above the other rather than one long table.
- Limit the number of nested tables.
Frames
- Do you really need to use frames? Besides taking longer to load, they are generally disliked because they are often badly targeted and take viewable screen area away from the main content. Problems can arise when users try to print, bookmark, or save the page.
- If you use frames, open up the frames enough so that any navigation or other graphic elements are not cut off. Make sure the Signature or Business Unit Lock-up still has the required area of isolation inside the frame.
- Do not have more than five frames in a frameset.
- Target the frames correctly to avoid viewers seeing only one frame of the frameset or seeing someone else's page inside your frameset.
- Test your frames on different monitors and browsers.
- Do not bring another site's web page into a frame of your frameset. Seeing both your navigation and that of the other web site is confusing. If you MUST keep the viewer in your site, open a new browser window.
HTML Practices
- Optimize the HTML code to remove excess spaces, unneeded comments, nested font tags, or unneeded span tags. Web design software is great for laying out pages, but it doesn't always keep the HTML code clean, especially if you have redesigned the layout several times.
- Use all lower case and no spaces for all file and folder names.
Links
- If areas of the graphic need to be links, consider using a spliced image, rather than a large graphic with an image map.
- When a graphic is used as a link, don't make it the only way to access that link. Provide alternate text links.
- Do not leave dead ends. Don't force viewer to use back button.
- Avoid opening second browser windows.
- Allow more than one way to get to a link.
- Do not make the user guess where to click.
Accessibility
- Always include descriptive page titles in the header of the page.
- Include alternate tags for ALL images. They should be short, but descriptive of the image. For instance, "photo of new van" rather than "photo." Use a space in the alternate tag for a blank graphic used for spacing. Use a lower case "o" for a bullet and "horizontal line" for a rule.
- For legibility, select color combinations that give the greatest contrast. Test contrast by printing pages out in black and white. If it's not legible there, it won't be legible on screen to everyone.
- Avoid red or orange text on a yellow background. This combination is not legible to individuals with certain forms of color blindness.
- Avoid dark backgrounds with light text. Not all browsers will show the background color of a table cell correctly, so the viewer may not be able to read that yellow text on a white background (which was supposed to be dark blue). If the page is printed, light text may not show up at all.
- Do not rely on a color difference as the only source of information.
- If you use Flash for any navigation, duplicate those links outside of the
movie. They can be simple text links grouped at the bottom of the page
and can be "below the fold." Consider also duplicating any other essential
verbiage.
|
 |
|
|
|
