Creating Custom 401 and 404 Error Pages

Ever tried to access a particular URL and instead of seeing what you expect you see there you see a strange message that says something about a 401 or a 404 error? To show you more specifically what I mean, go to http://www.3-squares.com/, the old domain of a now-defunct catering company in Portland, OR. When you go there, instead of displaying the company's old home page, your browser will display a page that says something about how the server can not be found. What's happening, in fact, is that the web server is getting a request from you, the visitor, that it simply can not process and so it displays one of several error messages to notify you of the server's findings.

There are over a dozen different kinds of error messages, but the two most common error messages you'll see are the 401 Unauthorized Access message, which is displayed whenever an attempt is made by a visitor to access a password protected web page without permission, and the 404 File Not Found message, which you'll see anytime you enter in a misspelled or inaccurate URL in the address bar or happen to click a broken hyperlink on a web page.

Without adding any kind of customization, the server and browser determine which message gets displayed, and depending on which browser you're using, the exact message you read might be somewhat different. To illustrate, view the http://www.3-squares.com/ page in a different browser than the one you used before so you can compare how the messages are different in each. For example, if you viewed the URL using Firefox first, open up a second browser such as Internet Explorer, Opera, or Safari to compare the messages. Now ask yourself this, “Wouldn't it be better to have a single, customized error message for visitors, regardless of the browser they are using?” Yes! With a customized page, visitors see exactly what you want them to see.

Building Your Own 401 and 404 Error Pages

What many new web designers don’t know is that both of the 401 and 404 error message pages can be fully customized to match the exact design and layout of any existing Web site. Even better, with just a little help from the host provider, both 401 and 404 error pages can be installed and functioning within 24 hours of being uploaded to the remote host server.

So just what, exactly, should go on these pages? Well, that's mostly up to you, but there are some general guidelines you can follow:

401 Unauthorized Access

The 401 Unauthorized Access page often includes a the refresh <meta> tag in the head of the code to force the page to transfer to a different, working URL within a specified number of seconds, such as, <META HTTP-EQUIV="refresh" content="5;URL=http://www.YOURDOMAIN.com">. The rest of the page will contain a message similar to the following:

You have attempted to access a page for which you are not authorized. This page will automatically redirect to the [INSERT DOMAIN NAME] Home Page in 10 seconds, or click the following link to manually redirect this page to [INSERT DOMAIN NAME]

404 File Not Found

The 404 File Not Found page can be as customized as you like and can include links to other pages on the site as well as feature advertising for featured products and services. At minimum, however, it should include content similar to the following:

The page cannot be found:
The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.
Please try the following:

• If you typed the page address in the Address bar, make sure that it is spelled correctly.
• Open the www.DOMAINNAME.com home page, and then look for links to the information you want.
• Click the Back button to try another link

Go to http://www.luckychair.com/lemon.html to view an example of a customized 404 File Not Found error page, like the one shown here in Figure 1-1.

Figure 1-1. A Custom 404 Error Page.

To customize your own 401 and 404 error message pages:

Presuming you've already designed and built the web site you'll be adding the customized error pages to, all you'll need to do to create customized 401 and 404 error pages is to make two new web pages based on existing pages on the completed site. This ensures that the new error pages use the same exact layout and design. Save the two new files with the filenames error401.html and error404.html respectively. Then, simply edit the content areas for both pages using the copy shown above or customize the content to suit your site’s particular needs. For instance, rather than only showing the home page URL on the error page, consider also displaying links to all the main pages on your site, such as Home, About, Services, and Contact. Add links to featured products, services, portfolios, client lists, a site map, a site search tool —anything you think a visitor might be interested in viewing or finding after seeing the error message. Since this page content is completely under your control, use it in any way you like to assist visitors (your future customers!) in finding the information they may be seeking.

After you've created the new custom error pages, you'll then need to edit existing .htaccess file on your server. The .htaccess file is a simple ASCII text file that resides at the root level of the host directory and gives instructions to the host server about how to process information for the domain, such as blocking named IP addresses, providing password protected access to some or all of the site, and displaying custom error messages.

To see if your remote host server already has an .htaccess file installed, establish an FTP client session to the server and look for the file at the root level. If you do see an .htaccess file, download a copy of it to your local computer so you can edit it. If you don’t see an .htaccess file at the root level, follow the steps below to create a new file.

To create an .htaccess file, follow these steps:

1. Open a text editor (such as notepad or textedit) and exactly type in the following two lines of code, including all the odd spaces and punctuation:

ErrorDocument 404 /error404.html
ErrorDocument 401 /error401.html

2. Save the file with the filename htaccess.txt into the root level of your local site. In other words, save the file in the same place as the index.html homepage for the site you'll be adding the new error pages to.
   
   
3. Establish an FTP client session to the host server and upload a copy of the htaccess.txt file to the root level of your host server. While still connected, edit the file name of the htaccess.txt file on the remote server to .htaccess by removing the .txt extension and adding a period in front of the filename.
   
   
4. Again, while still connected, upload both your new error401.html and error404.html files to the root level of your host server.
   
   
5. End the FTP client session.
   
   
6. The last step after creating your error pages and .htaccess file, and uploading them to the root level of your remote server is contacting your host provider for further instruction on how to make these new error files replace the server’s default error message pages. The host provider typically needs to configure some software on its end before the new pages will work. They might also request that you log into your site’s control panel or site utility page and make some adjustments to your site’s configuration yourself.

To view live examples of (and grab the source code for) both a 401 HTTP Protocol Unauthorized Access and a 404 HTTP Protocol File Not Found error page, go to the new Web Design: The L Line, The Express Line to Learning book's author's tips page at: http://www.luckychair.com/l-line. Readers and Instructors who purchase the book will have additional online access to a (password protected) Web site providing a test bank with hundreds of questions, PowerPoints with course and book outlines, and course syllabi and code.

Sue Jenkins is a freelance web designer, graphic designer, artist, writer, and illustrator, she teaches Dreamweaver, Illustrator, and Photoshop classes at Noble Desktop in New York City, and offers private training and web consulting to companies across the USA. Her first book, Dreamweaver 8 All in One Desk Reference For Dummies, is a must-have reference book for all Dreamweaver users. Her second book, Web Design: The L Line, The Express Line to Learning, available Feb 2007, is a rigorous Web Design classroom-in-a-book that includes preassessment questions, tutorials, glossaries, and test questions as well as several online tools such as test banks, additional tutorials, and question and answer sessions. If your company needs a website, website redesign, logo, or illustration, see Sue’s consulting page for more information,or go directly to her website learn more about her design services. http://www.luckychair.com.