Creating a usable 404 page

One often overlooked feature of web design is the 404 Error page. This is the page that a visitor will see when a certain page or file is not found. Here’s the basic template I use to create a 404 error page:

XHTML

<h2>Page Not Found</h2>
<p>The page you requested cannot be found. The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
<h3>Please try the following</h3>
<ul class="list">
	<li>If you typed the page address in the Address bar, make sure that it is spelled correctly.</li>
	<li>Open the <a href="/index.php">www.i-nalysis.com</a> home page and look for links to the information you want.</li>
	<li>Enter a term in the search box to look for information on i-nalysis.com.</li>
	<li><a href="get-help/contact.php">Contact us</a> with your question.</li>
</ul>

Working with the .htaccess file

Once you have a 404.php or 404.html created and styled you need to tell the server to show that page when a file or page is marked as missing. To do this you need to create an .htaccess file, which is a hidden filetype. Because it is a hidden filetype it may disappear if you save it as “.htaccess” so you may need to save it as “htaccess.txt”, upload it to the server, and then rename it to “.htaccess”.

Once you have your .htaccess file setup open it with your editor of choice and add the following line:

ErrorDocument 404 /404.php

Where /404.php is the relative or absolute path to the 404 page on the server.

Suggested Improvements

A great feature I’d like to add to my 404 arsenal is a site wide search field for people to use in order to find whatever it was they were looking for that went missing. In general adding a search to a site can be a time consuming and expensive process.

One great approach to setting up a powerful site search is explained by Christian Heilmann at 24 ways. Christian’s article, Sitewide Search On A Shoe String, explains how to tap into Yahoo!’s BOSS API. BOSS is a REST API, meaning you can use it in any HTTP request or in a browser by simply adding the right parameters to a URL.

  • Share/Bookmark

Comments

No comments have been added yet.

Leave a Reply

show allowed tags

XHTML: You can use these tags if you promise to play nice: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

By submitting a comment here you grant Fresh Tilled Soil a perpetual license to reproduce your words and name/web site in attribution. Inappropriate comments will be removed at admin's discretion.

Twitter Updates

@freshtilledsoil is talking about...

Latest from the Blog

    How a Redesign Reduced Our Bounce Rates by 45%

  • We recently updated our own home page design with some very positive results. As you can see below the redesign wasn’t significantly different but there were some key improvements. Our goal with this redesign was to reduce the “drop-off” or bounce rate from the site. From the Google Analytics charts…

    • Share/Bookmark

Let's Talk

VP of Business Development, Dan AllardHi, I'm Dan and I'd love to hear from you to explore the possibilities of your project.

Get Started q

Connect with us

Follow FreshTilledSoil on Facebook! View photos from FreshTilledSoil's Photostream Visit FreshTilledSoil's LinkedIn page Read FreshTilledSoil's tweets