How to build Outstanding 404 error pages – making an error look cool and helpful

I love 404 error pages. Not all of them, but there are some pretty good ones out there (I will show you some of my favorite ones later in this article).

Whether you’ve typed a link incorrectly, or accessed a webpage that is no longer available, there’s a strong chance you’ll meet with a 404 page. That right there is a great opportunity for that website to either be remembered, or forever forgotten.

Maybe I’m over exaggerating a little bit, but still.

I, personally, am sick of seeing error pages that only give me the option to go back to the home page. Really? Really? This is the only thing you can do to help me? It’s like getting lost in a maze, and your only option would be to start from the beginning.

Why Do You Need to Customize Your 404 Error Page?

404 error pages are great opportunities for you to keep your visitor on your website for longer.

Because there are so many completely useless error pages out there, I believe that customizing yours is a great opportunity for you to redirect the visitor toward some helpful content. At the same time, the visitor will be able to explore the site further, and not become annoyed about the fact that he’s being redirected to the home page.

What Should Your 404 Error Pages Include?

First of all, even if you customize the 404 page, the visitor still needs to know that he’s landed on one. Also, use common language, so that you don’t confuse the user with jargon.

Second, what most 404 error pages lack is a search bar, a basic search bar.

Then, it’s all about the links. The visitor should be able to navigate wherever he may want from that point, so that he easily find the answer he’s looking for.

That being said, you need to include a link to the homepage, or a link or a contact for the support team. Other than that, show your visitor some of your latest article, or the most viewed ones, because chances are, that’s what he was looking for.

If you have a website that sells products, include product recommendations in the error page, so that the visitor can get back on track, right where he was lost.

You definitely need to put some effort into creating a helpful 404 error page. I’ve seen a lot of error pages, but unfortunately, some were more funny than helpful.

If the visitor is redirected from an external link to your website, you lost him if you don’t have a proper error page. If you didn’t put a little bit of effort in helping him find his way back, then he’s definitely not going to stick around, trying to figure out where to look for “it”.

“How not to do it” – Examples of 404 Error Pages

1. Google

The first example that comes to mind when it comes to bad 404 error page practice is <drum rolls> Google. You’ve probably seen it as well, but didn’t really give it much thought, because it’s Google we’re talking about here.

Nevertheless, their error page is simply dull. It doesn’t say more than we all know, and on top of that, the visitor is not even given the chance to find out what went wrong, and how they can find what they were looking for.


2. South Park

The second example is the South Park error page. You’ve probably heard or even watched South Park before, so you know the characters from the show.

For their 404 error page, they used its characters, and for each one of them, there is a custom message, which is created based on what the character would actually say, and what words he would use. The error page changes every time you go back to it.

I’m not saying that their webpage is not cool, because it is. I’ve included it here, because it lacks functionality. The only thing a visitor is able to do is go (back) to the home page. A search bar would have been just fine, though.


My Favorite Examples of Well Done 404 Error Pages

1. Virgin Holidays Cruises 

Their error page proves that you can adapt this page in a very creative way, no matter what type of business your website does.

It’s clear, it has a funny message, and the picture with someone’s legs on a deserted island are the cherry on top.

The visitor has the possibility to search for whatever he may be looking for. It’s just perfect!

404 error pages

2. Marvel

The Marvel App error page is very different than what I’ve seen so far. It’s very interactive. The background is actually a .gif, and you have the possibility to change it, and what another one and another, until you get bored.

Also, their error page gives you the possibility to email them, or send them a tweet. It is the first site I’ve encountered so far that has the option to tweet the company. I think that this is very convenient, because the visitor might receive a faster response on Twitter than on email.


3. Content Look

We’ve come up with a funny, but helpful 404 error page for our new online tool, Content Look as well.

As you can see, we used our dear Squirrel in this process, and we think it turned out really nice. We’ve included a button for the home page, and a search bar as well.


Let’s Have a Discussion

These are my thoughts on 404 error pages, along with some examples to show you how good practice looks like.

Now it’s your turn to share your thoughts, and tell me whether you think it’s worth investing a little bit of your time in these error pages.

Also, what are the coolest and the most helpful error pages you know?