One major design element often overlooked by web developers is their 404 File Not Found error page. Most our focus gets lost on CSS and XHTML validation that we often overlook what happens when something goes wrong. Even these pages should be styled with the individual touches of the website. Effective 404 error pages communicate why a particular page couldn’t be displayed and what users can do next.

Who wants their users to see the dreaded default 404 page:

Creating your own custom 404 File Not Found Page can be done in three simple steps by creating or modifying the .htaccess file of the directory and placing a 404.html file in the same directory.

Step One – Understanding .htaccess

On Unix-based servers using the .htaccess file can be a fantastic tool in any web developers arsenal. Many though are unaware what functions this powerful file can unlock while using an Apache web server.

If your web server is not an Apache web server, you will have to find out from your web host what you need to do to enable the server to serve your customized 404 error file when a file cannot be found.

The first thing you need to do is locate your home directory. This is often either your www directory or public_html directory. Locate your .htaccess file and open it with any text editor. If you do not see this file you can simply create one with a text editor (such as Notepad on Windows).

Add the following line to a file named “.htaccess” minus the quotes:

ErrorDocument 404 /404.html

The “ErrorDocument 404” directive tells the Apache web server that whenever it cannot find the file it needs in that directory or its sub directories, the server should use the document specified in the URL that follows. In this case, we specify to look for 404.html in the same directory as the .htaccess file.

One .htaccess file in your main directory will handle that directory and any of its sub directories. If you want a certain sub directory to show a different 404 File Not Found message, you can always place a .htaccess file into that directory. This will override any .htaccess files you have in the parent directories.

Step 2 – Creating Your Error Document File

Create your custom 404.html page and insert into the same directory as your newly modified/created .htaccess file. Be sure to add whatever information you want your visitors to see when they hit a missing page.

There are some basic guidelines that you will want to include on your 404 error page:

1. A link to your main page, with a suggestion that the visitor can find what he wants there.

2. Brief Explanation: Tell them why they have reached a page that no longer exists or has been moved and give them other options.

3. Include a valid link menu, site map or search function so they may still find what they are looking for, or perhaps navigate to another page on your site.

It is also a good idea to add a meta tag using “nofollow” to the top of your 404 page just in case a search engine lands on it. Never hurts to keep your bases covered in case of an accident or confused bot.

<meta name="robots" content="noindex, nofollow">

Step 3 – Upload Your Newly Created 404.HTML and Created/Modified .htaccess File

Make sure your FTP program is set to upload as ASCII. Upload the 404.html and the .htaccess file to your home directory (often public_html or www).

Make sure your browser cache is clear and type in a file you know doesn’t exist on your web server. An example would be http://www.yoursite.com/oopswhydididothis. You should be seeing your new, fancy, and much more welcoming 404 error page displayed.

404: Understanding What it All Means

The first digit “4” represents a client error. The server indicates that the user has made a mistake such as misspelling a URL or requesting a page that is no longer available on the server.

The middle digit, 0 represents a general syntax error and could indicate a spelling mistake.

The last digit, 4 refers to a specific error in the group of 40x.

The World Wide Web Consortium (W3C) states that 404 Not Found should be used in cases where the server fails to find the requested location and is unsure of its status. Whenever a page has been permanently removed, the status code used must be 410. But hardly have we seen a 410 page. Instead, 404 Not Found page has become popular and the most commonly used error page.

Internet Explorer Finds a Way to Ruin The Day

Internet Explorer versions 5 and below do not support your customized error page if its size is less than 512 bytes. To avoid this simply make sure your 404 files size is over 512 bytes, not including images (the actual pages code itself) and even IE users will have the benefit of your new page.