By: Mitchell Harper

January 30th, 2002

Reader Rating: 8

Every week I receive an overwhelming number of emails from people who ask me to critique their Websites for design and usability flaws. Hopefully though, if you use a sound process to develop your site, you won't need a critique.

Here are the basic elements I consider each time I design a site -- using these as a checklist, I can be sure I've covered all the Web design essentials in each design I complete. Try these tips, and check off each point in the list when you create your next site!

#1: Select a color scheme and stick to it

One day while surfing around, you decide to check out a new link. When it loads in your browser, you notice that the home page is colored in red, black and gray. Then you click on a link to, for instance, the About Us page, and you're greeted with a yellow and green page adorned by blue text.

This sort of inconsistent coloring is enough to deter visitors from ever coming back to a site -- not only is it hard on the eyes, but it screams a lack of professionalism.

Before you even start to code your site, choose two or three complementary colors and stick with them. If the organization for which you're building the site has a logo or brand that uses particular colors, you might consider using those. If you take a look at any site of a large or successful company (try www.coca-cola.com [1] or www.ford.com [2]), you'll see that, even when different sub-sections of a site are color-coded, the brand colors are carried across every page of the site.

Take a look at other sites that you like: what colors do they use and how do they use them? Do they gradually introduce the colors or are they all smack bang in the middle of the screen when you load their home page? I've come up with a list of the five most used color combinations around the Web:

1. Red, yellow and white


2. Blue and white


3. Red, gray and white


4. Blue, orange and white


5. Yellow, gray and white

#2: Design for cross-browser compatibility

This is one of the most important aspects for a designer to master. Never, ever implement either an Internet Explorer- or Netscape-specific function into a site unless it will only be used by a closed user group (e.g. a company Intranet).

Sure, it can be tempting to implement super-dooper DHTML effects such as automated iFrame scrolling, but be warned: those who don't have the latest browser installed won't take to kindly to your ignorance of their needs. If you're desperate to implement flying pigs or falling snowflakes on your site but still want cross-browser compatibility, then take a look at BrowserHawk from Cyscape [3]. BrowserHawk is a nifty set of COMs that allows you to detect all sorts of things about the client's browser, including whether or not they have JavaScript enabled, and the version and name of their browser, to name a few.

#3: Provide an intuitive, easy to use navigation system

Have you ever been to a site and wondered where in the world the links to the rest of its pages are? Menu accessibility is one of the key elements in creating a positive experience for your site's visitors.

Most Websites either display a left-aligned, vertically orientated menu, or a top-aligned, horizontally orientated menu system. Surveys have shown that using either of these menu styles (or both together, if you lay them out in a complementary format) is guaranteed to provide your visitors with a positive site experience. Using these familiar styles will make your users feel comfortable moving from page to page, and means they won't have to hit the back button every time they want to return to the home page.

To see what I mean, spend a couple of minutes moving around Amazon.com [4]. Now, spend the same amount of time at the site at www.isonsw.com.au [5]. Which site's menu system did you feel comfortable with? I'm sure you answered Amazon's, because it was consistent, easy to use, and made it blatantly obvious which page you were on, no matter where you were on the site. When you develop a new site, you should prototype at least three menu systems and ask friends, family and work colleagues which one they would prefer to use and why.

#4: Use Cascading Style Sheets

Cascading Style Sheets (CSS) allow you to develop a specific set of style classes, which you can implement throughout your site. Style sheets can also be used to change certain style attributes of the built-in HTML tags, such as making the color of a <H1> tag red, or making the background color of a <td> cell yellow, etc.

Use the color scheme you identified in tip #1 to create a variety of styles including a bold headline, an "important points" style, and a default text style. You may also want to change the default style of the anchor tag so that your links match the color scheme of your site.

If you've never used Cascading Style Sheets before, then here are some great articles to help get you started:

• An Introduction to Cascading Style Sheets [6] on WebmasterBase
• Adding a Touch of Style [7] at W3.org

#5: Open external links in a new window

One easily implemented tip that's often overlooked is this: make sure that any links that don't take the visitor directly to a page on your site should be opened in a new window by default.

