Le site de La brasserie du bon coin nous expose d'un seul coup trois erreurs à éviter en matière d'alignement des informations dans une page web.

1. L'alignement centré, s'il convient à la carte des desserts, ne favorise pas la lisibilité d'un texte coulé.

2. L'alignement justifié, lorsqu'il est appliqué à une colonne de texte étroite, crée de gros trous entre les mots. J'appelle ce phénomène l'effet gruyère. Lecteur fidèle, nous nous étions déjà posé cette question : Les textes justifiés sont-ils justifiés ?

3. Les champs d'un formulaire, eux aussi, doivent être correctement alignés pour faciliter le balayage et l'encodage de l'information. Dans cet exemple, voyez comme le "nombre de couverts" et l'option "fumeurs" sont décalés dans la mise en page.

Tous ces détails liés à la maîtrise typographique contribuent à détériorer ou, au contraire, améliorer la lisibilité de vos contenus.

En l'espace de trois ou quatre ans, j'ai eu la chance de pouvoir travailler à plusieurs reprises avec l'équipe web du groupe Dexia. J'ai ainsi animé quelques séminaires et produit quelques analyses sur l'évolution de dexia.com, le site institutionnel du groupe, et ses relations avec les sites nationaux.

Un véritable défi pour l'équipe de communication web que de faire évoluer les choses de manière cohérente au sein d'une structure imposante qui vit au rythme des fusions et des changements structurels permanents, imposés par un secteur en pleine internationalisation.

Une des réflexions que nous avions menée concernait la charte graphique, tant il est important pour une société internationale de présenter un visage cohérent.

Conçue au départ essentiellement pour le papier, la charte graphique de Dexia imposait un bandeau, en plein milieu de la couverture des documents, contenant le logo de l'entreprise.

Voici donc à quoi ressemblait l'ancienne page d'accueil :

L'idée du bandeau en travers me semble excellente pour les publications papier : elle crée l'effet, très tactile, d'un document scellé. De plus, la couleur gris argenté utilisée pour l'impression séduit l'oeil et véhicule une connotation financière.

Malheureusement, cette approche ne convenait pas du tout au Web : le gris argenté ne pouvant être reproduit à l'écran avec la même brillance, et la position du logo, fort peu convenante au regard des standards d'ergonomie des sites web.

A l'époque, je me souviens avoir fait le test avec mes étudiants (de niveau post-universitaire) : en raison de la position inhabituelle du logo, plus d'un pensait avoir affaire à un site sponsorisé par Dexia. Il leur fallait plusieurs secondes, voire plusieurs minutes, pour réaliser qu'il s'agissait du site officiel.

Récemment, Dexia.com a changé d'allure :

Le logo figure, à présent, dans le coin supérieur gauche. Là où l'immense majorité des visiteurs l'attendent. Ce qui permet une identification de l'entreprise, immédiate et sans ambigüité.

Vous avez d'autres expériences d'adaptation de charte graphique au Web ? Faites-nous en profiter en commentaires !

Le tout nouveau site web d'Immoweb répond manifestement à une stratégie d'extension de l'offre (locations de vacances, en particulier).

Egalement une mise en avant de certaines nouvelles fonctionnalités.

Mais, pour une fois, j'ai envie de solliciter les avis avant de donner le mien...

Vous en pensez quoi, vous du nouveau Immoweb ?

A lire sur le même sujet : Ximmo défie Immoweb.

Pas facile de réussir la page d'accueil d'une grosse institution, comme un ministère, par exemple.

Le Ministère français de l'Agriculture et de la Pêche s'en sort plutôt bien.

J'adore les contrastes dans la page. Une parfaite lisibilité. Une architecture de navigation limpide. Une densité d'information bien sentie. La vidéo bien intégrée. Un bon équilibre entre l'actualité et les entrées de navigation. Tout ce qui importe pour une page d'accueil.

Source : http://agriculture.gouv.fr/

Par comparaison, notre portail belge de l'agriculture fait pâle figure :

Source : www.statbel.fgov.be/port/agr_fr.asp

Merci à Joël qui est le premier à m'avoir parlé du site du Ministère français de l'agriculture.

P.S. A part le foot et le ministère de l'agriculture, les Belges sont les meilleurs dans toutes les autres disciplines, ça va de soi ;-)

Sur la toile belge, les restaurants ont du mal à nous ouvrir l’appétit. En dehors des vitrines très standardisées que l’on retrouve au départ de portails tels que resto.be, les sites web des restaurateurs ont beaucoup de mal à se présenter de manière originale sans tomber dans le mauvais goût. Nous décernerons peu d’étoiles aux restaurants en ligne.

En primeur pour les habitués de ce blog :
Mon dernier dossier sur les sites web de restaurants.

Merci aux lecteurs qui m'ont fait parvenir des exemples.

Toutes vos réactions sont bienvenues.

L'article sera envoyé, dans les jours qui viennent, aux abonnés e-mail.

Je ne citerai pas de noms. Mais je peux vous assurer que certaines grosses entreprises naviguent encore dans le brouillard en ce qui concerne l'évaluation de l'impact de leur site web. C'est-à-dire qu'elles n'ont pas accès à des statistiques de fréquentation dignes de ce nom pour se faire une idée objective du succès de leur présence en ligne.

Tous les secteurs sont concernés : bancaire, pharmaceutique, média,...

Il m'est arrivé, à plusieurs reprises, de travailler pour des entreprises multinationales qui n'ont même aucune idée du nombre de sites web qu'elles possèdent. La première étape à franchir reste souvent l'inventaire de l'existant.

Alors, les tests utilisateurs, n'en parlons pas ! Seules quelques sociétés à la pointe commencent à s'y intéresser.

