How To Customise Your 404 Page

At some stage in your internet surfing career you will have landed on a web page that says Error 404 Page Not Found. It can be annoying for visitors, but with a bit of care and attention, you can create a page that may intrigue your visitors and make them like you even more!

What is a 404 Page?

A 404 page is a HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested. This can happen for several reasons;
1. The page has been moved
2. A link from another site is incorrect
3. The visitor may have made a mistake typing in a URL

You can find a very thorough article on how the 404 works here on Sitepoint.

What Makes a Good 404 Error Page?

Think of the 404 as taking your lost visitor’s hand and guiding them gently to another part of your site.

1. Explain what the page is. Don’t assume that everyone is familiar with the term 404. The average lay person might think something has gone dramatically wrong (and I’m thinking of my parents here) when they see ERROR 404 in big letters on their screen.

2. Don’t let the visitor feel like it’s their fault that the page can’t be found, and don’t just tell them to correct their spelling. Odds are they won’t be back.

3. To improve their experience you should always allow them to go somewhere other than back using the browser Back button. Do not create dead ends.

4. Include links to other parts of your site.

5. Offer visitors a way to contact the webmaster to let them know a link is broken. Visitors are more likely to do this if offered a form.

6. Use Search boxes

7. An interesting or humorous graphic goes a long way towards creating goodwill.

By customising your 404 Error Page using some or all of these tips, you are going a long way towards keeping people on your site.

Some Examples

There are some wonderful showcases of 404 Pages on the web. I’ve picked out 10 examples that I felt were eyecatching and useful.

Unfinity Design gives a short explanation that the page can’t be found and a number of links back to various parts of their site.

Error Page

CSS Scoop serves up a melting scoop of ice-cream which is a link back to the homepage. The navigation bar at the top allows visitors to jump to those sections of the site.

Error Page 2

DigiGuru has a very interesting 404 page, which transitions through a number of pictures, whilst giving links back to the main site, his email and phone number, AND information about a walk through the South Pole.

Error Page 3

Roymond.com – I have to admit I included this one because it made me laugh. As well as displaying a humorous (in a slightly twisted way) image on the 404 page, there are a full set of links back to the main site.

Error Page 4

Ultrapop shows a nice image with an order to return to base.

Error Page 5

Moo has a simple and “caring” message with links to its products and to the homepage.

Error Page 6

Hootsuite.com has a missing fowl theme with a brief explanation of why the page was not found and a link back to the homepage.

Error Page 7

As well as sharks with lasers, on the Renkoo Error Page you get links back to various parts of the site.

Error Page 8

Clean, witty and offering lots of ways out of the 404 page including the search box, the Tinted Pixelsite also adds a nice little touch saying “It’s most certainly not your fault”

Error Page 9

The 404 page for Blue Daniel is exceptional. While it only offers one link back to the main site, It’s made in Flash and is very imaginative.

Error Page 10

Out of interest, when you accidentally land on a 404 Error page, do you hit the back button without thinking any more about it? Or do you try some of the suggested links? Which 404 pages have you seen recently that impressed you?

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.

  • Fred

    some nice designs there, great roundup :D

    Sorry, but I think the article should have been called ‘How to design an attractive 404 page’ or similar – I expected to see information on how to configure Apache or IIS to show customised 404 pages ;)

    Also, the page with the dead kid on it is quite disturbing

    thanks

  • Al

    I wrote a post about what a custom error page should contain a few weeks ago… Wish I’d seen this first for some more inspiration and some good examples.

  • http://fvsch.com Florent V.

    A thought: most users of non-tech websites will have no idea of what a HTTP 404 error is. Hell, even many web workers don’t know it’s from HTTP (and should be served with the correct header, which is often not the case)!

    Time to do away with “404”, just tell users there was a problem and help them get back on some pages that do work.

    A second thought: monitoring 404 errors, and referers for each request that ends up as a 404 error, is a good thing.

  • justal

    I wrote an article on what a custom 404 error page should contain a few weeks ago.

    Wish this SitePoint article had been around before so that I could have seen these excellent examples first. Such examples are always good for some inspiration.

  • nachenko

    Oh, dude, all these are great, very imaginative. It makes you want to mistype the addresses again.

  • Ketira

    While it’s not much graphic-wise, I thought the one I did for my site was okay – especially the “alt” text. But I wouldn’t mind feedback (and no, I do NOT code in Flash, thank you!) about it. Just send your email to ketira(at)gmail(dot)com, please!

    To see it, just type http://www.ketira.net/ack

  • My220x

    Great 404 error pages there, it’s nice to see something better then the default 404 ugly error page.

  • George Susini

    Very creative, Those are great ! I am not sure I would put sponsors on the page like CSS Scoop though, that would surely drive customers away thinking they hit a link site.

  • http://www.mikehealy.com.au cranial-bore

    The risk with designing a great 404 page is that it might never be seen.

  • yogomozilla

    “A 404 page is a HTTP standard response code”
    - the page isn’t the response code – “404″ is the HTTP response code returned in the HTTP response headers from the remote server (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.4.5).
    The page is just some content (possibly HTML) that happens to be served with a 404 response.

    If you are syndicating content from other sites or working with web services getting a 404 response code in an HTTP request means that the content is no longer there. This can trigger error logging on your side so you can determine what has happened and take measures to get things working again.

    The cardinal sin is to serve a “content not found page” with a 200 OK response. Yeah, it might say “content not found” in the response document but to a web service that 200 OK response means “yes the content is there” – even if the HTML in the response contains text suggesting that the content is not found.

    The 404 response also tells Google and other search engines that the page no longer exists, meaning they should be removed from the search index.

    Out of the examples you’ve given, the DigiGuru and Blue Daniel sites get it wrong by serving the 404 page as “200 OK” !fail!

    ; yogo

  • Skweekah

    Im going to be a stick in the mud here and say I dont like corny 404 pages. It’s just my opinion. But I still find this article of value and who knows, I may yet create my own corny 404 error page, like “Oh no, it appears that youre using a Windows-based operating system…”

  • marty

    or be lazy and use .htaccess

  • Stevie D

    Out of interest, when you accidentally land on a 404 Error page, do you hit the back button without thinking any more about it? Or do you try some of the suggested links?

    It depends how strong the information scent is. If I think the content will be on the site and I think the site architecture is sufficient that I will be able to find the correct page, I’ll persist. More often, I’ll go back to Google and do a site-restricted search, or just give up. That’s particularly true if it’s a generic 404 page that shows little interest in being helpful. Because let’s be honest, we all know that “cool URLs don’t change”, and if they haven’t bothered to map the old URL onto the new one, the chances are that they aren’t taking all that much care with the rest of the site either.

  • dianemcken

    I don’t like web sites that blame it on me that their page is not found. Saying “you seem a bit lost” to a potential customer doesn’t come across very well.

  • CurlyB

    I fail to see how the attack on Microsoft by Skweekah

    Skweekah Says: “Oh no, it appears that youre using a Windows-based operating system…”

    Will impres a user ending up with a 404 error because YOU have a problem on your website.
    Blaming others is no answer.

  • http://www.tintedpixel.com/ tintedPixel

    @marty Indeed, webmasters should be using (best practices) that include proper redirects in .htaccess when pages are moved or become obsolete – though I don’t think its lazy. But creating a 404 that provides options that let the user get back on track seems like a good idea as well, don’t you think?

    @yogomozilla Bingo! If the error pages don’t provide the correct response headers, the error becomes just another page. Basically defeating the purpose.

    My 2 pennies.