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.
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.
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.
2. Provide alternatives for navigation.
3. Offer an overview of possibly related posts.
11. Acro Media Inc – 404
4. Communicate with your visitors.
5. Be sincere and cool.
6. Be user-friendly.
7. (Don’t) provide too many options.
8. (Don’t) provide too little options.
9. DWYWTD (Do Whatever You Want To Do)
Get inspired, folks. Show what you can do.
Make the Web prettier. And make your page more usable.
- 1 http://www.plinko.net/404/
- 2 http://www.plinko.net/404/custom.asp
- 3 http://wufoo.com/404/
- 4 http://wufoo.com/404/
- 5 http://twitter.com/404.html
- 6 http://twitter.com/404.html
- 7 http://www.thebignoob.com/404/
- 8 http://www.thebignoob.com/404/
- 9 http://www.last.fm/404
- 10 http://www.last.fm/404/
- 11 http://www.devlounge.net/404
- 12 http://www.devlounge.net/404
- 13 http://www.boagworld.com/404
- 14 http://www.boagworld.com/404
- 15 http://1976design.com/blog/404
- 16 http://1976design.com/blog/404
- 17 http://bmi.com/404
- 18 http://bmi.com/404
- 19 http://veerle.duoh.com/404
- 20 http://veerle.duoh.com/404
- 21 http://www.mikeindustries.com/blog/search?smart404=1&dosearch=1&IncludeBlogs=1&search=css
- 22 http://www.mikeindustries.com/blog/search?smart404=1&dosearch=1&IncludeBlogs=1&search=css
- 23 http://www.acromediainc.com/404
- 24 http://technorati.com/404
- 25 http://technorati.com/404
- 26 http://kottke.org/404
- 27 http://kottke.org/404
- 28 http://www.andyrutledge.com/404.html
- 29 http://www.andyrutledge.com/404.html
- 30 http://www.garrettdimon.com/404
- 31 http://www.garrettdimon.com/404
- 32 http://www.mezzoblue.com/404
- 33 http://www.mezzoblue.com/404
- 34 http://www2.jeffcroft.com/404/
- 35 http://www2.jeffcroft.com/404/
- 36 http://www.ibm.com/404
- 37 http://www.ibm.com/404/
- 38 http://www.apple.com/404
- 39 http://www.apple.com/404/
- 40 http://www.ikea.com/404
- 41 http://www.ikea.com/404
- 42 http://www.samsung.com/404
- 43 http://www.samsung.com/404/
- 44 http://www.microsoft.com/404
- 45 http://www.microsoft.com/404/
- 46 http://www.artlebedev.com/404
- 47 http://www.artlebedev.com/404
- 48 http://www.scythe.net/404.html