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
    CSS Circles

    A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...

  • By
    dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

Discussion

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