The Top Fifteen Mistakes of First Time Web Design

By: Holly M. Burns
January 1997

Jump to mistake topic or continue reading below:
Using Frames
Going Overboard with High Tech
Under Construction Signs
Misusing Graphics
Ransom Note Fonts
Complex Backgrounds
Too Many Animations
No Organization
No Unique Content
Too Many Ideas
No Authoritativeness
Outdated Links or Information
Negative Declarations
Link Problems

I am the creator and designer of over six web sites, including the Dog Hause, a popular web page that now gets over 400 hits a day. Through time, by both my own and other web visitors observations, I have seen my early web site mistakes and have corrected them. From this web site, I give out the Dog Gone Good Award, an award given for excellence in animal related web design. Each month, over sixty people apply for this award, and only three or four sites receive it. I visit each site personally and carefully consider what is the best and worst of web design. I am also an English and art student, and have a keen understanding of what the experts say makes good design and readability. This paper addresses the top fifteen mistakes of first-time web designers.

  1. Using Frames—
    Often web designers break up the browser window with separate sub-windows. These divisions are called frames. Although frames are supposed to help web visitors navigate easier, frequently they just confuse them. When clicking on an item to move forward, visitors are uncertain what information will appear where, or in what sub-window. A sub-window used as a reference can suddenly disappear and be filled with new information about the last thing requested. And to make matters worse, after hitting the back arrow to return to the sub-window, the visitor may be popped out of the entire web site altogether, possibly jumping back several places to the earlier page, just before entering the framed web site. This can be particularly frustrating for the web visitor. Another difficulty is many framed web sites depend on specific screen sizes. When a visitor with a different sized screen tries to view the framed page, all of the site’s information may be garbled or misplaced. Designers who insist on using frames should create a no-frame version of their site, as well, for the people who prefer it.

    Example of MisuseBack to Top
  2. Going Overboard with High Tech—
    Some designers delight in using little “tricks,” such as input boxes, opening new browser windows or background music. The first time a visitor experiences these, the visitor may be impressed. However, after a few more visits, the viewer will just be annoyed. It is best to stay away from these types of things.

    Example of MisuseBack to Top
  3. Under Construction Signs—
    All good web pages are always under construction, but some web designers still insist on placing a under construction icon on their site. This graphic comes from the designers feelings of insecurity. They know their page is incomplete or not functioning, so they put up a little sign that is supposed to excuse them from any problems their site may have. Problem sites are recognizable with or without under construction signs. Good web designers should not put up a site until they feel comfortable enough to display it without the under construction warning.  [What UC icons say about you!]

    Example of MisuseBack to Top
  4. Misusing Graphics—
    No matter how fast an Internet connection is, the graphics on web sites take a long time to load. Large graphics can take several minutes to load, because the average computer user is only receiving 28,800 bits of information per second. To avoid having people leave a site, due to boredom, designers must omit large graphics or large amounts of graphics. When selecting images, they should include only graphics that add value to their site content, and they should “shrink” large graphics using computer software specifically made to re-size images.
    Because some users still cannot see pages graphically, a web site should not be overly dependent on graphics. For graphics that direct the visitor to an alternate location, designers should include a graphic’s text equivalent through navigational bars, and the ALT attribute when using the IMG element. The ALT attribute allows web visitors who are using text based web browsers to view a short text description where graphics are normally displayed.

    Example of MisuseBack to Top
  5. Ransom Note Fonts—
    It is a problem with desktop designer newbies and now it is a problem with web designer newbies. Designers are caught up in all the available fonts, colors, sizes and styles, and they are using them all. Because text needs to convey information, and not complicate it, good designers must limit themselves to one or two fonts. Also, when text is too small or too large, it is difficult to read. Type for body text should be set to “normal” while headlines should be a little bigger (+1 to +3). Large body copy is distracting, and a sure sign of the web designer’s insecurity. “Big” information does not hide a page’s lack of content. When emphasizing text, do not underline it. Highlight text by using bold, italics or different colors. Underlining makes words more difficult to read and it also confuses the web visitor, because text that links visitors to alternate locations, is underlined as well.

    Example of MisuseBack to Top
  6. Complex Backgrounds—
    Many web sites offer libraries of background graphics that designers can use free on their web sites. It is tempting to pick the most beautiful or ornate background styles, but these should be avoided at all costs. A complex background may make a beautiful art piece, but it does a lousy job as a backing for text. It confuses the eye.
    In this same vein, designers must remember to use contrasting colors for the background and the text. If a light text color is used on a light background, it will be hard to read, as dark text on a dark background will be hard to read as well.
    For web visitors unable to view graphics, text should be readable for them as well. Even if the designers have a background image, they must assign a background color for their site that does not blend in with the text. For users who can see graphics, it will not make a difference because they will see the background graphic, and for users who cannot see the background graphic it will make all the difference in the world. Remember, type must always be readable.

    Example of MisuseBack to Top
  7. Too Many Animations—
    Designers must never include more than one or two page elements that move constantly. Moving images have an overpowering effect on vision and distract the viewer from observing any other elements. These misused moving elements include animated graphics, blinking text, and scrolling marquees.

    Example of MisuseBack to Top
  8. Pages—
    All web pages should include a clear indication of what site they belong to, because some users may access the minor pages indirectly without coming through the main home page. For the same reason, every page on a web site should have a link returning to its home page.

    Example of MisuseBack to Top
  9. No Organization—
    Pages should be user-friendly. An index or menu helps the web visitor find the desired information. To support simple navigation between the pages on a web site, designers should use a similar layout between one page and the next.

    Example of MisuseBack to Top
  10. No Unique Content—
    One of the biggest threats to the Internet is the amazing number of people beginning to use it. It is starting to become a large entanglement of meaningless information. Many pages say nothing more than “This is my home page,” with a collection of links that connect to the same collections of sites as the last page the web visitor just looked at. The real key is content. Before any site is created, its designer should have something to say. The web site should not restate what other web sites have said, and should not attempt to create the ultimate navigational tool for web visitors. A page of only links adds to the clutter and chaos of the web. There are plenty of great search engines out there, like Yahoo and Alta Vista, that already provide an adequate assortment of links.

    Example of MisuseBack to Top
  11. Too Many Ideas—
    Some people have too many things to say. They are excited about the opportunity to make a web page, but they do not know why they want to make one or what they want to accomplish by doing so. Many small business pages also include hobbies and facts about their employees. Although personal information can be interesting, it does not belong on a business web site. It is unprofessional.
    Personal web sites can also run into the difficulty of mixed motifs. Some web designers start out by saying their name, and then talk about the company they work for, and then their pets, and then how much they like scuba diving, and then all the great things that can be done with shell fish. This information is unfocused and scattered, and does not display well on a web site. The web designer’s solution is either to focus on one topic or to create a menu page that includes links which bring the visitor to separate pages for each topic.

    Example of MisuseBack to Top
  12. No Authoritativeness—
    What makes the web so frustrating is that there are no tests or rules designers have to take or follow before they can post information about anything, and claim they are experts. A web page should be more than another unsubstantiated source of information. Designers should include their names and credentials on their web site, and provide the source materials and raw data to justify any conclusions they may make.

    Example of MisuseBack to Top
  13. Outdated Links or Information—
    If a page claims to be current, designers should put the time and effort into it by keeping it current. No one wants to read outdated information or see broken links.

    Example of MisuseBack to Top
  14. Negative Declarations—
    With the discouragement that some web designers receive after realizing how hard it is to create a good web site, they become negative and insecure towards their page and themselves. This frustration causes numerous designers to put negative comments about their page through out it. It is not uncommon to see a page start with, “This is my stupid page.” Even though these statements may help the web designers feel less embarrassed about their web pages, negative statements make the site worse. Most web visitors are turned off by this approach. If the page’s own designer thinks the page is stupid, why would any one else want to see it?

    Example of Misuse
    Back to Top
  15. Link Problems—
    When creating documents, links should be meaningful and readable. The text of links should flow well within the context of the rest of the text, and the text should be able to stand alone as a printable document. Oftentimes designers either make full lines of text link-able or use click-here statements to navigate the web visitor. Instead, keywords should be highlighted and link-able within the text.

    Example of MisuseBack to Top

Content is by far the most important element on any web page. If the page says nothing, the web visitor will leave. By avoiding these 15 mistakes, web designers can use design as a tool to enhance their sites’ content, rather then distract from it.

(This paper may be reproduced in its entirety, as long as Holly Burns, the author, is credited and a reference is made back to the Dog Hause)

Bonus Example: If you're going to make a mistake, try to limit the number of mistakes you make.