From time to time on visiting just about any website, you’ll occasionally click on a bad link or make a typo when entering a URL, which elicits the famous 404 error. The HTTP error codes are well-defined, so you can always look this stuff up for yourself if you like. The W3C defines the HTTP status codes that drive all this stuff in RFC 2616, Section 10. Section 10 is labeled “Status Code Definitions,” where you’ll find this text for the 404 error code:
10.4.5 404 Not Found
The server has not found anything matching the Request-URI. No indication is given of whether the condition is temporary or permanent. The 410 (Gone) status code SHOULD be used if the server knows, through some internally configurable mechanism, that an old resource is permanently unavailable and has no forwarding address. This status code is commonly used when the server does not wish to reveal exactly why the request has been refused, or when no other response is applicable.
The key usually is that “…no other response is applicable,” simply because the server has no idea at all about what happened to the page. The generic error page that often appears when this happens can be less than informative, inspiring, or amusing. You can always test your own site by deliberately typing in a bad URL to see what happens. Thus, when I deliberately type http://www.dummieshtml.com/nofileexisting.html into this very web site, here’s what shows up in response:
A generic error message, but the site’s CSS ensures it’s nicely packaged.
You can do better than this, if you like, but it will take some extra work. So first, let me show you some good illustrations of why you might want to do this, and then provide some pointers to potential explanations as to how you might go about making something cool, funny, or more interesting visible when your users trigger the 404 error code.
Giving You Some Good 404 Illustrations
I got the idea for this blog post while chunking through LinkedIn this morning, when I stumbled across this news item there:
Business Insider’s Top Picks for All-Time Best 404 pages.
These are already pretty funny, with some verging on the hysterical and others on the “Huh?” side of humor. But I’ve been around the Web long enough myself to recognize this as a pretty well-established genre of “geek humor,” as a well-crafted Google search will instantly illustrate. Here’s list of links to some other yuck-worthy compilations of 404 humor:
- Hongkiat Lim’s “60 Really Cool and Creative Error 4o4 Pages“
- Pinterest’s “Best 404 Pages“
- WebHostingBuzz “10 of the best 404 pages“
Run the Google search yourself if this isn’t enough yucks to motivate you to check out the next step — there’s plenty, plenty more where those items came from. As for the purposes of this blog post, I’m going to assume you’re convinced, and are indeed ready to read on — so keep going, please!
How to Customize Your Own 404 Page
A wise man once told me, and I never forgot the veracity of his observation that: “The answer to any good question always beings with the same two words — namely ‘That depends…'” In the case of customizing the 404 error page, you must first and foremost understand that you’re seeking to customize the behavior of the Web server that’s serving up your pages. There’s a great tutorial on how to do this in general at thesitewizard.com, so I won’t treat you to the whole thing here, but I will share three important observations from that source:
- You may not have the ability to customize your 404 page, or other error pages. Your hosting provider must make this facility available to your Website, and most of the really cheapo providers don’t do this simply to save a penny here and there.
- You will probably need to customize your .htaccess file to, as Christopher Heng puts it (he’s the author of the afore-linked 404 tutorial I’m summarizing here) to add an error directive entry into a special file that will tell the server what to do when it encounters a specific HTML error code. For the 404 error, for example, it will typically consist of a line of text that looks something like this:
ErrorDocument 404 /notfound.html. Translated into human-intelligible pseudo-code this means “Server, when you encounter a 404 HTTP error, find and display the file named notfound.html in the requester’s Web browser.” On the other hand, your site operator may have already done this as part of their basic server set-up, in which case you need to find the file referenced in that errordocument statement, and start customizing (this is described in very broad terms in step 3 that follows). - Creating an error document file means building the Web page you wish your users to see if and when your hosting server encounters an HTTP 404 error. You can build all the great graphics and text that you like, but you should also consider Heng’s advice about what a good 404 page also contains, including a link to a search engine if your site has one (as we do on our 404 page displayed above) along with a link to the site’s home page, a site map, a list of frequently-mistyped URLs for your site with links to the correct pages, and other navigational aids your site might also present to users (like the navigation tabs at the top of the 404 page from our site, for example).
Indeed a good 404 page can be funny and interesting, but it should also do its most important job — that is, help users figure out where they should go next, once they reach a dead end in your pages, for whatever reason. That’s why I’m going to work with Chris Minnick, my co-author for the next edition of our book, to add a text input field to our 404 page that reads like this:
“Please take a minute and tell us what URL you entered when you wound up on this error page. You can use the Back arrow (or backspace key in most Web browsers) to return to the previous page, copy the link that caused the error, and paste it here to help us out. If we can fix it we will, and if it’s a recurring error, we can make it easier for others to get where they really want to go in the future. Thanks!”