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

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    MooTools Wall Plugin

    One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell'Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show...

  • By
    Degradable SELECT onChange

    Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...

Discussion

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