Smashing Magazine - we smash you with the information that will make your life easier. really.
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
- 273 Comments
- 1
- 2

- 3

- 4

- 5

- 6
July 25th, 2007 4:38 amI 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. - 7

- 8
July 25th, 2007 4:48 amsorry for duplicate posts somethings going wrong here. on submit im getting the apache password dialog box!
- 9

- 10
July 25th, 2007 4:55 amThe 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. - 11

- 12
July 25th, 2007 5:33 amMy 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).
- 13
July 25th, 2007 5:40 amI 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.
- 14
July 25th, 2007 5:46 amthat is my 404, only 404 in big letters and miss debian
- 15
- 16

- 17

- 18

- 19
July 25th, 2007 7:36 amI love error pages that are funny. Normally I am mad for a page not being there so this way its good comic relief.
- 20
July 25th, 2007 7:45 amNote 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 - 21

- 22

- 23

- 24

- 25

- 26

- 27
July 25th, 2007 11:03 amThere’s the 404 File Not Found, plus a few others.
Warning: there are lolcats involved.
- 28

- 29

- 30

- 31

- 32

- 33

- 34

- 35

- 36

- 37

- 38

- 40

- 41

- 42

- 43
July 25th, 2007 4:06 pmYou can also redirect 404 errors to your search page.
You can see an example here :
This page does not exists but it will give you search results for the term “php”
- 44

- 45

- 46

- 47
July 25th, 2007 7:11 pmIn 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
- 48
July 25th, 2007 8:43 pmIt 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.
- 49

- 50
July 25th, 2007 9:14 pmNot 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.
- 51

- 52
July 25th, 2007 10:06 pmI use a 404 page that is like my sitemap page so a user can find what she is looking for.
- 53

- 54

- 55

- 56

- 57

- 58

- 59

- 60
July 25th, 2007 11:59 pmTinywords 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.
- 61
July 26th, 2007 12:09 amSome 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!
- 62

- 63

- 64
July 26th, 2007 3:32 amHere is ours.
- 65

- 66

- 67
July 26th, 2007 5:06 amFrom my personal website at: 6000 RPM’s
- 68

- 69
July 26th, 2007 8:36 amJust 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.
- 70

- 71

- 72

- 73

- 74

- 75

- 76
July 26th, 2007 8:15 pmI just add “SmashingMagazine” text.
- 77
July 26th, 2007 8:37 pmHey 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
;-) - 78

- 79
July 26th, 2007 10:05 pmOur site PunchlineMagazine.com had a little fun with our 404 error page. enjoy.
- 80

- 81

- 82
July 26th, 2007 11:32 pmMany 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. - 83
July 26th, 2007 11:36 pmhttp://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.
- 84
July 27th, 2007 12:02 ami 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
- 85
July 27th, 2007 12:35 amhttp://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.
- 86
July 27th, 2007 3:12 amResubmitting 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)
- 87
July 27th, 2007 3:47 amNot 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.
- 88
- 89

- 90
July 27th, 2007 10:24 amTo 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.)
- 91
July 27th, 2007 11:10 amInspiration!
Mine is not even close to the greatness of some of the examples above, but I hope to pimp it up a bit.
- 92
July 27th, 2007 3:43 pmNot even close to the beauties I saw above … yet I did it by myself and am kinda proud of it! :)
- 93

- 94
- 95

- 96

- 97

- 98

- 99
July 29th, 2007 3:50 amOH BOY I LIKE THE MICROSOFT’S ONE
(Don’t) provide too many options
i liked it
i laughed so much - 100

- 101

- 102
July 29th, 2007 5:37 amUses a few nice wordpress plugins to dish out suggested posts…
- 103

- 104
July 29th, 2007 6:33 pm404 / Location not found page:
http://www.nestoria.co.uk/help/unknown-location
we tried to make it both as helpful and simple as possible.
- 105
July 29th, 2007 7:13 pmRainfall Daffinson’s shot the target 404 page
http://rainfall-daffinson.com/404 - 106

- 107

- 108
July 30th, 2007 3:08 amUh, oh… 404
- 109

- 110

- 111

- 112

- 113
July 30th, 2007 5:23 pmhttp://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 :) - 114

- 115

- 116
July 30th, 2007 6:58 pmAs 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 - 117

- 118
July 31st, 2007 10:10 amA 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.
- 119
July 31st, 2007 2:21 pmOur 404 page:
Pretty basic, just themed to our design, and a bit of “Hitchhikers Guide to the Galaxy” humor added in :)
- 120

- 121
July 31st, 2007 10:29 pmWe use this 404 page as a final “Page Not Found”, nothing fancy.
- 122

- 123

- 124
August 1st, 2007 4:01 amCan I post 404 error page in russian (whole site is in russian :) )?
- 125

- 126
August 1st, 2007 11:51 amhttp://www.biscuitrat.com/404.shtml — sweet and simple. I can’t believe that it took me months to create a better 404 page.
- 127

- 128

- 129
August 1st, 2007 6:06 pmHere’s the ‘Click Harder’ 404 that many people find funny-
http://www.3complete.com/page_cannot_be_displayed.htm - 130

- 131
August 2nd, 2007 4:42 amI hope you guys like grumpy Snoofy! :)
Here is my 404: - 132

- 133
August 5th, 2007 4:30 amGreat idea for a post…I am wondering just what other
instances would an error page be displayed?Kindly,
Todd - 134
August 6th, 2007 5:29 pmHere’s my error page:
..or you can try:
http://www.martinkorner.co.uk/nowhere/nothing.htmThanks,
Martin - 135

- 136

- 137
August 7th, 2007 12:55 amvery nice also you can use this page to promote Google AdSense
- 138
August 7th, 2007 12:20 pmHey 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
- 139
August 8th, 2007 2:14 amThank you for the good idea! This one is the small and simple error page on jukemedia.de :-)
Errorpage jukemedia.de - 140

- 141

- 142
August 8th, 2007 7:44 amSite isn’t launched yet, but here is the current 404 page :)
- 143

- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
- Beautiful, Elegant and Free 48px Icon Set - http://bit.ly/cSWcBR
- Gridmaker For Photoshop CS4 - http://bit.ly/98F9kv (via @designernews)



























Varien’s 404
Roy