Creating a Useful Custom 404

Posted: July 10, 2006 Comments(6)

Given this day and age of searching on the Web, it’s almost hard to find a legitimate 404 error page on any given site. It still happens from time to time, less likely from clicking a link provided by a search engine, and more likely clicking on internal links from within your own site. Some intelligent minds have come up with some really great and usable solutions for unwanted 404 errors.

Creating a custom 404 error page is quite easy regardless of your Web server setup. A quick search on Google can provide many links to step by step instructions on setting up your own custom error pages. This article is going to concentrate on the content included in your 404.

Default 404 Error Messages

Web servers come with their own default error pages, and many Web hosts provide their own. Jakob Nielsen has written about the error messages provided by default configurations and remarked on their sub-par usability. He also includes some great ideas for helpful content to include.

Custom 404 Error Page Content

You may not think a 404 should tell you much more than that — you’ve tried to access a page that doesn’t exist. To be honest, I couldn’t disagree more. I think an error page should do its best in effort to help the visitor find what it is they’re looking for. In the case of a 404 I think one of the most effective pieces of information to convey would be a site map if applicable.

A Site Map as a Detour

Think about it — you’re browsing a site and come upon a dead link that gets you nowhere. It’s not like once you’ve hit that error page you’re no longer interested in the content. You want to find it; not hit a dead end. If faced with a site map instead of a road block, you still have somewhere to go.

Give them Search

Another great feature to include on your custom error page is the ability for the user to isntantly search your site for whatever they might need. Explicitly stating that there is a search field on the page will help guide them to do so and hopefully they’ll find their information.

Exploring Other Options

A List Apart had written a great article on creating The Perfect 404 and the author goes to great length to describe an ideal 404 page. An in depth discussion is brought up surrounding the use of a script to generate ‘suggested links’ based on the referring URL. This is a very interesting idea in that the script can use information provided by the bad url to direct the user towards a good URL. Given a particular situation this can be the perfect solution for you or a client.

Check Your Logs

As a developer you should take the time to check your Web logs for all error codes, including 404’s. If you find any, fix them if possible. Sure, if someone else is linking to your site improperly there sometimes isn’t much you can do about it. If you keep your site properly organized, however, that person arriving at a 404 will be able to find their desired content very quickly.

Internet Explorer and Your Custom 404

Naturally you were waiting for an entire paragraph dedicated to giving Internet Explorer a crutch so here it is. Internet Explorer thought that it could develop more “Helpful and Friendly Error Messages” such as this:

Screenshot of Internet Explorer 404 Error Page

Sure, it gives an overview of what might have happened — maybe, but this surely isn’t what you want appearing on your site or the site of a client. For starters it doesn’t even look like your site. Seeing a completely different page design will confuse your visitor in an instant. Secondly, advice given to the user is nothing short of awful. The first item in the list blames the error on the user misspelling the URL and tells them to double check. Next it tells the user to go to the TLD and start hunting from there — come on, are you serious? And then as a last resort it instructs the user to search the Web for their answer, basically saying “good luck elsewhere”. These are not the messages you want to give anyone finding themselves at your 404.

Force IE to use Your Custom 404

These ‘more helpful’ error pages are displayed in a variety of situations when using Internet Explorer — sometimes even when you don’t want them to. For instance, this IE-oriented 404 error page will display even if you’ve set up a custom 404 error page if yours doesn’t weigh more than 512 bytes. Isn’t that considerate? If your custom 404 isn’t large enough — you need to bloat it in order for it to show up.

It’s All for the End User

A custom 404 error page can be a great addition to your site if implemented properly. Providing enough information is key to keeping that reader and helping them to find what it is they’re looking for. A custom 404 is going to be particular to each project and every circumstance isn’t going to require the same bits of information. Choosing the most effective will boost the usability of any Web site and continue to help your readers find their information.

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. Some good suggestions here, and things people often don’t bother to do. When building fairly small websites, you hope that a user won’t be confronted with a 404 error, but they might be messing with URLs or becoming from an out-of-date search engine result.

    I tend to add the following information:
    A brief description of what has happened, and try not to point blame on the user!

    Remove the main navigation (controversial!), as this gives the page a distinction.

    A search box (if you have a search facility inplace).

    A link back (if there is a referrer).

    Link to the site map (if there is one).

    A link to contact information / form.

    If they’re in a news section, and you might be able to guess the article they’re looking for, link to it, and make it stand-out.

    If you have a URL structure which contains the year and month, suggest other articles which appeared during that month. This will increase the likelyhood of them finding what they’re looking for.

    And example of all of this can be found at http://www.approveddesign.co.uk/news/archives/2006/02/404-page

  2. @trovster: Thanks a lot for the great response. You’ve got a great system for determining which features to add if applicable, and I’m glad your process will be available to other readers.

  3. Some good points; I’d gone the comedy route and didn’t really have a useful 404. But after reading this I decided to see if I could combine the useful and the (I think) humorous.

  4. I didn’t know that about the size of the page and IE.

    I just generate a search (which isn’t very sophisticated, but still) and display that automatically for any 404 error, but I return “200 OK” because of the IE idiocy.

    I wonder if padding the page with an extra 500 repeated letters is really the right way forwards though…

Leave a Reply

Your email address will not be published. Required fields are marked *