<style type="text/css">
#status-pages-around-the-web td {font-size: .9em;}
#status-pages-around-the-web td + td {width: 75%;}
#status-pages-around-the-web td p {margin-right: 1em;}
#status-pages-around-the-web td + td p {margin-right: 0;}
.status-page-thumbs {width: 24em; overflow: hidden; margin-bottom: 1em;}
.status-page-thumbs li {display: block; float: left;}
.status-page-thumbs li.maintenance,
.status-page-thumbs li.status-404 {margin-bottom: 20px;}
.status-page-thumbs li.maintenance,
.status-page-thumbs li.status-422 {margin-right: 20px;}
.status-page-thumbs li p {margin-bottom: .25em; text-align: center; font-style: italic; color: #000000;}
</style>
<p>
One of the things I love that comes with the production of a site are the status pages. They're great little doodads that you get to create for your site and customize while hopefully providing good information to users explaining why exactly they are seeing what they are seeing.
</p>
<p>
I usually have a look around the web for examples of such things just to see what people are doing at the moment. Before creating my own I went ahead and visited some sites I check out on a regular basis, as well as some others that I was curious about.
</p>
<table id="status-pages-around-the-web">
<caption>A small sample of status pages around the web</caption>
<tbody>
<tr>
<td><p><a href="http://twitter.com/@hi!">Twitter</a></td>
<td><p>A nice, simple page and thoughtfully creative in regard to the twitter bird outline. I really like this 404 page because it's so simple and has relevant links for someone who's lost (home, help and contact support)</p></td>
</tr>
<tr>
<td><p><a href="http://www.facebook.com/now-serving-585717249">Facebook</a></p></td>
<td><p>Basic, informative and to the point. Looks pretty application-like and reminds me of browser error pages. Facebook has a pretty minimalist and to-the-point design which makes this fit nicely.</p></td>
</tr>
<tr>
<td><p><a href="http://www.thedailybeast.com/rawrrr">The Daily Beast</a></p></td>
<td><p>Aside from the differences in stylistic execution and visual design, the content of this 404 is very similar to Facebook's. However, it contains many more links in the header navigation as The Daily Beast doesn't require a registered account to be used to it's fullest.</p></td>
</tr>
<tr>
<td><p><a href="http://www.foxnews.com/sucks">FOX News</a></p></td>
<td><p>Similar to The Daily Beast with lots of inbound linkage to other parts of the site. However, this has a full layout with the 404 notification text being flanked on the right and left by navigation and ad space. I can't say I like this much because it doesn't break the layout from page to page since it uses the full template.</p></td>
</tr>
<tr>
<td><p><a href="http://www.guardian.co.uk/ello">The Guardian</a></p></td>
<td><p>Not nearly as much content on this 404 page as The Daily Beast or Fox News. This page is very minimal. I think like this design the most out of the three news sites simply because there's less going on. I believe this makes it more noticeable that something has gone wrong because suddenly the primary site template disappears and the 404 status page explanation stands out a bit more.</p></td>
</tr>
<tr>
<td><p><a href="http://rubyonrails.org/i-heart-rails">Rails Project Site</a></p></td>
<td><p>Pretty basic page here. It's just the default 404 page for the Radiant CMS. This is pretty terrible actually as there is no link back to the main Rails site. Only two links appears on this page. The one at the top takes you to the administrator login form for their CMS installation.</p></td>
</tr>
<tr>
<td><p><a href="http://www.hulu.com/400">Hulu</a></p></td>
<td><p>Hulu has an awesome 404 page! They have an embedded video with a montage of Homer from the Simpson's entitled, "Dohs". The rest is pretty vanilla and useful.</p>
<p>One thing though, the 404 page that I received was because I deliberately appended "404" to their URL. The first URL I tried, "<a href="http://www.hulu.com/asdf">http://www.hulu.com/asdf</a>", resulted in a page with only a broken video player and no video to watch. In these cases they should redirect to their 404 page.</p>
</td>
</tr>
</tbody>
</table>
<h4>My Thoughts</h4>
<p>
Since this isn't an exhaustive study by any means I'll just stop there (but if anyone knows of any good study's, send me a link!). What I liked from the status pages reviewed above were the simplistic ones that broke the common template format. I think this does a better job of immediately conveying to the user that something has gone wrong and in the end is more effective.
</p>
<p>
It should be noted that this scenario is only relevant if the user is already on the site from which they are viewing the 404 status page, which probably doesn't happen as often as another possible avenue. 404's are most likely the result of a bad link from another site where the whole template-breakage-model isn't going to be realized as a measure of intentional design.
</p>
<p>
On the other hand, the HTTP 500 status page should be served well by this design because users will, more often than not, already be on the site from which they're served the dreaded error 500 page.
</p>
<h4>My Status Pages</h4>
<p>
For Shiny-Pixels I've stripped my pages down to the bare essentials. I've included a link back to the home page along with an explanation of what went wrong and left it at that. I designed four different status pages; three for specific HTTP statuses and one to stick up during periods of maintenance on the site.
</p>
<ul class="status-page-thumbs">
<li class="maintenance">
<p>Maintenance</p>
<a href="/maintenance.html" class="thumbnail"><img src="/images/content/status-page-screenshots/maintenance-thumbnail.gif" /></a>
</li>
<li class="status-404">
<p>Status-404</p>
<a href="/404.html" class="thumbnail"><img src="/images/content/status-page-screenshots/404-thumbnail.gif" /></a>
</li>
<li class="status-422">
<p>Status-422</p>
<a href="/422.html" class="thumbnail"><img src="/images/content/status-page-screenshots/422-thumbnail.gif" /></a>
</li>
<li class="status-500">
<p>Status-500</p>
<a href="/500.html" class="thumbnail"><img src="/images/content/status-page-screenshots/500-thumbnail.gif" /></a>
</li>
</ul>
2009-03-22T00:00:00Z
4
new-status-pages
A short post on status page design. I visited a few different sites and share some thoughts on what I thought was useful and what wasn't. I also post my own status pages that I recently added to the site.
New status pages
2009-06-26T05:46:01Z