Download Times

The tutorials and guides available to you in other parts of this site give you information about how to make your site more interactive with customers.   Interactivity is very useful, DHTML bells and whistles are very pleasing to the eyes, graphics can make or break a site, but what I want to talk to you about now is SPEED.  Download time is one of the most important factors that you should consider when designing and testing your page.   Customers want to have information instantly, and if a site is slow, they will be less likely to come back.  Yahoo!, the most popular site on the internet, is almost pure text.  You can browse through Yahoo! on a 28.8 connection and have each page load in an average of 5 seconds.  I do not necessarily advocate going to pure text on your site, but I would like to offer you a few suggestions on how to cut down the download times and make your site more modem-friendly.

Number 1 'Total Size'

'Total Size' is the size of your page after it is completely loaded.  To find out what the Total Size of your page is, add the HTML file size and all of the graphics' file sizes.  Your Total size should be kept under 40k for your main pages.  If you need larger file sizes for information documents or product displays, place them lower in the site.  (more about that in a little while)   A 40k total size will load on a 28.8 modem in about 10 seconds. 

Number 2 'Creative Text'

Browsing the internet, you will notice that a lot of images are simply images of text.  One of my favorite techniques for making text stand out on a site is to manually change the colors of each letter to form a gradient.   The 'Oakbox Productions' at the top of this page is not an image:

<font face="Verdana" size="7" color="#1E1113">O</font><font face="Verdana" size="7" color="#2B171B">a</font><font face="Verdana" size="7" color="#49272E">k</font><font face="Verdana" size="7" color="#63343E">b</font><font face="Verdana" size="7" color="#733C48">o</font><font face="Verdana" size="7" color="#7D4250">x</font><font face="Verdana" size="7" color="#1E1113">&nbsp; P</font><font face="Verdana" size="7" color="#361F22">r</font><font face="Verdana" size="7" color="#44262B">o</font><font face="Verdana" size="7" color="#552F35">d</font><font face="Verdana" size="7" color="#61363D">u</font><font face="Verdana" size="7" color="#6B3D45">c</font><font face="Verdana" size="7" color="#75424A">t</font><font face="Verdana" size="7" color="#824851">i</font><font face="Verdana" size="7" color="#94525B">o</font><font face="Verdana" size="7" color="#A05862">n</font><font face="Verdana" size="7" color="#A9636D">s</font>

Try playing with this technique to add effects to your own site.  I also tried playing with different fonts like Microsoft's 'Wingdings', but the problem with going that route is that not everyone HAS Wingdings installed on their machine.  I would see a big colorful mailbox on my browser, and other people would see a big letter 'W'.  You can also add shadows and glow effects using DHTML.  Be careful with DHTML though, you want to make sure that your site is still useable to viewers using older, non-DHTML compliant, browsers.  Check out the Really Big Network's Dynamic Text page for some examples of what is available.

Number 3 'Image Size'

I am sure that you already compress your image sizes as much as possible, but here are some general guidelines for when and where to use images on your site.

• Main navigation pages should not have any image files over 7k.  (this includes banners, but most banner services limit their file sizes automatically)
• If your site needs to display large images (an art site, or detailed pictures of your products) place them a couple of layers down in the site.   Indicate the image file size with a small thumbnail so that your customer knows what they are getting and can be prepared for a longer download time.
• Publish all of your images with HEIGHT and WIDTH tags.   Your HTML page will render on the browser faster with these attributes listed.
• Use the .gif format for drawings.  There is a free .gif compression service available at  http://www.gifoptimizer.com/ that will reduce the file size of your image as much as 70%.
• Use the .jpg format for pictures.  When converting to this format, set the compression ratio as high as you can without overly distorting the image.  You may have to save a file with several different compression ratios before finding the optimum settings.  Also, many graphics programs allow you to set the DPI (dots per inch) of an image.  Even the best monitors display at only 75dpi, so do not set your resolution higher than this.
• Avoid using image maps.  To be clearly usable, the file size must be prohibitively high.  Quite frankly, I do not think I have ever seen this done well on a site.
• Use the ALT tag on all of your images.  This has several benefits:

1. It makes your site disabled-friendly.
2. It allows people with text-only browser to view your site.
3. Explorer 5.0 has added the 'Toggle Images' button, so your site will still be usable even if the viewer has disabled image viewing.
4. It makes your site easier to navigate because the ALT tags load with the HTML, viewers can skip to the content that is important to them without waiting for image loads.