Inevitably, someone will wind up on an error page on your website. It has to happen. It just wouldn’t be the internet if everything worked out perfectly. So, how are you going to prepare for these visitors?
This article isn’t a guide to how to create custom 404 errors pages. It’s very easy to do, just Google for it and you’ll find a million results like this one.
1 – Be Funny
Your reader has just been landed in a dead end. They’re annoyed and aggravated at the loss of their time, not to mention the fact that they now have to resume their search for whatever information they were after in the first place. What better way is there to cheer them up than to make a joke?
My favourite example of this is at Lizzdmc Productions, where the 404 page offers a psychiatric analysis before advising you on what to do next. This is also the approach I have tried to take with Pro Blog Design, where you’ll find I modified a popular parody of The Raven, by Edgar Allen Poe.
2 – Be Helpful
The reader’s first attempt at finding a certain page may have failed, but there’s no need to give up hope. If you offer nicely, they might be inclined to make a second stab at finding the page. How do you make such an offer though?
- Mention the most common errors, specific to your site. e.g. If a number of pages were deleted, you may want to mention this.
- Include a search bar. This only applies if your search bar is positioned somewhere distant from the content, e.g. the top or bottom of the page.
- Offer a form of navigation, such as links to the major categories of your website. A link to the homepage itself is usually a must.
- Give a method of obtaining support, such as a link to your contact page, or an email address. If the user really wants to find a certain page, they may appreciate your help.
A great example of this is at Jakob Nielson’s usability website, Useit, where the error page offers a few different support options.
3 – Be Minimalistic
When you get down to it, no matter how great your customisations are, the error page is not the page your user wants. If your website has a large sidebar, slow-loading adverts, or any other irrelevant content which will waste the user’s time even more, it may be advantageous to simply give them the most basic error message possible. The fast loading page means that they can be on their way again in seconds.
An example of this is Google, who take the minimalistic look to extremes, even with their logo!
4 – Be Dynamic
Your blog is powered by a CMS, meaning that you have the ability to offer dynamic content to the user. There is no end to what you could do with this power. Perhaps a list of your most popular posts? Your most recent posts? Popular searches? Tags?
Ben from Binary Moon has written a great article on displaying your most recent posts in Wordpress, which you can see in action on his error page.
5 – Be Thematic
The 404 page is, after all, just another page in your website. Is there any reason to lose focus of your blog’s purpose? If you can adapt the error messages, to drill home your message even further, then why not?
Greenpeace have a fantastic error page, connecting the problems with your webpage, to the problems they tackle in nature.
What does your 404 page look like? Which approach did you use, or do you have a different one altogether?
PS – I’m not sure what 5 purposefully broken links will do for my search engine ranking, but I’m dead chuffed at how none of the sites had a “Pro Blog Design Sucks” page!
Custom Search
Tyler Michael Jonsson (13 comments)13 August 07
Hehe, I do love the lolcats
That’s a really great 404 image… I may just use that!!!
Michael Martin (1319 comments)13 August 07
lol – It was on Flickr. I liked it as well.
Shine With Grace (3 comments)15 August 07
Haha, can’t help smiling when I read up to “Be funny” – haven’t thought about the possibility of making the 404 page a better place and hey, why not! I have to figure out what I can do for my blog.
Thanks!
Michael Martin (1319 comments)15 August 07
It shouldn’t be too hard for you I imagine. Loads of your posts already have hilarious little cartoons in them.
kristarella (141 comments)17 August 07
That’s a good idea! Yet again, Chris Pearson to the rescue, he’s included a funny one of these in his template.
Michael Martin (1319 comments)17 August 07
Haha Kristarella! Thanks for pointing that out. I didn’t realise that that 404 page was from his template.
Bloggrrl (1 comments)18 August 07
I love the idea of using a picture! That is hilarious!
I guess some of us overlook this issue because we are hoping that no one ever sees the 404 page…wishful thinking.
Michael Martin (1319 comments)18 August 07
Haha Bloggrrl. True. We can dream…
AskApache (1 comments)25 August 07
What about other HTTP status codes? Like ErrorDocument 500 /index.php?error=500, etc… ? All 57 Status Codes
Michael Martin (1319 comments)25 August 07
The majority of the status codes are rarely shown to a user.
The only others they are likely to see are 500 and 403. If it’s a 500 error, you won’t be able to help them much anyway, but I can see how a 403 page may be useful.
(Though not used nearly as frequently as the 404 would be)
redwall_hp (139 comments)28 August 07
“http://www.google.com/problogdesign-sucks/”?
Michael Martin (1319 comments)28 August 07
I had to use a page that would never exist. I knew that would work, because no site in world would say Pro Blog Design sucks!
Check out the “PS” in the post.
redwall_hp (139 comments)28 August 07
Yeah, I saw the P.S.
If I’m looking for 404 pages, I just go like http://www.pottersurf.com/404/ (take a look at that one
).
Michael Martin (1319 comments)28 August 07
Well that may make a little more sense I suppose…
redwall_hp (139 comments)29 August 07
It’s less funny than “/problogdesign-sucks/” though.
Nicholas (1 comments)18 November 07
Good list, but I’d swap 1 & 2.
chokilala (1 comments)1 October 08
nice article! u gave me great ideas
Alexander Bickov (1 comments)14 July 09
Thanks for useful post. I use this information for my idea for error page 404 http://www.kontain.com/bickov/...../page-404/
eSempoi.com (1 comments)18 July 09
I get it , thanks
.-= eSempoi.com“s last blog ..Weblog Popular 1Malaysia tawar RM5000 =-.