Wanted: Your 404 Error Pages

Advertisement

Every day you visit one of them. The pages, which don’t exist any longer, have moved to a new server or have never existed at all. Once you’ve missed your intended destination, either through a bad or outdated link, or a typo in the page you were hoping to reach, you’ll hopefully get an internal error message from the server. However, by default these messages aren’t that helpful – after all, you are looking for the information, not for the reason you can’t find this information.

404 Server Error Message - File Not Found
Good news – it doesn’t have to be this way. You can style server error messages just the way you style any other pages. It’s not only a more elegant way to deal with errors, but is also extremely useful for keeping users on your web-site, finding new clients or communicating with the old ones.

Do you like feeling to feel lost? No, you don’t. Neither do we. And neither do the visitors of your site.

However, most web-sites do not provide extended error messages, even altough they are intended to lead users to the information they’ve actually been looking for. The reason for that is the simple fact that it is usually forgotten. It’s time to change it.

We’d like you to create a beautiful, functional and user-friendly 404 error page for your own web-site. We’ll collect the most creative, usable and elegant solutions and review them in one of our next posts.

How can I participate?

To participate, just post the URL of your 404 error page in the comments to this post. The page must be online and appear once the 404 error occurs. To identify you as the owner of a web-site you’ve mentioned, place the text “Smashing Magazine” (without a link) on your 404 error page. No matter where: it has to be visible and can be deleted afterwards. Spam will be blacklisted, so the link will never appear in our posts again.

Beginning: 24.07.2007

End: 07.08.2007

Some starting points

To give you some ideas to get started from, we’d like to present some interesting and user-friendly solutions you might be willing to use, extend and combine in your personal 404-pages. In fact, an 404 error page can be everything you’d like it to be, as shown on 404 Research Lab1. There you’ll also find tutorials2 which describe how an 404 error page can be created and installed.

Keep in mind: outstanding 404-pages don’t only communicate the occured error message, but also give solutions and options for further navigation. Don’t let your users feel lost. Take them with you. Let them explore your site.

1. Use appealing visual elements.

1. Wufoo – Page Not Found3

404 Errors - Wufoo · Page Not Found4

2. Twitter: 4045

404 Errors - Twitter: ?6

3. The Big Noob – Page not found7

404 Errors - The Big Noob - Page not found8

2. Provide alternatives for navigation.

4. Last.FM – 4049

404 Errors - Last.fm - Page not found10

5. Devlounge11

404 Errors - Devlounge12

6. Missing page :: Boagworld13

404 Errors - Missing page :: Boagworld14

7. Page not found | Blog | 1976design.com15

404 Errors - Page not found | Blog | 1976design.com16

8. BMI.com | We’re sorry17

404 Errors - BMI.com | We're sorry…18

3. Offer an overview of possibly related posts.

9. Veerle’s blog 2.0 – 40419

404 Errors - Veerle's blog 2.0 - Archives20

10. Mike Davidson — Search21

404 Errors - Mike Davidson -- Search22

11. Acro Media Inc – 404

404 Errors - Acro Media Inc - Full Service Interactive Agency - Professional Web Design & Ecommerce Company23

12. Technorati: 40424

404 Errors - Technorati: 40425

4. Communicate with your visitors.

13. 404. You’re screwed. (kottke.org)26

404 Errors - 404. You're screwed. (kottke.org)27

14. Design View / Andy Rutledge – Error 404! Oh no you di’int!28

404 Errors - Design View / Andy Rutledge - Error 404! Oh no you di'int!29

15. Oops. | GarrettDimon.com30

404 Errors - Oops. | GarrettDimon.com31

16. mezzoblue – Error 40432

404 Errors - mezzoblue - Error 40433

17. JeffCroft.com: Page not found34

404 Errors - JeffCroft.com: Page not found35

5. Be sincere and cool.

18. IBM.com – 40436

404 Errors - IBM.com - Page not found37

19. Apple.com – 40438

404 Errors - Apple.com - Page not found39

6. Be user-friendly.

20. IKEA – The page cannot be found40

404 Errors - The page cannot be found41

21. Samsung.com – 40442

404 Errors - Samsung.com - Page not found43

7. (Don’t) provide too many options.

22. Microsoft.com – 40444

404 Errors - Microsoft.com - Page not found45

8. (Don’t) provide too little options.

23. Artlebedev.com – Lost?46

404 Errors - Lost?47

9. DWYWTD (Do Whatever You Want To Do)

24. Scythe.net48

Screenshot

Get inspired, folks. Show what you can do.

Make the Web prettier. And make your page more usable.

