404 Error Pages

The 404 page is one of the most important, yet often overlooked elements of a website. It is the page that is generally served up to the reader by the server when a page simply can’t be found. If you try going to this link, you’re going to see my own personal 404 page. Since, I still haven’t seen a need to create any pages with the word cheese in them, for now at least.

If you don’t go through the effort of designing a 404 page, a few things could happen. The browser might show its own version of a 404 page -

Internet Explorer

Google Chrome

Or your host may have a default 404 that it serves up to all its websites.  This is more common on free hosts, and sometimes you can’t override it.  And of course there’s the bland and generic Apache 404 page.

Anyway, the thing about these 404 pages is they really aren’t helpful.  Sure, we’ve got a google search bar, and some explanations of why this might be happening, but none of that relates to the actual website.  Your job as the developer should be the makes your users lives as easy and simple as possible.  They aren’t supposed to do the thinking, that’s your job.  So if you put  up your own custom 404 page with helpful links, a search bar, and a few other elements, your users will easily get to where they want to be, and love you just a little bit more for helping them accomplish that.

Now, what have you learned so far?  You need to have your own custom 404 page, and to help you accomplish that, I’ve provided you with a few best practices.

1.  Keep it Simple

On your 404 page, you should only have what needs to be there and nothing else.  Putting a joke, or a picture is fine, but you don’t want to fill up the page with useless content.

2.  Keep the Design Standard

Let’s say a user on this website is searching for something, and gets a 404.  Instead of the green and white that we all know and love, I decide to serve up some crazy purple page, with insane gradients and bokeh effects.  The average person will experience a lot of confusion.  For all he knows, this isn’t even the same website he was one seconds ago, how could it be?  It looks NOTHING like it.  In general, arriving on a 404 page  inspires confusion and irritation in the user.  You want to try to minimize that as much as possible.  So keep the design of your 404 page looking just like every other page on your website.  At least then, the user knows he’s on the right website, just not the right page.

3.  Useful Links

You don’t want to necessarily go listing out every post and page you’ve ever written, that could get rather enormous.  But listing out your recent posts, or your most popular posts is always a good idea.  Chances are, that’s where people want to be anyway.  On the off chance that none of the links you provide are helpful, offer them the opportunity to contact you.  That way you can be notified of the problem, if there is one, and you can fix it as soon as possible.

As well as the “Recent Posts”, “Popular Posts”, and contact  link, consider a link to a full archives page.  If it’s not on your archives page, chances are it doesn’t exist (or you have a malicious hacker on your hands).

4. Search

This is a definite must.  Maybe the page they’re looking for is in a different location, or the link changed.  Assuming you already have some sort of search feature built into your site, this is your opportunity to serve it up to them when they need it most.  Maybe they couldn’t find the page they were looking for, but chances are your search bar can (you coded it after all, if must be awesome ).

5. Jokes/Humour

This whole 404 thing might be an awkward moment for you and the user.  Try to lighten things up by adding a funny picture or joke.  Nine times out of ten, they laugh it off and forget the day that YOU failed finding the page they wanted.

(That was a joke right there, in case you didn’t notice.)

Showcase of 404 Pages

Okay, so now you KNOW what you need in your 404 page and why you need it.  But you still don’t know what you’re up against.  There are millions of 404 pages out there, so you’ve got quite a bit of competition to design the best one.

CSS-Tricks

Chris Coyier actually shows you some of the code, as well as providing useful information.

Heinz

Everyones favorite brand of ketchup has its very own 404 page.

Twitter

Twitter’s own minimalistic 404 page.  It’s also worth noting that there is an actual user named @404 with one status update saying – Twitter couldn’t find what you were asking for.

ForTheLose

A simple 404 page.

CricketFeet

Why not cure the loneliness of a 404 page with a talking robot?

RealMacSoftware

One of the better 404 pages out there, functionality wise.

My very own 404 page. I think it’s pretty nice, if you have any suggestions, leave them in the comments.

Extra Reading

Want to know more?  Just for you little over-achievers out there, here’s some of the best posts out there on 404 pages.

• 404 Error Pages, One More Time
• 404 Best Practices
• Wanted: Your 404 Error Pages
• 404 Error Pages: Reloaded

Fin

That’s all folks, I hope you learned something.  Enjoy the world of 404, next we’ll do 503 (not really).