Skip to main content

What Makes a Good 404 Page?

By Kevin Yank

Programming

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

3d_404_animation.png

Have a Safari browser handy? Even Mobile Safari on an iPhone will work. Now check out this 404 (“page not found”) error page: http://idzr.org/404.

The slick animation on this page is powered by nonstandard 3D CSS transforms offered by WebKit, which is why it’s only visible in Safari for now. Chrome comes close, but lacks the right timing. The only JavaScript used in the page is to insert the random characters and apply CSS styles to them; the animation is pure CSS.

Dazzling as it is, it started me thinking about 404 pages in general. What makes a good “page not found” page? Is the name of the game getting the user back on track as quickly and efficiently as possible, or should a good 404 page reward the wayward user with a little surprise like this one—a visual treat that only visitors who’ve fallen off the map can see?

Certainly, SitePoint’s 404 pages are looking a little tired. Would you agree? If we were to redesign them, what would you like to find on them? Have you seen an especially effective 404 page lately? Leave a comment and point it out.

Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *


🤓 Ok. When did a code editor from Microsoft become kinda cool!?