5 Ways To Jazz Up Your 404 Page
August 8th 2007
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!
Read something useful? Subscribe!
Find other posts tagged with: Customization, Downtime, Error Pages, Personality
Twitter
August 13th at 12:56 pm GMT
Comment #1
Hehe, I do love the lolcats
That's a really great 404 image... I may just use that!!!
August 13th at 1:34 pm GMT
Comment #2
lol - It was on Flickr. I liked it as well.
August 15th at 2:23 pm GMT
Comment #3
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!
August 15th at 3:06 pm GMT
Comment #4
It shouldn't be too hard for you I imagine. Loads of your posts already have hilarious little cartoons in them.
August 17th at 1:23 am GMT
Comment #5
That's a good idea! Yet again, Chris Pearson to the rescue, he's included a funny one of these in his template.
August 17th at 12:59 pm GMT
Comment #6
Haha Kristarella! Thanks for pointing that out. I didn't realise that that 404 page was from his template.
August 18th at 4:03 am GMT
Comment #7
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.
August 18th at 12:45 pm GMT
Comment #8
Haha Bloggrrl. True. We can dream...
August 25th at 9:34 pm GMT
Comment #9
What about other HTTP status codes? Like ErrorDocument 500 /index.php?error=500, etc... ? All 57 Status Codes
August 25th at 9:45 pm GMT
Comment #10
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)
August 28th at 1:42 pm GMT
Comment #11
"http://www.google.com/problogdesign-sucks/"?
August 28th at 2:00 pm GMT
Comment #12
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.
August 28th at 5:42 pm GMT
Comment #13
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
).
August 28th at 6:25 pm GMT
Comment #14
Well that may make a little more sense I suppose...
August 29th at 12:56 pm GMT
Comment #15
It's less funny than "/problogdesign-sucks/" though.
November 18th at 8:19 am GMT
Comment #16
Good list, but I'd swap 1 & 2.