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

    Definitely this site take it all:
    http://www.personetics.com/xyz

    0
  2. 252

    Nice collection!! Would be nice if it was updated!

    here it is our 404 error page!
    http://www.gmake.com.br/404

    and 505 internal error:
    http://www.gmake.com.br/505

    3
  3. 503

    Almost all of these examples are examples of a epic fail.
    1) you should never post the the error code 404 on the screen
    2) don’t make the user feel like their an idiot. Usually 404s are a result of mistyping something or there is a bad link the application – be apologetic – assume it was your fault, not the users… e.g. post a message assuming that it was a bad link.
    3) make it simple, most of these examples have way too much information and clutter

    1
  4. 754

    404 page of Attorney at law from Moscow http://www.shvakin.ru/404.shtml

    5
  5. 1005

    just love these… even made my own 404 page :) check it out on http://tinyurl.com/6fb5597

    0
  6. 1256

    Anirudh K. Mahant

    May 27, 2011 4:52 am

    These are cool, and I can’t resist writing something here what about:

    404 – Not Found ?

    You just found me by mistake, really wanna bet that I’m ever gonna change?

    0
  7. 1507

    Little Red Riding Hood & the wolf
    http://www.noah-design.nl/404

    0
  8. 1758

    As a cartoonist I think the 404 page has so much potential for humor. Here are two of my designs for error pages: http://www.enginenewity.com/404.html and http://www.agostographics.com/404.html

    0
  9. 2009

    I like this 404 from my hosting company… http://catn.com/404

    1
  10. 2260

    here is another one that could fit in the category inventive en cool: http://www.cgtopia.eu/404.html

    0
  11. 2511

    You have to check this one out… left me in tears funny… http://www.estechnicalsolutions.com/abc

    1
  12. 2762

    Thanks to this list. Now I have an idea how to create an awesome 404 page. :D

    1
  13. 3013

    You could add this one for the next one http://www.gluetip.com/404

    0
  14. 3264

    Or this for the English version http://www.gluetip.co.uk/404

    0
  15. 3515
  16. 3766

    Hi,

    Here is another funny 404 for you to view.

    http://www.speedysigns.com/ta

    0
  17. 4017
  18. 4268

    Back to the future theme: http://bedmap.com/404

    0
  19. 4519

    Great, now I wasted the afternoon looking for funny 404’s. It seems that the best ones come from web design firms – http://www.adamantean.com/404.html whereas the giant sites dont really put in the effort – http://www.amazon.co.uk/404.html – snore zzz

    0
  20. 4770

    they all were successful and interesting 404 page designs, a very successful and creative.

    I would like to share with you my page 404:) Turkish, but I think the design is as beautiful. Design and coding was done with HTML5. :)

    http://www.engintopcuoglu.com.tr/404

    0
  21. 5021

    Here’s an animated Tomb Raider 404 page:
    http://larashots.com/404.html

    0
  22. 5272

    Just starting out .. would welcome any feedback on this:
    http://deepanjandatta.com/404/

    0
  23. 5523

    Here’s another one (in french) http://lubie.co/404/index.html

    0
  24. 5774

    I agree with some of the people who commented that most people don’t know what a 404 error is in the first place.

    I think a page should at least tell that something has gone wrong and what can be done.

    That still leaves enough room for creativity, as you can see on this page: http://www.rolluikshop.be/404

    There’s a link to the product as well as helpful info that tells people what they can do.

    0
  25. 6025
  26. 6276

    Thanks for help.all images are verry intresting

    0
  27. 6527

    don’t know.. none of them is impressive. some of these 404-s will even make the visitor to close the window in panic

    2
  28. 6778

    few more interesting 404 :)
    artweb-media.com/pl/blog/entry/przydatna-strona-bledu-404.html

    0
  29. 7029

    Find other 404 here

    0
  30. 7280

    Lost? Here is our updated 404 – http://www.allconnect.com/404

    0
  31. 7531
  32. 7782
  33. 8033

    This 404 page is great: http://www.impdesigns.com/404

    0
  34. 8284
  35. 8535

    This post is Amazing!

    Hey Guys, please take a look at our 404 page!

    http://www.softnow.com.br/IdoNotExist

    Thanks!!!

    0
  36. 8786

    Pragnesh Tavadia

    June 4, 2013 5:56 pm

    WOW! what creativity in 404 Pages, totally inspired :)

    1
  37. 9037

    Check out this example of a 404 page, which promises to help save the world: http://404gotten.org/

    -1
  38. 9288

↑ Back to top