Néanmoins, la culture progresse, et les entreprises les plus intuitives et les plus "web oriented" ont saisi tout l'intérêt d'effectuer des mesures. Elles ont compris que le format et la position d'un bouton peuvent tripler leur taux de conversion, et qu'il faut en avoir le coeur net.

Certes, les statistiques sont délicates à interpréter.

Certes, certains logiciels sont chers ou difficiles à configurer, mais d'autres, sont conviviaux et distribués gratuitement.

Une grande banque qui dépense des millions d'euros en communication traditionnelle (vous savez, avec ces affiches de gens heureux et sereins grâce à leur taux d'intérêt garanti ;-)... ne peut-elle pas investir quelques deniers à optimiser l'expérience de ses clients et prospects en ligne ? Est-ce un bon calcul de snober le référencement de sa nouvelle gamme de produits ou l'ergonomie de ses simulateurs en ligne ?

De grosses entreprises qui naviguent dans le brouillard, et de petits blogueurs accrocs à leurs statistiques... avouez que c'est étrange !

Le site hotelroom.com vous renseigne les curiosités touristiques et attractions culturelles situées à proximité de votre hôtel. Fort bien.

Mais, tenez-vous bien, la distance est indiquée en kilomètres... avec 15 décimales derrière la virgule !

hotelroom.com aurait-il décidé d'attirer les fourmis ? Ou, mieux encore, les amibes ? ;-)

Êtes-vous seulement capables de nommer l'unité de mesure utilisée ? ...Moi pas.
Je vous défie de le faire en commentaire.

Au-delà de l'anecdote, tel est le message que j'ai envie de transmettre aux webmasters : lorsque vous publiez des données chiffrées, pensez à utiliser une unité de mesure raisonnable en fonction de l'effet visé.

Il en est de même pour les dates de dernières mises à jour. Pas besoin de nous donner les centièmes de seconde... même s'il s'agit du format informatique par défaut !

(Vu en 2002, sur la version française de belgium.be)

Que ce soit par le biais de mauvaises langues ou de conseils bienveillants, on m'a souvent fait remarquer que mes propres sites web n'étaient pas rigoureusement respectueux des standards HTML.

Je suis conscient de cette lacune depuis belle lurette. Je l'avoue, je suis un dinosaure du HTML. J'ai découvert le web d'avant les feuilles de style, l'époque où les tableaux constituaient la seule manière de contrôler un tant soit peu la mise en page des contenus sur Internet. Aujourd'hui, la balise <TABLE> est devenue une hérésie lorsqu'elle est utilisée pour la mise en page et non pour des tableaux de données. Je ne vous referai pas le cours des avantages d'un codage plus strict : indépendance du contenu par rapport à sa mise en forme, code plus clair et plus léger, meilleur référencement, meilleure accessibilité, meilleure évolutivité, automatisation plus aisée, etc.

Certes, je ne me présente pas comme un développeur web. A chacun son métier. Certes, j'étais déjà conscient depuis longtemps de la logique de fonctionnement des feuilles de style. Mais rien ne vaut un peu de pratique pour donner à un consultant un peu de consistance et d'authenticité. L'architecte doit, de temps en temps, se frotter à la brique et au ciment.

Moi qui me permets d'épingler les erreurs des autres, il était donc temps de réagir. Aussi, parmi les bonnes résolutions de 2008, j'ai entrepris de m'initier au HTML moderne, basé sur une utilisation complète des feuilles de style (pour la typographie, mais aussi pour le positionnement des éléments).

Danny Puype m'a offert cette formation. Deux jours ont suffit à me convertir de la logique "tableau" à la logique "feuille de style". Et j'en suis ravi.

Vous êtes dans le même cas que moi ?
Vous avez du mal à vous défaire des tableaux et de la version WYSIWYG de Dreamweaver ?
Et bien, je vous recommande vivement cette formation de Danny Puype : La magie des feuilles de style. Disponible en Français, Anglais ou Néerlandais.

Danny n'est pas seulement un bon technicien. C'est un excellent pédagogue qui vous amènera, sans que vous ne vous en rendiez compte, à assimiler rapidement des concepts clés du design 2008.

Concrètement, nous nous sommes attaqués à mon site sur la timidité. Cette page-ci, par exemple, a été entièrement recodée. Les autres pages du site devront être revues sur le même modèle.

60questions.net et redaction.be sont les suivants sur la liste. Leur prochaine refonte sera l'occasion d'une remise aux standards.

Mes clients passent d'abord. C'est l'éternel problème du cordonnier mal chaussé.

Comme vous le savez sans doute, Metro est un quotidien papier distribué gratuitement dans les endroits de passage. A Bruxelles, il est disponible en deux langues : Français et Néerlandais. Mais les deux rédactions sont indépendantes.

J'aime beaucoup comparer la une francophone avec la une néerlandophone.

Aujourd'hui, par exemple, vendredi 4 janvier 2008...

La une francophone se veut rassurante : "L'alerte terroriste baisse d'un cran", lit-on, dans un article de second rang.

Côté néerlandophone, en revanche, la menace terroriste constitue toujours l'article central à la une. Et le ton semble nettement plus inquiétant : "Gevaar op terreuraanslag is nog niet geweken" (traduisez : "La menace d'un attentat terroriste n'a toujours pas été écartée").

Cette dissonance est une richesse. Elle nous rappelle que l'information reste toujours un choix. Le choix d'éclairer tel ou tel aspect de l'actualité, de telle ou telle manière. Avec un impact potentiellement très différent sur le lecteur, comme le montre cet exemple.

Je souhaite à tous les lecteurs et lectrices de ce blog, à tous mes clients et à tous mes amis, une merveilleuse année 2008 !

Jean-Marc