How to create an awesome error 404 page

Don’t Waste Your Error 404 Page!

(Source)

It’s happened to the best of us: We click on a link, only to be let down by big “404: Page Not Found” message.

But can you think of a time when you landed on one of these pages and the result made you laugh or actually led you somewhere useful?

I can, and it’s great. Plus, laughing releases oxytocin, a chemical known as the “bonding hormone” – making your visitors laugh also makes them more likely to like you (or your brand)!

In this post, I’m going to give you a few tips for creating an awesome 404 error page right now and show you a few examples to motivate you!

Let’s dive right in.

Related Reading: Designing the Perfect Opt-in Offer

What Makes a Great Error 404 Page?

When it comes to making an error 404 page that really stands out, it needs to do three things:

1. Match your site’s design

When creating a 404 page, don’t make it look so radically different from the rest of your site that people don’t know it’s you. Use similar colors, fonts, and styles as the rest of your design.

2. Make it obvious there’s an error

This sounds like a no-brainer, but don’t get so creative they don’t realize they’ve made it to a broken link. Include the usual “404 You’re in the wrong place” message, but give them more.

Some typical wording includes:

  • 404 Not Found
  • The requested URL was not found on this server.
  • HTTP 404 Not Found
  • 404 Error
  • The page cannot be found

3. Link to useful stuff

Give them an obvious next step so they’re not left wondering what to do next! This could be as simple as returning to the home page, but I recommend adding links to your blog, popular pages, and any other resources you think they might like.

Resources to Help You Make a Better 404 Page

If you use WordPress, they’ve written a guide to help you create your 404 page.

Images and design will be a large part of your page, so you’ll want to make at least one good image. Here are a few resources to help you make your page the best it can be:

  • Canva – Easily create images of all shapes and sizes for free.
  • Fiverr – Hire a designer for as little as $5.

Canva screenshot

Related Reading: Warning: Your slow site load speed is a killer

5 Examples of Great Error 404 Pages

Need a little inspiration? Here are five of my favorite error 404 pages:

1. HubSpot

HubSpot Error 404 Page

I love HubSpot’s broken link page because it’s simple, to the point, and blends in well with their design. It also has a link to their blog, their product, and a signup form.

2. Blizzard Entertainment

Blizzard Entertainment 404 Page

Blizzard’s 404 page speaks really well to their target market: gamers. It’s clever, fun, and uses gamer lingo. Oh, and the broken menu is still clickable!

3. Magnt

Magnt 404 Error Page

Magnt’s 404 page actually went viral. It’s creative, clever, and includes a call-to-action button (return to the home page).

4. AirBNB

AirBNB 404 page

I love AirBNB’s page because it’s animated… and heart-wrenching. No one likes dropping their ice cream.

5. GitHub

AirBNB 404 page

GitHub speaks to their Star Wars fans with this one. What’s better: They put their search bar right there to entice you to continue.

Since we first posted this article the team at carwow passed along their take on the 404 page.  It’s an interactive 2d car game to test your driving skills. You can have a play at  https://www.carwow.co.uk/404

And then there’s this.

Now it’s off to you. Have you seen any great 404 pages or did you make one you’d love to share? Post the link in the comments below!

3 thoughts on “Don’t Waste Your Error 404 Page!”

Leave a Comment