Pro Blog Design

Better Looking Blogs Grow Faster

First time? Start here.

Sorry I lost Your Files!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!

Discussion on This Article

  1. Tyler Michael Jonsson
    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!!!

  2. Michael Martin
    August 13th at 1:34 pm GMT
    Comment #2

    lol - It was on Flickr. I liked it as well. :D

  3. Shine With Grace
    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!

  4. Michael Martin
    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. :D

  5. kristarella
    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.

  6. Michael Martin
    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. :lol:

  7. Bloggrrl
    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.

  8. Michael Martin
    August 18th at 12:45 pm GMT
    Comment #8

    Haha Bloggrrl. True. We can dream... :D

  9. AskApache
    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

  10. Michael Martin
    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)

  11. redwall_hp
    August 28th at 1:42 pm GMT
    Comment #11

    "http://www.google.com/problogdesign-sucks/"?

  12. Michael Martin
    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.

  13. redwall_hp
    August 28th at 5:42 pm GMT
    Comment #13

    Yeah, I saw the P.S. :D

    If I'm looking for 404 pages, I just go like http://www.pottersurf.com/404/ (take a look at that one :D ).

  14. Michael Martin
    August 28th at 6:25 pm GMT
    Comment #14

    Well that may make a little more sense I suppose... :P

  15. redwall_hp
    August 29th at 12:56 pm GMT
    Comment #15

    It's less funny than "/problogdesign-sucks/" though.

  16. Nicholas
    November 18th at 8:19 am GMT
    Comment #16

    Good list, but I'd swap 1 & 2.

Leave a Reply