Have you ever clicked on a link only to be met with a blank page and the infamous “404 Error – Page Not Found” message? It’s a frustrating experience that can happen to anyone browsing the internet, but it doesn’t have to be a complete loss. In fact, a well-designed 404 error page can turn a frustrating situation into a positive one.
What is a 404 Error Page?
A 404 error page is the message displayed by a web server when a user attempts to access a web page that doesn’t exist or has been removed. This message is typically displayed on a blank page, and it’s often accompanied by an explanation of why the user was unable to access the page they were looking for.
Why is a Custom 404 Error Page Important?
A custom 404 error page can help you turn a frustrating situation into a positive experience for your users. Rather than simply displaying a standard error message, a custom page can be designed to engage the user and help them find what they’re looking for.
Here are some reasons why a custom 404 error page is important:
It shows that you care about your users: A custom 404 page shows that you’re invested in the user experience and that you care about helping your users find what they’re looking for.
Users find what they’re looking for: A well-designed 404 page can provide links to other relevant pages on your website or suggest alternative search terms to help users find what they’re looking for.
It can be a branding opportunity: A custom 404 page can be designed to reflect your brand’s personality and tone, helping to reinforce your brand image with your users.
It can help reduce bounce rates: When users encounter a standard 404 error message, they’re likely to leave your site and never return. A custom 404 page can help keep users on your site and engaged with your content.
How to Design a Custom 404 Error Page
Designing a custom 404 error webpage doesn’t have to be complicated. Here are some tips to help you get started:
Keep it simple: A 404 page should be easy to understand and navigate. Keep the design simple and uncluttered to help users quickly find what they’re looking for.
Provide links to relevant pages: Include links to other pages on your site that might be of interest to the user. This can help keep them engaged and reduce bounce rates.
Use a friendly tone: The language and tone of your 404 page should be friendly and helpful. Avoid using technical jargon or language that might confuse users.
Include a search bar: A search bar can be a useful tool for helping users find what they’re looking for. Make sure it’s easy to find and use.
Use images or videos: Visual elements can help break up the page and make it more engaging. Consider using images or videos that are relevant to your brand or content.
404 Error Page With Pure HTML & CSS
As we read how important it is to create a custom 404 error found page to make a positive impression on users. Here I am sharing an example of simple 404 error webpage with pure html and css. The source code of this page is also given below and you can use it in your website or client project.
Remember that the 404 error webpage doesn’t have to be a mistake or a dead end. With a little creativity and attention to detail, you can turn it into a valuable part of your website’s user experience.
Source Code of 404 Error Page
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>market-wp.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<div id='oopss'>
<div id='error-text'>
<img src="https://cdn.rawgit.com/ahmedhosna95/upload/1731955f/sad404.svg" alt="404">
<span>404 PAGE</span>
<p class="p-a">
. The page you were looking for could not be found</p>
<p class="p-b">
... Back to previous page
</p>
<a href='#' class="back">... Back to previous page</a>
</div>
</div>
</body>
</html>CSS:
#oopss {
background: linear-gradient(-45deg, #fff300, #efe400);
position: fixed;
left: 0px;
top: 0;
width: 100%;
height: 100%;
line-height: 1.5em;
z-index: 9999;
}
#oopss #error-text {
font-size: 40px;
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Shabnam', Tahoma, sans-serif;
color: #000;
direction: rtl;
}
#oopss #error-text img {
margin: 85px auto 20px;
height: 342px;
}
#oopss #error-text span {
position: relative;
font-size: 3.3em;
font-weight: 900;
margin-bottom: 50px;
}
#oopss #error-text p.p-a {
font-size: 19px;
margin: 30px 0 15px 0;
}
#oopss #error-text p.p-b {
font-size: 15px;
}
#oopss #error-text .back {
background: #fff;
color: #000;
font-size: 30px;
text-decoration: none;
margin: 2em auto 0;
padding: .7em 2em;
border-radius: 500px;
box-shadow: 0 20px 70px 4px rgba(0, 0, 0, 0.1), inset 7px 33px 0 0px #fff300;
font-weight: 900;
transition: all 300ms ease;
}
#oopss #error-text .back:hover {
-webkit-transform: translateY(-13px);
transform: translateY(-13px);
box-shadow: 0 35px 90px 4px rgba(0, 0, 0, 0.3), inset 0px 0 0 3px #000;
}
@font-face {
font-family: Shabnam;
src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.eot");
src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.eot?#iefix") format("embedded-opentype"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.woff") format("woff"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.woff2") format("woff2"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam-Bold.ttf") format("truetype");
font-weight: bold;
}
@font-face {
font-family: Shabnam;
src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.eot");
src: url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.eot?#iefix") format("embedded-opentype"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.woff") format("woff"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.woff2") format("woff2"), url("https://cdn.rawgit.com/ahmedhosna95/upload/ba6564f8/fonts/Shabnam/Shabnam.ttf") format("truetype");
font-weight: normal;
}
By customizing the error page to match your website’s branding and design, you can further reinforce your brand’s identity. And by regularly reviewing and maintaining the error page, you can ensure that it remains effective in helping users find what they’re looking for.
Also Read:
Conclusion
A custom 404 error page can be a valuable asset for any website. By showing that you care about your users, providing links to relevant pages, and using a friendly tone, you can turn a frustrating experience into a positive one. So the next time you encounter a 404 error webpage, remember that it doesn’t have to be a mistake. It can be an opportunity to engage your users and build your brand.