Web Style: Checklist
This checklist is designed as a reference for producing consistent quality web sites. Although all of the information might not apply to all situations, it should be useful for anyone creating a web site.
Table of Contents
For information on web style theory, please visit the Web Style Guide.
It's All in the Head
All pages should contain META tags:
These help to improve the identification, rendering, and search indexing of the pages and there is no good excuse for not having them.
See our META Help Page for more information and try our Quick META Tag Generator for some fast help.
Pages should have a descriptive title:
Users should have a good idea of what is on the page based solely on what is in the <title>...</title> tag set.
Page titles should usually be of the form: Document Title, Site Name, Organization Name.
Example: this page is titled: "Web Style Checklist :: Tutorials :: 'Eye' Focus"
Pages should use Style Sheets:
This helps to ensure that the document looks the way you intended, not the default look.
If you use an embeded Style Sheet, be sure to comment out everything within the<style> tag set, as in:
<style type="text/css"><!--
... the style definitions ...
--></style>
If you do not do this, the Style Sheet definitions will appear at the top of the page when viewed in an incompatible browser.
Caution:
Setting specific font sizes with a Style Sheet often disables the user's ability to change the font size. This causes problems when the user is visually impaired or simply needs the larger font to properly read the page. Instead of using defined sizes or a type size (ex.: 35px or 24pt or 1.2em) try using relational sizes (ex.: x-large, smaller, 120%, ...). The only exception to this rule is that headers are best defined with the EM type sizing.
Also avoid nesting size references. Some browsers adjust to the current aspects of the rendering, whereas others overwrite (or redefine) the prior definitions. What this means is a browser may render content in nested conditions:
<p style="font-size:60%">
<b style="font-size:50%">[Text]</b>
</p>
The resulting font size could be 30% of the browser default in one browser (based on prior, nested size definitions), but another browser may assume 50% of the default browser size (ignoring all prior settings).
Body Language
Do a background check:
Use Hexadecimal background colors; color naming is not supported by all browsers, or the browser may only recognize a limited set of named colors.
Always set all the body and text colors to make sure the pages are seen the way you designed them. If for no other reason, the background color is displayed before a background image is loaded.
Always avoid using white #ffffff text. It will generally cause the text to not print. Instead, use an off-white #fefefe. It still looks white on the screen but it will generally print on paper while the background color may not. (This is the only instance where we recommend using a non-color-safe color for a design declaration.)
If you use any non-color-safe colors, simply be aware that the colors WILL shift to another color. What color is used after the color-shift is based on the computing environment and monitor settings at the time.
Join the color guard:
All the colors of the rainbow will not show up the same on a PC, Mac, and UNIX/Linux machines. Check them on at least a PC and a Mac. This is an issue for background and text colors as well as for images.
Consider using web 'Color Safe' colors for all solid colors in your designs. These colors include only the RGB hexadecimal values of 00, 33, 66, 99, cc, and ff. The respective decimal values for these are 0, 51, 102, 153, 204, and 255.
Ensure that your colors contrast well enough so that everyone receives your message. One particular color blindness problem results in 7% of the male population being unable to distinguish from red and green. Test your design for deuteranope color blindness deficiencies at Vischeck. Color blindness conditions include: Deuteranamolous - Red and Green color confusion; Protanamolous - Red and Bluish-Green color confusion; Tritanamolous - Blue and Yellow color confusion; Achromatopsia - only seeing black, white, and grey. For more information on color blindness and web pages see Visibone's Color Deficient Vision pages.
Be sure to set font sizes, types, and colors:
Use defined values for text, link, vlink, and alink colors; the users default settings may not be compatible with your design.
You do not want the defaults to show up, it is usually not very aesthetic.
Leave the main body text size unmodified. Don't excessively control your page. Let your visitor to decide how they want to read the page and allow for this in your design. The main purpose of web is to deliver content, so make sure your visitors can read it.
Say what?
Spell and grammar check your pages. Your message may be ignored if it is not well presented.
Use HTML coding for extended and special characters. To display José you would use José. Use & to display the ampersand symbol &, even in the links that you have in your page!!!
An image is worth a thousand words, treat it that way:
Include the HEIGHT and WIDTH attributes of all IMG tags. This helps the browser display the page faster.
Always include the ALT property in IMG tags. Do Not use the image file name, it should be a descriptive name or phrase. The purpose of these are not just for the visually impaired or visitors using text-only browsers, you need to have your content accessible when they have images turned off too. It is recommended by Bobby Worldwide that you use the following ALT tags for special purposes:
- For bullets, use: alt="o" (that's not a zero).
- For images that carry no information, use: alt="" (a null ALT, not containing any characters).
Let's table that one:
Specify table cell widths where ever possible, either absolute or by percent.
Only XHTML compliant browsers allow ID's to be used as anchor references. Continue to use named anchors for in-page links until all browsers support XHTML coding.
Only version 4.0+ browsers allow background images in tables so also set a background color.
Note also that only 3.0+ versions display background colors in tables.
Minimize the depth of your coding. Placing a table in a table in a table in ... simply makes coding the page difficult. It also takes more time for a browser to interpret and display your page. Keep it simple.
Size does matter:
Be considerate; make pages viewable at a screen resolution of 640x480 pixels and 256 color. This resolution is still considered the standard for web page design. Though there is growing opinion that the new standard is 800x600 pixel screens, you must keep in mind that not all environments are the same.
Remember, as a web designer you also have to deal with new viewing formats such as Tablet PC's. These relatively new devices default to 600x800 pixel resolution, because it renders the screen in portrait mode and not landscape mode like most monitors. This means that your new design tailored for 800x600 resolution monitors will not fit the screen of these new devices.
The page should properly display at 600 pixels in width (without side scrolling) and be equally viewable at greater than 1000 pixels wide. The web is a dynamic medium, your pages should be dynamic as well!
You also have to deal with how your page will print on paper, which often crops off and does not print your content if the design cannot render at 600 pixels wide.
You should also plan for design considerations to support mobile devices and other emerging technologies. How will your site work in these varying environments and how you will support them?
Remember "Chutes and Ladders?"
Large pages should have a set of links at the top of the page (to "chute" you down to important sections of the page).
Suggested links would allow the visitor to: skip navigation links, jump to major sections within the page, jump to the top of the page, or even jump from section to section within the page.
The bottom of a large page should have a link to the top of the page (like a "ladder").
411 (A.K.A. Directory Assistance)
Move it or lose it:
The entire directory of your site should be moveable without broken links.
Links within your site should be relational. Files contained in the same directory can be linked to with just the file name. Files up a directory can be found at "../filename.html".
You should always use the full URL of links not in your site, and don't forget the "http://...".
What does haystack.gif have to do with the easter bunny?
Names should make sense, like a description of the file.
Remember that you are not normally limited to [8.3] length when naming files (easter_bunny.gif works well).
Do not use spaces or special characters in filenames. Browsers and computers do not handle them well and may interpret them differently. Use the standard alpha-numeric character set for your file names (lower case a-z, upper case A-Z, and numeric 0-9).
You might also try using an underscore [_] or hyphen [-] to make the name more readable. However, avoid using any other character in your file names as they may cause problems with different systems.
Cleanliness is next to godliness:
Make your directory clean and organized!
Do not store old or unused files with those that are in use. Make an "old" or "archive" folder and store them there. Better yet, take these files completely off the server if they are not going to be used.
Structure your directories like your site to make locating files easier.
Don't be afraid of using sub-folders - they won't hurt you and they often help.
All images don't need to be in a common "images" folder. If you have a long list of images, separate them into sub-folders by type (buttons, headers, etc.).
Keep images, or any file type, near to where they are used. Using an image once that's in a folder five directories away shows little planning.
General Information
Most pages should:
Include the date last updated. The date can be visible, or in a comment, and should preferrably be provided in a 'date' META tag as well.
Include contact links. This should allow the user to contact the site's webmaster or owner.
Include copyright information. This should be visible as either part of the page, or a link to a copyrights/credits page, and even include the information in the document's META tags.
Before You Go Public:
Have someone proofread your site.
Have another web editor review your site design, source code, and directory structure. This is not a one-time review! Someone should be reviewing your work at every point of the process!
Suggested Pages
- META Help Page
- Quick META Tag Generator
- Bobby Worldwide for Accessibility
- Web Style: Guide
- Web Style: Design Considerations
