BBE Theme Developer Tips
How to build a cool, retro-styled 404 page

When your users request a wrong URL, your site should serve a so-called “404 page”. This page should  be seen as a helping hand for those folks who “got lost” into your site, either by clicking on a broken link or by mistyping an URL.

Most of the times, the most obvious thing to do on this 404 page templates, is to offer a link your homepage, explaining to the user what has happened in a friendly manner.

The rude, initial 404 approach of the 90s

Back in the days, 404 pages looked like the following image:

vintage-ie-404

This kind of approach was not of great help for the user – and it looked *really* like a severe, unrecoverable error, but anyhow it was some kind of start, suggesting some possible solutions to the user.

It does not really look like this was a “Don’t make me think” approach to the problem. Steve Krug would not have been proud of it.

Step ahead 20 years or so: in today‘s pervasive digital world, designer madness has taken over 404 pages resulting in some really cool 404 page designs. Sometimes people went really crazy building super-fancy, uber geeky 404 pages.

If you’re a web designer or a programmer, educating yourself about 404 pages and having a cool 404 page is a good idea – for some good reasons:

  • Usability – it will help your users if they do a mistake or you do – breaking some links – shit happens, eventually.
  • SEOtechnically, checking over your 404 pages, and making sure that 404 pages return the right 404 header code is totally important for Google. As a bonus, having a cool 404 page template might leverage the “link baiting” principle – people might want to link or mention you in their social media, just because you’re cool.

Not bad for something that can take minutes to be implemented. By the way, we’ll help you get started immediately with a nice, hackable but almost readymade solution.

A practical example: how we did it

On DopeWP.com, if you reach a broken link, you will see a quite custom 404, leveraging our love for vintage, retro computers. It looks like this:

dopewp-404

 

People who had a Commodore 64 will recognize this vintage look and the three asterisks stacked horizontally to “center” titles – an 80s videogame classic.

A pure CSS Pacman – shaped figure screams retrogaming too. There is no real use of it – except that we felt like doing a small homage to the things that made our geek infancy special. This page on codepen provides lots of great implementations of the yellow, pill-eating monster. We grabbed without shame. After all, great artists copy.

After the standard, ubiquous but usable “404 Error: page not found” message, a silly hilarious message is told: “such situations always existed in computer history“. We might add…In life too – unfortunately!

Quoting the classic computer crashes of the 90s

if you visit our 404 page,  hovering the three buttons, you’ll be able to have a blast from the past and see some of the most typical crashes in computer history: the Amiga’s “Guru Meditation” , the “Blue Screen Of Death” from vintage Windows machines, and the “Bomb” modal window, on early Macs.

Good ole days…but the practical implication of the message was similar: you needed to restart your machine. Oh shit! Hope I saved recently that letter for Santa.

The message: Shit Happens™

In today’s complicated world, interconnecting an almost infinite variety of hardware and software architectures via the Internet, and exponentially more web pages through hypertextual links, shit can happen.

It definitely can – and if you can’t imagine things going wrong, it’s just because of your inexperience.

It’s up to you to leverage effective strategies to recover from errors.

Back in the days, system crashes and errors where more frequent, and could involve data loss. This could easily mean losing minutes or hours of precious time; a  pretty worse perspective compared to what happens when a user hits a 404 page – but nevertheless, failure to take action, might result in losing a sale.

Did we convince you of taking care of your 404 pages?

OK, enough chat, gimme that crazy 404 template now!

At this point you may want to know how you can get started having a silly 404 page too, to delight your friends at parties and save your visitors’ life.

If you are using WordPress to serve your site, installed on your server, it’s really easy.

Just download this file  and unzip it.

[It comes as a BBE child theme, so if you’re using the BBE Theme….just install and activate…OR read on!]

It contains a 404.php template file, and a folder called “404-assets” with the computer crash images.

Upload those two elements to your active Theme folder. BTW. better it be a child theme, editing other people’s themes is plain wrong.

[You can ignore the style.css file which is just a dummy placeholder]

Now visit on purpose a wrong URL, eg www.yoursite.com/wrongpage.
You should see there something similar to our retro 404 page.

Hack and enjoy. The code of the 404.php template is ultra-simple so you can have a good time personalising the messages and maybe adding something meaningful to you, or relevant to your business niche.

Did anybody say Pokemons?

  Filed under: BBE Developer Tips

Comments are closed for this post.