An 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...

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 [Broken URL Removed]

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.

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