How to design custom error pages to retain your web site visitors

In another article, I described how to configure the Apache to serve custom error pages using the .htaccess file. This article is equally important. It explains how to correctly design custom error pages to retain web site visitors.

Designing custom error pages - they should be customized... right?

The error message thrown by the Apache web server provides no assistance to the visitor. In most cases, visitors close this browser window and move on.
You will know that it is not uncommon for surfers to type in an address incorrectly or for you to slip in a typo when you create links on web pages - which displays the dreaded 404 Page Not Found error message in plain browser window. The aim of this article is to help you in creating and designing custom error pages that are more meaningful to the visitor and much better to look at.

Beautifying the custom error pages

The first step is to have the error pages in the same design template used for all other pages on the web site. This should be a simple affair. I am sure you would have a copy of the template. If you don't, create it my removing the contents of any other page on your web site.

Having your custom error pages in the same design as the other pages of your web site is very important. Do not underestimate this. If the error pages have a different design than other pages of the web site, visitors might feel lost and close the browser window or move to another site.

Remember that error pages are plain HTML pages and so you create them like any other web page of your site.

Custom Error pages should have absolute URLs (web links)

Most probably your web site deign template to refer to embedded files (images, multimedia, external JavaScript and CSS files) using relative URLs. This will not work on custom error pages as errors can originate from any directory on your web site. You, thus, need to change all links on the error pages you are creating to absolute URLs. If you use a text editor for writing HTML, simply search for href and src attributes and change them accordingly.

Don't let the visitor be turned off by the error - help them out

Let us take the example of the 404 Page Not Found error. When visitors encounter this message they generally close the browser - that's one visitor gone for good. However, such pages designed smartly can not only retain the visitor but also make them look at other pages on your web site. I assume that you have followed tenet #1 and created error pages in the design template of your web site so they already have the basic navigation of your web site.

We now need create a smart error page, so ensure that the following things are included:

• A polite message explaining the problem. For a 404 error page, this message can be "Sorry, but the page you have requested for does not exist on this web site. It might have been removed, moved or the URL might be wrong".
• Provide a search feature: A search feature of your web site should be included on all types of error pages. Taking our example of the 404 page, the visitor can type in their query and go to the correct page (or maybe some other page?)
• It is also a good idea to include a link to the web site map. However, if your web site is small (under 40 pages or thereabouts), put the entire site map listing on the error page.

Take a look at the custom 404 error page I have created by click on the link (opens a new browser window). I have not only developed this page in the same design template as all other pages of this web site (so that it carries the navigation menu system), but have provided a description of the problem and (important) a search feature.