Diary of a Webmaster Part 1 - My Site Design Checklist

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