Saturday, January 1, 2011

Most Creative 404 HTTP Response Ever?

Happy New Year 2011!

The HTTP 404 Status Code is one of the HTTP status codes that all web developers and nearly all web users are all too familiar with. It is an HTTP response indicating that an HTTP request was received by the intended server, but that the exact resource specified in the request URI cannot be found on the server. In the early days of the World Wide Web, it seemed like many sites did not bother doing anything in particular about this page. This meant that a pretty useless and nearly blank page would show up in the user's browser. Some browsers, such as Internet Explorer, attempted to provide more general details in a "user friendly" format.

These browser attempts at providing more details about the cause of a 404 response status were still not very helpful because there is no good general way to handle a 404 error response. Instead, it is preferable for a site to provides its own custom 404 response page. The advantages of a custom 404 are discussed in more detail in Importance of Custom 404 Error Pages.

In recent years, there has been a dramatic increase in the percentage of sites providing a custom 404 error response. This is especially true for sites that want to do whatever that can to retain the user's business and/or traffic to their site. These sites attempt to do their best to provide a search or suggestions for what the user can do next. Some sites don't try to fix the situation, but instead automatically redirect to the site's main page. Other sites perform a combination, providing a search box and acknowledgement of an unfound page for a few seconds and then automatically redirecting to their main page.

After seeing the reference on reddit Programming to Github's Star Wars Themed 404 Page, I wondered if there are any 404 error responses more clever than this one. The Github 404 page may not be the best at helping the user find what he or she was looking for, but it is funny and does provide links to other actions that might be taken.

I tried some intentionally unavailable URIs on some of my most-accessed sites to see how their 404 responses are handled. In the rest of this post, I look briefly at some of them and analyze the value each provides. Mostly though, I was simply looking for the most interesting 404 page I could find and so far I haven't found any more funny than Github's.


GlassFish-Hosted Application without Custom 404 Response

I began by forcing my GlassFish-hosted web application to throw the default 404 response GlassFish provides when one does not provide a custom response. It's pretty basic and is nothing more or less than what a developer would likely expect to get without customization.



Brief 404 Response and Automatic Redirect: Yahoo.com and Wikipedia.org

Yahoo.com and Wikipedia currently provide temporary 404 responses that inform the user that the error occurred and provide alternatives. After a period of a few seconds, each site then redirects the browser to the respective main page or closest related page. The briefly appearing 404 responses for each are shown next.



