Central Connecticut State University

Design Guidelines for Web Pages

 
 
YES! Good things to do
NO! What not to do

Web Publishing Home

YES! Good things to do
  • Keep design layout consistent throughout the site.
    (justification, fonts, font size, colors, layout, table width)

  • Design for readability. Use dark text on a light background. 
    The primary purpose of any web page is to be read. The one best thing you can do to make your page easier to read is to use black text on a white/light background. Another plus for such a background is that it gives the best contrast for color graphics, logos, and photos. This is such a critical issue that a related view is mentioned in the "NO!" section below.

  • Organize your page in logical sections from the public's view.
    Why did they come there? What do they want? Structure your information from the user's viewpoint -- in categories they'll understand, in terms they'll understand. No techie terms or professional jargon, please.

  • Make your text clear, concise, and easy to read.
    Time is a precious commodity for web folks. There's a "Don't see it? Don't need it!" mentality because the web has so much to see elsewhere. So help your viewers: tell them simply what you have, and why it can help them. Then edit and re-edit your pages. Check grammar, spelling, syntax, and names. (It's not fair, but a single misspelled word or grammar error lowers credibility and implies lack of attention to detail.)

  • Explain your links.
    Tell viewers what they'll see before they click. Warn them if a large graphic or a PDF is coming.  Save them from wandering through your pages, or they'll wander elsewhere.

  • Put a date and source on your web pages.
    Information is of no use if you don't know who created it or whether it's current. Date and author stamps have been traditionally put at the bottom of web pages, but could just as easily be at the top (as done in most paper documents and reports). If the information is time-critical or essential to your viewers, put it at the top.

  • Keep your information and web links updated.
    One piece of outdated information cheapens the whole package. So make sure your information is current -- including addresses, phone numbers, and facts. Web pages and sites change frequently, so check your web links often to ensure they're still usable. And don't make links to pages not yet ready. It's better to have text saying "item X is coming soon" than to have a web link to a page saying the same thing. And worst of all is a "Document not found" message.

  • Provide ways for viewers to contact you.
    Give viewers an e-mail address, phone number, fax number, or postal address. Official entities should provide at least a phone number and postal address, but e-mail addresses are fast becoming the norm as well.

  • Respond to ALL comments about your page.
    When you receive comments or inquiries about your pages, it's good etiquette and essential public relations to follow up on all input. At the very least, a simple "Thank you for your comments" is needed -- even for rude or obnoxious comments. (Ironically, a polite reply can be quite irritating to a rude sender.)

  • Make your web-page <TITLE> self-sufficient.
    This is the text line that appears between the <TITLE> and </TITLE> code at the top of an HTML page. This text will be saved and displayed when others bookmark your page, so keep it as informative and short as possible. It may also show up in tiny print at the top left paper corner when viewers print your page.

  • Design your web pages for a common view from the Internet.
    Realize that a web page developed on one computer for a particular browser will look different on other computers and with other browsers. As far as possible, test your final web pages by viewing them from different computers (PC, Macintosh, and Unix) and with different browsers (Lynx text browser; and Netscape, Internet Explorer, Safari and Mosaic graphics browsers).
     

NO! What not to do

  • Don't use text/background color combinations that make reading difficult.
    Specifically, avoid white/light text on a dark background -- this "reverse text" is much harder to read, as shown by numerous studies. Dark backgrounds are OK for artistic effect and for photos, but overall they give a darker, more somber impression. Moreover, white text may not show up on printouts, because some browser versions don't realize that paper is a white background and thus won't change the white text to black when printing. (Viewers can overcome this by changing their browser setups, but might not know how.)

  • Do not have inconsistent navigation.
    Keep navigation bars in the same location throughout your site.  Consistent navigation is important on every website.

  • Do not leave broken links on your web site.
    Check links often to make sure they still lead to a working target.  If a link is broken, either delete it or fix it.

  • Do not use pop-up windows.
    Please avoid opening up a new window when a user selects a link.  This will often lead to the user closing the entire browser accidentally.

  • Avoid using frames.  
    People often use frames incorrectly and some browsers do not display them accurately.

  • Avoid placing 'under construction' graphics on your site.  
    Most websites are constantly being modified with new information being added regularly.  If you have an incomplete site, please do not launch it until it is in its final state.

  • Avoid using animated gifs.  
    An animated .gif does add motion to a page but many people are bothered by the quick motion and they are not viewable to everyone.

  • Don't use blink mode on text or any link.
    Blinking attracts attention. It's good for street lights and movie theaters. Things that blink constantly soon become annoying. Ask yourself if you're using blink mode for a purpose or just because you can.

  • Don't use big graphics that cause slow load time.
    Viewers want information, and text still contains a lot more than graphics. A few small graphics are better than one big one. Cropped thumbnail photos are great to let viewers get an idea before they go to the trouble of downloading full-size photos or graphics.

  • Don't use special fonts on big chunks of text.
    Text that's all capitalized, all bold, or all underlined is just plain hard to read. Special fonts or formats are meant to accent text, not overpower it. Do use special fonts on headlines, subheadings, and category titles for emphasis.
    PUTTING A LOT OF WORDS IN ALL CAPS OR ALL BOLD SLOWS DOWN READING, COMPREHENSION, AND INTEREST. WHAT'S THE IMPORTANT PART IF EVERYTHING IS EMPHASIZED? AND IS ANYONE STILL READING THIS?

  • Don't use copyrighted photos, logos, graphics, or text.
    What many people don't know is that copyright exists as soon as pen is lifted from paper, finger from keyboard, paintbrush from canvas, or pencil from sketchpad. What about registration with the U.S. Copyright Office? That's just an optional second step. You must obtain permission from the author/artist/source before you use someone else's work, or you're vulnerable to copyright-infringement lawsuits.

  • Don't forget to maintain your web pages!
    If it's worth creating, then it's worth maintaining. Outdated information cheapens the rest of your pages...or at the least, makes viewers wonder about the other pages.

 

<<BACK TO WEB PUBLISHING GUIDE
 


1615 Stanley Street, New Britain, CT 06050  860.832.CCSU or toll free instate 1-888-733-2278


 
Copyright © 2006 [Central Connecticut State University]. All rights reserved.
webmaster@ccsu.edu
Last Update: Monday July 07, 2008