Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 37

Goodbye, old 500 page.

By

22 October 2008 | Category: Design

Recently, we’ve been compiling a few of our websites together. This is a really cool idea, because it allows us to use more of our data in more intelligent ways, and to keep a cleaner, more DRY codebase. It also means we can start to replace some of the parts of our systems that possibly aren’t as helpful as they could be. Case in point: the 500 page!
The old error page.

Now, don’t get me wrong – this page is pretty informative. It clearly shows you that something’s gone wrong. However, it’s not very helpful. It’s simply a message. So I thought to myself, “What would I like to see on an error page? Clearly this error isn’t my fault – so I should have some options here.”

Changing this error page was, in my mind, a big thing. This error message has been at the company longer than I have. Does it get a severance package? I mean, it doesn’t take Fridays off. It never turns up late. It always stays behind and works while we have parties. It doesn’t even play Guitar Hero. Short of monit, it’s probably one of our most diligent employees. Even if it stopped working, I’m sure it’d show itself as its own error page. That’s commitment… or, possibly, infinite and fatal recursion.

So what could replace this trusty workhorse of a page? I put myself in a user’s shoes. Well, I thought to myself, I’d really like to notify the  developer directly. That would mean that this might get fixed, stat. Does that mean a phone number on the page? An anonymous email address? Both of these things seem far too difficult. For instance, I cannot work the Carsonified desk phones correctly; they have many, many buttons. Once, my particular unit started typing letters instead of numbers. And OSX seems to enjoy stalling whatever I’m doing by opening Mail.app every time I click a mailto link.

Nah, let’s put a FORM on it. One that sends the message to an independently-hosted site to process. That way, if the site were to go down, Dreamhost-style I’ll still be able to get hate-mail from all our users.

That’s not going to be enough, though. If I’m clearly not to blame for this evident failure, I’d like to know who is… so there should be some sort of backup contact details. Details that clearly aren’t just a blatant ploy for fame, admiration and Twitter followers.

The new error page! Exclamation marks! Exciting!

Now, the worst part about making a 500 page is that, if you do your job right, nobody will ever see it. But things do inevitably go wrong, and a good 500 page is a useful tool to have around for when they do. This is 2008 – hiding behind a blank error page just isn’t enough. If you care about your users, and your application, you need to know when stuff goes wrong.

