Let's just start by facing the facts.
No matter how hard you try, your website will never be perfect and in one way or another, you will have users that request an URL on your website that does not exist. When that happens, they'll end up on a 404 page and a bad experience, because they didn't find what they were looking for.
But it doesn't have to be a bad experience - if you follow the best practices and get creative, you can turn it into a fun and memorable experience instead.
The question is how do you actually do that?
To answer that question, we once again turned to some of our Umbraco Gold Partners for help. Below are the answers, including examples of great 404 pages, which combine best practices and creative design. At the end of the post, you'll find a list of key takeaways - including some tips on how to monitor and fix the 404 errors.
The question we asked was:
"What’s the best 404 page you’ve ever made and what makes it great?"
404 pages are now ubiquitous, but what sets apart a good 404 page from a bad 404 page? And why should we put effort into creating a page that you hope no user will ever see?
Why should you make an effort?
Regardless of the size or complexity of your website, there is always the possibility that a user will stumble across a 404 error.
Generally, users have come to accept and understand what a 404 error is, but that doesn't make it any less frustrating when you are trying to navigate to something and find it isn't there and the onus is still on us to explain what is happening.
A well thought-out and styled 404 page can help to alleviate some of this frustration, redirecting the user back to safety and giving you an opportunity to engage with the user in a unique manner.
How we've made an effort - Make it fun!
In our first example, we've created a unique animation, a car crash on a site for car insurance. It's simple and clean, with the central focus being a message explaining the page you're trying to visit isn't there and a call to action button for allowing the user to navigate safely back to the home page.
Evan Evans tours specialise in sightseeing tours of popular historical sites across the UK.
One of the most popular tours is about Sherlock Holmes, so in our second example, we’ve tied the content of the website to the 404 message - a fun little ‘Easter egg’ to lighten the mood.
Again, the page has all the links and signposts to enable the user to find their way back to safety. 404 pages are inevitable, but they’re also an opportunity. When the time is taken to create a page like the examples above, we negate any negativity surrounding a 404 and help enrich a user’s experience of using our site.
The 404 page. A page every company needs but hopes users never see. Whether it’s due to a small typo or simply forgetting to create a 301 redirect, 404 pages happen to the best of us.
However, this isn’t the end of the world. If users land on a broken page, you may as well distract them from the actual issue or even try to get an extra sale out of it! Most 404 pages consist of an image with an apology message which links back to the homepage or another page within the website. Fairly boring and fairly predictable.
Why not jazz it up a little?
Earlier this year, we worked with the market-leading laundry services provider, Circuit, to update their website with a refreshed design. Working with universities across the UK, Circuit occasionally need to call out the repair team to fix their machines due to interesting items accidentally blocking the pipes. Our design and UI team decided to do something different, injecting life and personality into the page through animated elements.
And what do students love to turn to at the end of a night out? Pizza of course!
Circuit’s new 404 page is both fun and on brand, featuring an animated washing machine with a floating pizza slice representing the 0 in the 404. While the problem still exists, the animation distracts and entertains the user, hopefully enough for them to click on the redirect link without any negative thoughts.
Maybe your website offers a product or service for which an animation doesn’t naturally fit. Instead, why not include some of your bestsellers? Even though a user can’t find the page they wanted, they may just find something better! At the end of the day, someone somewhere will land on your 404 page. It’s up to you to ensure the experience isn’t a damaging one for your brand.
Here is my favourite 404 page that I’ve built
Surprise! It’s Screenmedia’s. It’s my favourite for a few reasons.
Firstly, there is a seamless integration of the Screenmedia branding – of course it helps that our logo is the power symbol! The frontend team worked with our in-house illustrator, Brian, to come up with this fun animation in the style we use throughout the site, showing a character trying to switch the power back on.
The use of animation on the 404 page makes it quite unique and movement is a great way to incite interest.
As for tips on crafting a 404 page, firstly it’s important to maintain the branding of the rest of the website.
When people come across 404 pages it’s important that a clear continuity is kept with the rest of the site. Keep the messaging short and sweet – a bunch of technical jargon will only repel people, and we don’t want them to linger on big paragraphs of text.
A simple ‘page can’t be found’ is very effective, but ensure the copy also fits in with the brand and style of the site. Site navigation should be kept clear, along with an obvious way for the user to get back to the main site.
I think the best thing you can do is be creative and add some personality – everyone loves an interesting 404 page.
To supplement the great answers and examples in this article, we’ve condensed a list of key takeaways on how to build a great 404 page and how to reduce the amount of users who end with a 404 error.
Always remember the basics
The reason someone lands on a 404 page is because they tried to access an URL that was not found. That's important to remember, because it means that the user is looking for something they couldn't find.
The purpose of your 404 page is to help the user find the page (if it exists) or show them where to go instead (if it doesn't exist).
To help the user, you, first of all, need good navigation options. As an absolute minimum, you should have a clear link back to your homepage, so they can go there and start over in their search for the page they were looking for.
But you don’t have to stop there.
Adding an internal search feature or links to your most popular pages (and/or products) is another way to guide the user away from the 404 page and help them find what they’re looking for.
Make it fun
A 404 page is always going to be a frustrating experience, no matter why or how the user ended there, because they didn't find what they were looking for.
To help negate the negative experience, it’s a great idea to loosen up a bit and have some fun with the page. By having some fun on the page and a tongue-in-cheek attitude, you have a good chance of turning the bad experience into a good one.
Just remember not to go too far - it still has to have the basics and have some kind of resemblance to your brand.
Which brings us to...
Stay on brand
Making it fun should be done in a way that helps you stay on brand. There's a huge difference between businesses and for some it's much easier to loosen up than it is for others. So while it's worth thinking of some creative ideas for your page, it should never be at the cost of your brand, style and design.
It's important to remember that your 404 page is still a page on your website, so it should resemble other pages that your users will see on your website. A simple way to accomplish that is by having recognizable elements on the 404 page such as your logo, main navigation and footer.
Use animations
3 out of the 4 examples above all included animations - with good reason. Animations are a great way to get the attention of a user and can often replace some or all of the text that you'd otherwise have to put on the page.
Remember, that no one is really interested in a technical explanation of what went wrong. Instead, they just need to know that something went wrong and how to move on from there.
By having a nice animation on your 404 page you'll be able to create a fun experience, while also communicating your message in a concise and efficient manner.
Monitor 404 pageviews and get alerts
Although you can never avoid someone landing on your 404 page completely, there are measures you can do to reduce it. One of the key ways is to monitor how many users get a 404 error and which page they were trying to access.
By monitoring these errors you'll be able to dig into why they're happening and how you can fix them.
A great way to monitor 404 errors - without being too technical - is by setting up a report in Google Analytics.
To do so, you must find a way to identify which pages are 404 pages and which are real page views. How exactly to do so depends a lot on your setup.
Here at Umbraco we've set up a report which looks at all page views where page title is exactly matching 404. By doing so we get a nice overview of the pages that users tried to access, but resulted in a 404 page.
To make sure you don't have sudden spikes in 404 errors, it's also a good idea to set up alerts. This can be done by using the Custom Alerts feature in Google Analytics, which can be set up to send you an email if the amount of page views of 404 pages exceeds a certain amount that you set up.
That way you'll be able to identify and fix any problem faster compared to if you had to manually check your reports every day.
Reducing and fixing 404 errors
Lastly, it's time to talk about fixing the 404 errors so you can avoid as much user frustration as possible.
A very common reason for 404 errors is that a page changed URL without a proper redirect. The trick to fix the issue is to set up a 301 redirect, to permanently tell users (and search engines) that the old URL is now found elsewhere. By doing so, you've fixed the first part of the problem: sending the user to the right page.
It's not a perfect solution though, as you'd preferably want to send the user directly to the page instead of relying on redirects.
To do so, you'll need to change the link that is responsible for the traffic to your page. To find the link, you'll again need to go back to your Google Analytics report.
With the page URL as the primary dimension in your report you can add different secondary dimensions to identify where the traffic came from and how you can fix it. The easy fix is any internal links that you can change on your own website, but it can also help you find links from external links, which you might want to get changed.
Thank you for reading our blog post - and a big thank you to the Gold Partners who contributed to the post - #H5YR!
Today we want to talk about page speed. Instead of us here at Umbraco giving you a list of tips, we decided to ask our Gold Partners for help. They build new websites every day - big and small - and they have shared some great tips and tricks they use to improve page speed 🚀