DELIVER BETTER EXPERIENCES
By Cameron Chiechi
Web surfing is awesome.
404 page best practices
Being told ‘nope, try again’ is not.
Own your mistakeMistakes happen; that’s life. Might as well spin it into a positive. There's an opportunity here to align your brand with a favorable message, or at least give visitors something to occupy their time. Create something cool, funny, unique, or just plain fun.
Provide a seamless exitRegardless of what you do with your 404 page, it should work to keep readers on your site. Offer them options for how to proceed! Provide a clear call to action that sends them to a working page. Or include links to your best content to encourage folks to browse around the site.
Stay on brandYou can have fun with your 404 page and still stay on brand. Visitors should be able to recognize the company behind it. The point is that you want to salvage the poor experience and be remembered for it. You can't be remembered if your branding gets lost.
ThinkDon’t forget about the massive audience accessing content via mobile devices. Add a ‘pinch and swipe’ experience on top of a broken link, and you’re basically telling consumers you just don't care. Create a mobile-friendly 404 that’s mobile-friendly and fast to load.
Don't optimize for searchMake the 404 page return a 404 HTTP code to avoid it from showing up in search results. And don't use a 301 redirect - it will save you some face with your visitors. Instead, offer an informative and engaging 404 page that puts them in charge of the navigate.
Limit your 404s to begin withThere’s a few different tools you can use that will scan your web content for any broken links.
Link Sleuthare two good ones. Google Webmaster Tools will also help.
NPR’s landing page artfully directs visitor’s attention away from the error and instead toward (working) content assets. The 404 reads, “It's a shame that your page is lost, but at least it's in good company; stick around to browse through NPR stories about lost people, places, and things that still haven’t turned up”. It’s fun, unique, and clever. Mostly, it’s a delightful surprise to visitors who might have otherwise felt sour about the bad link. You almost can’t help but browse through these quirky mini-stories.
For this 404 page, American politician Bernie Sanders does the dirty work himself. Within the 404 is an embedded video starring Sanders, in which he lets visitors know they’re in the right place, just on the wrong page. Sanders then offers detailed instructions for how to navigate to actual working content. This is a great example because it’s personalized and reinforces the face behind the brand. The choice of using multimedia rather than static text is a smart one, especially for the politician. And, as an added bonus, Sanders includes a CTA asking viewers to ‘Join Us’ with a simple signup form attached. You can watch the full video,
Stylish design paired with simple animation makes for a nice looking 404 page. Just hover over the objects and see the scene come to life. The choice of a cold color scheme (which produces a nice calming effect) is probably not coincidental either. Bitly, a URL shortener and link management platform, clearly understands the importance of having a 404 page that helps, rather than frustrates. The 404 text reads: “Uh oh, Bitly couldn't find a link for the bitly URL you clicked. Most Bitlinks are 4-6 characters, and only include letters and numbers (and are case sensitive).” This gives visitors guidelines to identify what might have gone wrong. This is very important, especially for a company whose entire business model runs on links. Finally, at the bottom of the page are (working) links to the company’s blog, homepage, and contact information that make for a solid exit strategy.
404s that make us laugh
The idea behind these 404s is quite simple: make the visitor laugh. By using recognizable figures and references, these 404 pages take the user's mind away from the mistake, even for just a moment. This type of engagement can make the difference between a
completed call to actionand a drop off.
We’ve all seen this page before: it’s your good ol’ 404 page. It means your link is broken, and visitors are probably fairly annoyed. While this isn't completely avoidable, there are steps you can take to remedy the issue. For instance, instead of delivering a 404 page that takes your visitors back to 1999, give them something they can engage with. Incorporate something interactive or make a funny and relatable reference. Breathe some life into your boring 404 page, and make the most of a less-than-pleasant experience. This way, you have a fighting chance of keeping visitors around. And that’s all you need: an incentive to keep them hanging on. This takes some creative thinking, so we’ve gathered 15 awesome examples to get the ideas flowing. But first, some best practices to keep in mind.
Nicely branded 404s
Lionel Richie, the undisputed king of adult contemporary, broke the charts with his 1984 single “
Hello”. He’s since returned to make sure you don’t waste your time broken links. Clean and simplistic, this 404 page gives visitors a central CTA that sends visitors to the company’s home page (see: ‘Go home Lionel, you’re drunk’). Or, visitors can click the Menu icon for more options.
ONMedia uses a Breaking Bad GIF to hold visitors’ attention; Breaking Bad fans will never forget this classic scene, where Walter White takes out his frustration on a pizza... by throwing it on the roof. The television show has a massive audience and scores of dedicated fans. By choosing this precise moment in the series, ONMedia demonstrates a relatability with its own audience that visitors can appreciate. In addition to the main CTA (in yellow), there are numerous options in the top navigation and in footer.
Teehan + Lax
If you’re a fan of awkward headshots, you’ll get a kick out of this 404 page. This otherwise ordinary looking man holding a giant Pikachu is so absurd, visitors can’t help but stick around. The attention goes to the image, not the error. Visitors who linger here will also notice the hand-pointer icon pop up. Click anywhere, and woah!—more amusing headshots like these:
These poor fashion choices and hairstyles from yesteryear are even more jarring on mobile (a reminder to design with your mobile audience in mind).
The plan here is to remove the annoyance of 404s by creating an interactive experience. These companies offer people the option to stick around and have some fun before moving on, and are thereby least likely to have a high bounce rate.
404s with good exit navigation
This group’s strength is its exit navigation, or the instructions given to the visitor for how to best navigate away from the broken link. These examples work because they give clear calls to action and offer visitors a variety of methods for navigating to more content. Here are some of my favorites:
Yes, Blue Fountain Media, I do want to play some Pacman instead. The agency takes a fresh approach to the 404 by inviting visitors to have some fun with a game of Pacman. It’s definitely distinctive and, honestly, addictive. It also says something about the company and the kind of people who work there. This 404 shows visitors that it’s OK to have a little fun. Extra points for the decision to use Pacman when they could have chose anything. The game is nostalgic to many and recognizable by most. In the case you can bring yourself to stop playing, you’ll see loads of helpful links to help navigate you to the intended page.
Here’s a nice example of an interactive game that ties in the product. For its 404, KitKat created a digital version of Ping Pong which uses actual KitKat bars as the paddles. Incorporating the product into this 404 is a very cool way to further promote the brand and its delicious chocolate bars. The 404 is also a nice way to show visitors, ‘We like to have fun here, join us!’ Furthermore, the supporting copy is witty, cute, and engaging. It reads: “Darn. You’ve stumbled across the only kind of break we don’t like. For some reason, this link is broken. Maybe it was your fault...maybe it was our fault? But let’s not dwell on whose fault it was. Let’s just put this down to a bad experience and move on.” It’d be interesting to see how many folks play rather than jump back to the company homepage. My guess is many folks stick around (hey I played 3 games before moving on!).
Sometimes the best way to improve your own bad time is to ruin someone else’s good time. Emailcenter gets this. On the company’s 404 page, visitors get to play Donald Trump and say, ‘You’re Fired!’ to one of its four developers. The supporting copy says, “One of our Development Team must be punished for this unacceptable failure!” Take your picking and see their reaction!
For those in a forgiving mood, there’s the option to return to the homepage or visit any of the links in the top navigation or footer. This is a unique, humorous idea that keeps visitors around.
The larger your brand is, the harder it becomes to speak to a wide variety of consumers. These companies have to appeal to the lowest common denominator, yet still manage to make awesome 404 pages that both inform and delight.
Here’s how you can come up with a simple, clever message that works for a broad audience. Heinz pairs a straightforward gag with a few links to get you back to working content. The company succeeds in giving visitor a reason to chuckle, and also offers them a variety of ways to get back to real content. A great example indeed, though I’m not sure an empty ketchup bottle would really be that spotless.
Another visually compelling example from a large brand. Angry Birds (Space) keeps their look and feel consistent by choosing the same theme for the 404 page as its main page.
Using the iconic pesky pigs works well for the brand’s 404. There’s just call to action for visitors: click the green arrow. This sends users to the app’s launch page, which is a whole experience in itself.
The iconic sportswear and football (soccer) company Umbro takes a witty spin on typical playing formations by demonstrating and describing ‘formation 4-0-4.’ (Psst..that’s when a team leaves out two of its players in the hopes of duping the opponent into losing.) Using a bit of trickery themselves, Umbro makes visitors forget about the letdown and then offers a clear-cut escape route. This is a very on-brand message that sports fans are likely to find intriguing.
404s that break the fourth wall
The Fourth Wall is a concept that comes from theatre and literature. It’s a concept where characters in a play become aware of their fictional nature and address the audience directly, breaking the barrier between the two. The following 404 pages create characters that do just that. The goal here is to use psychological triggers to draw visitors in and then direct them elsewhere in the shortest amount of time possible.
Cuban Council makes you feel like you’ve witnessed something you weren’t supposed to. It’s a powerful psychological trigger that grabs attention and quickly shifts it elsewhere, effectively navigating visitors off the page. The use of dark colors helps create the uncomfortable scene and gives viewers the impression that the page is somewhere they don’t want to stay. By creating this strange character and witty supporting copy, the 404 page is successful at breaking the fourth wall.
We Are Spry
This is a really nice example of what a background video can do for your 404. This adorable creature gives some serious puppy eyes that you can’t look away from but also want to escape, and fast. The page points visitors to the company’s homepage with a clear CTA centered on the page and additional options for further exploration at the top.
In this example, the eerie scene gives the impression that you’ve reached death’s door by landing on this 404 page. Since most people are frightened by such a scene, this is a good psychological trigger to target. The simple CTA lets visitors go back to the main site, which thankfully, breathes in some life.
A 404 page is a surefire way to lose visitors (and potential customers) -- unless you can offer them a reason to stay. Be original with your 404 page. It can be a fun creative outlet for your team, and it gives you a chance to relay a bit about your company’s personality. Your bounce rate will thank you, and who knows, your 404 might save you from losing the customer of a lifetime.
404 Pages: Best Practices And Examples To Steal From
Cameron ChiechiCameron specializes in growing Readz social media & sales outreach. Freelance problem solver & subtly charming intrapreneur. Celebrates a job well done with a tip of his fedora.
Actionable marketing advice, delivered weekly.
Join thousands of subscribers who get our best content first.
No charge. Unsubscribe anytime.
Back to Menu
DELIVER BETTER CONTENT EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Drag-and-drop content creation, integrated marketing tools and performance analytics, all in one platform.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
TALK TO US
DELIVER BETTER CONTENT EXPERIENCES
Like what you saw?
Get articles like this one in your inbox every week.
No charge. Unsubscribe anytime.