Custom Error Page Tips – Designate The Pages You Hope No One Sees

By  on  

Creating custom error pages is extremely ironic in that you put great effort into pages you hope no one sees. Custom error pages are worth the effort as they:

  • keep a person at your site -- without the custom error page, the user sees an ugly error page.
  • can be used to record the errant URL and its referrer so that you may easily fix a bad link within your own site.
  • show professionalism in that you tend to every possible output of your website.
  • prevent most users from recognizing a problem with your site and thus your website maintains credibility.

There are 5 main error pages you should create:

  • 400 - Bad Request
  • 401 - Authorization Required
  • 403 - Forbidden
  • 404 - File Not Found
  • 500 - Internal Server Error

Once you have your pages ready, you'll need to add one line of code per error page to your .htaccess file.

The Code

ErrorDocument 400 /bad-request.php
ErrorDocument 401 /authorization-required.php
ErrorDocument 403 /forbidden.php
ErrorDocument 404 /page-not-found.php
ErrorDocument 500 /internal-server-error.php

The ErrorDocument directive allows you to tell the server which page will be called when the respective error number occurs.

Tips For Handling Error Pages

  • Know your audience before judging whether to let the user know the page they were looking for wasn't found. A Web Developer will want to know that a page wasn't found, whereas an average web user may lose respect for your site...or visa versa.
  • Keep them light & funny but maintain professionalism.
  • Keep them within the same theme of your website or at least have your navigation menu on the error page -- it allows users to navigate to other parts of your website. You don't want users to just hit the back button, right?
  • Use each page to record the errant URL and referrer so that you can identify bad links.

Recent Features

Incredible Demos

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!