404 Error Pages: Reloaded

Advertisement

Three weeks ago we’ve showcased some of the most beautiful, creative and user-friendly 404 Error Pages1; we’ve collected some interesting ideas one can use to help out the visitors once they got lost ony your page. We’ve also asked our readers to design their own 404 pages and promised to present the best solutions afterwards.

We’ve received over 100 entries. The choice wasn’t easy, so evaluating the quality of the entries we’ve considered – among other things – the communication with visitors, precise and clear navigation, the use of graphics, creative ideas and some outstanding solutions. Some of the solutions presented below might not be as helpful as they could or should be, however they include some creative approaches you should be aware of designing your 404 error pages.

We’d like to thank to everyone who participated, your input means a lot for us and for web-designers worldwide. You help to improve the quality of the Web. Don’t underestimate it.

So here is what you’ve come out with: over 40 working examples of user-friendly, creative and outstanding 404 error pages – in a brief overview.

1. Appealing Images

A really dirty, hand-made image with a comment – for despaired visitors only. The page also includes a search box.

404 Error Page Example2

Rainfall Daffinson makes sure you don’t feel lost.

404 Error Page Example3

Even a 404-error page can look stylish.

404 Error Page Example4

A book with the page which couldn’t be found.

404 Error Page Example5

404 Error Page Example6

404 Error Page Example7

Jamie Huskisson communicates with “lost” visitors using imagery.

404 Error Page Example8

404 error as time on a clock.

404 Error Page Example9

Sometimes you can feel or even smell that you’re definitely not on the page you wanted to visit.

404 Error Page Example10

2. Getting Poetic

404 error haiku. Informative, however a direct link to the start page would be quite useful.

404 Error Page Example11

Three more haikus by Lumino.us. Plus beer to keep you company.

404 Error Page Example12

And one more haiku by alt-web.com.

404 Error Page Example13

BlueVertigo offers a poem with horizontal scrolling.

404 Error Page Example14

A small poem about the 404 error by Poemofquotes.com

404 Error Page Example15

Jacob Thomas quotes Winston Churchill and informs lost visitors that the page they’ve been looking for seems to have been burnt down by a puckish elf called ‘Prontyr’.

404 Error Page Example16

Darren Hoyt appeals to the humanity of mistakes and errors and communication with visitors directly.

404 Error Page Example17

3. Communicate Through Emotions

Isn’t he sad…

404 Error Page Example18

…however, Cat Content seems to be doing well…

404 Error Page Example19

…and Krystal gets no biscuit.

404 Error Page Example20

4. Communicate Through Irony

Maybe an idiot has passed you the wrong link or maybe a bigger idiot has linked in their site to a page that doesn’t exist. In both cases the big boss man has been sent an email informing him of this problem, so the person responsible can be tied to a tree and horsewhipped! Nice to know.

404 Error Page Example21

Martin Yelland has some good explanations about what happened: strange little Web Gremlins or fluctuations of the Earth’s Magnetic field might have caused the error – however, a team of highly trained monkeys has been dispatched to deal with this situation.

404 Error Page Example22

Even although you’re a douche bag, you can use a search box to get to the page you’ve been looking for.

404 Error Page Example23

Apparently, this is a test of the emergency broadcast systems. You should remain calm, these kinds of things happen all the time. The “four oh four error” by Poropoptrt.com.

404 Error Page Example24

5. While You Are Lost…

…you can read a comic…

404 Error Page Example25

…or more comics (the image is changing after every reload)…

404 Error Page Example26

…get two cocktail recipes…

404 Error Page Example27

…die…

404 Error Page Example28

…don’t count to 404 (the site also provides a search box and a tag cloud)…

404 Error Page Example29

6. Explain What Happened

Explanation in a well-designed visualization of what happened.

404 Error Page Example30

Be aware when you’ve reached a buzzless page…

404 Error Page Example31

404 Error Page Example32

7. Explain What Can Be Done

404 Error Page Example33

Foobr offers a detailed explanation on what can be done and what the “lost” visitor might be looking for.

404 Error Page Example34

404 Error Page Example35

3amproductions.net suggests pages the visitor might be looking for.

404 Error Page Example36

Renet-web.met offers recent posts and a search box.

404 Error Page Example37

8. Unusual Solutions