Current number of 500 page emails: 2

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://www.jamesdeerdesign.com James Deer

    Haha, love it Elliott mate.

  • http://lisagoodlindesign.com Lisa Goodlin

    Oh, I love clever, funny stuff like this. Very nice.

  • http://www.peacockcarter.co.uk Richard

    A nice touch.

  • http://www.conspiratordesign.com Christopher Webb

    What I love about it is that you take the ‘impersonal-ness’ out of a 500 page and attach a name, a face, and many ways to contact him. It is definitely a nice touch. Kudos to you!

  • http://www.veboolabs.com/ Chris Danek

    I’m a huge fan of customized error pages and yours seems to be very well executed.

    One question though – how do you handle the initial self-sent email? I assume not via the same script that handles displaying this 500 error message as it might possibly end up in an endless loop of doom. Default webserver logging feature perhaps?

    By the way, would server fall back to the default 500 error message in such case?

  • http://carsonified.com Elliott

    @Chris: It’s handled by Rails – if the server’s totally down, the HTML page is delivered flat. However, we have other software installed to let us know if that happens – like monit!

  • http://joseph.extendr.com Joseph Rueter

    Oh, snap. Thanks for your attention to the user experience. It seems we are all excited to work with any company or service that steps forward and plans for ways to deal with problems or the possibility of problems by taking credit, offering a course of action and doing that with personality. Your customers must love it?

    I wonder what it would look like for physical stores to do similar. Maybe an in store kiosk or a landing page for an in store only webpage or maybe and in store “something is screwed up” sms number?

    The trick I see is that most corporations, while they legally act with the rights and responsibilities of a person, they don’t have a conscience and therefore most lack personality. If your body copy and image lacked personality it seems to me this would be just another 500 page but this one with the bold request for a telephone number.

    You have not done that, well done all.

  • http://michaelparenteau.com Michael Parenteau

    I think this is a great idea. You guys keep making good sense… with style. I like it.

  • http://sarsini.it Martin Sarsini

    Great! But what percentage of your users knows what that “500″ means? If it is a website for geeks like us I am sure it’s fine

  • Greg

    Some helpful tips, but come on dude, this twitter “trend” of design (using bird things similar to twitter) has been totally overused.

  • http://nextupdate.com Garrett Dimon

    I love it. It’s so simple, but entirely changes the experience of getting an error. Of course, the personal face an accountability really help as well. Everyone needs to do something like this. Officially adding to my todo list for Sifter. Thanks!

  • http://www.onezom.com James McEwan

    That’s a genius idea, I’d love to see it catch on.

  • Anthony Bruno

    I dont know if im going to be sending you my phone number, maybe thats just me.

  • http://nazimjamil.com Naz

    Dude- this is awesome, so jealous I didn’t think of it first…

  • http://electronicmuseum.org.uk Mike

    Nice. But it’d be better if the grammar on the right worked, too. You need some kind of punctuation after the “help” – an exclamation mark, a full stop. (Not a comma..). Oh, and a comma after “It’s exploded”.

    Sorry to be picky :-)

  • http://www.safetygoat.co.uk kat neville

    What does your 404 and 503 pages look like?

  • http://www.frontenddeveloper.co.uk Rob Hayward

    like it :)

  • http://jessevlasveld.nl Jesse Vlasveld

    Gotta love the mattinator.com default admin path error message too.

  • Gregory Belton

    Hi, Looks great, but from a security perspective, isn’t this a bit loose?

    If some nasty person found a way to break your website, they could then spam you something silly using that form you’ve put on that page. You’d want to put a CAPTCHA device on there at least, to stop that.

    Greg

  • http://carsonified.com Elliott

    @Greg: That’s a good idea :)

    @Jesse: Haha! I’m glad someone found that :D

  • http://jessevlasveld.nl Jesse Vlasveld

    @Elliot it’s not a waste of effort after all is it! :D Keep up the little shiny details, they rock.

  • http://achievewith.us/public/articles/2008/10/20/custom-error-pages-with-turbogears-2 Tim Freund

    Very cool. I just wrote up an article on the mechanics of creating a custom 500/404 page for TurboGears 2 applications, but I didn’t put nearly as much thought into the content of the custom 500/404 page. Since my applications email me automatically when an error occurs, I didn’t think about putting a form on the page, but that form really gives the user a better sense of control over the situation. Good work!

  • http://blog.risingsuntech.net/2008/10/go-away-generic-error-page/ Go away generic error page | Rising Sun Tech Blog

    [...] Goodbye, old 500 page. [...]

  • http://fineartdavid.com David Owens

    @Greg I think that if somebody wanted to spam the Carsonified team there would probably be easier ways of doing it. I imagine their email addresses are pretty easy to guess.

    Besides giving me a CAPTCHA form at that point would undo all the good work you had done with the rest of the page.

  • http://carsonified.com Elliott

    @David: Exactly right. I’d rather have 100 spam emails than one irritated user. Gmail to the rescue!

  • http://www.serviceuntitled.com/be-creative-with-error-pages/2008/10/27/ Service Untitled» Blog Archive » Be creative with error pages.

    [...] Have you looked at your error pages recently? Your 404’s, 500’s, and so on and so forth? Probably not. After reading this blog post, I just updated the 404 error page on my own blog. The idea is that a helpful error page will be more friendly and help prevent customers from getting frustrated. A page that just says “this page can’t be found” or states that there has been a “server error” doesn’t help anyone. Including a form (like the company I linked to chose to do) or some alternatives and information for the customer (like I did) provide customers with a more productive alternative. [...]

  • Andrew

    Error page looks sweet

    But – Your 500 page didn’t already email a very detailed error reporting, variables dump to development?

    The form seems redundant when the server itself can do a far better more consistent job of logging the error

  • http://carsonified.com Elliott Kember

    @Andrew: Yes, it did. It tells me everything I need to know about who’s trying to do what. But it’s always useful to get an email directly from the user so I can get in touch straight away and help them out. It’s just another way of getting in touch when things go wrong – and it’s certainly not mandatory :)

  • Andrew

    Makes sense.

    The page does look very nice.

  • http://max.com xuxppxxuxyyy

    hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.

  • jeastalits

    rhqnvhjmnyiwmclpwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  • jeastalits

    ezmkramqcznndnpfwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

  • http://code95.com/blog/archives/27028 404 Best Practices | E Marketing, Web Design, Web Develop, SEO and SEM Egypt Blog

    [...] [...]

  • http://xcellextech.com/Blog/?p=24 404 Best Practices | Daily Gossips

    [...] [...]

  • http://www.qianduan.net/404-best-practices.html 404页面最佳实践| Tips| 前端观察

    [...] [...]

  • http://www.alibuybuy.com/archives/7447 404页面最佳实践指南 | 互联网的那点事…

    [...] [...]

  • http://www.modaser.com/1388/04/%d9%86%da%a9%d8%a7%d8%aa%db%8c-%d8%a8%d8%b1%d8%a7%db%8c-%d8%af%d8%a7%d8%b4%d8%aa%d9%86-%d8%b5%d9%81%d8%ad%d9%87-%d8%ae%d8%b7%d8%a7%db%8c-404-%d8%a8%d9%87%d8%aa%d8%b1/ مدثر » نکاتی برای داشتن صفحه خطای 404 بهتر

    [...] ممکن است در برخی موارد مشکل مواجه با پیغام خطای ۴۰۴ از مشکلی باشد که در سیستم مدیریت محتوای وبسایت ما و یا مشکلاتی باشد که یا از ان بی خبریم پس مهم است که با تهیه یک فرم ارتباط با ما راهی سریع برای ارتباط بر قرار کردن مخاطبان را با مدیر سایت فراهم نماییم [...]

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.