Why Your Website Must Have a Custom 404 Error Page

create-custom-404-pages

Sarah Danks | January 15, 2016

Oh, What’s in an HTTP Status Code?

First of all, we need to understand the error code. The World Wide Web is made up of status codes. The most common code web-wide is one of the Success codes: the 200.

A website’s main status code is — or, rather, should be — a 200. The 200 signals that you were successful: you found a web page that is healthy and functioning properly (i.e., you’re seeing the web page you wanted to see).

You might also be familiar with the 301 code, which resides within the 300-block of Redirection status codes. A 301 signals that a web page has been permanently moved to another location. There are many “blocks” of status codes, ranging from 100 (Continue) to 505 (HTTP Version Not Supported).

The opposite of the 200 Success status code is the dreaded 404. The 404 status code resides within the 400-block of codes, signaling Client-Side Error. A few of the 4xx errors are:

  • 400 = Bad Request
  • 403 = Forbidden
  • 406 = Not Acceptable
  • 407 = Proxy Authentication Required
  • 414 = URL Too Long (best to keep your URLs short)

The 404 error code — Not Found — signifies that you’ve reached an “empty” URL. In effect, you’re at a dead end — you opened a door and found a brick wall.

Notice how the 400-block of errors is labeled as a “Client Error.” Meaning you, the “Client,” is to blame when you reach those errors. Sheesh. It’s so harsh!

Why 404 errors happen

But why do you reach this error in the first place? There are many reasons why you could encounter a 404 error page:

  1. the web page you’re looking for was removed from the server
  2. the web page was moved to a different location but the URL wasn’t changed properly
  3. you incorrectly typed in the url
  4. you followed a bad link on someone else’s site

So you see, really there’s only one scenario in which it’s YOUR fault you’ve reached the 404 — the rest of the reasons are pretty much someone else’s fault. Whew.

The Default 404 Error Page

So the 404 error means you’ve messed up. But if it means you’ve hit an empty URL, then what’s the 404 page? Well, it’s the page that renders when you’ve tried to access the URL that doesn’t exist. In essence, on a 404 error page the web server is telling you, “You’ve erred. That URL doesn’t exist.

The default “page” for a 404 is really boring. It’s what happens in the browser when you don’t have a custom 404 set up on your site, and seeing it can feel like you’ve slipped through a wormhole back into the web of the ’90s:

default-404-error-page

Yikes. It’s so stark and unfriendly. Plus there’s nowhere else to go and no helpful hints as to what should happen next. Do I hit the back button? Should I close this tab entirely? Do I try again? Does the website I was trying to access even exist?

I’m so confused…

When you receive that type of Not Found error, it can leave you feeling confused and lost. As Renny Gleeson said in his TEDTalk titled 404, The Story of a Page Not Found, when you reach a 404 page it gives you a feeling of being in a broken relationship — especially when it looks like the aforementioned.

Relationship Status: Page Not Found

While perusing the TEDTalks library one day I ran across Gleeson’s talk on 404 error pages. It’s a short, sweet TEDTalk wherein he discloses the opportunity to continue a (web) relationship even past the dreaded 404.

In a nutshell, he says 404s are everywhere; they’re part of a normal online experience…

…that said, what a 404 tells you is that you fell through the cracks. Sayanara. It’s the online version of a slap in the face — or seeing your Starbucks barista sans pants.

But he says just because it happens doesn’t mean we can’t make the experience a good one — or, at least, a better one. By shying away from the default 404 page and creating your own, you can help people have a better adventure on your website.

Gleeson says you can write a 404 page that

  • gives you an opportunity,
  • commiserates with you, or even
  • blames you…

…just as long as it’s some type of experience other than a dead-end, bricked-in-doorway. I.e., the default.

Examples of Custom 404 Error Pages

Not sure how to turn an empty URL into a fun affair?

Designers web-wide have taken the 404 and turned it into a place to showcase their sense of humor and creativity  — rather than relying on an ugly default.

Here’s a great list of creative 404 pages that’re clever AND helpful. And, in case 33 examples isn’t enough, check out this monster 404 page compilation.

Here are a few of my favorites from those lists:

favorite-custom-404-error-pages

It might seem to be a trend or even a lot of work to whip up a custom 404 error page when so few people — hopefully — will ever see it.

And how do you go about coming up with ideas, anyway?


Ideas for Coming Up With Custom 404 Pages

Wondering how you can get creative and whip up something really unique for a custom 404? Here are a few ideas to get you started.