Shocking visitors with colors – interesting, but not quite appealing…

404 Error Page Example38

Blue Screen Of Death on the Web.

404 Error Page Example39

Sorabji.com lists what people were looking for when they got the 404 Page Error. Interesting approach, however not recommendable – think of spambots.

404 Error Page Example40

9. Be Sincere

Jeremy seems to be really sorry about the missing page…

404 Error Page Example41

…so is Rainer…

404 Error Page Example42

10. Do Whatever You Want To Do

This is not a working example, since the site isn’t using the page as a working 404 error page. Nevertheless it’s quite funny: the characters are talking, and as you might suggest, they are talking about 404 errors!

404 Error Page Example43

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/07/25/wanted-your-404-error-pages/
  2. 2 http://www.ateaseweb.com/404/
  3. 3 http://rainfall-daffinson.com/404
  4. 4 http://www.cgcraft.com/404
  5. 5 http://www.vi-su.de/404
  6. 6 http://slonky.com/404
  7. 7 http://iamww.com/404
  8. 8 http://www.jhuskisson.com/404
  9. 9 http://www.tix02.be/404
  10. 10 http://www.obedinenie.com/en/404
  11. 11 http://www.jackfig.com/404
  12. 12 http://lumino.us/404
  13. 13 http://alt-web.com/404
  14. 14 http://bluevertigo.com.ar/404
  15. 15 http://www.poemofquotes.com/404
  16. 16 http://dynz.net/jacob/404
  17. 17 http://www.darrenhoyt.com/404
  18. 18 http://suspendedanimations.com/404
  19. 19 http://tysontate.com/404/
  20. 20 http://krystalarchive.dwightdesign.com/404
  21. 21 http://www.alphomega.co.uk/404
  22. 22 http://www.tadleyroundabout.co.uk/404
  23. 23 http://www.expansionbroadcast.com/404
  24. 24 http://www.pyropoptrt.com/404
  25. 25 http://www.bioneural.net/404/
  26. 26 http://derfrison.com/404
  27. 27 http://www.cssleak.com/404.php
  28. 28 http://www.f23.com/404.shtml
  29. 29 http://www.porcupine.gr/404
  30. 30 http://www.nextwaveperformance.com/404
  31. 31 http://www.prt.sc/404/
  32. 32 http://www.martinkorner.co.uk/404df
  33. 33 http://www.psyked.co.uk/404
  34. 34 http://foobr.co.uk/css
  35. 35 http://www.robgoodlatte.com/404
  36. 36 http://3amproductions.net/404
  37. 37 http://www.renet-web.net/404
  38. 38 http://www.palmflying.com/404
  39. 39 http://www.galiacho.es/404
  40. 40 http://sorabji.com/404
  41. 41 http://jeremyfuksa.com/404
  42. 42 http://www.pen-and-paper.de/404.php
  43. 43 http://www.homestarrunner.com/systemisdown.html

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertisement
  1. 1

    This 404 page has a 303 synth toy embedded!

    0
  2. 102

    Lot’s of original ideas in this list.

    Here is our contribution to the world of 404s… the Magic 404 :)

    0
  3. 203

    Also check out using your 404 page to boost your google ranking with this Google 404 plugin for wordpress.

    0
  4. 304

    Someone sent me this 404 at Xmas. Made me laugh.

    0
  5. 405

    Really inspiring! Mine should have a search box already, but I need to get more on top of this. See if I can find something more creative. :)

    0
  6. 506

    bule screen of death , LOL

    0
  7. 607
  8. 708

    Cool 404’s. Inspired me to do my own.

    0
  9. 809

    Very impressed. These are some great designs and I been noticing in my stats
    that I have been getting 1000’s of 404 error pages not found so I want to find a
    way to make it more useful and at the same time, capitalize on sales and leads.

    Terrance Charles

    0
  10. 910

    The big problem with most of these is that it takes the user a while to realise there’s no content, because there is content specifically made to replace what obviously appears to these designers to be a negative on a 404 — the rightful lack of content.

    0
  11. 1011

    These have inspired me to create a custom 404 page.

    0
  12. 1112
  13. 1213

    jamie Huskisson

    April 25, 2008 9:23 am

    http://www.jhuskisson.com/404/ – new site launched, new 404 page

    0
  14. 1314

    No 404 YET, haha

    April 27, 2008 3:14 pm

    Sooo cool. Geez I am way behind the times. Definately adding this to my to-do list.

    Thx for the refs

    0
  15. 1415

    Greatness!!! There are some awesome 404’s out there…

    http://www.geeksquad.com/404.html

    0
  16. 1516

    Nice post. Good for inspiration.

    Iconolab’s 404.
    Link

    0
  17. 1617

    Inspired by your post, I just put up my dramatically improved 404 page:

    http://conflictzen.com/404

    Thanks for the great ideas and motivation!

    0
  18. 1718

    Had a little fun with my own 404 page.
    Link
    Inspired by tiwistory.com

    0
  19. 1819

    Terrance Charles

    July 8, 2008 6:20 pm

    I caught this post again. I must say after checking out the 404 error pages and decided to use one on my main blog that get’s about 600+ unique visitors daily, I noticed a BIG increase in my conversion from lost visitors, sales, and signups… THANKS!

    0
  20. 1920

    Heh. I found this post amusing. I still like my 404, though.

    0
  21. 2021

    Here is my version of 404

    0
  22. 2122

    I always liked the one on humanclock.com:

    0
  23. 2223

    the best is #15!!!! loooool

    0
  24. 2324
  25. 2425
  26. 2526

    LOL! The Rainfall Daffinson one says “Sorry (jebiga) the page you’re trying to view is not there”

    “Jebiga” means “fuck it” in Serbian >:D

    0
  27. 2627

    402 Payment Required

    If you think there should be some web page at current location, contact me and I may write it for you for a minor fee.

    0
  28. 2728

    we need a 404 on Bush and Paulson – Link

    0
  29. 2829

    qiang!

    0
  30. 2930

    Here is the 404 from my comics strips’ website:
    http://www.mutacao.com.br/pato/php/404.php?l=en

    0
  31. 3031

    Thanks barbara..u have given me an idea!

    0
  32. 3132

    Inspired by this article, I created my own fun 404 page:

    LINK

    Thanks!

    0
  33. 3233

    Heres another one with a clever image – http://www.lightpostcreative.com/404

    0
  34. 3334

    Here is a very funny 404 page: http://www.commuto.com/error

    0
  35. 3435

    This post has to be the best 404-page ressource in the internet. I haven’t seen so many error pages before like here. Thanks for the inspiring collection!

    0
  36. 3536

    Link This is mine. I just did it yesterday.

    0
  37. 3637
  38. 3738

    Wow. Never even thought about redesigning the 404 page. Great article.

    0
  39. 3839

    I’m a bit disappointed to see all those technical “404 errors”. Does any visitor know where you are talking about? Only people who actually build websites, as well as other IT professionals know what the 404 means. Is it that hard to use a clear message the users directly understand?
    Otolar

    0
  40. 3940

    Great selection.
    Another artistic 404 page : http://www.juergenspecht.com/?error=404

    Thanks for the inspiration and sharing

    0
  41. 4041
  42. 4142
  43. 4243

    If some people only knew how important a 404 error page really is, I see big companies making this mistake too, losing out on traffic and sales, after I started really using them, it’s responsible for $100’s extra monthly… I use one that I saw up here, liked the simple design.

    Here’s my custom 404 page…
    http://www.terrancecharles.com/blog/sm

    0
  44. 4344

    check this site, nothing beats this 404

    http://www.bluedaniel.com/4040.php

    0
  45. 4445

    Ooo good error pages. Thanks for share.

    0
  46. 4546

    I made one myself I want to share – http://www.reelfishn.net/404.htm

    I love the simpson one!

    0
  47. 4647
  48. 4748

    Great page…never new I could do so much with a 404…

    0
  49. 4849

    Well, then, never ever really thought about that 404-prob. But then, suddenly, i was pushed into the new dimension. mistyped… a 404-page… but a cute one. (sorry, the address is lost somehow — 404.) A little investigation, and i found this page full of ideas. Wanted a 404 that’s quite similar to the rest of the blog. So, here’s my 404.

    0
  50. 4950

    hello everyone
    does anybody know what to do when the 404 error is displayed on a site?
    i mean how to fix it ¡ cause every time i try to go on my site the 404 message appears
    thanks ¡

    0

↑ Back to top