404 Not Found! 403 Forbidden! What better way to send your site visitors away then with an ugly error message? A user who encounters an error message on your site may have the good sense to head back to your home page, or, more likely, will turn tail and find some other site.

But with some clever crafting of custom error message pages, you can help users feel comfortable and quickly direct them to a working part of your website.

Pandemedia.biz has a simple 404 page design that immediately clues users in to where they are and how they may have ended up at a dead end. A basic link, as well as global navigation bar, is used to get you back to the home page safe and sound.

There are dozens of possible error codes that can be reached, but the most common for average web users are 404 Not Found (the file requested isn’t on the server), 403 Forbidden (the file request is there, but the server won’t let you access it, possibly for server permissions reasons), and 401 Unauthorized (the file is there, but authentication is needed to access it). Depending on your site, you may need some others like 400 and 500—check out the exhaustive list at Wikipedia: http://en.wikipedia.org/wiki/Web_error_codes

Know what pages you want to create? Then just follow these steps:

1) Design each page, and keep it lean. Create a page design that includes your site’s basic global information: logo, navigation, copyright. And keep it in a style that matches the rest of your site so users feel right at home even when they’ve reached an error.

2) Apologize, but don’t overdo it. Keep your apology/error text short and sweet. Just tell folks how they got there and how to get out. For example, “Sorry, this file has been moved or removed. Please visit our homepage or use the navigation bar to return to the site.”

3) Keep things light. Keep large graphics, Flash pieces, and fancy bells and whistles to a minimum. Who wants to wait and wait just to see an error page? The only “extra” code you might consider is a simple redirect, along with some text that indicates the redirect will happen: “You will be redirected to the homepage in about five seconds.” Allow enough time for users to read the error, but not a ton.

This line of code in your head tag will send users to the given URL in 5 seconds.

4) Name your files clearly. Create a different HTML file for each error message and give them all clear names, like 404.html and 403.html. This is good for organization, but also helps you easily track the traffic coming to each error page in your site stats. Upload the files to the root of your server unless your host requests otherwise.

5) Get the error messages to your site properly, and test. Getting these files “attached” to the assorted server errors can be easy or tricky depending on your host and your comfort with the techy side of things. Many hosts that have “control panels” for administration offer simple hookup of error pages—just upload your pages and tell the control panel where they are, and you’re all set. Other hosts just ask that you give your files certain names and locations, and they do the hooking up for you. Be sure to check with your host’s support to see if they have these easy options before venturing out on your own.

If you do have to hook up your custom errors yourself, you’ll need to create or update an .htaccess file. There’s a great walkthrough of how to do this at JavaScript Kit: http://www.javascriptkit.com/howto/htaccess2.shtml though I highly recommend talking to your host first if you’re not comfortable with the idea—oftentimes, tech support will do this for you or walk you through it. When you’re done, just test out some paths on your server that you know don’t exist or are forbidden to make sure it’s all working properly.

This entry was posted on Monday, September 10th, 2007 at 2:53 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.