Continue with Your Branding/Voice

When you create a custom 404 error page, it is technically a page within your website, so keep the branding consistent. If you want to go above and beyond THAT, work in the error like these folks cleverly did:

play-on-emotions-404-error-page

See, their logo is the dog inside the yellow circle, but on the 404 page he’s missing. How adorable is that?


Reference pop culture / current events

I don’t know anyone who hasn’t seen the original Jurassic Park and understands the glory of this example.

jurassic-park-404-error-page

You might think that using something that’s popular now might not transcend the ages, but I assure you…

…it works.


Play off People’s Emotions

As Gleeson mentioned, hitting a 404 = broken relationship = doesn’t feel good. Well, don’t feel bad — you’re not alone…

sad-baby-404-error-page

…and now how can YOU be sad when you have to cheer up this poor baby?


Self-Deprecating Humor

Why? Because They say that’s the funniest kind.

self-deprecating-humor-404-error-page

Not only are these folks commiserating with the user; they’re also making it fun while humanizing their brand.


Be a jerk…

…but in a funny way! Caveat: only attempt this if it’s part of your voice.

be-a-jerk-404-error-page

I like how they go from absolute jerks to being helpful at the end. Again, beware of this approach if that’s not already your branding voice or style, or this could go very, very awry.


Use it as a conversion opportunity

I mean, the entire point of having a website is to get visitors to DO something, right? Well, if visitors hit your 404, hit them up for something:

offer-conversion-404-error-page

The worst that can happen is they click one of the proffered links and head back to the main site.


Use Cool Photography

As a self-professed photographer, I love this option by iloveicons.ru:

cool-vague-404-error-page

Is it the most helpful 404 error page? No…

…but it’s certainly cool as hell.


Embrace the World of GIFS

GIFs are all the rage across the vast www and it’s become almost a sport to encounter the best ones to answer Tweets, place into blog posts, etc. Heck, they can even work on 404 pages:

gifs-in-404-error-pages

We applaud our Minneapolis neighbors for using this GIF on their 404 — nice reference to dodgeball, too!


Be random.

Because, why not?

be-random-404-error-page

Also — how do you even find an image like this? Gotta love the web.


Make it a game — literally

Everyone loves to have fun. Even better: those of us who grew up in the ’80s love Pac-Man! Ending up on a 404 isn’t fun, but playing a game IS:

have-fun-404-error-page

I must’ve spent 20 minutes on this 404…

…I can neither confirm nor deny that I’ve bookmarked it for future work breaks.


Not sold on the time, effort, creativity and pressure it’ll take to go this hog-wild with a custom 404? Well, then…

…Simply Tell People Why They’re Seeing a 404

You can go all out and design an entire experience on your 404 — or you can keep it simple and create a “you’ve reached a page that doesn’t exist” message and offer visitors a link (or links) to elsewhere on your website:

thinksem-404-error-page

See, here at ThinkSEM we used to have a crybaby 404 (Like, literally a picture of a sad baby. Awww.). But it didn’t get carried over in our recent redesign.

Our current 404 error page isn’t going to win any “Most Creative” awards, but it IS a custom error page, because it’s not the dreaded default and offers visitors many other options.

And that, my friends, is all you HAVE to have: a 404 page that reassures visitors they’re still within the realm of your site — it’s built on the site itself and echoes your branding, design, etc. — even if they’ve opened the wrong door, there are other options.

So, Why Do I Need a Custom 404?

Whether you run amok with creativity to wow visitors with your 404 experience, or you simply tell them what happened and set them back on the right path, you must have a custom error page.

Don’t, for the love of GIFs, rely on the browser default 404. You’ll not only confuse people but they’ll most likely consider the relationship — and/or your website! — to be broken and they’ll move on to something else.

What’s your take on custom 404 pages? Go all-out with creativity or keep it simple?

 

(I’d love to see what some of YOUR favorite 404 error pages are that you’ve run across…)


  • Stephen Slater

    Great post. Custom 404 pages are a great way to pass along your brands personality and engage with your visitor. Here’s one I’m pretty proud of. http://hutchhealth.com/birth-careing

    • sarah b danks

      Awwwwww, cute. At least this baby’s not crying 😉

  • Jaden Madison

    Awesome examples of 404 pages. I’m now inspired to change it for my site.

    • Super!

      Be sure to share the new one here 🙂

Join Our Monthly Newsletter

Filled with industry news, tips, and upcoming events!


Recent Posts

Categories

Archives