Sep 8, 2017


A Simple Simple Short Shot

Designing Your 404 Page

When graphic design, web development and personality come together.

A 404 page is often forgotten, ignored or devalued - but the truth is that a 404 page can be a lot of fun, and the best place to share a little humour, personality, or to show off some creative skills such as graphic design or web development.

What is a 404 page?

A 404 page is the default landing place within a website when a page cannot be found. Technically it is HTTP 404 which means ‘Client Error’ (4) and ‘Not Found’ (04). 

Example:

You type in www.simplesimple.ca/ginrecipes  

Sure, we have all kinds of gin recipes on file but we don’t have a webpage dedicated to them (they are closely guarded office secrets). The 404 page would indicate to visitors that the Simple Simple site is still alive and well, but that this page is not part of it.

404 pages happen to the best of us, even the great Google has 404 hits. 404 errors happen for a variety of simple reasons: as pages are updated the links leading to them are not; social media posts about past events still show up in search results, even when the event has passed and the page has been taken down; users typing wrong URLs; etc. However, just because you have to have a 404 page, it doesn’t mean it has to suck.


Why make a dedicated 404 page?

Technically, a 404 page with links removes a dead-end in your site for both Google and users. Google can now index your site properly, giving you a better ranking in search results, and users are less likely to bounce out of your site. Without a dedicated 404, people who reach the page from another source (whether it be a search engine results page or another site that links to your page) might leave your site altogether, thinking the site is down, but with links to other pages on your site you could retain the user, possibly all the way to a conversion.

Creatively, a 404 page can be a lot of fun. There are few expectations for a 404 page, so web designers and developers can be given a lot of creative freedom on a project like this. 

Check out the best Pinterest board of 404 pages ever.

Colourful 404 page


Web Development:

Web developers are given an opportunity to try new methods and create interactive spaces for the user to play around with. Hot Dot is a group of digital artists and web developers who make websites. They created a 404 page that is just the right amount of interactive, reinforces their brand (Hot Dot), and is clearly a page reached in error. Not only can you play with the exploding dots, the image tilts as you move around your cursor.  Click here to head over there to spend way too much time playing with dots!

Hot Dot Interactive 404 Page


Graphic Design:

There’s a lot to be said for the extra effort paid to graphic design. South West Trains did a complete website redesign, including an updated 404 page. This one is very on brand, friendly, and beautifully designed. The page features a tiny train passing through a station with intersecting tracks that spell out 404. The page still features their navbar, meaning users can navigate through the website after enjoying this little bit of whimsy

South West Trains Whimsical 404 Page


Brand Marketing:

It’s important to keep your brand image in mind when designing your 404 page. A family lawyer may want to avoid a 404 page that is too blithe and should instead opt for a page that is well designed to correlate with the overall look and feel. NPR, for example, tied their 404 into various other ‘lost things’ and created interlinking to other pages within their site - very clever.

The restaurant industry, on the other hand can take this time to have a little fun, just as Pizza Hut has done. They kept with the theme of pizza (seems like a good branding choice) and made a joke with their page while including links for further navigation.

Pizza Hut Funny 404 Page


The Road to Conversions:

A special mention goes to Modcloth for their 404 page. Not only do they have lovely graphic design combined with humour that’s on-brand, they created a page that you can interact with and drives conversions. Their web developers made it into an interactive shopping experience where you can choose whether you like the dress or not. If you click on ‘not for me’ it will load a new outfit for you to vote on, and if you click on ‘I’m in’ you’ll be taken to that item’s purchase page.

 

Modcloth's Converting 404 Page


Marketing Opportunities:

It’s easy to focus on the pages that are more useful and more important, but a great 404 page can be a space for creative freedom - something that’s often in short supply when you’re focused on SEO and web design. Use the 404 page as a blank slate and show them you have a sense of humour about yourself, take the opportunity to reinforce your skills, keep users engaged with your brand online, or maybe even make a difference.


Fin