Custom 404 Error Pages

A 404 Error page is the error the user receives when they try to access a page on your website that doesn’t exist. These error pages are often fairly boring and dull (admittedly, ours is as well… for now). Custom 404 Error pages can help break this boredom by providing something more interesting or even comical.

Good Custom 404 Error Pages

Here are some of my favorite custom 404 error pages, from a large list posted by Smashing Magazine. There are tons more than just what is found here and on their website. These are just a few I found especially humorous:

HomeStar Runner

This one is humorous and includes a small image. It’s also a bit insulting to it’s viewer, which probably fits HomeStar Runner, at least a little bit.

CSS-Tricks

The web developer in me likes this one. They have it looking like the page ripped open, accidentally revealing the CSS behind the page.

Dawdle

This one takes a classic screen from Super Mario Bros. and turns it into a 404 Error page.

The Truth

This one is rather simple, but still quite humorous.

That was just a small sampling of my favorites from Smashing Magazines article. Be sure to check out the full article: 404 Error Pages, One More Time.

What Makes a Good 404 Error Page?

Really, whatever you think makes a good 404 error page can probably make it so, if done right. There are a couple common threads through a lot of the really good ones though that you should keep in mind.

Humor

A large number of 404 error pages often contain some variety of humor in them. This is good because coming across a 404 error page is often times not a very welcome surprise and could frustrate your users. Seeing something humorous can help break this tension and give them a good chuckle.

Homer (from the Simpsons) also seems to make an appearance wearing a moo-moo on a frequent basis as well.

Useful

Most good 404 Error Pages are useful. Some will provide suggestions of what they think you meant to type, provide links to get around to other places, or provide contact information to contact the webmaster of the site for help.

Suit Your Style

404 Error page should also suit the style of your website. They don’t necessarily have to suit the style aesthetically, but in some way. You can either use the same color scheme, use “your type” of humor, or more.

Or, they could be a complete juxtaposition of your style as well so they seem rather out of place.

Using Your Own 404 Error Page

This varies by server, but it’s generally very simple. If you have a managed hosting account, most of the control panels hosts provide will have a setting for you to specify where your 404 error page is.

If you have access to the .htaccess file of your website, simply putting:

ErrorDocument 404 /my404page.html

will get the trick done (replacing /my404page.html with your actual page).

It is also important that your page actually report that it is a 404 error page (instead of sending the regular 200 OK server response). If you don’t do this, it’ll confuse search engines and the like and you may start seeing your 404 error page showing up in search engines (which isn’t usually desired). There are a variety of ways to do this. Usually a properly setup server will go ahead and take care of this for you.

If you can’t get it configured properly, you can put the following code in the top of your page to have it send the proper response:

Do You Have Favorites?

Do you have any favorite 404 error pages, either from Smashing Magazine's article or from another website? Share them!