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?
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
10 comments
Trackback e pingback
-
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 ...
“htaccess” is the name of the file, not the extension. The dot makes it a hidden file, in a certain context. Your “” strings will certainly produce a server error.
… your “line break” strings
Hello Snlr , thanks for the clarification. There is a controversy if htaccess is the extension or the file name. I think it is secondary.
The line breaks have been inserted by WordPress and obviously should not be there. I have corrected.
There’s no controversy over if htaccess is an extension or a file name… it is, as snlr says, a hidden file.
Where’d you get that from?
What you say is right. However, there are nuances about which there is no need to open a debate. I repeat, is a secondary issue.
Thanks to all
Great post – .htaccess is very useful.
Thank You InfamousLA!
Have a look at our personalized error page > http://en.casino-lemonade.com/404/ … and don’t forget to push the button
What do you think about our 404 error ?
Congratulations. It ‘very funny