404s & Heartbreak
Landing on a website’s dead page isn’t the end of the world—every site has these pages, after all. But when a brand pays attention to every possible digital touchpoint, even those that mark the visit’s gone awry, users remember it. They feel like somebody bothered to think about them and what they might encounter along the way. It leaves a good impression.
And that makes it worth getting all your touchpoints right—from calls to action to loading time messages, and yes, even the lowly 404 Error page. It’s the poster child for the “little things,” and a prime opportunity to engage the audience with something that might impress them (or at least make them crack a smile).
To some, the little things might seem just that: little things, insignificant, inconsequential,
not worth the time it takes to fret over them. But taking care of the little things says a lot to the people experiencing them; it speaks to your thoughtfulness, your attention to detail,
your consideration for others. Forgetting a friend’s birthday probably won’t mark the end of the relationship, but remembering every year might win you some extra brownie points.
Jeffrey Kurtz
Design by
Guy Cimbalo
Story by
Accidents
Dribbble’s 404 graphic is composed of small icons, each representing a different design from the site that uses a common hex code. A sliding bar that lets the user choose any other hue, and the icons repopulate to match the new color you’ve chosen. Spend a few moments playing around—it’s so engaging that it’s easy to forget the page you were looking for in the first place.
Dribbble
The Most Clever, Inventive 404 Error Pages
It can be funny, cheeky, or creative, but it better be engaging. Here are some of the brands taking care of the little things to make 404 error pages that stand out from the crowd.
The Pittsburgh museum has an always-on livestream of the artist’s gravesite as its 404 page. It’s just one piece of a collaborative project, entitled “Figment,” between the museum, EarthCam, and the St. John Chrysostom Byzantine Catholic Church. The three organizations came together to create a series of interactive “cradle-to-grave experiences” of Warhol.
The Andy Warhol Museum
Even the lowly 404 page is an opportunity to surprise and delight. See who’s making the most of the Internet’s wrong turns.
Happy
Accidents
Happy
The cloud-based tool for designing interfaces lets you create your own 404—and test out the company’s capabilities at the same time. The 404 is made of vectors that you can move around to your heart’s content, reshaping the numbers until they’re barely discernible.
Figma
NPR’s 404 sneakily links to other lost mysteries of the universe and trips gone awry. There’s a story on the discovery of what archaeologists think is Amelia Earhart’s shoe, a piece on the perpetual hunt for Atlantis, and a first-person account of what to do when you’ve lost your luggage.
NPR
A simple page with white space aplenty, Canva shows that you don’t need to go crazy to have an effect. The page offers a simple choice—return to Canva’s home page or try a sliding puzzle game, piecing together a jumbled image from its large collection.
Canva
For Cooper Hewitt, it’s all about the typography—yes, even its error page. The typeface was designed by Chester Jenkins, who runs the foundry Constellation (formerly the Village), and has been in use by the museum since its 2014 redesign. The best part: the font is free, and available for download on the error page itself.
Cooper Hewitt
This 404 does what the film giant does best: it shows movies. The studio’s rotating error page features snapshots from films like Napoleon Dynamite, Young Frankenstein, and Revenge of the Nerds. “What you’re looking for might have been moved,” reads one page, “unless you’re looking for Office Space.”
20th Century Studios
The NHM in London uses the 404 as an opportunity to show off Sophie, its prized Stegosaurus skeleton. In case the image alone wasn’t a tip-off, the error page indulges in some requisite punning: “Sorry, that’s a dead link (404): That page may have evolved or become extinct.”
Natural History Museum, London
Sending your users to an error page can be awkward—no reason to avoid acknowledging that fact. Here, author, artist, and activist Steve Lambert claims ownership of “The Most Awkward 404 Not Found Page on the Internet,” on which an inaudible video of him speaking to the camera plays for multiple minutes.
Steve Lambert
Despite its name, CSS-Tricks isn’t only about CSS. Run by the front-end developer Chris Coyer, the site covers everything about building websites from Javascript to WordPress. But that doesn’t stop Coyer from making a CSS joke on his 404. The error page is torn at the bottom, as if it were an actual paper page, revealing the underlying code beneath it.
CSS-Tricks
Gymbox, London’s trendy fitness emporium, has an error page that indulges in the internet tradition of John Travolta memes. The GIF-able clip portrays Travolta gyrating in Spandex from 1985’s aerobics classic Perfect, in which Travolta plays a journalist writing a story on LA fitness clubs and falling for his instructor (Jamie Lee Curtis). Or was it her leg warmers?
Gymbox
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Click to Visit
Landing on a
Click here for our Interactive Checklist for Marketers
Are your digital touchpoints humanized?
Get checklist
Humans
Design
for
To some,
Click here for our Interactive Checklist for Marketers
Are your digital touchpoints humanized?
Get checklist
Click here for our Interactive Checklist for Marketers
Are your digital touchpoints humanized?
Get checklist