Improve your user interface with a custom 404 page

Posted 29/10/08 by David Web Permalink

A well designed custom 404 error page is a straightforward addition to your website which will greatly improve the user experience and prevent lost traffic.

A 404 error page is what is displayed in your browser when a file (web page) cannot be found.  This could be for a number of reasons such as

  • You mis-typed a URL or had an out-of-date bookmark.
  • A page has been moved or deleted but the search engines have not yet updated their records
  • The website contains a broken link which hasn't been corrected

The vast majority of users, when confronted by a 404 error page will simply click on the back button and try another website, possibly even a competitor's site.  This behaviour has been proven in a number of studies.

Custom 404 page design

The design should follow the general rules of your website, so if possible it should contain the same logo and navigation as for the rest of the web pages.  Some designers choose to make the 404 page less cluttered than the rest of the site, but it should still be obvious that it belongs to your website.

The minimum that your new page should contain is a clear message telling the user that the page they are looking for is not available in this location.  This will reassure them that the fault is not their own and they will be more likely to try and locate the correct page, or continue browsing your website.

To increase the chances that they will find the correct page you should always contain a link to the website's sitemap as well as to the home page.

If you have a site wide search function then including this will also be a great benefit.

A fine example of what a well thought out 404 page can look like is at where they use a clever flowchart system to guide the user to an acceptable outcome.

Creating the 404 page

To create and upload the custom 404 page you must first check with your web hosts to see if they can support this.

The next stage is to create the file.  A simple html file will suffice but other file types could be used if you are using includes for example.  Follow the above tips to create your custom 404 page.

Tip: Internet Explorer ignores any custom 404 page that is smaller than 512 bytes and instead using its own standard error page.  To make sure your custom page is shown simply create a finished file that is larger than the 512 bytes limit.

Once your page is built you need to upload this to your server.  You also have to edit the root .htaccess file to point 404 server errors to your new page.

If you already have an .htaccess file then simply add the following line.

ErrorDocument 404 /404page.html

Where 404page.html is the name and location relative to the root directory of your new custom 404 page.

If you need to create an .htaccess file for the first time then please refer to this helpful guide.

Once uploaded simply test your new page by typing in a URL for a page you know doesn't exist on your website. Your custom 404 page should then appear!

Taking this further

To try and track down broken links you could include a contact form on the 404 page to let users report these problems.  Alternatively you could use a more comprehensive approach and record every triggered 404 in a log for later analysis.