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

Advertisement
  1. 1
  2. 52

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

    0
  3. 103
  4. 154
  5. 205
  6. 256

    Here is ours.
    Now you must die.

    http://www.f23.com/smashing

    0
  7. 307
  8. 358

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

    0
  9. 409
  10. 460

    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
  11. 511

    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
  12. 562
  13. 613

    Here is ours.

    0
  14. 664

    This is one of the most original 404 i found

    404 Page

    Very cool

    0
  15. 715

    Enjoy my 404 :)

    404 – Very funny!

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

    0
  16. 766

    From my personal website at: 6000 RPM’s

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

    0
  17. 817
  18. 868
  19. 919

    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
  20. 970

    http://www.robgoodlatte.com/404

    I have a very simple 404

    0
  21. 1021
  22. 1072
  23. 1123
  24. 1174
  25. 1225
  26. 1276

    I just add “SmashingMagazine” text.

    0
  27. 1327

    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
  28. 1378
  29. 1429

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

    0
  30. 1480
  31. 1531

    nostalgia …

    error 404

    0
  32. 1582

    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
  33. 1633

    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
  34. 1684

    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
  35. 1735

    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
  36. 1786

    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
  37. 1837

    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
  38. 1888

    Here is my 404:

    0
  39. 1939
  40. 1990

    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
  41. 2041

    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
  42. 2092

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

    notfound.html

    0
  43. 2143
  44. 2194
  45. 2245
  46. 2296
  47. 2347
  48. 2398

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

    0
  49. 2449

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

    0
  50. 2500

↑ Back to top