What Makes a Good 404 Page?

3d_404_animation.png

Have a Safari browser handy? Even Mobile Safari on an iPhone will work. Now check out this 404 (“page not found”) error page: http://idzr.org/404.

The slick animation on this page is powered by nonstandard 3D CSS transforms offered by WebKit, which is why it’s only visible in Safari for now. Chrome comes close, but lacks the right timing. The only JavaScript used in the page is to insert the random characters and apply CSS styles to them; the animation is pure CSS.

Dazzling as it is, it started me thinking about 404 pages in general. What makes a good “page not found” page? Is the name of the game getting the user back on track as quickly and efficiently as possible, or should a good 404 page reward the wayward user with a little surprise like this one—a visual treat that only visitors who’ve fallen off the map can see?

Certainly, SitePoint’s 404 pages are looking a little tired. Would you agree? If we were to redesign them, what would you like to find on them? Have you seen an especially effective 404 page lately? Leave a comment and point it out.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://ragnarev.com Rayvan

    A 404 should have an automatic countdown redirect with text link to the homepage for SEO. That or an automatic internal site search query with most relevant content. You can use Google CSE to integrate an internal site search fairly easily.

  • yogomozilla

    Returning a 404 HTTP response header would help on a ‘Content not found’ page. Your example (idzr) returns a 200 OK response.

    Use the correct response code to tell (among other things) search engines that the content no longer exists and should be removed from their index of your site.

    Example: http://www.google.com/search?q=http%3A%2F%2Fidzr.org%2F404

  • Nunks

    I like Danny Choo’s 404 page. It points to lots of content in an interesting way…

    404 pages with cool eye candy are nice, but I prefer those with a little more useful information. Then again, maybe it depends on the overall purpose of the website. Maybe SitePoint’s 404 page should suggest latest and popular content, or maybe suggest interesting content based on the non-existent URL the user tried to visit, if possible…

  • Louis Simoneau

    I’m a fan of the “defensive design” mentality. Trying to be cute or funny at a moment that’s likely to be somewhat of a crisis point for the user is unlikely to win any hearts. Be apologetic, offer suggestions (search box, related content, etc.) to help the user get back on track, and assure them that the problem has been flagged and will be investigated.

  • Matt

    I agree with Louis, a little humour doesn’t hurt but you want to help the user get where they were trying to go: put the search box right in the middle or link to it and have a few guesses at what they were looking for based on the URL they typed: levenshtein() run against your valid urls and tags will help with typos and linking quickly to the home page or index page will help too.

  • Seth

    you could use apologetic and heart winning 404 pages… or one with Flavor Flav and a quote bubble saying, “FOUR OH FOUR!”

    Seriously though, It really just depends on what the rest of your site is like. It needs to match. If your site is for designers, then design it. If its for all audiences then make sure it clearly lets them know what happened and gets them back.

  • http://www.flamencodancer.co.uk flamenco-uk

    In order of importance I reckon:

    1. Returning the correct 404 HTTP response header
    2. Simple, friendly and non-threatening
    3. Containing a clickable link to homepage
    4. Containing either a sitemap or search facility

  • markfiend

    The 404 page on The Sisters Of Mercy’s site is… unusual:

    http://www.thesistersofmercy.com/error404page.html

  • Jan Srutek

    Apart from the functionality and useful information mentioned above, I believe a good 404 should be a bit witty too. An excellent example of a well-designed 404 page is the one on Carsonified. It is aesthetically pleasing, witty, and useful at the same time.

  • tomecole

    I have intended for some time to rewrite my 404 pages in this way:

    Display the URL the visitor provided with an appology, then under that list a site map showing all navigatable pages on the site so they can compare what you offer to what they were looking for originally.

  • JHawk

    Hey, don’t forget that Chrome is a web-kit browser and handles the transform property as well. Great ideas on the 404 messages being both helpful and beautiful.

  • Richard

    Personally I like quirky 404 pages and the http://www.thesistersofmercy.com/error404page.html mentioned above fits the bill well. However for customer relations I think a 404 page should have the following attributes:

    1) Don’t include the jargon “404″ as real users don’t know what that means or care.
    2) A polite informative message apologising (even though it could well be the end users fault).
    3) Include links to the home page, contact page, search box and site map.

    The Sitepoint 404 isn’t looking tired, it is clearly designed to do a job and the only thing that I would add to it is a direct link to the sitemap saying that you may find what you are looking for there.

    Accessibleweb

  • http://www.dimensionalized.com/index.php onefocus

    I feel as you mentioned Kevin: “…

    getting the user back on track as quickly and efficiently as possible, [AND] … a good 404 page [should] reward the wayward user with a little surprise

    ” to make them laugh like: http://www.dimensionalized.com/404.php – I’m still working on this page (as with all things, when I have time). With my 404 page I try to educate new visitors as to what 404 means both visually and with words. Then give them some links to try out.

  • jamindude22

    I personally like the Mail Chimp 404 error page. The entire site has a nice clean fell to it.
    http://www.mailchimp.com/404

  • kevotheclone

    A 404 haiku

    Seriously, on our intranet we’ve set up a custom 404 handler that looks up the “bad” URL in a table of “moved” content.

    If a “moved” content record is found, it displays an automatic countdown redirect page to the new page with a link to the new content. If the HTTP referer field is blank it instructs the user to update their bookmarks/favorites/links. If the HTTP referer field is not blank, it sends an email to us with the referer value and the “bad” URL for us to potentially fix.

    If a “moved” content record is not found, it displays our custom 404 page with a search box and email link to our support staff, with instructions to search for the content or contact us.

  • Anonymous

    I really like this 404 page: http://www.dubli.com/404

  • http://www.ozimages.com.au BradStephens

    We us a pretty simple one … it emails us details of the bad link so we can fix it, and gives the visitor a couple of options but interestingly, very few use either of the search options.

    http://www.ozimages.com.au/404.asp

    We’re a photo library so we offer links to photo search, the photographer search and one back to the home page. A little while back we also added a few random photos to brighten things up and as suggested here, give the wayward visitor a treat.

    The amazing thing is, the photo links usually get about 80%+ of the exit traffic from that page. We never saw that coming!