Common Web Design Mistakes

Introduction

Too often I visit web sites that are, well, not well-made. They suffer from common design mistakes that make the sites look amateurish. It’s all too common. If the designers of those sites followed the Research-Based Web Design and Usability Guidelines as developed by the National Cancer Institute, they wouldn’t have so many problems. The following are excerpts from those guidelines plus a few of my own recommendations thrown in:

General

  • Type all HTML tags using lowercase letters. Although HTML is not case-sensitive, XML is. XML requires all HTML tags to be lowercase. Thus, if there is even the slightest chance you will be upgrading your pages in the future you DEFINITELY want your pages to be ready.

Colors

  • Include the pound sign (#) at the beginning of all RGB Hexadecimal Color Codes. Some versions of the Netscape browser require this in order to display the color.
  • NEVER use blue (#0000FF) or purple (#660099) as a text color. Since these are the default colors for hyperlinks, visitors to your site can become confused when they mistake blue or purple text for a hyperlink.
  • Use a lighter colored background with darker colored text so it’s easier to print your pages. When a browser prepares a page for printing, the background is omitted by default. Thus, if your text is a light color like, say, yellow, then YELLOW text might print out on your WHITE paper.
  • Use a lighter colored background with darker colored text so it’s easier to read your pages. (Seriously, it’s actually been tested! It’s easier to read darker print on a lighter background.)
  • NEVER use blue (#0000FF) or purple (#660099) as a background color. Since these are the default colors for hyperlinks and visitors to your site can override your colors, it is possible for hyperlinks to be invisible against the background.

Images

  • Use only GIF or JPG images in your web pages. Only these two image types are widely supported as a web standard although the PNG file type is rapidly becoming a third.
  • NEVER use a photograph for a background. Background images on web pages MUST tile and most photographs don’t tile well. Furthermore, it is often difficult to read text on a page with a photograph for a background.
  • NEVER insert a large image into a web page and then resize the appearance of the image in the page by manipulating the width and height attributes. Instead, resize the image itself in an external editor to be the intended size for your web page and save it that way. Then insert. This will cut down on wasted bandwidth and slow loading times for visitors.
  • ALWAYS use relative referencing to insert images into your web sites. Check your work on another computer to make sure your images load properly.
  • ALWAYS include ALT text for images that are part of your content. (Ignore this rule for images that are part of the site theme like bullets, horizontal bars, etc.) – Thanks to SEO Gal in Toronto

Navigation

  • Include the World Wide Web moniker (www.) at the beginning of all web site URLs. Some versions of the Firefox browser and some incorrectly certified web sites require this in order to be displayed.
  • Navigational hyperlinks should be grouped together in an organized way. Usually, this means they should line up either horizontally across the page or vertically down the left side.
  • Your navigation should ALWAYS be located near the top of each page.
  • A link to your home page should ALWAYS be the first hyperlink in your navigation.
  • AVOID including anything in your navigation that is not a hyperlink. Better to link to a page that says “Under Construction” or “Coming Soon” than not be a hyperlink at all. Visitors to your site may become confused when they assume text is clickable because it is found near other hyperlinks.

Text

  • NEVER underline text on a web page. Since hyperlinks are underlined by default, users can become confused when they mistake underlined text for a hyperlink.
  • NEVER set the size attribute of the font tag. Since visitors to your site can override your sizes, it is possible for your site to display incorrectly. Use the Heading tags instead.
Advertisements

4 responses to “Common Web Design Mistakes

  1. For images you might want to mention that these days alt text is very important if you want some extra traffic from google images search. I have one clients site that gets 60% of it’s traffic (over 4k uniques this month) from a single image.

  2. Good point. This was actually a list I compiled a long time ago before I was aware of many of the accessibility standards. I’ll add it to the list.

  3. Somehow i missed the point. Probably lost in translation :) Anyway … nice blog to visit.

    cheers, Pectinous

  4. These seem like 1995-2002 guidelines, nothing like it has become today.

    Why use GIF and JPEG, which are both compressed formats which loose around 80% of their quality, when you can use high-quality compressed formats such as PNG?

    PNG has been supported since IE4, and transparent PNG since IE7.

    There’s no need to resort to GIF (which is best used for animation) and JPEG (best used for photos) when you’re making a client’s site, or developing high quality work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s