When you think about it, this approach benefits the visitor as much as it does yourself: they're given free reign to browse the external link, with the option to return to your site simply by closing the external site's browser window.

To open a link in a new window, you simply need to specify the value "_blank" for the target attribute of the link's anchor tag. For example, you'd use this...

<a target="_blank" href="http://www.sitepoint.com">Click here</a>

...to open SitePoint.com in a new browser window.

#6: Underline and color your hyper links

The majority of Web users is in a hurry and pressed for time in some way or another. Our eyes only pickup on certain things, and these don't include hyper links that look like they're part of the body of a document. When you're developing a new site, always make sure that your hyper links are underlined, preferably in a different color to the text that surrounds them.

Here's an extract from a page I received when I signed up for an affiliate program a couple of days ago:

Quickly glancing over the text shown in the example above, how many links did you spot? If you answered none, then you wouldn't be alone.

Each "click here" was actually a link, but the Web designer didn't even bother to make the link stand out from the rest of the text around it. Look how much easier it is to spot the links when they're both underlined and colored:

#7: Optimize your images

One of the main reasons why so many Websites are slow is because their images are not fully optimized. Optimizing images will decrease their file size, which means that less data will need to be downloaded from a site before it can be displayed. Here are three ways to optimize your images:

1. Reduce the image size:

Make sure your images are as small as possible. Crop any "white space" around the edges - this increases the file size of the image.

2. Reduce the number of colors:

Many image formats including the graphical interchange format (GIF) allow you to reduce the color depth of an image without noticeably decreasing its visual quality. If you have an image such as a logo, then try using a program such as PhotoShop to decrease its color depth down from 16 bit to 8 bit. Save the image and view it in your browser. If it still looks crisp and clean, then save the image. Notice the difference in file size compared to the 16-bit version?

3. Reduce image quality:

If you're working with a Joint Photographic Experts Group (JPEG) image, then you can reduce its file size by reducing its quality. Using a program such as PhotoShop, you can specify the amount of "loss" for the image, which in turn reduces its size.

#8: Tell visitors who you are and what you do

This is probably the simplest tip to implement. When a new visitor comes to your site for the first time, they want to know who you are and what you do straight up, especially if you sell products.

On your home page, you should have a small paragraph that tells them exactly who you are and what you do. This will increase their confidence in your company and if you have what they're after then there's a better chance that they'll stick around. Here's an example for a fictional site, Fred-Smith-Tools.com, which sells gardening tools:

#9: Use customer testimonials

A customer testimonial is simply a comment from one of your site's visitors that includes some positive details of their dealings with your organization, such as:

By displaying customer testimonials on your site, visitors can see that other people have used your site or products, and found them to be useful and valuable. Customer testimonials are also one of the best ways to increase visitor confidence in your business.

To display customer testimonials on your site, add a link to your menu system named "Customer Testimonials". Link this to a page where you display all the testimonials you've received from your customers. Or display the testimonials in a sidebar, which links to the page that lists them all. To actually collect testimonials, either ask some of your customers for them directly, or set up a feed back form on your site.

#10: Provide contact details on every page

One of the main sources of frustration for many Web surfers is the lack of contact details on many sites. If you run a Website that sells products, then many of your potential customers might prefer placing a phone order to ordering on the Internet. So be sure to display either a sales email address, or the phone number for your sales hotline, in the top right hand corner of every page.

The Complete Checklist

If you're a Web developer, then try to check off these tips as you prototype each and every site you design -- but keep in mind that these pointers are just as easily applied to existing sites.

No doubt as you design more Websites over time, you'll come up with a list of your own design tips and guidelines. Use them whenever you can, and share them with newbie Web developers so they don't make the same mistakes that you may have!

[1] http://www.coca-cola.com
[2] http://www.ford.com
[3] http://www.cyscape.com
[4] http://www.amazon.com
[5] http://www.isonsw.com.au
[6] http://www.webmasterbase.com/article/43
[7] http://www.w3.org/MarkUp/Guide/Style.html
[8] click here
[9] click here