Footnotes

  1. 1 http://www.plinko.net/404/
  2. 2 http://www.plinko.net/404/custom.asp
  3. 3 http://wufoo.com/404/
  4. 4 http://wufoo.com/404/
  5. 5 http://twitter.com/404.html
  6. 6 http://twitter.com/404.html
  7. 7 http://www.thebignoob.com/404/
  8. 8 http://www.thebignoob.com/404/
  9. 9 http://www.last.fm/404
  10. 10 http://www.last.fm/404/
  11. 11 http://www.devlounge.net/404
  12. 12 http://www.devlounge.net/404
  13. 13 http://www.boagworld.com/404
  14. 14 http://www.boagworld.com/404
  15. 15 http://1976design.com/blog/404
  16. 16 http://1976design.com/blog/404
  17. 17 http://bmi.com/404
  18. 18 http://bmi.com/404
  19. 19 http://veerle.duoh.com/404
  20. 20 http://veerle.duoh.com/404
  21. 21 http://www.mikeindustries.com/blog/search?smart404=1&dosearch=1&IncludeBlogs=1&search=css
  22. 22 http://www.mikeindustries.com/blog/search?smart404=1&dosearch=1&IncludeBlogs=1&search=css
  23. 23 http://www.acromediainc.com/404
  24. 24 http://technorati.com/404
  25. 25 http://technorati.com/404
  26. 26 http://kottke.org/404
  27. 27 http://kottke.org/404
  28. 28 http://www.andyrutledge.com/404.html
  29. 29 http://www.andyrutledge.com/404.html
  30. 30 http://www.garrettdimon.com/404
  31. 31 http://www.garrettdimon.com/404
  32. 32 http://www.mezzoblue.com/404
  33. 33 http://www.mezzoblue.com/404
  34. 34 http://www2.jeffcroft.com/404/
  35. 35 http://www2.jeffcroft.com/404/
  36. 36 http://www.ibm.com/404
  37. 37 http://www.ibm.com/404/
  38. 38 http://www.apple.com/404
  39. 39 http://www.apple.com/404/
  40. 40 http://www.ikea.com/404
  41. 41 http://www.ikea.com/404
  42. 42 http://www.samsung.com/404
  43. 43 http://www.samsung.com/404/
  44. 44 http://www.microsoft.com/404
  45. 45 http://www.microsoft.com/404/
  46. 46 http://www.artlebedev.com/404
  47. 47 http://www.artlebedev.com/404
  48. 48 http://www.scythe.net/404.html

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertising
  1. 1
  2. 102

    http://www.psyked.co.uk/404

    Uses a few nice wordpress plugins to dish out suggested posts…

    1
  3. 203
  4. 304

    404 / Location not found page:

    http://www.nestoria.co.uk/help/unknown-location

    we tried to make it both as helpful and simple as possible.

    1
  5. 405

    Rainfall Daffinson’s shot the target 404 page
    http://rainfall-daffinson.com/404

    1
  6. 506
  7. 607
  8. 708

    Uh, oh… 404

    0
  9. 809

    Let’s try this again.

    Uh, oh… 404
    Alt-Web.com/404redirect.shtml

    0
  10. 910
  11. 1011
  12. 1112
  13. 1213

    http://www.andersmoen.com/v2/404/
    That is my 404 error page. It’s almost the same text as the default one has, but it is put inside my design :)

    0
  14. 1314
  15. 1415
  16. 1516

    As my 404-page anyway needed a redesign, I think it is a good idea to do it now and participate here as well:
    404 – Page not found

    0
  17. 1617
  18. 1718

    Slonky.com’s Error 404 Page

    A bit goofy and fun, but gets the point across and gives options for users to get where they were intending. It fits our company culture perfectly as we are a well-managed, yet laid back start-up.

    0
  19. 1819

    Our 404 page:

    http://phazm.com/404

    Pretty basic, just themed to our design, and a bit of “Hitchhikers Guide to the Galaxy” humor added in :)

    0
  20. 1920
  21. 2021

    We use this 404 page as a final “Page Not Found”, nothing fancy.

    AXIGEN 404 Page

    0
  22. 2122
  23. 2223

    Can I post 404 error page in russian (whole site is in russian :) )?

    0
  24. 2324
  25. 2425
  26. 2526

    http://www.biscuitrat.com/404.shtml — sweet and simple. I can’t believe that it took me months to create a better 404 page.

    0
  27. 2627
  28. 2728
  29. 2829

    Here’s the ‘Click Harder’ 404 that many people find funny-
    http://www.3complete.com/page_cannot_be_displayed.htm

    0
  30. 2930
  31. 3031

    I hope you guys like grumpy Snoofy! :)
    Here is my 404:

    http://www.infektia.net/404/

    0
  32. 3132
  33. 3233

    Great idea for a post…I am wondering just what other
    instances would an error page be displayed?

    Kindly,
    Todd

    0
  34. 3334

    Here’s my error page:

    Error 404

    ..or you can try:
    http://www.martinkorner.co.uk/nowhere/nothing.htm

    Thanks,
    Martin

    0
  35. 3435

    MADmac 404 error page :

    http://www.madmac.fr/404

    0
  36. 3536
  37. 3637

    Egyptian Senior Web Designer

    August 7, 2007 12:55 am

    very nice also you can use this page to promote Google AdSense

    0
  38. 3738

    Hey Smashing Magazine,

    my website is not finished yet and looks a bit messy, but I already have an error 404 page :)

    http://derfrison.com/error404.php

    I thought it could be funny to have different jokes on the page. It’s loading randomly a joke on the page so nobody gets sad or mad and they won’t see always the same page.

    Everytime you reload – a new joke :)

    Alex

    0
  39. 3839

    Thank you for the good idea! This one is the small and simple error page on jukemedia.de :-)
    Errorpage jukemedia.de

    0
  40. 3940

    It might not be all useful, but hey…

    http://www.tortillaphilia.com/404

    -1
  41. 4041

    Mine is pure poetry:
    http://www.adamdorman.com/404

    0
  42. 4142

    Site isn’t launched yet, but here is the current 404 page :)

    http://dev.starfeeder.com/404/404.html

    0
  43. 4243
  44. 4344

    Vitaly Friedman & Sven Lennartz

    August 12, 2007 1:05 am

    the follow-up article will be published on wednesday. thank your very much for participating! comments are closed now.

    -1

↑ Back to top