Custom Error Pages

Custom error pages are often overlooked when designing a website simply because many people do not understand how important they can be. A standard error page gives the proper information of course, but a nice custom error page can do so much more. When someone encounters a bad link to your site and sees a traditional error page they will probably just leave. If you have good custom error pages which not only look nice, but also give the user links to the sections of your site, they will almost always click through to find what they need. This article will explain how to create this small but important addition to your site.

Requirements

To create custom error pages using the method below you will need to have access to your .htaccess file. If you are not familiar with this file, you can find an introduction to it on this site.

Many web hosts give you the ability to create custom error pages from an online control panel. My host supports this, but doing it manually gives you much more control.

The code

The code for custom error pages is in the following format:

ErrorDocument (3 digit error code) (path to error page)

Here is an example. This is what I generally use myself:

ErrorDocument 400 /errors/400.htm
ErrorDocument 401 /errors/401.htm
ErrorDocument 403 /errors/403.htm
ErrorDocument 404 /errors/404.htm
ErrorDocument 500 /errors/500.htm 

There are several other error codes, but these five are generally accepted as the most common ones that visitors will encounter. For a more complete list, with information on the specific errors, you can visit the World Wide Web Consortium.

In the above code, the error documents are contained in an ‘errors’ directory on my web server. You can place them anywhere you like, but it is very important that you always use relative paths to the files. This is the path relative to the root directory of your web server. It always starts with a forward slash!

Creating the pages

There is only one important rule to remember when creating your error pages – the file size. Internet Explorer (at least versions 5 and up) have problems displaying custom error pages that are less than 10 Kilobytes in size. Some people say the minimum is 512 bytes but from my own testing I find it is much better to make them at least 10 Kilobytes. That is, if you want them to always work!

A simple way to increase the size of your error pages is to add in random text in comment tags as shown below:

<!-- comments comments comments etc... -->

A few notes on content

Some web sites are configured to redirect the user back to the homepage when there is an error. While this certainly works, it is not very practical. If there is a true error occurring, then the user needs to know. It is also important because it can let people know that they need to update their links!

The goal of a good custom error page is not to hide the error message but rather to make it attractive to the viewer and easy for them to find what they are looking for. You can have a simple link to your main index, or even a full sitemap. Either way it will mean a lot more people are coming back to your site!

Testing and troubleshooting

After you have uploaded your modified .htaccess file and the custom error pages you can easily test them by trying to access a non-existent file on your web server.

For those of you who are currently using any kind of redirect or mod_rewrite code in your .htaccess file, I find that it helps to put your custom error page code before any of this. Otherwise it may have trouble displaying your pages on some servers.