Website uptime -- the amount of time a business' website is up and functioning -- is an important metrics for marketers and IT professionals to track. But no matter how many resources you put into ensuring your website never, ever, ever goes down ... there's always the looming possibility that it might.
It's a bummer, but a fact of life. And the reaction of visitors when they land on your temporarily unavailable website can run the gamut -- from "taking it in stride" to "totally losing their minds."
While there's nothing you can do about the latter, you can make your website downtime a little less of a pain by having a creative error 404 message. This can do wonders to make your website visitors crack a smile in an otherwise frustrating situation.
To get your design juices flowing, this post will display some of our favorite website error pages. Hopefully you'll be able to take away a few ideas to snazz up your own 404 message.
Click here to download 50 examples of beautiful website design for even more web design inspiration.
What is a 404 Error?
A 404 error is a standard HTTP error message code that means the website you were trying to reach couldn't be found on the server. It's a client-side error, meaning either the webpage was removed or moved and the URL wasn't changed accordingly, or the person just typed in the URL incorrectly.
For the most part, you can configure your web server to create a customized 404 error page. (If you're a HubSpot customer, click here to learn how to customize your 404 page in HubSpot.)
Some customized 404 error pages include a hero image, witty description, site map, search form, or basic contact information. Check out 24 of the most creative 404 error pages we've seen that are sure to delight anyone who comes across them.
Page Not Found: 24 Creative 404 Error Pages
1) Bluegg
If laughter is the best medicine, then Bluegg's 404 error page might be the cure. It includes -- on autoplay, and with sound -- an embedded video of one of those goats that screams like a human. (You probably recognize them from these viral videos.) Let's be honest ... it never gets old.
2) Spotify
Every year, Spotify releases their "A Year in Music" microsite. The site allows visitors to browse the most popular music of the year from around the globe. But there's a great Easter egg in there: The microsite's 404 page is a nod to Justin Bieber's 2015 hit song "Sorry," making it both timely and hilarious.
3) Cloud Sigma
Check it out: Cloud Sigma's letting us in on some behind-the-scenes action. Their 404 error page cleverly pretends to be a "junior developer's homepage" -- that junior developer being, well ... a cat.
4) CSS Tricks
Ever ripped away a website's wrapping to see what's underneath? That's the concept CSS Tricks was going for in their 404 error page. This is both clever and reminiscent of what their brand is all about: CSS.
5) Good Old Games (GOG)
For other websites, you unwrap and there's ... the galaxy. That's actually a clever reference to GOG Galaxy, which is GOG's native video game client. Thankfully, a little video game character is there to give visitors a place to go report an error if they want.
6) Magnt
In this funny error message, Magnt pokes fun at the fact that, yes, they could've broken something -- or, you just can't type. The visual serves as a quick way to illustrate their point for those unwilling to read the description.
7) Bitly
Remember Twitter's fail whale? Similarly, Bitly integrates their mascot -- the pufferfish -- into their error message. The poor little guy is left floating belly-up.
8) Daniel Karcher Film Design Studios
When your business is film, why not make your 404 error page into something resembling a short movie? The folks at Daniel Karcher did a great job with the animation on this page, including clever references to things like the television series LOST. The ticker at the top flips to say "Please proceed to main level," and when you click it, you're taken back to the homepage.
9) NPR
Stylistically, NPR's error page is nothing special. But keep reading and you'll see how they cleverly link to some of their great stories about lost people, places, and things, like a piece on Amelia Earhart and one on Waldo. Hopefully this makes lost users feel a little less alone.
10) Blizzard Entertainment
Here's a simple idea that ends up looking really cool: Blizzard Entertainment's 404 page is a "broken" version of their regular homepage. The copy pokes fun at the user: "Grats. You broke it" followed by "This page doesn't exist or some other horrible error has occurred."
11) Tin Sanity
We couldn't stop chuckling at the at the animation on Tin Sanity's 404 page, which features an animated cup with bloodshot eyes yelling and "running" back and forth across the screen. The whole thing is set to an intense bass track, making it even funnier. Like many other 404 pages on this list, this brand is poking fun at the fact that getting a 404 error isn't that big a deal.
12) OrangeCoat
If you're going to give an error message, why not entertain the user for a few seconds while you help them out? Following a friendly greeting ("Dear happy internet traveler"), OrangeCoat offers a cool flowchart that actually helps users figure out why they reached an error page.
13) Astuteo
There's no rhyme or reason for why web design and digital marketing firm Astuteo chose a Casablanca theme for their 404 page. But given the film's popularity, it's sure to resonate with and delight many of the users who end up reaching that page.
14) BrandCrowd
Not only is the illustration on this error page cool, the copy is clever, too. We love the reference to the Semisonic song "Closing Time": "You can click anywhere else, but you can't click here."
15) Cooklet
Cooklet's error page is simple and delightful in design and copy. Shoot, I wanted a piece!
16) GitHub
The line "These aren't the droids you're looking for," refers to Obi-Wan Kenobi's Jedi mind trick on Stormtroopers in Star Wars Episode IV -- and it's become a well-known phrase used to tell someone they're pursuing the wrong course of action. GitHub plays on this famous line in their 404 error message.
17) Grant Burke
Freelance graphic designer Grant Burke shows off his design skills even on his 404 page. The graphic is simple and the concept -- a missing link on a milk carton -- is fun and clever.
18) Moveline
As if the graphic on Moveline's 404 error page wasn't cute enough, we love the copy below it even more. They empathize with users who might be stressed out by an error message when they're already stressed out about moving. To ease their concerns, Moveline includes their contact information.
19) LEGO
No copy needed on LEGO's 404 error page: They let their characters do the talking. Come on buddy, plug it back in!
20) Hoppermagic
Hoppermagic's error page is similar to LEGO's by showing a fictional reason for why the page is broken. This time, it's rabbits nibbling the cables -- a nod to their rabbit logo.
21) IconFinder
Don't you hate it when webpages get lost in space? IconFinder's error page is simple, but delightful. The animated emoji wearing a spacesuit appears to be catapulted further and further into space the longer you stay on the page.
22) Hot Dot Productions
Hot Dot's error page stays true to their tagline, "the intersection of new technologies and design." The page is animated by hundreds of tiny dots that change direction in response to where you move your cursor. It's mesmerizing, cool, and a great showcase of their design capabilities.
23) HomeStarRunner.com
HomeStarRunner.com, home to a Flash-animated cartoon series, has had a series of hilarious 404 error pages over the years. The most recent features characters from the cartoon series in a scene that could've come straight out of one of their episodes. If you turn the sound on when you load the page, you'll hear their character Strong Bad -- known for yelling phrases out loud -- saying, "404'd!"
24) HubSpot
It happens to us, too! This is the message we put up to tell our site visitors that there are some website issues. Our goal was to stay true to HubSpot's brand voice by being as lovable, empathetic, and helpful as possible.
What other creative 404 error messages have you seen from companies? Share with us in the comments.
No comments:
Post a Comment