How to Write Custom Error Pages in Web Design
If you spend any time surfing the Internet, you’ve probably encountered a few error messages. Error messages have numerous causes, such as misspellings, outdated links or internal server errors. When an error is encountered, your server will display specific generic error pages according to the error.
These error pages are not only dead ends, but they are also very frustrating for your potential visitors.
When your visitors mistype your web address or click on an outdated link and receive the dreaded error page, they’ll most-likely click on their back button and never return.
However, you can recover a majority of your lost visitors simply by taking the time to create some customized, user friendly error pages.
As servers run different types of software and do not function in the same manner, there isn’t a simple method for creating custom error pages that will work with every system.
However, if you have your own domain and your site is hosted on a Unix/Linux server running Apache, this article will assist you in creating custom error pages.
If you’re not sure what type of server you’re on, visit the following web address to find out:
Before we begin, keep in mind, editing your server files is serious business. Even one small typographical error can wreak havoc — make sure you make a backup copy of any file you’re planning to edit.
Guidelines for creating your error pages:
1. Create your error pages in standard HTML — just as you would create any other web page for your site.
2. Don’t alarm your visitors. Never include the word “ERROR” in large, bold text. Your visitors may immediately become alarmed and think they’ve done something to cause the error.
Instead, be apologetic and encourage your visitors to click on the navigational links to locate additional resources and information.
3. Your error pages should look just like the rest of your web pages. Each error page should contain good navigational links, a search feature, and provide information in regard to the specific error they received.
If you’d like to see an example error page, visit the following web address:
Once you’ve created an error page, save it as the error name. For example, if you’re creating a customized error page for a 400 Bad Request error, your page should be saved as 400.html.
Here are some of the more common errors:
- 400 Bad Request
- 401 Authorization Required
- 403 Forbidden
- 404 File Not Found
- 405 Method Not Allowed
- 500 Internal Server Error
- 501 Method Not Implemented
- 502 Bad Gateway
- 503 Service Temporarily Unavailable
Once you’ve created your pages, you’ll need to access your server via FTP and create a new folder called “errordocs” where you store your HTML files. Upload your new error documents into your new folder.
Your next step will be to locate your .htaccess file and download it to your computer. (If you use FrontPage to publish your web pages, you cannot customize the .htaccess file, as FrontPage uses the .htaccess file.
Editing the file may cause errors in your configuration.) The .htaccess file should be located on your server where you store your HTML files.
If the .htaccess file isn’t visible, you can create one within a plain text editor. However, you must first make sure your server isn’t configured to hide the file. Your FTP program should enable you to choose to display hidden files and folders on your server.
Once you’ve downloaded your .htaccess file, open it within a plain text editor, such as Note Pad, and add the following lines below any other text that may be present:
- ErrorDocument 400 /errordocs/400.html
- ErrorDocument 401 /errordocs/401.html
- ErrorDocument 403 /errordocs/403.html
- ErrorDocument 404 /errordocs/404.html
- ErrorDocument 405 /errordocs/405.html
- ErrorDocument 500 /errordocs/500.html
- ErrorDocument 501 /errordocs/501.html
- ErrorDocument 502 /errordocs/502.html
- ErrorDocument 503 /errordocs/503.html
If you’re creating your own .htaccess file, open a plain text editor and add the above lines. When typing in the information, make certain you type it exactly as it appears above. You can include the error documents of your choice.
Once the file is complete, save it as .htaccess and upload it to your server, via FTP in ASCII mode, where you store your HTML files. For additional information on File Transfer Protocol (FTP) you may visit:
If you have a Windows operating system, you will be unable to save the file as .htaccess. You’ll need to save it as htaccess.txt.
Once you upload the file to your server, you can rename it to .htaccess. That’s all there is to it. When your visitors click on an outdated link, your custom error page will now be displayed.
Creating your own custom error pages is well worth the time and effort, as they will enable you to recover an unlimited number of your visitors. If you follow this step by step guide, you can have your pages up and running in no time.
Final Thought: Now that you’ve read Shelley’s article about writing custom error pages for your site, you’ll want to be sure and take her Web Design Course.
I’ve found this to be the most comprehensive web design course for beginners on the Net, very affordable and I highly recommend it if you are ready to get started in designing websites.
If you are getting excited and feel you are ready to learn beginner web design from home, the Web Design Mastery Course is for you!
Webmaster Shelley Lowery has put together one of the most comprehensive, easy to understand website designing packages online today – and you can get instant access to the course materials.
And, since this is the official website, you can take advantage of the incredible guarantee, any discounts available, and you’ll get all the great free bonuses offered when you purchase today.
Just click on the link below to see what Web Design Mastery can do to jump-start your entrance into beginner web design.
CLICK HERE To See Current Bonuses And Discounts
About the Author: Shelley Lowery is the author of the acclaimed beginner web design series, Web Design Mastery — an in-depth guide to professional beginner web design that is rapidly becoming known as synonymous with beginning tutorials.
Filed under: Web Design