We’ve all experienced it more than we’d like. That feeling when you click on a link in anticipation of opening a new web page that did enough on face value to grab your attention, only to be hit with the dreaded 404 error.
Page. Not. Found.
Oh dear, oh dear. If you’re the user you are immediately frustrated or disappointed. If you’re the website owner, the moment you find out that you have a broken link or page is always one mixed with embarrassment and confusion -- “but it worked yesterday!”
However, amongst the disruption, there are often a few hidden gems when it comes to 404 error pages. Rather than following the sheep, some websites have taken the time to turn their 404 pages into an excuse to use a surge of fun or additional information -- pretty smart if you ask me!
Those custom error pages serve as the perfect inspiration for other designers. Of course, the best-case scenario is an immaculate website design that works impeccably each and every time. However, things happen, themes go awry, web servers malfunction and pages break. Thus, a custom on-brand message on your site to lessen the blow and keep your visitors coming back for more after a snafu is imperative. Some 404 pages are so funny that people keep hitting them on purpose, and even share them with their friends!
Table of Contents
The Best 404 Error Page Designs You'll Want To Copy Immediately
After scrolling through the internet in search of errors (as weird as that sounds), there are a few 404 pages that stand out from the others. Take a look -- maybe some of them will inspire your own on-brand design!
1. The Mapped-Out 404 Error Page: BluePath
BluePath works with their clients to “create and implement automated analytics strategies” which help move users away from spreadsheets. While that awesome in itself, they’ve also kindly taken the time to put together this quirky 404 error page.
The page actually shows a map (which you are not on thanks to your stupidity of navigating “off the map”). The copy on the page also says:
“This [map] shows all the reported crimes in Atlanta over the past couple years. Why? Because it’s a crime you haven’t hired us yet!”
Well played, BluePath. Well played.
2. The Snarky 404 Page Error: The Australian
Australia’s leading national news brand The Australian boasts a range of national and global news and business coverage. However, just like the rest of us, they’re vulnerable to the occasional error. In this case their 404 error page.
But rather than submit to the classic “page not found,” The Australian has opted to use the page as a chance to have a sly dig at several Aussie politicians (Donald Trump and a lump of coal also make the list, strangely). Each politician has a quote associated with them and their thoughts on the broken link.
3. The Gamified 404 Error Page: Kualo
Ok. This is might just be the best 404 error page in the history of the internet. Kualo decided to turn their home for broken links into a game of Space Invaders for users to play. Gamification is a great way to turn the disappointed web surfers into very happy content consumers.
Plus, users can intentionally come back to this page just to play the classic game. Since search engines see everything (hello, Big Brother...) they also track users’ time on page. Makes sense – if you spend a lot of time on a page, that means that you really like the content. If you are a repeat user and you keep coming back for more, search engines will map your journey and reward the websites with better ranking!
What’s better? Not only do you get the chance to play the awesome game on Kualo’s website, but you actually have an incentive to do so! If you destroy 1,000 invaders you get a discount on their hosting. All around, this is truly an amazing design and it took me an extra hour to write this article purely because of this page. Hats off to Kualo.
P.S. Can you beat our high score?
4. The Quirky 404 Error Page: The Useless Web Index
The useless web index -- with their highly appropriate name - decided to give us the much-loved meerkat in their 404 error page design. The longer you spend on the page the more meerkats that arrive, so much so that after about 10 seconds there are at least eight of them on the screen.
You almost feel bad for the meerkats who are clearly struggling to find your web page!
Sure, gamification does wonders for your business, but incorporating a video that’s remotely connected to the 404 topics is also a good tactic. People may stay and watch it until the end, making it another great way to increase the time spent on the web page and enhance your overall metrics, even if 404 pages appear.
5. The Illustrated 404 Error Page: Lego
If you’re a Lego fan you’ll enjoy their 404 error page design. As some companies have already highlighted, the 404 page is actually a great excuse to use an erroneous page to reassert your brand or product to visitors.
Lego is actually famous for using various tactics to increase both their customer base and never missing a chance to remind people that they are relevant. They have a series of animated movies, video games, additional content, and more. Lego is there for people of all ages, starting from the baby Lego Duplo bricks to their Architect boxes that let adults build replicas of most famous landmarks.
We didn’t expect anything less for their 404 page. In this case, Lego's 404 page is very illustrative: the ‘cable’ that connected the link you clicked to the web page is broken, and some poor chap has stumbled across it to his horror!
6. The Punny 404 Error Page: Blue Daniel
As part of his portfolio, Daniel Karcher chose to use the 404 error page to showcase his skills even further. He opted for a subway setting, with billboard advertisements using puns and a play on words for a humorous twist.
In his error message, you’ll notice references to the movie “The Missing” and the TV show “Lost.” The latter has graffiti overlayed to ask users the question "are you LOST?"
Since you have obviously lost your way on this 404 page, you get a chance to go back to the main level. Clever!
7. The Adventurous 404 Error Page: Emirates
As mentioned at the start of the article, some companies use a combination of humor and useful information to create a 404 error page that feels more like part of the actual website than a broken section or link.
Emirates are a prime example, who couple an ironic joke with links to their most commonly visited pages. They say, “Sorry, We’ve traveled the globe, but we can’t seem to find this page.” Suggesting that since they’ve been everywhere, the page you’re looking for almost certainly doesn’t exist - d’oh!
Considering the fact that 73.7 percent of people who land on a 404 page leave the site immediately, it’s a great tactic to keep the visitors on your site by offering links to most visited pages.
When people don’t find what they are looking for, they lose trust. In turn, search engines lose trust. And suffice it to say, you don’t want anyone losing trust in your business. Finding a way to turn a bad situation like a broken link can help you assert your business and even impress your website visitors.
8. The Minimal 404 Error Page: CSS Tricks
It’s probably quite embarrassing for a web development or coding website to have a 404 error. I mean, it is their job to ensure these things don’t happen after all - isn’t it?
Regardless, the team over at CSS Tricks managed to turn a potentially embarrassing mistake into a nicely designed 404 page. The center of the page is styled like a ripped sheet of paper, behind which sits the code that should have made up the page you’re trying to visit.
9. The Self-Deprecating 404 Error Page: Cloud Sigma
We can relate to what Cloud Sigma have done with their 404 error page. We always say, when in doubt, just use pictures of dogs or cats to ease potentially bad situations. In this case, the site features a picture of a cat (sorry, their junior developer) attempting to use a computer. It’s well-timed. You can’t help but laugh!
But most importantly, the Cloud Sigma site error also offer you a clear method of escape back to their homepage. If you don’t want people to leave the website entirely, make sure that going back to the home page is always easy and just a click away.
10. The Unconventional 404 Error Page: LimpFish
Lastly, Limpfish used a quirky version of a 404 error page to once again bring a smile to every user's face. Granted, I was a little confused when I first saw this as it seems to be a combination of a dating ad and a genuine tech-related request… I’m not sure which is more apparent. But if you think about it, who needs a good match more than a broken link?
However, the newspaper effect adds a little irony, considering we are operating on the internet. The end goal was a success – they made us smile and chuckle, and we didn’t leave the website as soon as we landed on a 404 page.
Why Are 404 Error Web Pages Necessary?
404 page errors occur when "broken link," or inaccurate URL, takes users to an inaccessible web page.
Sometimes, 404 errors occur when other people or online businesses mention your brand digitally with a broken link. More often than not in these instances, the 404 pages originate when somebody makes a typo in the link, such as adding an additional letter at the end of an URL. Actually, 45.9 percent of the time, people stumble upon a 404 page because of a typo, old link in the email, or old bookmarks that saved a link for a page that has since been removed.
One of the most common 404-page occurrences, though, is when website administrators delete the page altogether when there are still other links throughout their site (and the entire Internet) that point back to the now-disabled page. In these cases, you should remember to disavow links. That means that you break the bonds and tell search engines that those links are broken, instead of letting them learn that on their own and point people to your error pages.
When you want to move or remove content, you need to redirect pages -- that’s what those 301, 307 and 308 redirections are for. A 301/308 redirection is a permanent redirection – whenever someone goes to a former page, they will immediately be redirected to the new one.
However, the 302/307 redirection is temporary. Website administrators use them for several reasons.
Believe it or not, search engines can drive people to 404 pages. For example, when you do a redirection properly, people should land on the page you are now pointing them to. But sometimes, it takes a few days (or longer) for search engines to crawl pages and actually note all the changes you have made. In that short time frame, they might still take people to the wrong 404 page.
At other times, there could be a bug on the website that creates broken links. In that case, you need to ask for help from programmers and developers. After all, one survey found that 17.5 percent of websites have a broken link.
How To Monitor 404 Pages
You should always monitor any potential 404 pages and attempt to fix them as soon as they surface. Luckily, there are tools that can help you find your broken links and deal with them. Some include Screaming Frog, Dead Link Checker and, perhaps the most popular, Google’s own Webmaster Tools.
Creating Effective 404 Error Web Pages
One thing is almost certain – you will always have 404 pages from time to time, even if you do everything right on your site. But the good news is that you can maximize user experience and minimize their appearance by disavowing links, monitoring pages constantly, running website checkers, and more.
When the mistakes happen, we should learn from them. Use website analytic programs like Google Analytics to improve website performance. Track what people do when they land on your 404 page. Then, use this data to your advantage.
If, for example, the next step they take after a 404 page is going back to the homepage, you can place a clear and visible button that will lead them there within your design. Or, if they like to visit the contact page after a 404 error, link there and make their lives a little easier.
Track consumer behavior and information to see what’s working for your website and what your consumers like and dislike. What's better? There is no guesswork with this type of thing – numbers and concrete data about your website visitors will speak for itself.
What To Learn About 404 Pages
By adding an amusing, playful, friendly or gamified aspect that matches your brand identity to your 404 pages, you can keep the visitor on your site and even promote your business further. One notable example, gamification, does cost additional money, but it’s a smart investment that reduces bounce rates.
Apart from the useful 404 pages and tactics we have seen in action above, we have also prepared a list of Do's and Don’ts that should help you turn the accident into an opportunity -- especially because people will always mistype from time to time, and you can’t control that. However, you can affect their experience if they happen to land on a broken page.
Here are some things to keep in mind when creating a helpful 404 page of your own:
- Be honest. Like we said, there will be 404 pages, and sometimes they even won’t be your fault. Regardless, make sure to explain what happened and offer ways to repair the situation and help people find what they are looking for.
- Don’t miss the opportunity. Add some humor and brand personality so that people don’t leave frustrated – or don’t leave at all.
- Engage users. Let them play a game if your budget can support it. If not, there are several ways how you can increase engagement. Add a cute video, illustration or animation. Try to lighten the situation – if all else fails, cute animal pictures and videos will work too.
- Stop them from leaving. Every website visitor that leaves is a missed opportunity to convert a lead into a customer. You can add relevant links to the most visited pages or embed a search function on the 404 page so that they can browse your website.
- Add an incentive. Some brands offer incentives if you find their 404 page. This way, you can even collect more leads. For example, you can offer a newsletter sign-up, free content like an e-book or a case study, and more.
- No advertising. Well, not in the traditional sense. If there is a mistake on the website, and people land on it, don’t try to oversell or let them think that perhaps you are leaving the 404 page on purpose.
- Quick loading. If people do land on a broken page, you don’t want them to wait forever to find that out. Good loading speed is recommended for all other pages on your website as well. Bounce rate keeps increasing with each added second of wait time.
- Don’t use complicated tech terms. The goal is to try to keep users on your website, not drive them further away with complicated lingo and unnecessary terms.
- Don’t forget to monitor your broken links and fix them as soon as possible.
Page Not Found... But The Conclusion Is
Each site's 404 error page design takes the mishap and transforms it into an opportunity to further build brand loyalty. Through creativity, stellar design and a bit of sharp wit, your website design won't have to worry about errors either -- it will all just be an extension of the company's offerings.
Our final tip: Pull out all the stops for you 404 page because that 73 percent of people that leave after landing on a 404 page represent 74 percent of lost potential customers. Those are your leads getting away, and a custom 404 page just might make them stay and browse more. It’s not whether you should have a custom 404 page or not. The question is, can you afford not to have one?
