Cet article ne s’intéresse pas aux pages fonctionnelles, car cela dépend bien évidemment de chaque site. Par exemple, pour un blog, il est conseillé d’avoir au moins une page à propos qui présente son auteur et une page contact avec tout le nécessaire pour permettre aux lecteurs d’échanger avec ce dernier.

Non, l’idée ici est d’étudier les pages d’erreurs propres à tous les sites Internet. La première qui vient à l’esprit, c’est cette fameuse erreur 404 Page Non Trouvée qui est affichée lorsque l’adresse entrée par l’utilisateur est erronée ou que le contenu qui lui était auparavant associé a été déplacé. Au passage, certaines pages sont très originales ou drôles.

Il existe d’autres erreurs (toutefois moins fréquentes) liées au mode de fonctionnement du protocole de communication d’Internet. Généralement, les serveurs web fournissent toujours des pages standards pour ces erreurs, mais elles sont très austères et souvent en anglais : il est ainsi préférable de les modifier. De toute manière, on s’aperçoit rapidement de cet oubli lors de la phase de test et il est donc très facile d’y remédier.

En revanche, il peut être nécessaire de se doter de pages spéciales (qui ne sont pas du tout fonctionnelles) dont le seul but est d’avertir le visiteur d’une situation particulière.

La page de maintenance

C’est probablement la page la plus courante et dont tout site sérieux doit se doter. Elle permet de bloquer l’accès au site pendant qu’il est mis à jour avec une nouvelle version. Généralement, un simple message (parfois humoristique) suffit :

Page de maintenance

Mais on peut également en profiter pour rediriger les visiteurs vers un site partenaire (ou sur le blog de l’entreprise s’il y en a un) ou les faire patienter avec un petit jeu en Flash.

La page d’incident

La page d’incident a pour objectif de préciser aux utilisateurs du site que ce dernier a rencontré un problème important et qu’il n’est plus utilisable pour le moment. L’idée ici est d’éviter d’afficher aux utilisateurs des messages d’erreurs incompréhensibles et de limiter leur accès au site afin de vous permettre de travailler tranquillement sur ce problème :

Temporary offline

We are sorry for the inconvenience, but Loomiz is temporarily unavailable. We are currently working on the problem right now and we hope to solve it soon. Please come back later.

Bien sûr, il peut-être intéressant de préciser plus d’informations quant au problème ou à l’heure estimée de remise en service.

Typiquement, je suis persuadé que des outils comme Twitter ou Jaiku ont une véritable utilité lors de ce genre d’incident, car il est possible de communiquer en temps réel où on en est dans sa résolution. Ceci dit, il serait plus professionnel de mettre au point un système équivalent sur un serveur à part, mais ce serait moins web 2.0

La page spéciale Digg

Quand le site se retrouve en première page de sites d’actualités très populaires comme Digg, il peut subir un afflux très important de visiteurs en un laps de temps très court. Généralement, le serveur web est sous dimensionné ou n’est pas préparé à gérer cette augmentation subite de trafic.

Le site devient alors pratiquement inaccessible car il doit alors prendre en charge un nombre incroyable de requêtes. Dans ce cas-là, on peut en limiter les effets avec une page spéciale informant les visiteurs de la situation. Très souvent avec ce genre de phénomène, il est possible d’envisager des textes d’explications moins conventionnels :

Recovering from heavy traffic

We are currently suffering from the Digg effect. Gary went out to buy a new server to handle the influx of web requests, and maybe some beers too.

Pour ce type de page, il est important de limiter au maximum son poids et les ressources associées (images, fichiers Javascript, …) afin de ne pas augmenter inutilement la charge du serveur web qui a déjà du mal à gérer l’afflux de visiteurs.

La page d’annonce ou d’invitation

La page d’annonce est un peu différente des précédentes, puisqu’elle ne mentionne pas de problème particulier. Le but de cette page est de communiquer à propos de l’ouverture prochaine du site et éventuellement de commencer à distribuer des invitations pour la phase de test. Voici d’ailleurs en avant-première un petit aperçu de celle de Loomiz :

