How to personalize the error pages of your website?

One of the many aspects not to be neglected during the creation of a website regards the error pages. What happens if a user inserts in the url the name of a page which doesn’t exist? The standard page of Apache appears “404 not found“.

As we will see further on, this is not very correct from the point of view of usability.

In this brief article you might get familiar with how to personalize the error pages of your website.

Personalizing error pages, a matter of usability

Indeed, that’s the point, usability. The fourth paragraph of Nielsen’s decalogue reads: “texture and standard“, which among other things means that we have to give the user the impression of always being in the same environment, also in case of an error message. Besides paragraph nine reads: “user help” referring in particular to the errors, which have to be expressed in a comprehensive language and without the use of codes.

Thus the error message shown in the following image:

is not good. For a better usability the error pages go redefined so that they become usable. If you try clicking on the following link (which takes us to a non-existent page), you will see the correct result:

http://www.yourinspirationweb.com/en/NotExistingPage.html

As you can see, it’s evident the impression of being in the same website. The error is explained in Italian and I have at my disposal the navigation so that I can reach the home page.

Preparing our personalized error page

From the moment the management of errors is trusted directly to the web server, we have to act upon its configuration. But first prepare your personalized error page as a normal html page and name it notfound.html. Make sure it has the same layout as the rest of the website; clearly indicate the error that is verified and provide a link which will readdress you at the home page.

Modifying the configuration of Apache

In order to modify the configuration of Apache, we make use of a particular type of file called .htaccess (no name – htaccess extension). You cannot even imagine these things can be done with this file (but with time we’ll see). For the time being we will limit ourselves to create it with a random text editor and to declare that we want to substitute the standard page for error 404 (file not found) with the one we have prepared (notfound.html) in this way:

ErrorDocument 404  /notfound.html

Save the document with the name .htaccess and place it in the main folder of your website together with the file notfound.html.

The .htaccess file modifies the behavior of apache in the folder it is located and in all its sub-folders, as a result placing it in the root this new setting will have value in all the website.

As you can see, if you try now to load a non-existent page, the standard error page is no longer shown but the one created by you instead.

It is possible to personalize the pages of all errors using the syntax we saw:

ErrorDocument

[page]
So if we wanted to personalize also for example the internal server error (500), we will modify our .htaccess file in this way:

ErrorDocument 404  /notfound.html
ErrorDocument  500 /serverError.html

Obviously by taking care first of creating the page serverError.html.
If you want to save the error pages in a separate folder, you have to indicate the path. For example:

ErrorDocument  404 /errorPages/notfound.html

Before finishing, here’s the complete list of error codes which you might find useful.

http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Conclusions

In this article we saw how it is possible, in just a few steps and by employing little time, to improve the usability of our websites adding value and professionalism. And you, what are you going to do next? Are you going to personalize your error pages, too?



Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Maurizio is married to the triad PHP - MySql - Apache and, not enough, he has a lover called jQuery. He has a blog where he tries to describe in detail all of "his lovers". His real specialty is the realization of large business application, altough he never refuses the commitment of a website.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

10 comments

  1. snlr
  2. snlr
    • the.dentist
  3. InfamousLA

Trackback e pingback

  1. Tweets that mention How to personalize the error pages of your website? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by nando pappalardo and Tom Bangham, Vitor Tavares. Vitor Tavares said: How to …

Leave a Reply

Current month ye@r day *