Here at Octopus Ink we talk a lot about the importance of website user experience – and nothing detracts from a positive one like landing on a 404 error page.
A 404 error is the message displayed when a user tries to access a page that doesn’t exist. When a website gets updated or rebuilt, it’s very common to see the site map change, sometimes quite significantly, which can result in “missing” pages. Specific page URLs are often updated or entire pages may be done away with altogether, leaving a hole where the old page addresses once was. But wait – these page addresses were once available to the public, to be shared, posted and bookmarked all around the World Wide Web gasp!. If anyone tries to access that specific URL now – BAM! You’ve got yourself a big ol’ 404 error page.
The best way to avoid old inbound links landing on a 404 error page is to ensure proper redirect rules are in place to get users to an existing and relevant page on your site. But gosh darn it, the world isn’t perfect. From typos, to broken internal links and URLs that were just plain missed, 404 error pages are unavoidable.
While a broken website is no laughing matter, some companies are having a bit of fun with it. Given a chance to show off some quirky brand personality, these brands have taken a tongue-in-cheek approach to the otherwise mundane page. Plus making light of the situation provides a little unexpected entertainment for your visitors, adding to a unique user experience.
So we’ve asked our team to compile their favourites. The Octopi have conferred, and the results are in. Here are our favourite 404 error pages from across the web (in no particular order):
1. Tumblr Has a GIF for Every Occasion
Animated GIFs are part of Tumblr’s DNA – there’s no surprise that these fun looping images found there way into the social blogging site’s 404 page!
Tumblr has become somewhat of a creative hub on the Internet, drawing people with interests of all sorts, from art and music to animals and video games. With a 404 page that’s different every time you land on it, Tumblr pays homage to its wide-ranging and sometimes seemingly random user-generated content.
We like their cheeky copywriting too.
2. iStock Couldn’t Sniff this One Out
iStock expresses it’s remorse when it can’t find the page you’re trying to reach.
iStock is a stock images website where users can search through thousands of photos, illustrations, video and more. But if you happen to search for something that isn’t there, you’ll be met with their 404 error page. It’s to the point, apologetic, and the dog is pretty cute too. They even offer any do-gooders a link to report to customer support.
3. Google is Straight Up
When Google’s in disrepair you know something’s gone wrong. It helps that their error page is honest and straight-forward about its condition.
Google is pretty minimalistic, and its 404 error page is too.
Is that a glimpse of the infamous “Google Bot”? Read more about our love/hate relationship with those elusive bots in our blog post about SEO best practices.
4. OkCupid Knows Where Your Lost Socks Went
Things are looking pretty bleak over here, I hope your dating life has better luck.
There is nothing like floating in an abyss with a killer whale (a homage to the Twitter Fail Whale perhaps?), some socks, and a sad coffee cup to make you feel lost and lonely. And there is nothing like a dating website to make you feel better, we hope. Despite the shameless “sign up” plug, this landing spot seems fitting for all things missing on the web.
5. Bitly’s 404 Page Incorporates Their Mascot
Bitly is a URL shortener service that can convert your long complicated URLs into smaller ones for sharing on social media. Back in the days of golden age of Twitter’s 140 character limit this service was a life saver!
Bitly’s cute 404 page may be seen more often than most websites, as their service is dependant on precisely correct URLs. The company seized this opportunity to familiarize users with their pufferfish mascot, which can be clever brand reinforcement for a service that is largely invisible to the end user.
6. CSS Tricks Exposes Itself
An error on CSS-Tricks exposes the underlying CSS code! Oh No!
It’s like a little glimpse into the matrix. CSS Tricks reveals what’s behind the curtain in their basic display. We needed our full stack web developer to translate for us, but if you’re visiting a website called CSS Tricks you can probably decipher it for yourself.
7. Lego Unplugged
Adding the brand’s character to their 404 Page, Lego simplifies the problem for their demographic.
Not only did Lego impress us with their ability to stay relevant in a changing toy industry (transcending into video gaming and with production of the hit Lego Movie), but they also thought of a clever 404 error page. And they even reassure their young users with confidence that everything is STILL AWESOME! Thanks Lego!
8. GitHub Uses the Force
Software developers will totally get the nerdy humor on Github’s interactive 404 page.
GitHub is essentially a network that allows users to collaborate on and manage software development projects.
What better way to entertain its visitors (read: nerd community) than with an adorable Star Wars reference? The handy search bar lets you take another gander for what you’re looking for, or you can choose from the links they provide for more info.
Whether clever, cute or comical, these pages help ease the shock of being somewhat lost on the web. Users don’t actually intend to get here (unless you’re writing a Blog post about 404 error pages), so it’s important to making the experience as painless as possible if they happen to arrive on this page. Some key pointers for creating a successful 404 error page include:
- Give a means to contact you or report the error.
- Offer handy links can help bring them back to the meat of your site.
- Include a search functionality to enable an instant do-over. Let’s try this again!
- Adding a simple and sincere “Sorry” can go a long way.
- Code in an auto-reporting of the error to be sure your web team can get on a fix for it.
Did we miss some of your favourite 404 error pages? Let us know, we’d love to check them out.