Page d'annonce

Pour conclure

Il existe bien sûr des solutions plus performantes pour des sites avec un trafic et des contraintes très importants. Ce sont des solutions matérielles qui peuvent être très complexes et très techniques et qui sont gérées par des personnes dédiées à la mise en production du site.

Néanmoins, il est très aisé de mettre en place les pages étudiées dans cet article. Cela dépend bien sûr du serveur web que l’on utilise, mais il serait dommage de ne pas s’en doter (sans attendre le moment où le besoin se fera véritablement sentir), d’autant plus qu’il s’agit malgré tout d’un vecteur de communication non négligeable.

A lire également

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 2 heures et 13 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.


22 commentaires à propos de “Les pages à ne pas oublier lorsqu’on crée un site web” :

  1. Meric pour cet artilce vraiment intéressant qui condense les informations utile. Par contre tu ne dit rien au niveau des moyens technique à mettre en oeuvre pour mettre en place ce genre de page.

    Ce que je sait :
    - pour la page d’erreur 404 personnalisé il faut un .htaccess
    - pour la page de maintenance il suffit d’effectuer une vérification à chaque chargement de page pour savoir si le site est en mode maintenance ou non (l’information seras gardé dans un fichier de configuration par exemple) et dans seules les membres authentifiés en temps qu’administrateur auront accès à la plateforme

    Ce que je ne sait pas :
    - comment faire pour afficher une page d’informations lors d’un incident sur le site ? Il faut regarder du côté des”notices PHP” ou cela n’as rien à voir ?
    - comment on affiche une page “spéciale Digg” ? Comment dire à notre script “quand il y as trop de trafic envoie cette page à l’utilisateur” ?

    Et vous quels sont vos moyens de communications lors de ces différents cas ? Et comment faites vous cela techniquement ?

    Merci, je pense que cela peut servir à du monde.

    Pierre

  2. Salut, très bon article (comme toujours j’ai envie de dire)…Nous avons oublié quelques pages, mais pas la 404 sur notre site (on a opté pour un peu d’humour)
    http://formationvideo.emob.fr/404

    ps: je pense à ton email aujourd’hui…

  3. Salut,
    Pour l’affichage de la page de maintenance, je vous propose un moyen simple par htaccess de le faire :

    #Rediriger tout le monde sauf une ip vers la page d’attente
    RewriteEngine on
    RewriteCond %{REMOTE_ADDR} !220.241.10.112
    RewriteRule .* /maintenance.php [L]

    Toutes les addresses IP sont redirigées vers la page de maintenance sauf une (ici il s’agit de la 220.241.10.112 adresse pipo)
    ne pas oublier le ! sinon c’est l’inverse qui ce passe (seulement cette adresse IP qui est redirigée vers la page de maintenance :-D )
    Voili voilou

  4. Hello, pour la page de maintenance il est parfois utile d’y a jouter un connecteur avec une clé, je m’explique: les visiteurs verront la page de maintenance alors que les personnes en procession de la clé seront à même de voir le site. Très pratique en cas de grosse mises à jour du site, car cela permet de le tester avant le lever du rideau!

    ++

  5. Ne pas oublier les pages 404, comme ce qu’on a fait chez Dailymotion : http://www.dailymotion.com/sdflksjl

  6. J’ai préféré ne pas trop rentrer dans les détails techniques, car j’attends de déployer la nouvelle version du blog qui permettra d’inclure du code formaté dans mes articles. Et puis tout le monde n’utilise pas un serveur Apache (attention le fichier .htaccess ne concerne que ce dernier), même s’il s’agit du serveur web le plus répandu et probablement le plus utilisé par les lecteurs de ce blog.

    Mais pour Loomiz, j’utilise en effet la règle présentée par Bertrand. Pierre, je gère les trois premiers types de pages discutés dans ce billet avec ce système (mais cela nécessite une intervention humaine). Ponsfrilus, est-ce que tu pourrais nous expliquer plus précisément ton système de connecteur/clé ou s’agit-il juste tout simplement d’authentification ?

  7. Oui une authentification ou une clé en query string du style http://www.mon.site/?key=43859.....5293845238

  8. Je comprends mieux maintenant. Pas mal du tout cette idée de clé !

  9. Très bon article Stéphane.
    Ces pages restent très souvent “oubliées” par les développeurs/concepteurs, et pourtant elles apportent un petit plus : lors des maintenances des grosses applications (Flickr, Twitter), beaucoup de personnes font des captures où en parle.

    Pour l’idée de la clé, c’est plutôt destiné à des versions “beta privées” non ?

  10. Aie, aie aie… j’ai encore loupé quelque chose. Je suis toujours le dernier de toute façon ! PFFF… :( Bon je m’attel à la lecture de ce (j’en suis sûr) fameux texte ! :-D

  11. Super comme article!
    Toutefois, un petit regret s’installe dans les premières lignes, en voyant le titre, je me suis dis que tu allais parler des pages about/credits/FAQ etc… qui sont toutes aussi importante dans un site, mais toutes autant délaissées que les pages erreurs, par les développeurs. ;) Moi le premier ;(

  12. Yop.

    Comme Badoux, je m’attendais à un billet sur toutes les pages “mineures” d’un site, qui revetent une importance capitable, en fait. Les pages “a propos”, “contact”, “plan”, “mentions légales”. Ces pages, je les visite systématiquement lorsque je vais sur un site, et elles permettent de faire le tri entre les sites vite-fait et les sites réalisés intelligemment, voire avec humour.

    Bref, une idée de billet à creuser…

  13. Et les conditions générales de vente ? C’est sympa aussi ;). D’ailleurs je me rappelle d’un site qui les avait rédigées de manière humoristique. Il faudrait que je le retrouve. Sinon oui Romain, la clé ne sert a priori que pour ce genre de choses.

  14. Si on veut approfondir le sujet :
    http://www.tux-planet.fr/blog/.....rreurs-404

  15. Je viens de tomber sur une page d’erreur 404 qui affiche le fameux message dans toutes les langues. Assez impresionnant, je dois dire :

    http://www.ibiblio.org/mdw/linux.html

  16. Très intéressant article. :)
    Je me le mets sous le coude dans mon del.icio.us ;)

  17. j’ai fini lemings en tout cas
    très sympa cette version en dhtml

  18. En parlant de ça, j’ai trouvé une page 404 bien sympa sur le net. Je vous invite à la découvrir en lisant mon article à ce sujet : http://fredzone.org/La-plus-be.....onde.html. Je précise quand même que je ne fais pas de l’auto-promotion :) Quoi qu’il en soit, il est certain qu’il vaut mieux soigner ces différentes pages.

  19. Je précise quand même que je ne fais pas de l’auto-promotion

    Ben… Si :)

  20. fredzone.org est un bon exemple de site avec 404 non personalités ;-)
    ton lien n’est pas bon il y a un ‘.’ à la fin :)

  21. Ah oui, le point servait en fait à finir la phrase mais il l’a compté dans le lien :s Pas de chance, comme dirait l’autre. Et sinon, pour l’auto-promotion, je précisais juste que ce n’est pas mon objectif et que je n’ai pas proposé ce lien pour cette raison là. Mais bon, si mon message prête à confusion, je ne vois aucun inconvénient à ce qu’il soit effacé ^^

  22. Moi j’ai bien aimé celui de technorati ;-)
    http://blog.profession-web.ch/.....ti-en-rade


Par contre, il y a encore des trucs qui ne marchent pas. Par exemple il a compris 'DesignS' au lieu de 'Design'.

Articles Récents

Les derniers articles publiés

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…