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

    I loved those ones!

    0
  2. 52
  3. 103

    This is my fave 404… good and insulting
    http://www.kosch.co.uk/

    0
  4. 154
  5. 205
  6. 256

    the b3ta.com 404 is pretty cool, all the images were created by the board users

    0
  7. 307

    the one for BlueVertigo is actually a song for the last episode of cowboy bebop, just thought I should straighten that out.

    1
  8. 358

    Nice collection of 404 pages. I’m thinking of creating my own 404 page but I keep procrastinating. I’ll get to it one of these days.

    0
  9. 409

    Good article… reminded me that my portfolio’s 404s are still the WordPress default. Thanks for the reminder!

    0
  10. 460

    NIce list. Some of those are a bit odd or niche, though… Check out this one from a D&D website:
    http://d20srd.org/asdf

    0
  11. 511

    The digg effect is strong in this one. Thanks for sharing these pages. 404 doesn’t seems so bad anymore.

    0
  12. 562

    http://tysontate.com/404/

    whats up with your lame-o 404?

    : )

    0
  13. 613
  14. 664

    I’ve been inspired.

    I’ve always used this as my 404 page. Two parts are randomly generated from javascript.

    I’m going to go home and spruce mine up a bit and give it more oomph.

    0
  15. 715

    My error page: :)

    0
  16. 766

    Homer Simpson (doh!) @ Fox Latin America: http://mundofox.com/404

    0
  17. 817
  18. 868

    Three words: Sharks with Lasers.

    http://renkoo.com/404

    0
  19. 919

    јебига means “fuck it!” in Serbian. I suppose the people at Rainfall Daffinson are not aware of that. ;)

    0
  20. 970
  21. 1021

    I find it arrogant and annoying when a website blames ME for arriving at a 404. More than once I have been sent there from within their own site, but they assume it’s either my stupidity, my inability to type, my outdated bookmark (which should be their problem, not mine) or some other sites bad link.

    The sites I like admit it just could be their fault and offer me an opportunity to tell them about it.

    0
  22. 1072
  23. 1123

    Truly a great work. I feel inspired to do my own 404 page.
    Thankx

    0
  24. 1174

    though you cant find it the page … its good to look at …
    that good … right ??
    hehe …
    good list … thanks for sharing …

    0
  25. 1225

    Nice collection. Although mine is missing. ;(

    0
  26. 1276

    Here’s one that clearly shows why the website went down, devs and a Nerf war.

    http://myquire.com/404.html

    0
  27. 1327

    I would like to submit my own for review
    http://www.hitpoints.org/thispagedoesntexist.html

    0
  28. 1378

    Wow! I love all the creativity that’s gone into the 404 pages. Makes me want to make some changes to mine. Thanks for the ideas.

    0
  29. 1429

    Very very good. A lot of interesting ones out there. I believe the less technical, the better…

    http://www.offeroftheday.com/404

    0
  30. 1480

    now that is what I call creative people with very interesting website, even 404 page can make people stay long on their website !

    1
  31. 1531

    The Homestar Runner one you have there isn’t a 404 error, that was a toon called The System is Down they had designed to look like a 404 error.

    They do have a creative 404 error though, see 404’d at the Homestar Runner Wiki for more information.

    0
  32. 1582

    It is said, “To err is human,”
    That quote from alt.times.lore,
    Alas, you have made an error,
    So I say, “404.”

    Double-check your URL,
    As we all have heard before.
    You ask for an invalid filename,
    And I respond, “404.”

    Perhaps you made a typo —
    Your fingers may be sore —
    But until you type it right,
    You’ll only get 404.

    Maybe you followed a bad link,
    Surfing a foreign shore;
    You’ll just have to tell that author
    About this 404.

    I’m just a lowly server
    (Who likes to speak in metaphor),
    So for a request that I don’t know,
    I must return 404.

    Be glad I’m not an old mainframe
    That might just dump its core,
    Because then you’d get a ten-meg file
    Instead of this 404.

    I really would like to help you,
    But I don’t know what you’re looking for,
    And since I don’t know what you want,
    I give you 404.

    Remember Poe, insane with longing
    For his tragically lost Lenore.
    Instead, you quest for files.
    Quoth the Raven, “404!”

    by Dan Black
    dan@black.org
    16 August 1999

    1
  33. 1633

    “Shocking visitors with colors…”

    The description of the first page under #8 made me pause. It sounded like they’d never seen a test-pattern from an old VCR before. And having thought about it, it seems likely that the writer never did! I recognize it, but it’s been a long time since I actually saw it in the wild. Perhaps it’s simply a thing of the past. It’s not supposed to be appealing – in its natural habitat, it’s just something that is not white noise/static, could function as a test-pattern and supposedly was easy to make. It was displayed whenever there was no signal, so using it as a 404 page makes perfect sense. =)

    0
  34. 1684

    omg why orkut.com error page isnt in the list? its so funny.. says ‘bad bad server,no donut for you’ =D

    0
  35. 1735

    wicked,
    nicely done

    0
  36. 1786

    I notice that none of those pages (as pretty as they are) provide the seo and user benefits provided by Google 404 Error Page

    1
  37. 1837

    Any comments about my website’s 404?

    http://www.lalit.org/404

    0
  38. 1888

    Thanks dweeble for the referance! I’m a BIG stickler on Copyright and Intelectual Property and wish that the page had sited the source it’s the las and a good idea. For anyone who cares it is indeed Cowboy Beebop (and anime series) The song was composed by Yoko Kanno and is avalible on the CD Blue. Though the OST1 is a much better CD

    0
  39. 1939

    i love them.. its we freindly “negative” tone…. i’ll be looking forwar to my 404 ERRORS if thats the case… maybe they could include useful info..or we could make ads on the 4o4 error showups..hmmm . just a thought…

    0
  40. 1990

    Number 8 (first one) is better than the editors give it credit for! Its TV/video test pattern that is used to calibrate monitors and systems called “colour bars”. To me it is like when your TV transmission signal drops out. A better screen would be a Test Pattern like the kind TV stations do use when theres a signal failure.

    0
  41. 2041

    How fun! Thanks for sharing. My 404 page has been “different” and humorous since the start, but I had no idea others were doing fun and creative things with theirs as well. This was enjoyable – can’t wait for the next set.

    0
  42. 2092

    Very good Collection.. iwant create my 404 page ! :P

    0
  43. 2143

    Those page were awesome, and funny!

    How about a song about 404 pages? HAHA…

    0
  44. 2194
  45. 2245
  46. 2296

    I also got inspired. I grew up with c64, so this is mine:

    http://www.klaus.dk/some_missing_page

    0
  47. 2347

    This inspired me to create a 404 for my historical cartography website. I titled the 404: “Here be dragons”, a reference that was supposedly put on maps in unknown lands. Of course, I added a detail from such a map as well!

    Historische cartografie 404

    0
  48. 2398

    SEO News | Tips | Blog Solutions

    November 27, 2007 5:55 pm

    this is good page. I like the paper & pen page and I have used it. Please let me know if you have any suggestion to put this page in blog?

    0
  49. 2449

    Brilliant post! I never really thought to put much effort in to mine, maybe i should.

    Love the book one and the bsod!

    0
  50. 2500

    Dwayne Charrington

    December 31, 2007 11:27 am

    Wow, nice list! You’ve given me inspiration to work on my 404 page now as well.

    0

↑ Back to top