In both of these examples of brief 404 reporting followed by automatic redirect, the 404 response pages are brief but informative and provide some opportunity for the user to try something else. If the user hesitates, there is automatic action to go to the site's main page (Yahoo's case) or to an attempted related article (Wikipedia's case).


Automatic Redirect: Target.com

Some sites redirect automatically without explicitly informing the user that the requested resource was not found. The presumption here is likely that it might be more confusing that it's worth and that most users would simply go to the main page anyway. Target.com is currently an example of this approach.


Customized 404 Responses without Redirect

The majority of the sites I frequently visit provide 404 responses without redirect. I include screen snapshots of some of them here because they provide insight into what the developers and others associated with these respective sites felt was most useful to provide to the user when the requested resource could not be found.

Google's 404 response bears the simplicity of appearance that its search engine is well-known for. I like the consistency between this simple report and the simplicity of the presentation of Google's search engine with the single field surrounded by vast empty space.


Amazon's 404 response indicates that there was an issue and provides the simple, single choice for the user to go to Amazon's main page. It's admittedly a matter of taste, but I prefer this approach over the automatic redirect. Yes, there's only one choice, but I know that I am explicitly going to the main page because the URL I provided (or the link I clicked on) was bad. Like Google's 404 response, this response is simple and concise and applies vast white space.


DZone's 404 response also makes it clear what happened ("The requested page could not be found"), but provides several links to other actions. There is a search field (and I personally think that searching is probably my first choice when I see this type of error) as well as links to other DZone resources.


Java.net's 404 response is similar to DZone's in terms of what it provides. It provides the simple error message "The page you were looking for doesn't exist." and states possible causes: "You may have mistyped the address or the page may have moved." It also provides a search box and several links to popular Java.net features.


Bing provides a nice 404 response page that maintains some semblance of simplicity with centered text and large amounts of white space, but also attempts to provide information on what may have happened and how to deal with it. Recommended courses of action include verifying URI typed in correctly, using search box to search for page rather than trying to get exact URI, and, of course, using the Bing search engine.


The Manning site appears to use Yahoo! services and provides a standard 404 response for Yahoo!-hosted services. This includes an obvious text field for searching for what was intended and other recommendations.


ESPN.com's 404 response features a large search field centered in the page. However, no space is wasted in providing other links likely to be of interest to anyone accessing an ESPN link. Also, there is a strategically placed advertisement banner above the search box and additional advertisements on the response page.



The Most Creative 404 Response?

After looking at several 404 responses from major online sites, it is clear that most have some sort of customized 404 response and that many provide a search engine to encourage the user to search for what they were looking for. Additional help was provided in some cases and other links of interest were often presented. The ESPN example demonstrated how even advertisement revenue/traffic might be generated from a 404 response.

All of the above could be argued as effective for what they are intended to do: attempt to keep the user at the site and do whatever reasonably possible to help the user out. However, in terms of sheer entertainment value, none of them match Github's. I feature that in the next screen snapshot.


The above image is a screen snapshot and is thus static. To see the the dynamic behavior (parallax) of this image, check out the Github 404 page directly.

As is the case with most of the other 404 responses, Github's response provides links to other areas of interest. However, the not-so-subtle tie-in to the hand-waving Jedi powers featured in Star Wars: The Phantom Menace is likely not lost on Github's primary audience. Even the 404 response for the official Star Wars site is not so funny:



Other Contenders for Most Creative 404 Response

There are other contenders for funniest or most entertaining or most clever 404 response online. In fact, if you are aware of any not listed here, please provide them via this post feedback. SmashingMagazine presented several useful and creative 404 responses in Wanted: Your 404 Error Pages. Not only are several interesting 404 responses listed, but the article does a nice job of explaining how the examples meet different principles for appealing to and helping the user. It's an informative read. A follow-on article, 404 Error Pages: Reloaded has some readers' suggestions/creations as well.

Huffington Post featured its 17 Best 404 Error Pages EVER. I especially like the use of Homer Simpson and D'oh! for one of them.

One creative 404 response cited online is blippy.com's (referenced by Brandon Davenport). This one is also interactive (click on the unicorn to see it change what it's saying and to see the rainbow change). Huy Hong also likes the blippy.com 404 response and asks if it is the best 404 ever?

In the TheFreeDictionary.com forum thread The Best 404 of All Times, the HackQuest 404/Access Denied response is nominated as the best ever. It is pretty creative.

There are numerous other collections of "best" or "most creative" 404 responses. These include 50 Most Creative 404 Error Pages for Inspiration, The 100 Most Funny and Unusual 404 Error Pages, 10 Most Creative 404 Pages, 404 Error Pages for Your Viewing Pleasure, and many, many more.

I didn't realize how many humorous and creative 404 responses are out there until I began looking at some of the collections referenced above. The explanation for this is simple: by design, most web sites go out of their way to reduce the opportunities for users to run into these "error pages." For many of the largest sites, all of the creative energy put into a 404 response is from a utilitarian perspective rather than an entertaining perspective.


Conclusion

The customized 404 responses featured in this post all provide understandable details and often provide courses of action for the user to take. For their respective organization's purposes, these 404 responses may truly be "best." However, I don't think of any of them are as clever as the Github example or as some of the examples in the collections that I referenced. "Clever" or "creative" do not necessarily imply or mean "best," but the Github 404 response is definitely my favorite. It is difficult to attribute any additional revenue or value gained by a site with an entertaining 404 response, but I still appreciate the humor in Github's 404 response.

Note that Github has a similarly more interesting 500 (Server Error) response as well.


Feedback Requested

Please reply in the comments/feedback with any 404 responses you know of that are clever or would be interesting to other readers of this post.

No comments: