Esquire Theme by Matthew Buchanan
Social icons by Tim van Damme

24

Jul

Wanted: Your 404 Error Pages

Views: 1465 by 1271 users

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

404 Errors - Wufoo · Page Not Found

2. Twitter: 404

404 Errors - Twitter: ?

3. The Big Noob - Page not found

404 Errors - The Big Noob - Page not found

2. Provide alternatives for navigation.

4. Last.FM - 404

404 Errors - Last.fm - Page not found

5. Devlounge

404 Errors - Devlounge

6. Missing page :: Boagworld

404 Errors - Missing page :: Boagworld

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

404 Errors - Page not found | Blog | 1976design.com

8. BMI.com | We’re sorry

404 Errors - BMI.com | We're sorry…

3. Offer an overview of possibly related posts.

9. Veerle’s blog 2.0 - 404

404 Errors - Veerle's blog 2.0 - Archives

10. Mike Davidson — Search

404 Errors - Mike Davidson -- Search

11. Acro Media Inc - 404

404 Errors - Acro Media Inc - Full Service Interactive Agency - Professional Web Design & Ecommerce Company

12. Technorati: 404

404 Errors - Technorati: 404

4. Communicate with your visitors.

13. 404. You’re screwed. (kottke.org)

404 Errors - 404. You're screwed. (kottke.org)

14. Design View / Andy Rutledge - Error 404! Oh no you di’int!

404 Errors - Design View / Andy Rutledge - Error 404! Oh no you di'int!

15. Oops. | GarrettDimon.com

404 Errors - Oops. | GarrettDimon.com

16. mezzoblue - Error 404

404 Errors - mezzoblue - Error 404

17. JeffCroft.com: Page not found

404 Errors - JeffCroft.com: Page not found

5. Be sincere and cool.

18. IBM.com - 404

404 Errors - IBM.com - Page not found

19. Apple.com - 404

404 Errors - Apple.com - Page not found

6. Be user-friendly.

20. IKEA - The page cannot be found

404 Errors - The page cannot be found

21. Samsung.com - 404

404 Errors - Samsung.com - Page not found

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

22. Microsoft.com - 404

404 Errors - Microsoft.com - Page not found

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

23. Artlebedev.com - Lost?

404 Errors - Lost?

9. DWYWTD (Do Whatever You Want To Do)

24. Scythe.net

Screenshot

Get inspired, folks. Show what you can do.

Make the Web prettier. And make your page more usable.