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
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

  • By
    jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

Discussion

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