Back to Blog

Creating a usable 404 page

Author

One often overlooked feature of web design is the 404 Error page. This is the page that a visitor will see when a certain page or file is not found. Here’s the basic template I use to create a 404 error page:

XHTML

Page Not Found

The page you requested cannot be found. The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.

Please try the following

  • If you typed the page address in the Address bar, make sure that it is spelled correctly.
  • Open the home page and look for links to the information you want.
  • Enter a term in the search box to look for information on our site.
  • Contact us with your question.

Working with the .htaccess file

Once you have a 404.php or 404.html created and styled you need to tell the server to show that page when a file or page is marked as missing. To do this you need to create an .htaccess file, which is a hidden filetype. Because it is a hidden filetype it may disappear if you save it as “.htaccess” so you may need to save it as “htaccess.txt”, upload it to the server, and then rename it to “.htaccess”.

Once you have your .htaccess file setup open it with your editor of choice and add the following line:

ErrorDocument 404 /404.php

Where /404.php is the relative or absolute path to the 404 page on the server.

Suggested Improvements

A great feature I’d like to add to my 404 arsenal is a site wide search field for people to use in order to find whatever it was they were looking for that went missing. In general adding a search to a site can be a time consuming and expensive process.

One great approach to setting up a powerful site search is explained by Christian Heilmann at 24 ways. Christian’s article, Sitewide Search On A Shoe String, explains how to tap into Yahoo!’s BOSS API. BOSS is a REST API, meaning you can use it in any HTTP request or in a browser by simply adding the right parameters to a URL.

Author Alec Harrison

More posts from this author

How we work Process

Product Hero Talin Wadsworth