Petites recettes pour un site web 2.0

Si vous contemplez un peu désabusé votre site internet viellissant (avec son superbe logo en GIF animé digne d’une publicité célèbre… il y a déjà quelques années) en désespérant chaque jour un peu plus de pouvoir rivaliser avec les jeunes pousses qui ne jurent plus que par AJAX et parlent déjà de web 3.0, rassurez-vous : au-delà d’un discours marketing provocateur, le fossé n’est en réalité pas si profond et quelques petites recettes simples suffisent bien souvent pour raccrocher le train de la technologie.

D’abord, le web 2.0, tout le monde en parle – mais qui sait réellement ce qu’on y trouve ? Je vous renverrai simplement à un article publié dans notre blog il y a quelques mois et qui expliquait en substance que le web 2.0 n’était que « l’utilisation de normes, de standards et de technologies pérennes » mises au service d’un « renforcement et d’]un élargissement des usages liés au web ». Concrètement : des interfaces plus intuitives et plus rapides au service de nouveaux outils interactifs et de nouvelles pratiques collaboratives (blogs, réseaux sociaux, syndication, …). Rien de révolutionaire en somme, mais une utilisation plus judicieuse de technologies éprouvées.

Premier lifting : graphisme et ergonomie. Aujourd’hui, on peut raisonnablement abandonner le bon vieux 800×600 et se donner un peu d’air en adoptant une résolution de 1024×768. Attention : cela ne signifie pas pour autant qu’il faille rajouter des contenus afin de combler le moindre petit interstice ! Au contraire, sans aller jusqu’au minimalisme poussé à l’extrême, n’hésitez pas à laisser respirer votre site. Présenter les informations clairement, sobrement, est un gage d’efficacité. L’exemple le plus significatif est sans conteste le moteur de recherche [Google, qui a su imposer son design épuré au service d’une efficacité maximale.

Le design de la page d’accueil est particulièrement important. Il est grand temps d’abandonner le fameux logo en flamme, qui ne fait qu’attirer l’oeil de l’internaute à un endroit inutile, au profit d’un logo plus discret placé dans un coin. On a généralement tendance à vouloir en mettre le plus possible sur une page d’accueil : rappelez-vous que l’on a vite fait de se perdre au milieu d’une avalanche d’informations, et qu’il vaut mieux cibler quelques faits marquants, qui serviront de portes d’entrée vers l’intérieur du site. Ainsi, afficher plus de trois actualités dans un bloc sur la page d’accueil n’a pas beaucoup de sens. L’internaute intéressé saura aller chercher l’information à l’intérieur du site s’il le désire.

En résumé, gardez à l’esprit que clarté, sobriété et efficacité constituent le tryptique gagnant du design d’aujourd’hui.

Des règles de navigation homogènes

Mais le design ne fait pas tout : on a bien souvent vu des internautes se perdre dans des sites esthétiquement plutôt réussis mais ne respectant pas les règles usuelles de navigation sur internet – ou pire : ne s’accordant même pas sur les règles de navigation entre différentes parties du site. C’est notamment fréquemment le cas pour des sites réalisés 100% en Flash. Les règles de navigation désignent aussi bien les conventions d’écriture des liens hypertextes, la présence de liens cliquables en divers endroits (titres, liens « en savoir plus », etc.) que l’existence d’un menu ou d’un chemin de fer à des emplacements prédéfinis.

Sauf dans des cas exceptionnels (comme des sites évènements où l’aspect visuel prime sur le contenu réel), inutile de chercher à se démarquer par des règles de navigation originales qui risquent de décourager bon nombre de visiteurs.

Un moteur de recherche efficace

Il est utile de savoir qu’un grand nombre d’internautes naviguent sur un site au moyen du moteur de recherche incorporé, plutôt que de tenter une exploration via les rubriques traditionnelles. Aussi est-il de bon ton de munir son site d’un tel outil, qui proposera une recherche simple (pour les internautes pressés) et une recherche avancée permettant d’affiner les critères (par date, rubrique, catégorie, etc.). Cette recherche devra bien entendu prendre en compte tous les contenus du site (y compris les éventuels documents joints). Un tri des résultats par pertinence, s’il n’est pas indispensable, sera incontestablement un plus. De même que la coloration des mots cherchés dans la présentation des résultats.

Vous me direz, en quoi la présence d’un moteur de recherche est-elle spécifique au web 2.0 ? Je vous répondrai qu’elle n’est effectivement pas spécifique, mais qu’un site sans moteur de recherche (ce qui est plus fréquent qu’on ne l’imagine) ne peut pas prétendre au label web 2.0.

Des URL signifiantes pour une bonne indexation

A l’ère de l’internet 2.0, finies les URL totalement absconses du genre http://xxxxx/tag.78fe9b19a6dd9dce.render.userLayoutRootNode.uP? uP_sparam=focusedTabID&focusedTabID=45& uP_sparam=mode&mode=view (type d’URL produite par uPortal) qui, outre qu’elles sont totalement incompréhensibles (et non mémorisables) pour un utilisateur, ne favorisent absolument pas le référencement. Dans le même style, on voit apparaître de plus en plus de site en AJAX qui permettent une navigation sans jamais recharger la page ni changer son URL : impossible dans ces conditions de «bookmarker» une page intérieure.

Aussi pensez à mettre en place des alias vers toutes les pages que vous voulez voir indexées par les moteurs de recherche. Il peut être intéressant d’automatiser cette pratique, en utilisant par exemple une règle de nommage basée sur les rubriques et les titres des articles. On peut même aller encore plus loin en choisissant de nommer les pages de recherche les plus souvent consultées selon une règle du type recherche/xxx (où xxx désigne le mot recherché).

Des contenus vraiment dynamiques

Mais que serait votre site s’il n’était enrichi en permanence par de nouveaux contenus ? Des contenus dynamiques (et par dynamique, il faut entendre non pas des contenus qui bougent à l’écran, mais qui sont régulièrement mis à jour !) sont à la base de l’intérêt suscité par un site internet.

Pour cela, il est temps d’abandonner les bonnes vieilles pages HTML statiques au profit d’un outil adapté à la gestion d’un site web : le CMS[Content Management System]] ou système de gestion de contenu. Une telle migration peut se révéler coûteuse au départ (il n’est en effet pas toujours possible de reprendre automatiquement tous les contenus du site), mais elle apporte tellement de souplesse qu’elle est toujours profitable sur le long terme. Si vous ne souhaitez pas investir sur une solution commerciale de gestion de contenu, il existe de nombreux produits Open Source de qualité (notamment [SPIP, Drupal, eZ publish, …).

Cette évolution est d’autant plus souhaitable qu’elle ouvre de nouvelles perpectives, notamment la possibilité de publier des articles ou des actualités sous forme de flux RSS[[Les flux RSS sont un mécanisme de publication d’informations sur internet favorisant l’aggrégation de contenus entre plusieurs sites]] – voilà quelque chose de très web 2.0 !

Quelques espaces de discussion

En préambule, nous annoncions qu’une des particularités du web 2.0 était l’interactivité des services proposés. Aussi un site internet 2.0 ne peut pas ne pas comporter quelques espaces de discussions propices à rendre le site encore plus dynamique. Pourquoi, par exemple, ne pas laisser les visiteurs réagir sur les actualités, les chroniques, ou tout autre contenu publié sur le site ? Sachez qu’il est toujours possible de modérer un forum de discussion, que ce soit a priori (tout commentaire nécessite l’aval d’un modérateur avant d’être mis en ligne) ou a posteriori (il est possible de supprimer les commentaires indésirables).

Allons encore plus loin, avec la mise en place d’un blog (vous savez, ces sortes de journaux de bord remplis au fil des jours, très web 2.0 dans l’esprit) réservé aux membres de l’organisation. Décryptage de l’actualité, veille technologique, etc. : les objectifs d’un tel outil peuvent être nombreux et variés, à vous de trouver un usage pertinent. Précisons au passage que la plupart des outils de gestion de contenu offrent de telles capacités. Pourquoi s’en priver ?

Taguez sans modération

Rassurez-vous, nous n’allons pas maintenant vous demander de prendre une bombe de peinture et de badigeonner votre nouveau site qui commençait tout juste à avoir un look sympa. Les « tags », ce sont simplements des mots-clés (ou des méta-données) ajoutés à vos contenus afin de les catégoriser. Ce mécanisme simple et performant permet, outre des recherches plus ciblées, de mettre en place une navigation par domaines connexes. Prenons le cas de références clients par exemple (pour une société commerciale) : chaque référence peut être classée selon plusieurs axes (secteur d’activité, type de mission, techniques mises en œuvre, etc.). Chaque axe pourra être associé à une famille de catégories, comportant un certain nombre de mots clés. Ainsi, on pourra par exemple facilement accéder à toutes les références dans le secteur bancaire ; ou à toutes les références se rapportant à des missions de maintenance.

Un outil certes un peu gadget mais tout de même sympathique et qui se répand un peut partout est le « nuage de tags », représentation visuelle des catégories les plus représentées sur tout ou partie d’un site (un bel exemple est donné sur le site de Flickr).

Et pour le dessert : saupoudrez d’AJAX

AJAX ne doit pas être vu comme la composante incontournable d’un site internet 2.0. Si vous appliquez déjà toutes les petites recettes citées précédemment, je vous accorderai volontiers le précieux label. Mais force est de reconnaître que de petites touches d’AJAX par-ci par-là peuvent se révéler un vrai plus en matière d’ergonomie et de confort d’utilisation.

Ainsi en est-il de l’auto-complétion : dans un formulaire, vous commencez à saisir un champ texte, et automatiquement vous voyez apparaître une liste de suggestions pour compléter votre saisie. Un exemple célèbre est le fameux Google Suggest, dont on peut largement s’inspirer pour le moteur de recherche de son site web : après avoir tapé quelques lettres, l’utilisateur se verra proposer l’ensemble des termes présents sur le site commençant par ces lettres – évitant ainsi les recherches inutiles.

AJAX peut également être utilisé pour le chargement asynchrone des images (dans une gallerie par exemple) : plutôt que de télécharger toutes les images au chargement de la page, il peut être avantageux de les charger à la demande. Ajoutez à cela un joli effet de surimpression et vous avez là une pure fonctionnalité web 2.0 (des modules prêts à l’emploi existent pour cela, citons par exemple Lightbox ou ThickBox).

Et pour finir, le top du top, ce serait quand même de proposer un service à la Google Maps pour donner le plan d’accès à vos locaux. Irréaliste ? Absolument pas ! Au contraire, rien de plus simple : il suffit d’appeler le service adéquat au moyen de quelques lignes de JavaScript, et le tour est joué ! Avec ça, plus personne n’osera remettre en cause votre label web 2.0 – acquis, avouez-le, à somme toute relativement peu de frais.

Un cordonnier pas si mal chaussé ?

Avant de vous quitter, je voudrais vous conter l’histoire d’un cordonnier qui vient de refaire ses semelles à neuf. Ce cordonnier s’appelle Clever Age, et il a essayé de mettre en pratique tous les bons conseils cités plus haut afin d’offir un site internet entièrement refondu, garanti 100 % web 2.0.

Vous y retrouverez nos dernières publications (livres blancs, fiches produits, chroniques, blogs), le calendrier des prochains petits déjeuners, le catalogue de nos formations et plein d’autres informations utiles (vous pouvez bien entendu tester le tout nouveau moteur de recherche AJAX).

N’hésitez pas à réagir sur le forum (modéré !) de la présente chronique pour nous faire part de vos remarques et impressions. Nous saurons alors si – une fois n’est pas coutume – le cordonnier est bien chaussé.