|
Guidelines for WEB Design
|
- Design per View
Most visitors see an area 800 pixels wide and 600 pixels high.
The most common screen resolution is still 800 x 600 pixels, which has hovered around 50 percent since early 1999. Screen resolutions of 1152 x 864 and 1280 x 1024 have shown small gains during the same period, and now account for just over 5 percent combined, according to StatMarket. (Jul 23, 2001)
Make sure your home page sells on the first screen.
Don't put everything on one page. Keep scrolling to a minimum - usually no more than 3-4 screens.
See your site as others see it
Look at your pages using at least 2 different browsers plus AOL, and 3 different resolutions (640x480, 800x600, 1024x768)
- Design Within the Known Limits
Give all users/browsers the ability to see your pages
Avoid specific browser extensions.
Use strict HTML wherever possible.
Verify/Validate your code
Badly written HTML can prevent your page from displaying
Not all browsers adhere to HTML standards, or handle code in the same way
Do not make your site dependent on browser plug-ins
Allow your users the option to choose whether they wish to see/hear a FLASH presentation, video streaming, audio files, etc.
Don't forget the printer limits
If you use a fixed page width over 620 pixels, most printers will truncate the right side of the page. Depending on the printer, if your page is fixed at 800 pixels wide, the last 1½- 2 inches will not print.
- Design for Users
First-time visitors rarely read the detail on a page. Instead, they scan for information and links. If they can't find what they want within 15 seconds, they will leave
If your WEB page crowded, or full of text, your visitor will ignore most of it.
To make sure your page delivers its message:
- Use dark text on light backgrounds
- Keep paragraphs short - no more than 3-4 sentences
The first and last line of the paragraph catch the eye
- Leave lots of 'white space' around text
- Use bullets, sub-headings, etc. to catch the eye
- Design Continuity
Use similar formats, color, icons on all pages
Use a single logo and icon set - may vary in size, not design
Standardize navigation to home page. Use on all pages
Clearly identify each area of your site
Visitors get lost if everything looks the same. Likewise, they will become confused if every page/section looks completely different
Each page should display:
- Site and Company Name
- Copyright Information
- e-mail link to Webmaster (or person responsible for site/page)
- Navigation Deisgn
Use 'Standard Link' Colors
Blue = New Links Red= Visited Links
Standardize navigation to home page.
Use on in the same place on every page - preferably, in/near the top left corner
Large sites should use section navigation in addition to links to home page.
Use full site navigation at the bottom of each page
- Design for your target audience
Animation and 'cool graphics' attract the younger set
Children and Seniors prefer strong colors
- Design Considerations for Color
Strong Colors Dominate
- Strong colors attract the eye and dominate the page.
- Too many colors distract and confuse
- Balance page around strong elements with text & space
Pastel Colors Receed
- Restful to the eye
- Allow links and other items to show up
Consider color-blind users
For important sections, choose bold shades of red and green that offer clear contrast, avoid pastels.
- Design Considerations for Graphics
Every graphic must add value to your message. If it doesn't ... leave it out
- Avoid Large Graphics (file size)
The larger the file size - the longer the download.
Keep all graphics under 20K
(the Wits-End logo at the top of this page is 11K)
- Use ALT tags on all image links
If graphic fails to load, users will still be able to navigate your site
- Use HTML image maps
CGI image maps hide link URLs from user - if image doesn't load the user is lost
- Limit Animation
Animation draws the eye - elevating the importance of that item
No more than one animation per page
Never use animation on secondary items (e-mail links, etc.)
- Design Elements - Frames, Forms, etc.
- Frames
Use only where strong content management is needed
No more than 2 frames per page
- Forms
Use only CGI forms, not Java/JavaScript
Do use JavaScript to validate forms
Provide an e-mail link in case form fails to load
Do not use form in place of e-mail link
- Property / Search Engines
Limit the numebr of screens needed to obtain data for the search
More than 3 screens is too many
Make sure your database, server, or its front-end, can handle the work load
- Design Coding Standards
Use only standard HTML and CGI in designing your pages
Do not use browser specific code extensions
Give your visitors a choice, don't depend on or require non-standard items to display your pages. Your visitor might not want to download the following:
- Java/JavaScript/ActiveX/Etc
- Cookies, Plug-Ins, and other 'stuff'
- Browser Specific and other Plug-Ins
- Design Testing Standards
- Test each page's loading time using a 'live connection' with a 28.8 modem
According to the U.S. Department of Commerce, as of August 2000, 10.7% of online households (4.4% of all U.S. households) had broadband-speed access. The remaining 89.3% of online households (37.0% of all U.S. households) connect to the Internet by regular dial-up phone service.
- If you designed your site, have someone else use it
If you have to explain how it's supposed to work or how to use it, start over.
- If someone else designed your site, test it personally.
If you can't use it without having it explained ... have them redo it.
|
|
|
CHEAT SHEETS
WEB CONTENT
RESOURCES
| CHEAT | RESOURCES | REAL TIME | SEARCH
