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. 2
  3. 3
  4. 4
  5. 5
  6. 6

    Russell Heimlich

    July 25, 2007 4:38 am

    I work at USNews.com and designed their 404 page. Since it is a highly trafficked news site I can’t go in and put my name on the 404 page but I can explain how it works.

    First we look to see where the user is coming from. If it is a bad external link linking in to us we throw up a message saying “An external source has linked you here. Unfortunately we cannot control who links to us but you may wish to inform (base url of the reffering site in a link) about their bad link.”

    If the link is a bad internal link we say “This error has been reported to us and we are in the proccess of fixing it.”

    Finally, if the user came to ur page from a book mark or directly (in other words there is no refferer) than we say “Please make sure to update any bookmarks and check that you didn’t make a typo in the address.”

    This provides specific context the user can use and help them find the content they are looking for.

    In order to further help them locate the page they were looking for we included a search box and we parse the URL they were trying to get to in order to find search terms that we auto populate in the search field.

    Ofcourse we also provide a link to our sitemap as a worst case scenario and our pages have section navigation in the header and footer.

    Currently this is implemented in JavaScript on the 404 page as we are switching platforms on the backend. We hope to have a better 404 process on the backend once we finish our transition.

    Here’s an example:
    This url is bad (the 070223 should be 070222) http://www.usnews.com/usnews/news/articles/070223/22obama.htm
    The 404 page parses the link and pulls out 22obama which it then inserts into the search field. When a user clicks search they will be brought right to the correct article. Not everything works that nicely, but it is better than nothing. If you really want to see how it works look at the source, I’ve commented it fairly well. You can contact me at http://www.russellheimlich.com/contact if anyone has any questions.

    0
  7. 7
  8. 8

    sorry for duplicate posts somethings going wrong here. on submit im getting the apache password dialog box!

    0
  9. 9
  10. 10

    The irony I just finished an article on 404s and what makes good ones http://ventureskills.wordpress.com/2007/07/24/page-not-found-again-404-in-depth/
    both from user and site owners point of view.

    0
  11. 11
  12. 12

    My 404 isn’t particularly interesting, it’s just an animated .GIF of Rick Astley (http://www.mgroves.com/404.php)

    But if you put in a URL that’s misspelled or been changed or something, it uses PHP’s levenstein function to find blog posts with similar titles. For instance, I have two blog posts with the word “monkey” in them. If you go to http://www.mgroves.com/misspelled-monkey then it will suggest both of those monkey posts as well as similarly spelled blog posts.

    Please don’t hammer it, it’s the one page on my blog that’s not cached (yet).

    0
  13. 13

    I had nothing to better to do a few nights ago, so I made the obligatory kitten 404:

    http://tysontate.com/static/images/404.jpg

    Sorry. It had to be done. You may now commence the stoning.

    0
  14. 14

    that is my 404, only 404 in big letters and miss debian

    http://karl-tux-stadt.de/ktuxs/404.html

    0
  15. 15
  16. 16

    Helge Fahrnberger

    July 25, 2007 6:55 am
    0
  17. 17
  18. 18

    My 404 Page at Hamelife.

    Thank you.

    0
  19. 19

    I love error pages that are funny. Normally I am mad for a page not being there so this way its good comic relief.

    0
  20. 20

    Note mine, but cool
    __________________________________
    Sorry about that.
    For some reason:

    The phase of the moon.
    Atmospheric and Ionic interference.
    Sun spots.
    Strange little Web Gremlins.
    Mr. Mestro’s Minature Mercurial Meretricious Monsters.
    Fluctuations of the Earth’s Magnetic field.
    Amorphos transmutations of electron flow.
    Or some other, as yet unexplained phenomonon,
    The page you requested is unavailable.
    We are sorry!
    But have no fear! A team of highly trained monkeys has been dispatched to deal with this situation

    http://www.tadleyroundabout.co.uk/error.html

    0
  21. 21

    J. Michael Parker

    July 25, 2007 8:27 am
    0
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27

    There’s the 404 File Not Found, plus a few others.

    Warning: there are lolcats involved.

    0
  28. 28
  29. 29

    horizontal scroll in error 404

    http://bluevertigo.com.ar/error_404.html

    rare…

    0
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36

    Some funky looking 404 pages thus far.

    http://www.thecomicshop.net/error.php

    0
  37. 37
  38. 38

    http://www.craigslist.org/404/

    Stumbled upon this one today.

    0
  39. 39

    Vitaly Friedman & Sven Lennartz

    July 25, 2007 2:35 pm

    Thank you for your suggestions.

    However, please keep in mind that you also have to place the text “Smashing Magazine” (without a link) to your 404-page in order to participate.

    0
  40. 40
  41. 41
  42. 42
  43. 43

    You can also redirect 404 errors to your search page.

    You can see an example here :

    http://www.webdigity.com/php

    This page does not exists but it will give you search results for the term “php”

    0
  44. 44
  45. 45

    http://www.kodes.fi/404

    Rest of the site is in finnish only – sorry folks!

    0
  46. 46
  47. 47

    In http://hombrelobo.com/404 I include the latest video of my videoblog, that changes everyday.

    I use feedburner and it’s Buzzboost service to republish the last item of my own feed …. :D

    0
  48. 48

    Foobr 404 error page

    It does a bit of voodoo looking at referrers and the url to try and pick out keywords you might have been looking for.

    These keywords are then used to produce a list of posts and categories. The higher the script rates the relevancy of the link the darker background it is on (and the higher it appears in the list)

    It seems to be working as the bounce rate from my 404 page is much lower than before I rebuilt it with the intelligent lookup.

    0
  49. 49
  50. 50

    Not ours (belongs to Nokia Hungary), but a good example:

    http://www.nokia.hu/NOKIA_HUNGARY_47/Sorry/

    (reload a couple of times to get different images). A funny (yet corporate) image to relieve tension, and a search box to help find the page you’re looking for.

    0

↑ Back to top