Fish

The Best 404 Pages: 37 Examples You Need to See via @annaleacrowe

An epic 404 page likely isn’t going to win your business any awards. I get it.But it shows that you care about your customers.A great 404 page can be a smart way to show off your brand’s personality.But is it worth it to invest in a fancy 404 page?It can be.Because when users land on your 404 page, they aren’t finding what they needed.Using links, smart graphics, and witty copy can make them forget that you (maybe) messed up and get them back on track.In light of the importance of 404 pages, what follows is a list of 37 of the best examples of 404 pages that you can find online.Before diving into the examples, let’s take a moment to review the basics of a 404 page.What Is a 404 Page?A 404 page is a landing page that tells your site viewers the requested page is unavailable or, in some cases, doesn’t exist.A 404 error tells users the page cannot be accessed – and it can be a major problem.AdvertisementContinue Reading BelowWhen users can’t access a page, they can’t find the information they need.It also tells Google that your site offers a poor customer experience, which can result in less traffic and lower rankings.Ideally, site visitors would never land on a 404 page, but the reality is that they do happen from time to time – even from well-maintained sites.Why Might a Visitor Land on a 404 Page?Why might a user get a 404 error?There are several reasons, which include:The server is down.The page moved and wasn’t redirected.The page never existed.The user typed the URL in wrong.The URL is broken.Basically, if a user tries to visit a page that cannot be found, they’ll be sent to your 404 page.What’s the Point of Making a 404 Page That Stands Out?A visually appealing, user-friendly 404 error page shows customers that you care about their experience and are interested in keeping them on your website.AdvertisementContinue Reading BelowWhen done well, a good 404 page helps users forgive you for the error (even if it was their own fault by typing the URL in wrong) and keeps them on your site.A great 404 page can make users smile and – most importantly – help them find what they are looking for.We reviewed dozens of 404 pages to find the best ones that show off brands’ creativity and personality.Here are 37 of the best examples of 404 pages done well.1. DisneyDisney knocks it out of the park with their 404 page by highlighting one of the most popular characters known for destruction – Wreck-it Ralph.They also feature KnowsMore, a side character in Ralph Breaks The Internet.Both characters are appropriate for the 404 page, but notice what is right next to KnowsMore: a little search bar.There’s another one at the top of the page, but this one is dead in the center where users will see it. This search bar keeps users on-page by helping them find what they are looking for.2. DriftDrift is a conversion marketing tool and sales platform that offers tools for live chat, landing pages, and more.The copy on their 404 page stays on-brand by mentioning “conversations,” but also works to keep people on the Drift website by offering links to their homepage, their blog, and links to a few of their most popular pieces of content.In the upper right corner, they also offer a path to conversion by providing the Get Drift Free button.3. Help ScoutHelp Scout provides companies by providing tools for help desk software, email-based customer support, and online knowledge bases.AdvertisementContinue Reading BelowLike Drift, their 404 page offers links to their blog and other posts, but they use a cute graphic of cute dogs to keep people smiling.4. Apartment TherapyApartment Therapy, a home decor site, keeps it light by joking that washi tape (a popular paper tape used in decorating and scrapbooking) can’t fix the broken link.Just below the fold, they link to several popular posts to keep site visitors engaged.They also included a search bar and their main nav bar so users can continue to explore the site.5. CoScheduleCoSchedule, a marketing scheduling tool, keeps it simple with a cute dog GIF and links to their homepage and blog.AdvertisementContinue Reading BelowThis example just goes to show you don’t have to drop big money to create an engaging 404 page.It’s simple, but does the job.6. Sprout SocialSprout Social, the social media marketing tool, really wants to keep its customers on-page.They start with a tongue-in-cheek reaction to landing on the wrong page – but they also push a free demo, while the home page link takes a back seat.Then, their chatbot pops up to find out what you need.At the bottom, they promote their newsletter.Essentially, they’ve turned their 404 page into a landing page.7. ConvertKitWho doesn’t love dogs?AdvertisementContinue Reading BelowConvertKit keeps it light by offering a photo of a team member’s dog and a link to their homepage.But, they also keep it professional by providing their online chat and a CTA to sign up for free.8. Screaming FrogScreaming Frog is a tool designed to help site owners find and fix broken links – and they acknowledge the irony of having a 404 page by poking a bit of fun at themselves, then offering links to their blog, contact page, and services.Unlike the other 404 pages on the list, this one isn’t static.The flies move around the page, the fish float, and the lily pads spin.It’s a small change, but it makes the page feel well thought out.9. MozMoz keeps it simple with a cameo from Roger Mozbat, the brand’s mascot.AdvertisementContinue Reading BelowHis presence is on brand and an easy way to make most people smile.Moz also gives you a site search bar so you can find what you are looking for.10. BigCommerceBigCommerce’s 404 page offers many of the same features we’ve seen before – the CTA to contact, request a demo, and an easy way to explore the site.But what stands out is the well-designed outer space image, which makes the page feel thought-out and planned.There’s a good chance that users who land on your 404 page are going to be annoyed – a creative graphic helps it feel like you’ve got your stuff together and this was just a small misstep.11. KinstaKinsta, a cloud-based WordPress hosting company, takes a similar approach to BigCommerce by offering a well-designed image on their 404 page.AdvertisementContinue Reading BelowThey keep their top navigation and search bar, so users can easily find other information.They also use a pop up to suggest gated content, which likely helps drive email subscribers.12. LegoLego keeps it light using a large image of a Lego man along with the quip “Sorry we can’t find that page! Don’t worry, though everything is STILL AWESOME!” which is a reference to a song from the Lego Movie.They also offer a link to their shop to keep users on-site.13. SlackSlack’s 404 page is incredible.AdvertisementContinue Reading BelowThe image above actually scrolls to show you a forest with flying butterflies, pigs, flowers, and chickens.It also goes black and white if you go to another tab which, unfortunately, makes it hard to get a screenshot of the awesomeness.Head over to their site for the full experience.14. MailchimpEmail tool Mailchimp keeps it simple – yet clever – with their animated 404 page of an animal searching in a hole for, presumably, the page that is lost.It’s smart and shows their 404 page isn’t an afterthought.15. oktaOkta is a cloud-based access management company based in San Francisco.AdvertisementContinue Reading BelowTheir 404 page is pretty simple, but I really like that they offer reasons why the link might be broken, which helps users understand what might have gone wrong.16. SwissSwiss Airlines doesn’t offer any additional information, other than a link to their homepage and the navigation bar, but the image on their 404 page is really neat.The clouds move as you guide your cursor over the page, enveloping you in clouds.It’s an interesting feature that kept me on their 404 page longer than I’d like to admit.17. Wizarding WorldAs many Harry Potter fans will know, Harry gets lost the first time he tries to use Floo powder, a glittery substance that lets wizards travel by transporting them to nearly any other house or building with a fireplace.AdvertisementContinue Reading BelowThe image above shows the scene where Harry comes out of the fireplace where he accidentally transported himself covered in soot – making it the perfect image for a 404 page.18. SouthwestHere’s another 404 page that made me smile – first, they use a “Star Wars” reference, which keeps it light.The page also features a moving baton used by aircraft marshallers who direct planes on the tarmac.Next to the image, Southwest offers quick links to help users find what they need.It’s functional but still stands out.19. 9GAG9GAG, the online platform for memes and videos, uses a totally on-brand GIF for their 404 page and offers a single link that directs users to their app.AdvertisementContinue Reading BelowIt is simple, but staying on-brand ensures site visitors know they are on the right site, despite not finding the page they were looking for.20. FlywheelFlywheel, a managed WordPress hosting company, offers this quirky 404 page to let folks know they landed on the wrong page.The casual language reflects their overall brand feel, and the link to the homepage helps users find their way.Like several other brands, they also offer a chat function to further help users who have lost their way.21. Dan WoodgerDan Woodger, an artist and illustrator, features his own work on his 404 page. His bright and cheery hamburger is right at home.AdvertisementContinue Reading BelowNotice that he doesn’t mention it’s a 404 page or give any other information, other than a link to his work.This example goes to show a great page doesn’t have to be complicated.22. DistilledA lot of brands call in their 404 page. They figure not many people will see the page, so what does it matter.But showcasing your brand’s style on a (seemingly) insignificant page carries a lot of weight.If you care about your 404 page, there’s a good chance you care about your clients and customers too.Distilled uses an infographic-like image to explain what the page is and what might have gone wrong.23. Taco BellTaco Bell is known for being a bit irreverent. Their 404 page is no exception.AdvertisementContinue Reading BelowThe page features a dancing taco who slips and spills their fillings, then scoops them back into their shell.It’s a funky reminder that they know something went wrong.The page also includes a link to the site’s homepage, menu, locations, and where to buy gift cards and merchandise.24. MagntMagnt offers an easy to use builder and tools for creating sites, and they pride themselves on being better than your standard template-based website builder.Their 404 page highlights the brand’s creativity with a clever Venn diagram that explores the reasons why you might have ended up on the page – “We broke something” or “You can’t type.”25. DribbleDribble, a creative marketplace for design professionals, offers up a fully-functional 404 page.AdvertisementContinue Reading BelowUsers can drag the dot below the 404 font to explore designers within a specific color range.Clicking on the blocks that make up the 404 numbers takes you to those specific designers.They also offer a search bar, for users who’d rather search the site that way.26. OverflowOverflow’s personality is placed front and center on their 404 page.Their conversational tone and humor are inviting and welcoming which connects with me to want to click back to their home page.And, the same voice and tone are conveyed on the homepage.27. Wendy’sBy now, you’ve probably laughed at one or two tweets from Wendy’s.AdvertisementContinue Reading BelowBut, similar to Overflow, Wendy’s continues the same voice and tone flow to their website, even their 404 page.They created an interactive video game for users similar to Pac-Man on their 404 page.See if you can get Wendy to the end!28. Red BullRed Bull’s 404 page is a dream for any SEO or marketing professional.It’s jam-packed with links to articles and playlist of videos.Red Bull even rotates the video playlist for their most recent event.You can see from the image above, Red Bull was using their 2020 Red Bull Big Wave surfing event as the source of inspiration.29. BlizzardBlizzard Entertainment, the creators of World of Warcraft, also known as WOW if you’re a geek like me. 🤓AdvertisementContinue Reading BelowBlizzard features one of their most well-known characters, a Murloc, to help rescue you from their 404 page.30. MarvelMarvel utilizes its different comic book characters like Captain America, Deadpool, etc. in a rotating 404 page.A little hint: Keep hitting refresh. Every third refresh, Marvel will serve up a different visual.31. PatagoniaPatagonia is hanging ten on their 404 page playing up its casual, tropical vibe.First, they engage the viewer with a video loop, but then they guide the user further down the page to links to their popular shopping categories.AdvertisementContinue Reading Below32. BackcountryBackcountry, a popular outdoor gear website that I often spend way too much time shopping for things I’ll never buy, shows off its funny side while connecting with its audience.33. NintendoNintendo does lack some visually engaging pieces, which I was surprised by, you know, being Nintendo and all.But, what’s important is that Nintendo adds links for resources for the user.AdvertisementContinue Reading BelowIt forces users to stay on the website and not bounce back to the SERPs.34. ZillowZillow offers an interactive GIF benefit to its home searchers.Zillow utilizes customer data to see that their users are pet lovers.And, to keep those pet lovers engaged, they created this interactive cat that adds a little chuckle at the end when it breaks something in the living room.As an animal lover, I can connect to this!35. H&R BlockH&R Block is another look at a not-so-appealing 404 page, but it does offer more information to users to keep them clicking and engaged on their website.AdvertisementContinue Reading Below36. World of WarcraftThe team at World of Warcraft acknowledges their audience’s skillset with a few jokes about CDNs and above the fold.37. PlaystationPlaystation gives a nice shout out to one of its newer games on its 404 page.Plus, they provide options to go back to the homepage or get advice from the help center.SummaryIn a perfect world, no one would ever see your 404 pages.AdvertisementContinue Reading BelowThey would stay hidden far away, like the bag of Reese’s thins I keep hidden in my closet. You know, for drastic times.But in the real world, things happen.Links get truncated, fat fingers slip, and sometimes you just forget to redirect a page. Start by using a tool like Screaming Frog to find those broken links.Remember, it takes time to create a creative 404 pages that draw users in rather than chasing them away.More Resources:404 vs. Soft 404 Errors: What’s the Difference & How to Fix BothHow to Map 404 URLs at Scale with Sentence EmbeddingsA Technical SEO Guide to RedirectsImage CreditsFeatured Image: Created by author, August 2020All screenshots taken by author, August 2020
Read More

Show More

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button
Close
Close