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 Lab. There you’ll also find tutorials 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 Found

404 Errors - Wufoo · Page Not Found

2. Twitter: 404

404 Errors - Twitter: ?

3. The Big Noob – Page not found

404 Errors - The Big Noob - Page not found

2. Provide alternatives for navigation.

4. Last.FM – 404

404 Errors - Last.fm - Page not found

5. Devlounge

404 Errors - Devlounge

6. Missing page :: Boagworld

404 Errors - Missing page :: Boagworld

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

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

8. BMI.com | We’re sorry

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

3. Offer an overview of possibly related posts.

9. Veerle’s blog 2.0 – 404

404 Errors - Veerle's blog 2.0 - Archives

10. Mike Davidson — Search

404 Errors - Mike Davidson -- Search

11. Acro Media Inc – 404

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

12. Technorati: 404

404 Errors - Technorati: 404

4. Communicate with your visitors.

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

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

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

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

15. Oops. | GarrettDimon.com

404 Errors - Oops. | GarrettDimon.com

16. mezzoblue – Error 404

404 Errors - mezzoblue - Error 404

17. JeffCroft.com: Page not found

404 Errors - JeffCroft.com: Page not found

5. Be sincere and cool.

18. IBM.com – 404

404 Errors - IBM.com - Page not found

19. Apple.com – 404

404 Errors - Apple.com - Page not found

6. Be user-friendly.

20. IKEA – The page cannot be found

404 Errors - The page cannot be found

21. Samsung.com – 404

404 Errors - Samsung.com - Page not found

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

22. Microsoft.com – 404

404 Errors - Microsoft.com - Page not found

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

23. Artlebedev.com – Lost?

404 Errors - Lost?

9. DWYWTD (Do Whatever You Want To Do)

24. Scythe.net

Screenshot

Get inspired, folks. Show what you can do.

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

