The 404 error aka File Not Found — is one of the most common errors we run into browsing the Internet. It can be frustrating, but broken links are common and inevitable. This is why having a good and professional Error 404 page is almost as important as having great contents. Sometimes it may not be your fault that visitors landed on the error page, but when it happens being able to hold their attention and lead them back to a relevant page is absolutely critical.

A well-designed 404 Error Page can help you avoid losing your visitor’s trust and potentially building up your readership even when everything is not perfect. In this article I give general advice on designing 404 error pages and have compiled a showcase of 50 professional and creative error pages.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

404 Error Page Tips

Knowing how bad it is!

OK 404 error pages are typically not given the focus they deserve. Most webmaster believe that there will be no broken links on their site and typically they click on the right links themselves (unless they actually take testing really serious). While 404 error pages are typically not overrun with traffic it can be quite interesting to investigate the traffic analytics for it to learn how many clicks there are and from where. One way to get the actual number is to use Google Analytics and view stats for Content By Title. You are looking for the title “Page not found”. If there are pages with a high number of 404 hits you can use Analytics Entrance Sources view to know exactly where the requests came from.

What elements to add to a 404 Error page

When a visitor end on a page not found error page the main goal is to provide option for leading the person back into the site. One excellent option for this is a search feature and some funny graphics to make the situation less serious. In the showcase below you will find numerous examples of website that are sing illustrations this way.

Another good idea for a 404 error page is to provide useful links and suggest the visitor to go on and not leave right away!

Keep the design simple and consider to say sorry. A lot of sites use sentences like “holy crap the page is lost”, Uh-Ho, oops, woopsie and so on. It can be a combination with an illustration or an alternative way forward. It is important though that the visitor is not mislead, confused or unsure if the current page is a error page.

404 Error Page Examples

1. Fotolia

Fotolia

2. Tinsanity

tinsanity

3. 501st Legion

501st

4. 24-4 Media

24-7media

5. CssTricks

csstricks

6. On wired

01-onwired

7. iFolderLinks

ifolderlinks

8. latelategifts

latelategifts

9. Surfing On Static

05-surfingonstatic

10. Renkoo

renkoo

11. Dundee Living

09-dundeeliving.

12. TurboMilk

turbomilk

13. Abduzeedo

abduzeedo

14. Propeller

propeller

15. B3ta

b3ta

16. Limp Fish

10-limpfish

17. Blue Daniel

11-bluedaniel

18. Home Star Runner

12-homestarrunner

19. Astuteo

astuteo

20. Blippy

blippy

21. Pixel 2 Life

13-pixel2life

22. BrightKite

brightkite

23. Studentmarket

studentmarket

24. RetardZone

retardzone

25. Chibi Design

14-chibidesign

26. Suspended Animations

15-suspendedanimations

27. rush68

rush68

28. Soocial

soocial

29. Brandstack

brandstack

30. Chris Jennings

chrisjennings

31. Mmo Game Zone

mmogamezone

32. Digital Mash

digitalmash

33. The Brand Surgery

thebrandsurgery

34. Mozilla

mozilla

35. Club penguin

18-clubpenguin

36. The Truth

20-thetruth

37. Gadies

21-gadies

38. Jotsai

jotsai

39. Acme

acme

40. Merge

mergeweb

41. Milrayas

milrayas

42. Urban Outfitters

urbanoutfitters

43. Sick Designer

sickdesigner

44. Factor D

 

blog-factorstudio-com_

45. Wulf Morgen Hatler

22-wulffmorgenthaler

46. Heinz

47. Eternal Moon

28-eternalmoon

48. Apartment Home Living

apartmenthomeliving

49. Red Tag

30-redtag

50. Tk Designs

tkdesigns-tv_

51. catalyst studios

catalyst studios

[exec]echo get_avatar( get_the_author_email(), ’80’ );[/exec]

Author : Dustin Betonio

[exec]the_author_description();[/exec]

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares
WordPress Appliance - Powered by TurnKey Linux