david a mcclain (blog) | Home

Just a quick into to get everyone up to speed on 404s

For those of you who don’t know, a 404 is an error code that the server spits out at the you when it can’t find the page you’re trying to load. Sometimes this is due to the user mistyping the address/URL and other times it’s because people like me move so much stuff around on their servers that they sometimes miss the odd link here and there and then those links are pointing to a page that’s moved. And that’s about as technical as I’m going to get here. The point being, a page not being found results in a “page not found” message being displayed to the user.

Why do you care about this?

Well, you care because 404 pages, in and of themselves, are about as useful to the user as a chocolate teapot. It just tells them that what they want isn’t here, so go away. You’ve worked hard to make a site worthy of the reader’s fickle attention, and now you’re going to sour that relationship by giving them a stock 404 page? No dude, no. If, or should I say when, your user comes across this hyperlink dead end you need to do a couple of things for them.

Give them an explanation

Explain what has happened and why they got this 404 page and not what they were looking for. Most boilerplate 404 pages are technical gibberish and fairly useless (not unlike most of my conversations).

Give them a way out

Give them some links to the main parts of your site. Perhaps recent or most popular articles or content. Give them a way back into your site. We don’t wan them to go crying back to google and then into the arms of another website do we!

Help them find what they’re looking for

For some sites, you might want to include a search box so they can find a particular article or piece of content. Or perhaps steer them towards something you think they’ll find useful on your site.

Give them a way to contact you

Perhaps you’ve removed the piece that they were looking for, or renamed it, and all their searching is never going to lead them to what they want. Spare them their frustration by providing a way for your user to contact you or the site admin.

Now for the science bit. Concentrate.

I’ve told you the “why” so at this point a brief explanation on the “how” of 404 pages may be about due. Note: My server runs on Apache. I’ve not had the “pleasure” of using a windows server so if that’s you, you might want to start here re the science bit because I haven’t a clue. For the rest of my Apachean friends all you need to is…

Create (or modify if it’s already there) a file in your domain’s root folder called .htaccess (note that the filename starts with a dot/period).

The .htaccess file is used (as far as our purposes are concerned) to override the servers default error handling behavior. We do that by putting in one simple line of code to tell it anytime you come across a 404 error, load this particular page or script.

The syntax is ErrorDocument 404 then the location of your custom 404 page. My 404 page is in my domain’s root so my .htaccess file looks like ErrorDocument 404 /404.html

Important note: The path you enter for your 404 page must be a relative path to your .htaccess file, not an absolute or the full path. And if your 404 page references an external CSS file, make sure that that path is the full path or absolute path because your 404 page might be called from any one of your sub-folders and therefore you can’t know ahead of time what the relative path from your 404.html file to your 404’s CSS file will be.

You then create a page called 404.html and upload it to your server (in the place you promised the .htaccess file it would be). Job done.

My 404 page

Ok yeah, so what? I’ll admit it. I’m a big hot-shot with my own 404 page. You wanna see it? Ok, go ahead! I’ll try and put my bravado to one side so that I can explain the main points here.

The header

I used a slightly simplified version of my main site’s navigation header since I needed a simple navigation aid back to the main parts of my site. This also has the added benefit of making a 404 error less jarring as the look of the 404 page is kept consistent to that of the rest of the site.

The explanation

A simple, non-technical explanation of why my user is looking at this page and not the one they wanted.

Offering options

Then I gave the user a whole bunch of links to all the main things I get up to including other sites I run. Perhaps they’ll discover something even more interesting than what they were looking for?

Contact information

Even though the navigation header contains an email link, I wanted to reach out and actually offer my help, so I put out my email link with the offer to ask for help.

Reassurance

It’s great that you want to help people who have gotten lost, but you also need to ensure that if it was your mistake then you fix it. I use Mint on my site so I can easily see what pages are being viewed and where they’re being referred from. I had a typo in a link to something in my portfolio and Mint told me that someone had gotten lost following it and so I was able to fix it. Otherwise I might never had known my link was broken.

I love my little 404 page. It’s probably one of my favorite bits of my site. In the past (just a second ago actually) I have even entertained the idea of having my 404 page become my home page. But I fear that will be a little bit of a weird trip for most people so I’ll stick to a more orthodox staging area for now.

Further reading

A List Apart has a great article of making useful 404 pages which you can find here.

If you’d like to see my 404 page in action, click here and prepare to meet thy doom! Nah, only joking. It’s safe to click (I think).

There are actually a whole bunch of errors you can develop customized responses to. Here’s a link to the Apache documentation on using ErrorDocument.

And finally, a little inspiration of some other great 404 pages (collated by Smashing Magazine).