When we think of website development or design, we usually focus on main pages like Home, About, Contact, and Shop/Store. But we don’t really put much effort into the 404 page.
If you don’t know what that means, here’s a simple explanation. As your site grows, you may delete, modify, or transfer/move some pages without redirecting them, which would lead to broken links on Google or social media.
Alternatively, someone might type in the wrong URL or go searching for a page that doesn’t exist in the first place. Lastly, your servers may be down, which would prevent people from accessing the content.
For all these scenarios, your visitors should ideally land on a backup page that notifies them of the error, universally referred to as 404 (official code).
Unless you set up this special page manually, prospects will just be greeted with a blank broken whiteboard page, which might prompt most of them to abandon your site. This will lead to a loss of traffic, a decrease in your Google Ranking Score, and a drop in conversions (sales).
It should be clear by now why 404 pages matter to your SEO (Search Engine Optimization) as well as basic user experience (UI/UX). If you’re wondering how it looks, here’s a generic example…
My Case Study
The screenshot I shared above works as a basic template that gets the job done. But you’ll agree when I say it’s too vanilla and boring. This is a lost opportunity to stand out from the crowd, and do something creative that people will remember.
Like any other marketing touchpoint for customers, you should infuse it with your personality and align it with your brand’s communicative tone.
At the same time, giving proper directions & suggestions might actually help people navigate to the correct destination, and/or increase your product sales through an unexpected avenue.
So keeping this philosophy in mind, I set out to create a cool 404 page for one of my little ventures; the aim was to make it creative and functionally useful at the same time. The website in question is Snugo (www.snugo.in).
For context, Snugo is a social startup that sells quirky merchandise to raise funds for the welfare of stray dogs & cats in India. When you shop with us, we donate 50% of monthly net profits to registered animal NGOs in Mumbai.
These funds are used to rescue, treat, feed, sterilize, vaccinate, and rehome poor street animals in need. We have over 60+ local products, ranging from tees & hoodies to utility items like mugs, notebooks, and masks, and tote bags.
Currently, the venture is in its initial testing phase, but we should be fully open by year-end.
Coming back to the point, here’s what would happen if you land on the wrong page when browsing our website. You’ll be redirected to our 404.
The page is split into 3 parts. The first is a funny heading and subtitle confirming that the visitor is lost. The second part below it has a search bar and a CTA button to visit the home page from where they can start navigating the site again. The third section has useful links which might solve the person’s problems.
Let’s look at the logic behind each of these elements, and understand why they work well.
Elements of a Smart 404
First, you need to ensure the page is in alignment with your overall brand tonality and website’s personality.
If you’re a chocolate manufacturer for gym-goers, you probably have a flashy website with charged & upbeat copy. Your 404 page can’t be bland or corporate. So the design, photos/media, and the copy should all work in tandem to deliver a unique effect.
In my case, I know my website’s target demographic will mostly be animal lovers and pet owners, so my headline would probably make them chuckle.
If you read my copy for the links section at the bottom, it’s deliberately funny and casual as well because it fits well with my audience.
I’ve provided some more examples of highly relevant 404 pages below, which will help you nail this point.
Secondly, you need to give people the freedom to search again, which will need you to include a search bar below your title & subtitle. For visitors who are unsure of what to search, keep a CTA button to redirect them to the main home page, which is a safe option to begin their journey all over again.
Thirdly, you must anticipate what your visitors may be looking for, and suggest resources that would solve their problems.
For example, I’ve listed 3 links: Contact Us, FAQs, and Product Collections. The Contact page is for those who are looking for a complicated solution, and thus want to get in touch with us directly to get their problem solved directly.
Similarly, visiting the FAQs section should resolve the most common queries that people usually search for on our website.
If you’re an educational site or SaaS service, you can embed a list of tutorials or videos addressing people’s common pain points, concerns, or queries, based on web traffic data you’re receiving from Google Analytics.
The last link sends them to our Product Collections. It’s possible that they searched for a certain product but couldn’t find it. In that case, the idea is that showing them collections (categories) of each product might make their search easier, and also increase the chances of a direct purchase.
If you have some items you want to push, you can have a string/row of them in place of this link as well, so that users can directly visit the dedicated landing pages for subscription packages or on-sale products.
How to Deploy a 404
If you’re working in WordPress, your theme might have this option in-built, so all you may have to do is go to Appearance > Customize > 404 Page.
In some themes, the option may be available in the Settings menu. In that case, just create a normal page like any other, and assign that URL to function as the 404. This is how I did it for my Flatsome WordPress theme.
Contact your theme’s developer to know more about how to set it up. They may ask you to edit the .php file inside your theme files, which may need a bit of coding knowledge or technical know-how.
Nowadays, you’ll also find Plugins that make this process easy, so just search “404” in the Plugin Directory to find the latest free options.
If you have an independently hard-coded website, talk to your developer to set it up manually.
Examples of Great 404 Pages
I didn’t come up with this idea on my own. Prior to building the website, I’d researched each element of websites by popular brands, big and small. In my journey, here are some cool 404s I came across.
1. Backcountry
Backcountry is an outdoor gear brand, so the image and copy on their 404 are well-aligned with their core purpose/product. Both the headline and subtitle put a big grin on my face.
Moreover, since they’re heavily leaning on e-commerce sales, they’ve included an entire catalog of links below the headline, which should help most visitors find the product page they were looking for.
2. Mantra Labs
Mantra Labs is a consulting business software & solutions agency that specializes in deep technological innovations & engineering. So their clientele is pretty upper-class & serious.
As such, they’ve designed their 404 to look suave and clean, yet true to the overall space-y theme that pervades the website. I like the astronaut animation and the accompanying copy.
But the highlight is they’ve set up a timed auto direct to the home page, saving visitors the manual effort to click and navigate back manually.
3. Disney
Disney’s 404 is pretty on-brand, too. They’ve chosen to refer to one of their popular movies, Wreck-it-Ralph, whose protagonist cartoonishly breaks through the “digit 0” in the middle. Their copy is fitting but manages to get the message across.
Of course, they didn’t forget to include a search bar at the bottom, enabling lost visitors to look for specific content on the site.
On a side note, they’ve recently changed their 404 to feature Monster University’s Mike Wazowski’s and the copy is apt for the movie. I still prefer the original one, though.
4. Trip Advisor
Trip Advisor has a modern & effective animated 404. Since it’s a travel-related site, the copywriting jokes about how they’ve lost their page but still kept your luggage secure as it is. So I’d say the execution is spot-on and it certainly made me laugh.
I like that instead of having too many links, they’ve placed 4 CTA buttons on the most important sections of their website: Hotels, Restaurants, Things to Do (Activities), and Holiday Homes.
The accompanying graphic animation is simple but engaging enough to keep the visitor interested.
5. Carwow
Carwow takes 404s to a whole new level. They’ve set up a fun street car racing game, which is clearly an ode to Google’s popular pixelated dinosaur game (which you get to play when the internet connection is down).
This gamification gives visitors a chance to lighten up & have some fun before they move to the page they’re actually looking to visit. It reduces their chances of immediately abandoning the website, bringing down the bounce rate. Also, it smartly increases their total time spent on the site, which will inevitably lead to higher conversions.
Below the game, you have the option to either visit their Car Chooser tool, which is a more direct & aggressive approach in comparison to taking all the traffic to a generic homepage. That’s the second option in case you’re not interested in the former.
Overall, this is the best one I’ve seen until now.
6. Zomato
Zomato is known for its masterful marketing on social media, emails, OOH, and all other channels. They really are the kings of the Indian brand space, so I was certain they’ll have an interesting 404 page, too.
And boy, they didn’t disappoint.
Zomato’s 404 gives you the option to choose between prude & crude copy. The first is clean but the latter contains strong language. Both are written in the form of a short rhyming poem.
The brand humbly acknowledges that the user is clearly hungry and in no mood for such sh*t.
The accompanying design shows a grumpy monster standing in front of an empty fridge, which is probably how the lost site visitor is feeling.
So overall I’d say it’s a pretty empathetic page that manages to get a laugh out of you in an instant, just like their food deliveries!
7. Email Center UK
When you’re a B2B product, it can be hard to crack jokes without losing the seriousness of your business. But this 404 from Email Center manages to pull it off in style. It shows that the team doesn’t take themselves too seriously.
First, they acknowledge that their site has an error. Then they give visitors the opportunity to fire one of the engineers who was probably responsible for the broken URL.
This is unique because most 404s blame the user for landing on the wrong page, but in this case, Email Center accepts the blame and actively apologizes for it.
If you’re in the mood to forgive them, the bottom section has the simple hyperlinked option of going back to the homepage.
This is yet another example of simple but engaging gamification. What I like is that they’ve also managed to introduce their team members to potential customers, which humanizes their brand and builds a deeper meaningful connection that people are likely to remember.
On a side note, the company seems to have rebranded recently and their 404 is boring. Bring back the original one, please!
8. The Economist
The Economist knows it has an elite reader base, and they have always addressed them with fitting language that’s high on humor & intelligence.
You might recall their iconic short copy-based print ads that put witty spins on idioms, puns, and common phrases.
For their 404 page, they decided to up the ante & explore common economic concepts to explain the possible reasons why the reader may have landed on there.
In doing so, they delighted & educated visitors at the same time.
I’d be happy to spend a few minutes reading through the copy – it’s completely on-brand.
More Brilliant Examples
My friend Shlomo has put together a list of more cheeky 404 pages that take a dig at the competition or their brand enemies.
Check out his amazing post here.
Key Takeaway: It’s all in the details
In this article, we covered the meaning and utility of a 404 page on live websites. I showed you my own example, and also shared more references from popular brands across different industries.
The key takeaway is that you should pay attention to each tiny detail on your website, which will all add up to deliver a long-lasting impression for new and old visitors alike. This includes putting some effort into your 404 page and making it relevant/aligned with your brand.
Write/design something that will make people laugh, gamify the process, and lastly, give them the option to navigate to the home page or other important sections of your site.
Let me know what you think of all the case studies. I’m waiting to hear your views in the comments below.