5 Best Custom HTTP Error Pages

HTTP errors are very common, whether it’s due to server or client issues. They come with black-and-white pages that don’t look appealing — turning away potential customers and hurting your bottom line.

However, it doesn’t have to be that way. You can make custom HTTP error pages that will direct users to take particular actions instead of leaving your site.

I’ll show you five of the best custom HTTP error pages that successfully seize the opportunity to use intentional design and strategic copy. These delightful and witty pages can, if nothing else, make your visitors smile wryly, shake their heads, and head back to the start.

Let’s get into it.

Why Do We Need Custom HTTP Error Pages?

So, why do HTTP error pages matter? Isn’t it enough to simply let the user know they’ve arrived at somewhat of a dead-end and turn them around?

Well, sure, you can do that, but you risk ruining your site’s user experience. And, with tons of competitions out there, these small things might just be what you need to separate you from others.

The most common errors, according to Google, are the following:

• 401 Authorization Required — a website visitor is trying to access a restricted page (usually due to a failed login).
• 400 Bad Request — the client sends an incorrect request to the server. As such, the server cannot process it. Double-check the URL and clear your browser’s cookies to fix the issue.
• 404 Not Found — the server cannot find the page you’re looking for. It could be because of a broken link, mistyped URL, or a page that has been moved.
• 403 Forbidden — you have no access to this page. The website might not be available in your country, or you’re trying to access the site’s hidden file.
• 502 Bad Gateway — occurs when the gateway server receives an invalid response from the upstream server. To know more about this issue, learn how to fix 502 Bad Gateway in WordPress.

5 Clever Ideas for Your HTTP Error Pages

Many successful custom HTTP error pages incorporate the ideas I’ll discuss here. You don’t need to use all five, but feel free to use as many as you can, naturally.

1. Suggest The Right Page

You may not immediately know which page the user intended to visit, but they’ve clearly stumbled upon a page they need to clear out from.

So, do what NPR (National Public Radio) does: suggesting a whole slew of related and equally engaging articles. The articles’ thumbnails are placed against a white background that can draw the visitors’ attention.

It doesn’t stop there. NPR also encourages readers to take several actions that will make them stay. Users can search for the page they’re looking for, report the page as missing, or browse the homepage to look for other related articles.

These suggestions empathize with the user’s confusion and let them know that there’s an outlet for their frustration.

2. Don’t Focus On The Mistake

Part of the issue with error messages is that they cause instant confusion and borderline panic within users. They are not quite sure what they did or how they arrived where they are now.

To reassure them that there’s nothing to be worried about, simply state the error and offer a solution. The game distribution platform, Good Old Games, has a great example that demonstrates this principle.

The small bear in the corner explains that the page does not exist, implying that the page has been moved or deleted. They can report the error by clicking on the provided link. Alternatively, it also says that the user might have mistyped the URL.

3. Align It With Your Brand

Treat error pages the same way you would other important pages. Create a design that matches the purpose and visual identity of your brand.

BitLy’s error page, for example, is a rather clever one, but it’s not at all on-brand. While it’s amusing and features some fun animations, users would not know that the blowfish and seagull are referring to Twitter’s original Fail Whale. This error page is a nod to that legacy, but it’s not on-brand with the rest of the page.

Contrast that with CSS Tricks, a website that offers CSS courses. The top part of the page explains what the visitors need to do, while the bottom half shows that the page has been ripped off — displaying a bunch of CSS code beneath it.

4. Use The Error As A Way To Connect With Your User

See your error page as an opportunity to increase sales. And there’s no better example of this method than Lego’s error page.

Your entire screen will be filled with a close-up snapshot of a surprised Lego character. Aside from a short text explaining what’s happening, you’ll only be greeted with a call-to-action button leading to the Lego’s shopping page.

Should you need any help, you can scroll down a little bit to find the link to its customer support page.

5. Don’t Be Afraid To Use Humor

Puns, inside jokes, and punchy humor are a great way to tickle your user’s emotional intelligence and connect them with the brand. Take IMDb’s error page, for example.

There’s nothing flashy with this page. The design is minimal, and users are directed to the site’s homepage.

What makes this page stand out is the use of a random movie quote. It’s a slight modification of the original quote, which says “Where’s the money, Lebowski? Where’s the money?” This inner joke will no doubt raise a quiet chuckle from moviegoers who browse the site.

Conclusion

The best error pages are those that are non-cluttered, simple, and effective in their message’s delivery. They reassure visitors that there’s nothing to be concerned about, provide a link to guide them back to the homepage, and have a great design. And, depending on your brand, you can make it professional or funny. The choice is in your hands.

Simon Dwight Keller

I am a digital marketing entrepreneur eager to drive tons of traffic to your website with creative and compelling content.  After three years of hard work as a freelancer, I decided to take up my services to the next level, I co-founded a digital marketing company PRable. Eventually, I felt that in order to achieve more, I had to start my own company – SDK Marketing. With my small albeit professional team I am ready to take on new challenges, increase your traffic and drive more revenue. Besides my burning passion for SEO, I am interested in ice hockey and traveling.

If you would like to know my story, visit my page – https://simondwightkeller.com/