Wanted: Your 404 Error Pages

• By Sven Lennartz
• July 25th, 2007
• 404, Errors, Inspiration
• 144 Comments

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.

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

2. Twitter: 404

3. The Big Noob – Page not found

2. Provide alternatives for navigation.

4. Last.FM – 404

5. Devlounge

6. Missing page :: Boagworld

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

8. BMI.com | We’re sorry

3. Offer an overview of possibly related posts.

9. Veerle’s blog 2.0 – 404

10. Mike Davidson — Search

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!

15. Oops. | GarrettDimon.com

16. mezzoblue – Error 404

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

21. Samsung.com – 404

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

22. Microsoft.com – 404

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

23. Artlebedev.com – Lost?

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.