Web Site Design Tips

Introduction

A few thoughts, in bullet form, on web site development from my experiences of both surfing the 'net and toying with site design.

Version 1.1 (30-August-03)

Un-Professional

• Including the Default Page Name in Links

  Have you ever seen a link like http://www.bengribaudo.com/computers/
index.html? Why is the default file name (in this case, index.html) included in the link? http://www.bengribaudo.com/computers/ would work fine. You will see that the default page is almost always left off of links on major web sites. It's more professional that way! And, leaving it off can save you lot of work down the road. If you ever change web hosts, the new server may use a different default file name. Would you want spend hours going through your site modifying links to reflect the new default file name?

• The Phrase "Click Here"

  Ugh! How many times have you seen this one? One of the first things I learned about web site design was that "click here" is unprofessional. Count how many times it's found on major web sites. How many occurrences did you discover? Zero? Compare "Click here for product information" with "Product Information." Which eliminates unneeded words? (After all, it's obvious that the visitor needs to click!) Which has more impact? Remember one of the keys of good writing: shorter often equals more impact.

Mistakes

• Not Using a Descriptive Title

  Be sure each page has a title which describes the content of that page. Sometimes, every page on a web site will have the same title (say, "Ben Gribaudo's Web Store"). If a visitor bookmarks several pages from such a site, they won't be able to tell them apart in their bookmarks. Consider using a title format like "Stereos - Ben Gribaudo's Web Store"—something that describes the content of the particular page while also identifying your site's name.

• Not Providing META Description and Keyword Tags

  This one is self explanatory.

  Note: some search engines may display the meta description tag's contents in place of the usual text snip-bit in search results. Be sure your meta description really describes what is on the current page.

• Forgetting Backward Compatibility

  Did you know that just a few extra keystrokes can go a long way to enhance the experience "antique" browser users' have visiting your web site?

  • Spaces in File Paths

    Some of the old browsers don't like spaces in file paths, such as in the IMG tag's SRC property or in the A tag's HREF property. If you have a tag like: <img src="Images/Big Picture.jpg">, they will display a broken image icon, because they can't handle the space in the file name.

    Easy solution! Replace all spaces in file paths with the special encoding string %20. So the previous example becomes <img src="Images/Big%20Picture.jpg">! Another example: <a href="Sign GuestBook.htm"> would cause a problem. Change it to <a href="Sign%20GuestBook.htm">, which works fine.

  • Failing to Check Your Site in Older Browsers

    In the process of developing this site, I viewed it in a browser from 1998. The browser didn't apply the style sheet's font proprieties to table cells if I used table as the selector, even though the most recent version of both major browsers did. Simply changing the selector from table to td fixed the problem. A few changes like this can make your site much more appealing when viewed with an old browser.

  • Download Old Netscape Versions

    Old Netscape browsers can be downloaded from http://wp.netscape.com/download/archive.html. Please note: I think (but am not sure) that Netscape has a new End User License Agreement (EULA) which supercedes the ones included with their archived browsers.

Fine Touches

• Remember Your ICO

  Make your page stand out in Favorites! Internet Explorer allows you to provide a custom icon to be displayed next to your site name in the Favorites menu, replacing IE's standard web site shortcut icon. By having different icon, your site can stand out among the crowd in Favorites!

• Would you like to know how many people have bookmarked your site?

  I came across this exciting idea recently:

  When someone adds your site to their favorites, IE looks to see if you have a favorite icon file (by default, it looks for "favicon.ico" in the root directory of your domain [e.g. www.bengribaudo.com/favicon.ico]).

  By looking in your web site logs and counting the number of times the favorite icon file is requested, you will have a good idea of how many IE users added your site to their Favorites. (This works even if you don't have an icon file. IE will still request it. Your server will log those requests as 404 errors. Just count those errors.)

  Determine the percentage of IE users that "favorited" your site.

  Then, using that percentage, estimate the total number of visitors who bookmarked your site. If 10% of IE users added your site to their Favorites, you can assume about 10% of all visitors bookmarked your site. So, if your site received 1,000 visitors last month, about 100 (10%) of them added your site to their favorites/bookmarks!

  Added 30-August-03: The most recent versions of Netscape's web browser have a neat feature which will display (if it exists) the favorite icon to the left of the URL in the address bar for every site visited, not just for bookmarked addresses. This means that an ico file request from a Netscape web browser may not indicate that the visitor bookmarked your site. So, when attempting to determine the number of people who have bookmarked/favorited your site, you must ignore ico file requests from Netscape family user agents. Instead, only count the requests for the file which came from IE visitors and then do math as mentioned above.

• Customize your "404 File Not Found" Error Message

  Most web servers allow you to customize server error messages. You can replace the default plain, black-and-white "File Not Found" message with one that matches the graphics scheme and style of your web site. You can make the error message friendlier. You might want to put on it an e-mail address where visitors can request assistance finding files.

  Can you script your custom error page? What opportunities that presents! You can check the referrer header to see what URL had the bad link. If it's on your site, the script can alert you via e-mail while displaying an apology to the visitor, telling him that you will correct the error as soon as possible. If the bad link is on another site, the script can notify you so that you can contact the site's maintainer, requesting him to fix it.

  If you've restructured your site, this error page can be turned in to a redirection center. Say you change all files with the .htm file extension to have the .asp file extension. Some visitors will still be trying to use the old file names (because of old bookmarks, search engine listings that aren't up to date, etc.). Your 404 error script can automatically redirect them to the renamed files.

  Another thought: offer to the user the option of leaving their e-mail address so that you can reply with the correct location of the file are seeking.