Pinterest Stumbleupon Whatsapp
Ads by Google

how to make a 404 pageAn urban legend has it that the first internet server was situated in room 404 of the CERN building. Consequently, this server also produced the first “Not Found” error, which, as the legend claims, was subsequently termed 404 error.

The problem is that apparently a room 404 never existed at CERN. I have never been there so I wouldn’t know. But there is a much more logical explanation for why a “Not Found” is a 404 error. The HTTP status code knows five different classes and there are up to 100 possible status messages in each class. Class 4xx reports client errors and two more digits specify the type of error. There are 18 different cases defined in class 4xx and error 404 represents a case in which the request (e.g. the requested file) was “Not Found”.

Why should I Make a 404 Page

Chances are your website visitors will see your 404 page. Hopefully not many of them, but certainly a few. Now if it’s a generic white page with big black lettering telling them “404 Page Not Found”, how happy do you think they are going to be?

The thing is that the default 404 error message is not very helpful when someone runs into a dead link. Instead, a 404 page should provide some resources, so the stood up surfer doesn’t simply leave the website, but tries another path. Below are what in my oinion the best practices for 404 page design.

1. Matching Design

That’s a no brainer. A 404 page should nicely blend in with the look and feel of the rest of the site.

2. An adequate error message

This one’s logical as well. Anyone encountering an error should notice this at once. Spare the details, but give the surfer some…

Ads by Google

3. Options

Add some resources and links, so your guest can return to a specific area on your website quickly.

10 Great Examples

1. AboveTopSecret

how to create a 404 page

What makes it good?

It provides some links back at the top, a search box for the site at the bottom, and some entertaining informational bits in the middle. It’s unique, creative and helpful.

2. Rainfall Daffinson

create a 404 error page

What makes it good?

It contains information about what may have gone wrong and how to fix or report it. It contains kind of a sitemap from which the visitor can pick a new target, which also includes outside links, e.g. search engines.

3. CssLeak

404 not found

What makes it good?

It blends in perfectly with the rest of the site design, it contains a sidebar with links as well as the 6 last viewed sites on CssLeak. Apart from that it’s original in providing drink recipes.

4. Video Management Systems

1984

What makes it good?

The subject of the main page is digital video surveillance solutions. The header of the 404 page is 198404 and the quote is, you guessed it, from George Orwell’s novel 1984. A very ironic 404 page for this type of company.

5. Inspiration Bit

page not loaded

What makes it good?

It blends in very well with the overall site design and provides a selection of alternative links and bits.

6. Web Design Greenville SC

internet traveller

What makes it good?

Apart from matching visually with the rest of the website, it’s very original in that it provides a chart that may find an explanation for the encountered error. Very good and funny approach.

7. acorn creative

lost sock

What makes it good?

This one is simply hilarious.

8. GOG.com

black hole

What makes it good?

Very beautiful design, top and bottom menu bar with helpful links, resources and a search bar.

9. From the mind of Jamie Huskisson

dead link

What makes it good?

It’s funny, provides the necessary information, a search box and a link to the blog’s archive. Very valuable.

10. BlueDaniel

exit 404

What makes it good?

It’s very basic, doesn’t provide a lot of resources other than a link back to the main site (Exit). But just from seeing this screenshot, don’t you already think it’s ingenious? And it’s even better than that because it’s interactive. There is a train coming in, stopping and leaving the station. It’s worth exploring the rest of the site because it’s just as good.

404 Research Lab

More information and resources regarding 404 pages can be found at the 404 Research Lab. The site features a 404 of the week, a collection of great 404 error pages and a lot more.

What is your advice for 404 pages? Have you found another awesome and/or terribly useful 404 error page that isn’t listed above? Any quick tips on how to make a 404 page with a minimal effort? Please share it with us!

Picture credits willem velthoven

  1. Robert Connor
    January 3, 2015 at 11:34 pm

    Wow we like these 404 pages. we have a question we make up a page or just redirect to main page?

  2. adrian
    October 14, 2009 at 5:21 am

    I get the fine examples of .404 pages, but where's the "How To"?

    • Tina
      October 14, 2009 at 5:39 am

      Adrian,

      the "how to" is a 3 simple points list:
      1. Matching Design
      2. Adequate Error Message
      3. Options

      If you have built a website, you should already know how to technically build a 404 page.

      The idea here was to provide some cues for what will turn a boring blank 404 page into something helpful and interesting. After all, it's disappointing enough that the information one was looking for is no longer available.

  3. kamal Patel
    October 3, 2009 at 3:08 am

    Great tips and great examples

    thanks for sharing buddy...

  4. Anaska
    August 24, 2009 at 2:26 am

    Have you ever seen a Transparent 404? see our new design at:

    blumblum.com/404

  5. Droid
    August 4, 2009 at 1:21 am

    Super exapmles of error page 404. Here one guy post most interesting ideas. I can check (kontain.com/bickov/entries/36756/page-404/) interesting idea for error page 404

  6. MegaFill
    February 28, 2009 at 10:04 am

    HI! See my 404 "http://journal.ucoz.com/404 ;) I stylized as cmd...

  7. Amit Banerjee
    February 17, 2009 at 7:38 am

    Very Good examples and an Eye opener !

    Another Point may be to redirect the User to the Homepage automatically after some time.I use this Code :

  8. Sav
    February 16, 2009 at 3:04 am

    there's another example of a page that is absolutely on point with the brand - http://www.southparkstudios.com/404.html

  9. makka
    February 11, 2009 at 3:33 pm

    The title is "how to build a great 404 page and 10 examples". Well, where's the 'how to build a great 404' part? all I see is the examples. Or is it more like 'these are the guidelines, go figure it out on your own'?

    • Tina
      February 11, 2009 at 6:11 pm

      makka, I think the post you were expecting would be termed "how to build a website". The how to is about the points or characteristics to consider, not about the technical background, which also depends on the type of website you have and how it's hosted etc.
      Is there anything we may be able to help with though?

  10. {HACKS} Daily
    February 11, 2009 at 8:47 am

    These are nice..liked the Flowchart one...

  11. Jess
    February 10, 2009 at 4:27 pm

    All pretty cool, but I noticed this website doesn't even have a 404 page, just sends you to a directory. thumbs up anyways as you're probably not the admin.

    • Mark O'Neill
      February 10, 2009 at 4:34 pm

      Ironically, this article reminded us that we don't have a 404 page and we are working on one right now. :-)

  12. Jash Sayani
    February 10, 2009 at 2:20 pm

    BlueDaniel has the best 404 Page !!!

  13. Rob
    February 10, 2009 at 4:57 pm

    I've always liked the 404 page here: atlasquest.com/404

Leave a Reply

Your email address will not be published. Required fields are marked *