web design • logo and identity • ads, brochures, postcards, and more
A custom error page can improve a website user’s experience even if something goes technically awry. If done right, it can keep your visitor from leaving your site, and direct them back to pages you’d like to showcase.
We've all seen a “Page not found” screen instead of the page we were expecting. There’s lots of reasons that a page might not be found — a visitor might type in the URL incorrectly, the link from a webpage could be dead or jumbled, the file might have been moved to a different folder or removed altogether without the visitor being redirected to its replacement. “404” is a status code that HTTP, the language of the web, applies to situations when someone is looking for a web page and it isn't found.
On your own website, you don’t want visitors to have a bad experience and click away, even if they’re looking for a page that’s not being served. Firstly, of course, you work to minimize the number of 404 errors a visitor might find. Google Console has a crawl errors tool for exactly this purpose. Once you've minimized the errors, the next step is to craft a custom 404 page to politely help visitors who’ve lost their way stay on your site.
I wanted to play off the ripples in the header graphic, and use the colors from my site. My first thought was typographic, I animated the error code numbers, and had the “0” make ripples.
When I showed this around, I discovered many people didn't link the number “404” with “Page Not Found” the way I do. It makes sense that people with other specialties wouldn‘t know HTTP error codes. See the fifth bullet point, above, reminding that technical language does not make the best user experience design.
What about a water droplet? I watched videos of water droplets on YouTube. This one, Surface Tension Droplets at 2500fps by The Slow Mo Guys shows a droplet bouncing and getting incrementally smaller. That was more complex than I wanted.
So I decided to drop a small leaf into the water. It would sink, and disappear, becoming “gone” like the missing page.
I built the page into a php framework, so that I could give the visitor feedback by showing them the URL of the missing page.You can see the whole error page here, in this intentionally broken link: http://susanneuhaus.com/blerg. (I added robots no follow to this page, so I won't have to keep dealing with this broken link in Google Search Console.)
After crafting the page, I had to tell my web server to show my "error.php" page when an error occurs, I decided to show this page for more than one type of file not found error. On my host, this means adding this code to the .htaccess file. Your hosting set up may differ.
ErrorDocument 400 /error.php
ErrorDocument 401 /error.php
ErrorDocument 403 /error.php
ErrorDocument 404 /error.php
ErrorDocument 500 /error.php
National Public Radio points visitors to other stories of the lost, Atlantis, Amelia Earhart, a few minutes of the Watergate tapes, your luggage...
GitHub Clearly wants to perform Jedi mind tricks, those were not the pages I was looking for, move along...
Funny or Die Well, you did it. You broke the internet.
Hongkiat Has several popular posts showcasing creative 404 pages from all over the web that use maps, photos, illustrations and cheeky text. Some are from designer's sites, but not all. Specialized features a road-rash producing wipe out, but Ines Maria Gamler shows a place where I would love to get lost, and a visitor wouldn't be in a hurry to leave.