Smashing Magazine - we smash you with the information that will make your life easier. really.
Wanted: Your 404 Error Pages
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.
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.
[By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits and take the basic blog into an entirely new blogosphere.]
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.
2. Twitter: 404
3. The Big Noob – Page not found
2. Provide alternatives for navigation.
5. Devlounge
7. Page not found | Blog | 1976design.com
3. Offer an overview of possibly related posts.
11. Acro Media Inc – 404
12. Technorati: 404
4. Communicate with your visitors.
13. 404. You’re screwed. (kottke.org)
14. Design View / Andy Rutledge – Error 404! Oh no you di’int!
17. JeffCroft.com: Page not found
5. Be sincere and cool.
18. IBM.com – 404
19. Apple.com – 404
6. Be user-friendly.
20. IKEA – The page cannot be found
7. (Don’t) provide too many options.
8. (Don’t) provide too little options.
9. DWYWTD (Do Whatever You Want To Do)
24. Scythe.net
Get inspired, folks. Show what you can do.
Make the Web prettier. And make your page more usable.
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
(3 votes, average: 5.00 out of 5)
Loading ...- 273 Comments
- 1
- 2
- 3
- 4
- 5
- 6July 25th, 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. - 7
- 8July 25th, 2007 4:48 am
sorry for duplicate posts somethings going wrong here. on submit im getting the apache password dialog box!
- 9
- 10July 25th, 2007 4:55 am
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. - 11
- 12July 25th, 2007 5:33 am
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).
- 13July 25th, 2007 5:40 am
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.
- 14July 25th, 2007 5:46 am
that is my 404, only 404 in big letters and miss debian
- 15
- 16
- 17
- 18
- 19July 25th, 2007 7:36 am
I love error pages that are funny. Normally I am mad for a page not being there so this way its good comic relief.
- 20July 25th, 2007 7:45 am
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 - 21
- 22
- 23
- 24
- 25
- 26
- 27July 25th, 2007 11:03 am
There’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
- 39July 25th, 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.
- 40
- 41
- 42
- 43July 25th, 2007 4:06 pm
You 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
- 47July 25th, 2007 7:11 pm
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
- 48July 25th, 2007 8:43 pm
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.
- 49
- 50July 25th, 2007 9:14 pm
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.
- 51
- 52July 25th, 2007 10:06 pm
I 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
- 60July 25th, 2007 11:59 pm
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.
- 61July 26th, 2007 12:09 am
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!
- 62
- 63
- 64July 26th, 2007 3:32 am
Here is ours.
- 65
- 66
- 67July 26th, 2007 5:06 am
From my personal website at: 6000 RPM’s
- 68
- 69July 26th, 2007 8:36 am
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.
- 70
- 71
- 72
- 73
- 74
- 75
- 76July 26th, 2007 8:15 pm
I just add “SmashingMagazine” text.
- 77July 26th, 2007 8:37 pm
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
;-) - 78
- 79July 26th, 2007 10:05 pm
Our site PunchlineMagazine.com had a little fun with our 404 error page. enjoy.
- 80
- 81
- 82July 26th, 2007 11:32 pm
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. - 83July 26th, 2007 11:36 pm
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.
- 84July 27th, 2007 12:02 am
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
- 85July 27th, 2007 12:35 am
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.
- 86July 27th, 2007 3:12 am
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)
- 87July 27th, 2007 3:47 am
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.
- 88
- 89
- 90July 27th, 2007 10:24 am
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.)
- 91July 27th, 2007 11:10 am
Inspiration!
Mine is not even close to the greatness of some of the examples above, but I hope to pimp it up a bit.
- 92July 27th, 2007 3:43 pm
Not 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
- 99July 29th, 2007 3:50 am
OH BOY I LIKE THE MICROSOFT’S ONE
(Don’t) provide too many options
i liked it
i laughed so much - 100
- 101
- 102July 29th, 2007 5:37 am
Uses a few nice wordpress plugins to dish out suggested posts…
- 103
- 104July 29th, 2007 6:33 pm
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.
- 105July 29th, 2007 7:13 pm
Rainfall Daffinson’s shot the target 404 page
http://rainfall-daffinson.com/404 - 106
- 107
- 108July 30th, 2007 3:08 am
Uh, oh… 404
- 109
- 110
- 111
- 112
- 113July 30th, 2007 5:23 pm
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 :) - 114
- 115
- 116July 30th, 2007 6:58 pm
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 - 117
- 118July 31st, 2007 10:10 am
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.
- 119July 31st, 2007 2:21 pm
Our 404 page:
Pretty basic, just themed to our design, and a bit of “Hitchhikers Guide to the Galaxy” humor added in :)
- 120
- 121July 31st, 2007 10:29 pm
We use this 404 page as a final “Page Not Found”, nothing fancy.
- 122
- 123
- 124August 1st, 2007 4:01 am
Can I post 404 error page in russian (whole site is in russian :) )?
- 125
- 126August 1st, 2007 11:51 am
http://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
- 129August 1st, 2007 6:06 pm
Here’s the ‘Click Harder’ 404 that many people find funny-
http://www.3complete.com/page_cannot_be_displayed.htm - 130
- 131August 2nd, 2007 4:42 am
I hope you guys like grumpy Snoofy! :)
Here is my 404: - 132
- 133August 5th, 2007 4:30 am
Great idea for a post…I am wondering just what other
instances would an error page be displayed?Kindly,
Todd - 134August 6th, 2007 5:29 pm
Here’s my error page:
..or you can try:
http://www.martinkorner.co.uk/nowhere/nothing.htmThanks,
Martin - 135
- 136
- 137August 7th, 2007 12:55 am
very nice also you can use this page to promote Google AdSense
- 138August 7th, 2007 12:20 pm
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
- 139August 8th, 2007 2:14 am
Thank you for the good idea! This one is the small and simple error page on jukemedia.de :-)
Errorpage jukemedia.de - 140
- 141
- 142August 8th, 2007 7:44 am
Site isn’t launched yet, but here is the current 404 page :)
- 143
- 144August 12th, 2007 1:05 am
the follow-up article will be published on wednesday. thank your very much for participating! comments are closed now.
- 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