Creating a Simple and Effective 404 Page

Go ahead and take a look at the design of this 404 page; as you can see it is very clear. I have specifically chosen something so simple and clear so that we don’t get lost in the unnecessary bells and whistles.

The overall look and feel of this design is simple for the sake of the example; at the same time so is the layout. As I will explain to you shortly, a 404 page shouldn’t have a lot going on, so the layout is kept simple too. You don’t need clutter in any of your pages, including the error ones.

Creating a Simple and Effective 404 Page

The Usability

In terms of a usable page, and therefore one with good user experience, you need to keep 4 key rules in mind. I will tie each of those to the sample design in this tutorial.

1. Use Plain Language and Explain What Is Going On

No matter what kind of error your page may display, always explain errors in plain language so that the visitor can understand what just happened. It is unfair for them to have to decrypt why something is not working out based on technical jargon, or worse a bunch of numbers which mean something only to the developers of the project. It is not good enough to throw a pop up that says “incorrect input” when they missed the @ symbol in their email form, instead say “Your email address seems to be invalid”. Just like in the example, I’ve said “This is just embarrassing; this page does not exist…” It is simple and explains what is happening.

2. Provide a Way Out

A 404 page is a perfect example of this. So the page is not found, it does not exist: now what? Well, in our 404 page I provide a specific next step, which is to return to the home page. This is actually quite common for 404 pages. What you can also offer is to return to the previous page if the page was accessed through a broken link. What many forget to include though it the navigation – and the logo if it too links to the home page, as it should. If you get rid of the navigation you are depriving people from returning to your site, you are basically forcing them to bounce.

3. Keep the Same Design

This point goes along with the previous one about keeping the navigation; you should keep everything the same. Keep the same layout, look and feel… EVERYTHING. Just because something went wrong does not mean you need to take them to a newly designed, totally different page. This will confuse the shit out of your visitors, I promise you that. We don’t want to confuse them, we don’t want to scare them; we want to help them. You should treat error pages, like the 404 error, as any other page from the original page template. It is also important to keep the clutter minimal as this is not a page that needs to sparkle – this is a page which needs to clearly communicate help.

4. Allow Reporting

No matter how trivial an error, always allow reporting. There could be something wrong that you are not aware of, something could have gone wrong with your server and your site just broke. Maybe people were given a wrong link in a tweet and they can’t find the page. Or, maybe people are trying to visit a page that you no longer have and the redirection is not working. It does not hurt to allow people to let you know that there is a weird or recurring issue – and not just on 404 pages. Give them a button or a link to get in touch with you and it could help you identify your visitors’ pains.

The Code

Now that we went over the why behind the 404 page, let’s code up a simple example.

Basic Structure and Set Up

I will start with a simple HTML structure. You can see that there is nothing in it but the appropriate page title and a space for some CSS. There is no need to include an external file for the purpose of this example.

< !DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>404 - this page does not exist</title>
<style>
</style>
</head>
<body>
</body>
</html>

CSS Reset

This is a quick reset of the various margins and padding set by defaults through browsers and element’s own structure.

*{
   margin: 0;
   padding: 0;
}

Body and Anchors

There is very little going on in this design so there is very little with the default body style, same goes for the link. We are setting overall background and text colours, as well as setting link colours and stripping them of the default underline decoration.

body {
   background: #3f6eb3;
   color: #1f3759;
}
a:link {
   color: #1f3759;
   text-decoration: none;
}
a:active {
   color: #1f3759;
   text-decoration: none;
}
a:hover {
   color: #9fb7d9;
   text-decoration: none;
}
a:visited {
   color: #1f3759;
   text-decoration: none;
}

Including Fonts

In this example I’ve used two fonts: Bree Serif as the accent and, Source Sans as the main body font. They are both available from Google Fonts for free, so let’s include them in. first you want to either link or import the fonts from Google’s library.

@import url(http://fonts.googleapis.com/css?family=Bree+Serif|Source+Sans+Pro:300,400);

Because I’m using Bree Serif as an accent I have created its own class. I will also be adding the main default font – Source Sans Pro – to the body of the document.

.bree-font {
   font-family: 'Bree Serif', serif;
}
body {
   font-family: 'Source Sans Pro', sans-serif;
   background: #3f6eb3;
   color: #1f3759;
}

Page Header

The Header HTML

In the body of the document go ahead and create the following content structure. You will first start out with an overall content div that keeps everything on the page within it. Then, we can create the header where the logo and navigation will live. (I know that the logo placeholder is lame, please forgive me.)

<body>
   <div id="content">
      <header>
         <div id="logo">
         <a href="#">Logo</a>
         </div>
      <nav>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      </header>
   </div>
</body>

The Header CSS

What we want to do now is style the overall content holding div as well as the awesome header we just placed in. First we want to set the width of the content holder next, we want to center it. Simple enough.

#content{
   margin: 0 auto;
   width: 960px;
}

Now we can style the header, its logo and navigation too.

#logo {
   margin: 1em;
   float: left;
   display: block;
}
nav {
   float: right;
   display: block;
}
nav ul > li {
   list-style: none;
   float: left;
   margin: 0 2em;
   display: block;
}

I’d like to think that this is straight forward, simple styling. However, you should have noticed that the logo and navigation are using float properties. The float property is tricky and strips elements of their flow where elements end up on top of one another instead of one after the other like the naturally would; this is where the clearfix comes in, it is a hack which protects against this nonsense.

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: block;
}

In the HTML, the clearfix should come right after the header.

<header>
   ...
</header>
        
<div class="clearfix"></div>

The Main Content

The very last thing we are going to throw in is the actual 404 page content. Take a look below to see its HTML structure, there are a few paragraphs with big fonts so that you would pay attention to the message and that is all. There is very little here are there is very little needed, just like I mentioned do you in the rules before

<header>
   <div id="logo">
      <a href="#">Logo</a>
   </div>
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </nav>
</header>
        
<div class="clearfix"></div>

For design sake, I have underlined the ‘home page’ link in the copy so it stands out a little bit form the copy without recolouring it. Additional, we are setting simple CSS style for the overall body copy, and tweaking the font sizes. Once again, straightforward stuff.

a.underline, .underline {
   text-decoration: underline;
}
#main-body {
   text-align: center;
}

.enormous-font {
   font-size: 10em;
   margin-bottom: 0em;
}
.big-font {
   font-size: 2em;
}
hr {
   width: 25%;
   height: 1px;
   background: #1f3759;
   border: 0px;
}

I hope you understand now what it means to have an error page. If you would like to check out the source files, you can find them here.

Advertisement