Blog

Elements of a Great 404 Page

Posted by in Content Strategy, Design, Web Development

404 page twee graphic

404 is the error code that a server gives when it can’t find what a visitor is looking for. In this post we explore why your 404 page can make or break a visitor’s opinion of your brand.

How your website is setup to respond to 404 errors can mean the difference between frustrating visitors or exceeding their expectations, and ultimately, acquiring a customer for life, or losing one forever. Even though that sounds like a big deal, 404 pages are relatively simply to set up, design, and create content for. Three members of the Mightybytes team—a designer, a developer, and a content strategist—have collaborated here to give you their thoughts on best practices for strategizing, designing, and deploying a great 404 page.

Having a 404 Page is Good Content Strategy

People usually arrive at your 404 page because they’ve mistyped a URL or because you’ve moved or deleted content without setting up a redirect. In either of these two cases, you don’t want people who are so close to interacting with content on your site to navigate away now. A good 404 page will help redirect those people to content on your website that they will find useful.

visit montana 404 page screenshot

Visit Montana’s 404 page design is stuck in 1998, but they do a good job of redirecting visitors to useful site content in the right sidebar.

Here are three ways to think about doing this:

  1. Link to the most popular content on your website.
  2. Provide visitors with a search bar so they can find content on their own.
  3. Direct visitors back to your home page.

There’s no need to over-think the 404 page. The only thing you really want to do here is direct visitors back to a useful part of your website. Good design (not seen above) can help with that.

Designing a Great 404 Page

Great design can make a 404 page more engaging, help direct visitors to better content, and alleviate frustration. Let’s take a look at three design elements that make for a great 404 page.

Humor

screenshot of mailchimp 404 page

Mailchimp’s 404 page uses a dash of humor to help set visitors on the right path.

Coming up empty-handed when looking for content can be frustrating, so it’s pretty common to try to lighten the mood with a joke. While this is pretty safe, use humor within reason. You don’t see the White House pulling out the punchline drum roll when you’re lost. But a company like Hatched London can get away with something edgier.

Branding

A 404 page gives you an opportunity to highlight your brand. In addition to just having your logo in the header, you can pull your brand standards, or even a product, on your error page. All exposure counts, so why not turn a problem into an opportunity? Heinz does a good job of this, as does Lego and Mattel, with their Magic 8 Ball.

Visually Explain the Problem in an Easily Digestible Way

Magnt Venn diagram 404 page

Magnt doesn’t assume everyone knows what a 404 page is, so they explain it with a graphic.

The internet’s been around for a while, but you can’t assume all your users know what a 404 error means. A simple explanation of what’s going on gives you the opportunity to build user trust, like Orange Coat did with this flow chart or Magnt did with their Venn diagram (above).

How a 404 Page Works

Servers use numbered codes to denote different things: 200 means the server successfully found the page you’re looking for, 301 and 302 are used for redirecting from one page to another, 500 is for catastrophic, apocalyptic failures (ok, that might be a tad dramatic), and 404 means that the server simply can’t find the page that you want.

When Does a 404 Page Occur?

Let’s say a user visits www.mightybytes.com/blog/this-is-a-fake-page. The server will first look for a page at /blog/this-is-a-fake page. If it finds it, it will serve up the page and feel good about itself (200). If not, the server will look to see if there are any redirects set up. If it finds any (301 or 302), it will redirect the user to that page. If there aren’t any redirects, the server will send the user along to the 404 page.

Development Tips for Your Website’s 404 Page

  • Consider using your 404 page to automatically collect information about your user. Using the PHP $_SERVER variable, you can find out and log valuable information like what page the user was attempting to access or what browser and OS they’re using.
  • Turn your 404 page into another way to interact with site visitors. Put a contact form on the page so that they can send a heads up about the problem.

Your 404 page can easily become one of those things that gets lost in the shuffle as you careen toward a website launch. Hopefully we’ve shown in this post why paying attention to the experience your 404 page offers is one of those details that shouldn’t fall through the cracks. 

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on Twitter or get in touch via our contact form.