Let’s be honest: visitors to websites you build are going to hit a 404 page at some point, so why not make a custom 404 error page and blow their minds?
There are a ton of reasons why people stumble upon a 404 error page including (but not limited to): URL slug changes, accidentally deleting asset files and the before-my-morning-coffee problem of “I can’t even paste in a URL correctly” hyperlinks. There’s no way to avoid this, so the next best thing is to turn it into something awesome.
I have to admit that rarely do I think of a 404 error page as something that needs to be customized but there is a missed opportunity here. It’s an opportunity to make an positive, lasting impression for website visitors. It’s also an opportunity to help the website/business grow.
Here are just a few ideas of what you can do with a custom 404 error page:
IDEA #1: A mailing list signup: Include something like “You did it! You found the secret page! Enter in your email below to claim your treasure hunting prize” and give them something like a discount code or a free ebook so they are happy about what just happened and not angry that something is broken on your site.
PRO TIP: If you are going to have a form on your custom 404 error page, include some way to get the visitors previous URL so you can track down that broken link (try something like this if you are brave) and/or check check Google Analytics and match the timestamp on the email with the visit to your 404 page.
IDEA #2: A list of recent blog posts (playing it off like it isn’t a broken link)
IDEA #3: A selection of “Featured Products” (similar to the above idea).
IDEA #4: A simple game: there are a bunch of simple game scripts HERE
IDEA #6: A custom video: If you can create a funny/crazy video that ties into the company or product somehow… that’s even better! A very simple video idea would be to fire up the webcam on a laptop in the company office and have some nerdy-guy looking at the screen announcing something like “Oh no, someone is lost on the site! Guys come here!” and then more and more employees in random crazy outfits come over to the screen to see what’s going on, etc…
BONUS: You could also setup a Google Optimize test to see which idea converts better
Those are some great ideas about the FUNCTIONALITY of your custom 404 error page but what should it look like?
Below are 13 examples of really creative custom 404 error pages that will have visitors saying “OOOhhhhh, that’s awesome!” and not “What the f*** just happened?”.
Maybe they’ll even share the 404 error page on social media! #whateverworks
Custom 404 Error Page Designs
Why we like it: Using their “sadness” blue character on a 404 error page is pure genius!
See the Pixar custom 404 error page HERE
Why we like it: “Ooh Shit!” that’s a cute page! An animated gif of a dog pushing over Pikachu with a swear works wonders! Awesome!
See the Dog Studio custom 404 error page HERE
Why we like it: The ol’ “you got lost and your now on a milk carton” approach is very clever! See this custom 404 error page designed by Igor Plac HERE
What I’m now pondering: Do milk companies even do that anymore?
Why we like it: Using any Back To The Future reference is always a great idea! There is also some simple animation (the clouds move) when you go to that page.
See the Bright Scout custom 404 error page HERE
Why we like it: Maybe it’s the ghost. maybe it’s his little flag but while it’s not super fun or interactive it is simple, clean and any site could create something like this.
See the custom 404 error pages designed by Keren Rijensky HERE
Why we like it: Assuming this “wood” (ha) be for a furniture store (it’s in a different language so I’m not really sure), this is a clever use of the products that the store might sell. Bonus points if you included links on the page to buy those actual table and chairs!
See this custom 404 error page designed by Rodrigo Costa HERE
Joke time: This reminds me a joke I heard a long time ago…
What’s it called when you can speak three different languages? Trilingual.
What’s it called when you can speak two different languages? Bilingual.
What’s it called when you can only speak one language? American. 🙂
Why we like it: This one is perfect for what the website is all about… custom built motorcycles. The phrase “Sometimes getting lost isn’t so bad.” with a photo of a couple riding a bike is awesome. Great job!
See the Salt City Builds custom 404 error page HERE
Why we like it: I feel drunk on power. The fact that a website visitor can pick who should be “fired” for this “unacceptable failure” is really smart. If you were pissed that you got an error this would instantly diffuse the anger. When I first saw that I felt kinda bad and I didn’t click any of them and instead chose the “Return to homepage” options… but then “evil” me was curious and went back and clicked on James (sorry James!) to see what would happen… and… well… you should go see it for yourself!
It would be really interesting to know who gets clicked on the most. Someone should ask them.
See the EmailCenter custom 404 error page HERE
Why we like it: Instead of just ending someone back to the homepage, this design suggests a few pages that might be of interest to the visitor and they present it all very nicely.
See the this custom 404 error page designed by Meng To HERE
Why we like it: This is some major visual eye-candy! The tiny ladder makes this awesome! See this custom 404 error page designed by Rizvan Baghirli HERE
Cool Story Bro! Now What?
Now it’s up to you, you can take the lazy way out and leave the default boring-as-hell “Ooops something went wrong” message OR you can create a custom 404 error page to make people laugh, make some money, grow a mailing list and give them something they’ll remember and maybe even share.
Have you found an awesome 404 page online? Did you make one? Share the URL in the comments below so other people can be inspired!
All Blog Posts
Copy & Paste FAQ
Learn Gravity Forms Fast
Managing Your Server
Web Design Business
Web Design Inspiration
Web Design Tutorials