Elegant Design of Dreaded 404 Error Pages
404 error pages are the web pages displayed when an error occurs, whether it is because a particular web page no longer exists or the server couldn’t complete the request. Out-of-the-box, most sites as well as pre-made themes have a default template, which might include a brief message and possibly a search box, but these aren’t useful at all for those who encounter these errors.
These pages are often some of the top pages your visitors see, especially if you deleted content or forgot to redirect visitors. Therefore, you want a page that maintains your branding, but offers three core elements: good design, some form of usability, and a method of further search. If you have these, your page is off on the right foot.
Although time is spent creating these pages, if you land on one, you often become frustrated – more so if the page doesn’t provide any real value. When you design one of these pages, keep the tips and examples in the back of your mind, and you’ll have a killer 404 page on your site quickly.
Best Practices for Designing a 404 Page
404 pages are an essential part of your website, so why not take the time to design one that really works? We have showcased a few tips below that we find to be effective when designing these pages with both usability and design in mind.
- Have Your Own 404 Page. Even though all websites/designs have a default template, this isn’t effective at all for the end-user/visitor. Have a page that shows them that you want them to stay on your site.
- Help the Visitor Find Additional Content. The visitor was obviously trying to access a page on your site. Why not help them browse through your other content by providing links to recent posts or some of your best posts?
- Keep the Page Simple. Although a 404 page can include quite a bit of content, you need to keep it quite simple, otherwise your visitors will leave again, fearing that you’re trying to overwhelm them.
- Search is Extremely Important. Provided you have a search form near the top of the site, you might be able to skip the search box on this page. However, if you want to allow your visitors to search further on your site, specifically for what they were trying to access, a search box is a critical part of the design.
- Retain the Branding and Focus. A visitor that sees a styled page, but your logo isn’t there, there could be some damage done to your branding. They want to know that they’re on the right site. In addition, a message about you or your site can be useful, especially for visitors who may not have been to your site before.
Keeping these five main points in mind, we have to also mention the main reasons a visitor stumbled upon one of your 404 error pages, and why it isn’t a good thing.
- These pages mean that content wasn’t accessible for your visitors. When they visit this page, you aren’t solving their needs, and there is a high chance that they will be disappointed, quickly returning back to their search engine results page.
- When you use a standard 404 page, which might just say “404 Error,” nothing is being solved for you or your visitors. There is no reason that your visitors will return, even if you do put the page up again.
- Redirecting users automatically to a different post/area of your site can also cause problems, as they were looking for a specific post, and you may be taking them to an unrelated post.
Examples of 404 Pages in Action
Below you’ll find some great examples of 404 pages. While some of them solve the main problems, others simply feature great illustrations, but may not completely address the usability problems.
JenGermann Design
RIPT Apparel
Best Served Cold
We Are VI
Ready Photo Site
Unit Interactive
CSS-Tricks
GOG
ColdINK
Your Web Job
Pattern Tap
45royale Inc.
MainGear
Assault Boards
Lake Shore Branding
iStockPhoto
OpenendedAdventure
Bluedaniel
72nd Ave.
Slonky
GDZLLA App
Zivity
OrangeCoat
Center’d
Itchy Robot
Acro Media, Inc.
Twingly
Auto Test
MailChimp
Factor Metal
Matt Northam
WowWee
BenLew
Unstoppable Robot Ninja
Pen and Paper
The New Yorker
Jamie Huskisson
CUOMA Design Studios
Fuelly
ICSmedia
Wufoo
Brightkite
Meroigo Online
At Ease Web
Dawdle
d20 SRD
Clearspring
Realmac Software
Mozilla/Firefox
Huwshimi
Mixx
Surfing on Static
Chris Jennings
Twurn
TweetDeck
RedTag
HootSuite
Frye/Wiles Creative Agency
Vimeo
247 Media Studios
Expansion Broadcast
Carry the Duck
SodaHead
Wakoopa
Product Planner
Designzillas
Just Tweet It
Shelfworthy
swissmiss
CSS Ninjas
Springload
RocketTheme
Superawesome
Amorphia Apparel
Teehan+Lax
Homestar Runner
PyroPopTrt Designs
Jim Cromwell
Apartment Home Living
Ook
Digitalmash
Merge
Propeller
WP Beginner
Carsonified
thcnet
We Follow
Alexandre Gamela
Ars Grafik
Klap
Gwip Design
Tatuarte
Additional Resources
While we tried to include as much information as required in this post, we want you to continue learning about 404 error pages. Please visit the links below for more information.
- Don’t Lose Your Visitors: Better 404 Pages
- WordPress Error Pages and Customization
- HTTP 404 Explanation at Wikipedia
- 404 Best Practices
- Practical Guide to 404 Error Pages: What WordPress is Missing
Conclusion
We hope you enjoyed this post. Feel free to leave a comment about which 404 pages you liked the most, and share any others you’ve seen or created yourself.