Creating Compelling and Useful 404 Pages

A custom 404 page has become a hallmark of well-polished websites. It allows expressing the creative brand of the site. Sometimes it shows a neat trick and easter eggs.

404 Page Examples

Take dev.to 404 pages as an example. It is an incredibly simple page that shows the glitching gif logo of the dev.to brand. It does not offer anything extra, except a link back home.

GitHub takes things a step future with their 404 pages. They use Star Wars as a pop culture reference to relate to the inner geek in me. GitHub goes a step further than most sites by tracking the users' mouse movement to create a parallax effect. I remember that this brought me a moment of joy when I found this page.

Another enjoyable example is from the folks over at Carwow in the UK. They build a mini-game into the 404 page that feels very retro-inspired. So while not the most practical 404 pages, it gave the development team someplace to show off. The brand charm comes through when you lose, where they try to convert you to a test drive.

Suggestions Useful 404 Pages

There is much debate about what makes a useful 404 page. Dev.to does not provide many methods to recover, while GitHub by contract shows the full header and footer of the website and a second search bar.

In general, it's hard to say anything negative about giving help to users landing on a 404 page so they can recover. Bad 404 pages can cause users to leave the site altogether. A useful 404 page conveys to the user you care about helping them find the relevant information. It could also mean saving a customer or creating a new conversion.

1. Show consistent navigation so users can self recover.
2. Provide a secondary search to encourage users to find the content they seek.
3. Make suggestions based on the users' search history, current trending content, or just what you want to feature.
4. Provide links to any monitoring or status pages in case the 404 page shown was by some other error.
5. Show your brand and messaging off and delight.

My Blogs 404 Page

For my site, I decided to leave things clean and minimalistic during the launch of my website. I left the header and footer on the page. I then spruced it up with an excellent illustration from unDraw.io that I color matched.

Originally published on Khrome.dev.