When creating a website, one of the pages that often gets neglected is the 404 page. If you think about it, each 404 page visit is like a lost opportunity.
Someone is looking for something on your site, and you’re not able to serve it up. So you give them a 404 page telling them the requested information was not found on your website.
As a brand, you can use custom 404 error page to make a memorable impression on your visitors, as mentioned by Renny Gleeson in his TED Talk “404, The Story of a Page Not Found.” You can use a cleverly crafted 404 page to keep the visitor on your site, and guide them to a resource that will help them find more information on what they were looking for.
Before we dive in, it is important to understand exactly what a 404 page is. 404 is one of the Client Error HTTP Status Codes returned by the server, to indicate that the requested page was not found.
Some of the common causes are:
– The visitor clicked on a broken link.
– The visitor mistyped the URL.
– The page has been deleted or was moved to a new location (without proper redirects).
Having a creative or humorous 404 can certainly grab the attention of your users, but from a functionality point of view it might not be a great 404 page design. There are some fundamental things you should consider having on every 404 page:
– Why the 404 page is being shown.
– What the user can do next. Here are some things to consider:
– Provide an easy way to go to the homepage.
– Show some popular/related items your visitors might be interested in.
– Give them the ability to search for what they want.
– Make it easy for them to report an issue.
– Leave a lasting impression.
– Stick to your overall brand and design guidelines.
– Header response should be a 404.
– Consider making the 404 page context-sensitive.
Here are some examples of context-sensitive 404s. On an e-commerce store, if someone tries to access a page for an item you no longer stock, the 404 page could show related products from the same category. Or if your visitor gets lost while browsing the categories, you could show trending categories and contact information.
In this section, we’ll take a look at some interactive and animated 404 pages. The users can interact with some of them, and others have a subtle animation that makes them unique. Click on the “404” links below to visit the sites’ actual 404 pages.
Ledger Note → 404
Slack → 404
The greyed out page fills up with colors and starts to animate when you interact with the page. It looks like they have really put some effort into the 404 page. HT: @ribenaberry
Stampready → 404
A clever use of gif to tell users, what they are looking for does not exist and José Mourinho does not approve of their search query.
Open Bedrijvendag 2014 → 404
404 represent a broken page, what better way is there to tell your visitor about it than this. On the flip side less savvy visitors might think they might have been infected with a virus, so tread carefully with this one.
Hugo Bonacci → 404
Want to see a vortex pull everything in on a page? Well, this 404 page by Hugo Bonacci does all that using CSS. All the important links are clickable, so users can navigate to the homepage or other areas easily.
HotDot → 404
You can move the cursor around this page to view the 404 from different angles, giving it a cool 3D effect. Have you tried clicking on the 404 yet?
FlippingBook → 404
This site gives the option to play a mini-game when you land on a 404. This entices their customers to visit some of the core pages—like the homepage, About Us and Features page—to unlock the treasure chest, which gives you 25% off their product.
Personally, I’m in love with this idea. Not only is it a cool landing page, but it serves the purpose of getting people to use the product. If I were to try to improve on this, I would probably have a landing page that serves the all important content on one page, and the treasure chest would be activated as the customer scrolls down.
Virgin Holidays Cruises → 404
When you hit a 404 on this cruise booking site, you are shown an animated image of someone on a beach (who might be stranded, or perhaps just relaxing), with the caption, “Uh Oh! Looks like you’re stranded…” Then you’re presented with the option to search for and book a cruise. A nice 404 design that offers good functionality to ‘stranded’ visitors.
Daniel Karcher → 404
This Flash animation shows you a subway with some posters to indicate that you are lost. The ticker board also acts as the navigation menu.
Hatched London → 404
This site will make you jump off a building once you hit their 404 page. Personally I felt that the animation could be a bit slower.
Dailymotion Cloud → 404
This 404 page shows you a roadworks sign on a dark rainy day, that suggests you’re on a 404 page, and then it automatically redirects to the homepage.
Bitly → 404
The 404 page for Bitly features their mascot, Chauncey McPufferson.
Imgur → 404
A simple 404 page with cats and a giraffe wearing a monocle staring at the cursor.
Romain Brasier → 404
If you stay on the page, you will sacrifice 404 lemmings. Try to save them if you can. Towards the end, the site will tell you how many you managed to save, and warns you to stay away from the 404 page to prevent a future massacre.
The following 404 pages makes use of a funny image or animation to captivate the user’s attention. The best use of this technique is when the image directly relates to the product or brand.
LonelyPlanet → 404
LonelyPlanet has a cute 404 page, they use what looks like a gif of a baby sloth. Being a travel website the copy “Some places are great to lose yourself in, but not on this occasion.” will work well with their visitors. HT: @ribenaberry
NDP Canada → 404
NDP (New Democratic Party) Canada has an amusing 404 page. When a visitor lands on a page they are shown an image that says “Ottawa’s Broken. And so is this Link.”
This is funny because, from what I understand, they are not the ruling party, and are saying Ottawa (the capital of Canada) is broken because someone else is in power. Shifting blame might not be that classy, but I had a good laugh, so it’s going up here.
Specialized → 404
This bike equipment store uses an image with a lone cyclist who fell off his bike in what looks like a professional tour, and is captioned “Oops! Looks Like We Lost One.” While I can sympathise with the guy that tumbled over, this image fits perfectly with the brand, and will relate well with their audience.
Titleist → 404
This golf website uses an image of golfers looking for a lost ball, and also points their users to other interesting sections on the site.
Distilled → 404
Here’s a web development plus SEO agency based in London. They use sophisticated British humor with monocles, pipes and Monopoly mustaches to tell visitors they have landed on a 404 page.
Magnt → 404
A simple Venn diagram that tells you why you landed on the 404 page.
National Public Radio → 404
These guys have a very good 404 page. It informs users that they couldn’t locate what they were trying to find, and gives them the option to search for it or go to other relevant areas.
They they link to interesting stories about lost people and places – there are stories on Amelia Earhart, 18 1/2 minutes of Watergate tapes, etc.
IGN → 404
IGN is a popular site for gamers, and they have made use of the classic Mario phrase, “Thank you Mario, but our princess is in another castle!” to inform their visitors they have landed on a 404 page.
4D Data Centres → 404
This page uses HTTP status codes to convey the message to their visitors. While this may not be considered to be a very helpful 404 page for the average user, I can certainly appreciate the extra effort they put into making it highly unique.
If you replace the HTTP status codes, the page would read:
This page is Gone! You’ve officially made an Unauthorized Bad Request and you are Forbidden to view this page. To Continue you may have to Reset Content, or settle for Partial Content by clicking the link above.
P.S. I know this is Not Acceptable but I’m a teapot.
Creation Museum → 404
An image to challenge the theory of evolution is just want you would expect from the Creation Museum.
IMDB → 404
This site shows you a somewhat random movie quote when you land on a 404 page.
So there you have it — a collection of inspiring 404 pages. I’m sure there are many more examples out there, and if you’ve come across some cool, unique or funny 404 pages, please let us know via the comments below.
Themeforest has a great collection of pre-designed 404 page templates, as does GraphicRiver, with it’s huge selection of beautiful web elements. Or, and only if you’re really looking for something different, you could try some of the weird images on PhotoDune, they would look great as a web-page background.