↑ Back to top

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  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
  51. 51
  52. 52

    I use a 404 page that is like my sitemap page so a user can find what she is looking for.

    0
  53. 53
  54. 54
  55. 55
  56. 56

    Here is ours.
    Now you must die.

    http://www.f23.com/smashing

    0
  57. 57
  58. 58

    Oops. You’re a douche bag -> http://www.expansionbroadcast.com/404 (my 404)

    0
  59. 59
  60. 60

    Tinywords is a daily haiku magazine I’ve been publishing for a few years. I thought it would be fitting if the 404 page for the site also included a haiku:

    You step in the stream,
    But the water has moved on.
    This page is not here.

    The 404 page also has links to the site’s archive page and the home page, and it has a search box.

    haiku 404

    0
  61. 61

    Some of those error pages mentioned in this article are defiantly not user-friendly. Almost all of them are beautiful but not user-friendly. Some of those even need javascript to be enabled!

    0
  62. 62
  63. 63
  64. 64

    Here is ours.

    0
  65. 65

    This is one of the most original 404 i found

    404 Page

    Very cool

    0
  66. 66

    Enjoy my 404 :)

    404 – Very funny!

    This one is much funnier:
    403 – NOT safe for work!

    0
  67. 67

    From my personal website at: 6000 RPM’s

    http://www.6000rpms.com/errors/404.php

    0
  68. 68
  69. 69

    http://ojaisoft.com/404/

    Just a simple 404 I revised just for Smashing! The site is still being works on, but there isn’t much more for me to do. I am still waiting for all the legal papers to come in and such.

    0
  70. 70

    http://www.robgoodlatte.com/404

    I have a very simple 404

    0
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76

    I just add “SmashingMagazine” text.

    0
  77. 77

    Hey folks, why are you using links like twitter.com/404.html when twitter.com/almost_everything_would_lead_you_to_that_site_by_its_definition
    like twitter.com/htrehrtsh
    ;-)

    0
  78. 78
  79. 79

    Our site PunchlineMagazine.com had a little fun with our 404 error page. enjoy.

    0
  80. 80
  81. 81

    nostalgia …

    error 404

    0
  82. 82

    Many years ago I set up a 404 page which invites stumblers to share what they were actually looking for, so I can either find dead links or improve site navigation. I also keep track of http_referers that lead to 404s, but those can be vague. When someone types in what they were looking for it gets added to a list, and once in a while I link things up. I had imagined at one point that this might turn into its own self-sustaining message board, but it never worked out that way. Boo hoo. The page also includes links to other common destinations on my sites, and a random picture.

    Here’s the 404 page
    sorabji.com/ahsdjal
    And here is the current list of What people were looking for when they had their bad landing.

    0
  83. 83

    http://praisegoogle.com/404.php

    I know it’s not beautiful, I just like the humour ^^

    There’s no “Smashingmagazine” there now, but I’ll put it up as soon as I get entrance to the server (a friend of mines). But as you can see the copyright of the site goes to my site (tanketom.net) which is similar to my mail tanketom “letterafter-F”mail.com.

    Hope that’ll keep it in the race long enough for me to get the text in.

    0
  84. 84

    i don’t have the time to edit my 404 page and then un-edit it, but you can see it here http://www.ilikecheapstuff.com/smashing_magazine

    0
  85. 85

    http://nemoorange.com/404 50 words, 6 links, 2 search boxes. You know you’re a design-geek when you spend hours on the 404 page.

    0
  86. 86

    Resubmitting ours because we didn’t have the “smashing magazine” text:

    http://www.cgcraft.com/nonexistant

    also we have a specific one for a blog that we no longer maintain, but that gets a lot of google image hits still (it includes the image that we get the hits for)

    http://www.cgcraft.com/blog/nonexistant

    0
  87. 87

    Not very fancy, but we provide navigation, search, and something useful for the user to do.

    They can specify whether or not to get back to them with the fix or directions, or even apologies, after submitting the report.
    The form generates mail with the referrer, and the requested page. We can check our own pages for linking errors, inform other websites of their linking errors, or if no referrer exists, we can see what the user typed in to get the 404.

    If we see a lot of a particular error, we sometimes simply put in a 302 to correct the error.

    Since it is a form there has to be some anti-spam measure on it. We have a simple one.

    0
  88. 88

    Here is my 404:

    0
  89. 89
  90. 90

    404 @3AM

    To get the true effect, try going to some pages with intentional mis-spellings: Jason @3AM or 3AM Home

    Note: The Smashing Magazine text is only displayed if the url requested is http://3amproductions.net/Smashing%20Magazine (The requested file is output to the page.)

    0
  91. 91

    Inspiration!

    Mine is not even close to the greatness of some of the examples above, but I hope to pimp it up a bit.

    My 404 page

    0
  92. 92

    Not even close to the beauties I saw above … yet I did it by myself and am kinda proud of it! :)

    notfound.html

    0
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98

    http://www.llmatt.net/404.php
    (sorry about the previous posts)

    0
  99. 99

    OH BOY I LIKE THE MICROSOFT’S ONE
    (Don’t) provide too many options
    i liked it
    i laughed so much

    0
  100. 100
  101. 101
  102. 102

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

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

    1
  103. 103
  104. 104

    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
  105. 105

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

    1
  106. 106
  107. 107
  108. 108

    Uh, oh… 404

    0
  109. 109

    Let’s try this again.

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

    0
  110. 110
  111. 111
  112. 112
  113. 113

    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
  114. 114
  115. 115
  116. 116

    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
  117. 117
  118. 118

    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
  119. 119

    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
  120. 120
  121. 121

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

    AXIGEN 404 Page

    0
  122. 122
  123. 123
  124. 124

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

    0
  125. 125
  126. 126

    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
  127. 127
  128. 128
  129. 129

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

    0
  130. 130
  131. 131

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

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

    0
  132. 132
  133. 133

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

    Kindly,
    Todd

    0
  134. 134

    Here’s my error page:

    Error 404

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

    Thanks,
    Martin

    0
  135. 135

    MADmac 404 error page :

    http://www.madmac.fr/404

    0
  136. 136
  137. 137

    Egyptian Senior Web Designer

    August 7, 2007 12:55 am

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

    0
  138. 138

    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
  139. 139

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

    0
  140. 140

    It might not be all useful, but hey…

    http://www.tortillaphilia.com/404

    -1
  141. 141

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

    0
  142. 142

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

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

    0
  143. 143
  144. 144

    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