Division of Information Technology
Web Publishing @ SFSU
Style Guide

Philosophy The underlying purpose of most web pages is to communicate. In order to communicate effectively one must first understand the audience. Since we cannot predict what browser the audience will be using, it is best to design pages that are browser independent. Browser independent means designing pages that are best viewed in any browser.

Accomplishing browser independence doesn't mean one cannot include: Java, Plug In's, Frames, Clickable Image Maps, Tables, and other neat doo hickeys. BUT one should question if the technology adds value or is merely a demonstration of technical prowess. Extensions to the HTML standard should add value without alienating 30% of the audience. Before using fancy HTML extensions consider low tech alternatives that can accomplish the same objective.

To help you design pages that reach and appease the largest audience possible, study the following common web site visitor complaints I have made, received, and observed:

Page takes too long to download This is caused by slow modems, network bottlenecks, expensive connections, and impatient visitors. Some solutions to alleviate this problem include:
  • Use small inline images - link large versions to small thumbnails.
  • Select images carefully and limit the number on a single page.
  • Re-use the same image - it will only download once!
  • Break large documents into smaller ones linked by a table of contents.
  • Use image compression available with the JPEG format - 50% looks OK.
Can't fit page on my screen This is experienced by people using smaller monitors (laptops) and monitors/projectors set to 640 x 480. Some solutions to alleviate this problem include:
  • Keep page 'Masts' as small as possible
  • Keep top of page design within 600 x 350 pixels (allowance for browser scroll bars, buttons, & menus)
  • Provide a navigation 'strip' or index
  • Keep side frames very small
Can't read page - it looks distorted This is experienced by people using poor quality monitors, grayscale monitors, and by people who are color blind. Some solutions to alleviate this problem include:
  • Design pages with HIGH CONTRAST between the text and background
  • If you must indulge in a busy background, use larger bold types sizes to enhance readability.
  • Test your page on a monitor that can only display 256 colors - adjust if necessary.
I cannot / do not want to see images but I do want to navigate! This is experienced by people using text based browsers, screen reading software, or telephone based web access. Some solutions to alleviate this problem include:
  • Include descriptive alternate text with inline images, if no text alternative use ALT="" .
  • Provide simple text alternates to buttons and image maps.
  • Try reading your page (text only!) from left to right and top to bottom of your screen - does it make sense?
I get lost in your site, help me find what I am looking for This is experienced by people who do not understand/appreciate the way you have organized or reorganized your page / site. Some solutions to alleviate this problem include:
  • Provide a navigation 'strip' or index.
  • Provide alternates to Frame/Java based sites.
  • Test market your site to see if your choice of words conveys the correct meaning (semantics).
  • Be wary of renaming or moving files. If you must do it, provide some form of redirection.
  • Use unique descriptive meaningful titles of 60 characters or less.
Your site is so out of date - it's useless/misleading This is experienced by people who are in search of 'current' information but keep finding your 'old' site. Some solutions to alleviate this problem include:
  • Keep your web site scope manageable - narrow the focus if possible
  • Link to other sites that maintain more up to date information
  • Review and update your page every month or so often.
  • Sign and date each page - provide an E-mail contact for updates & questions
My browser crashes when I load your page This is experienced by people who are using a browser that has a nasty reaction to your HTML code. This can be caused by sloppy coding or by incompatibilities with unsupported extensions. Some solutions to alleviate this problem include:
  • Test and validate your HTML code.
  • Be wary of employing non-standard technologies without warning the visitor first.
For More Information Web Content Accessibility Guidelines 1.0
Best Viewed With Any Browser
Accessible Web Page Design
Bobby - a program that will help you make web pages accessible to those with disabilities

About | Getting Started | Create | Publish | Enhance | Advertise | Maintain
Index | Glossary | Software | For more Information


SFSU Home   Search   Need Help?  

1600 Holloway Avenue, San Francisco, CA 94132 (415) 338-1111
Last modified February 11, 2008 by the Web Team