Skip to the content

Kansas State University

Design Tips for Web Pages

YES! Good things to do

  • 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.

    It's no coincidence that most books have white pages and black text!

  • 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.

    Good organization provides an easy-to-use roadmap for your viewers.

  • 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.)

    Text is still said to contain 90 percent of all the information value.

  • Explain your links.

    Tell viewers what they'll see before they click. Warn them if a large graphic or page is coming that will take a while to load. Save them from wandering through your pages, or they'll wander elsewhere.

    A "Click here for more information" web link is like wearing a button saying "Ask me about it". More what? About what?

  • 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.

    If it doesn't have a date, who knows how old it is? If the source isn't shown, how can the data's authenticity be verified?

  • 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.

    Link rot: The process by which links on a web page become obsolete over time.

  • 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.

    You want feedback, right? Make it easy for those comments to roll in!

  • 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.)

    Web pages are PR and advertising tools as much as information tools.

  • 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.

    The title text actually needs to be more descriptive than the headline!

  • 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, and Mosaic graphics browsers).

    For example, graphics designed on a Mac look darker from a PC view.


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.)

    Bad, bad text-to-background combinations: white/light on dark, light on light; dark on dark; monotone color schemes; and any visually stressful colors for either element (like hot pink, lime green, brilliant purple).

  • Don't use blink mode on text or any link.

    Blinking attracts attention. It's good for street lights and movie theaters...and perhaps small web graphics like the "New" signs, but not text. Things that blink constantly soon become annoying. Ask yourself if you're using blink mode for a purpose or just because you can.

    Can you read blinking text when it's not there half the time?

  • 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.

    Be sure your graphic is worth the wait.

  • 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. Logos (such as the K-State PowerCat logo) are particularly sensitive, highly commercial, and require explicit permissions as to where and when they can be used.

    Just because you can copy it from the web doesn't mean it's legal to do so.

  • 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.

    It's easy to create pages. Ongoing maintenance is the hard part.


This section is maintained by the Webteam. Send comments to webmaster@ksu.edu.