Admirez la beauté du design ci-dessus.

Mais non, pas la photo, pas moyen d'être sérieux avec vous ! ... je parle de la typo !

De belles grandes lettres à empattement (Georgia ou, à défaut, Times).

Le corps de texte en Arial, avec un interligne digne de ce nom, qui permet de respirer.

Ca donne envie de plonger dans le décolleté texte, non ? ;-)

Notez que Yahoo! a posé un copyright sur sa feuille de style.

Je cite :

h1 { font:275% georgia,times,serif; } body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

Source : Shine, le nouveau portail féminin "made by Yahoo!". J'en ai pris connaissance via le blog de l'excellent Laurent Goffin.

Notez que le journal Le Monde utilisait déjà ce mélange de deux polices (une avec serif, une sans serif).

Mais le résultat est moins heureux. La gestion de l'espace est moins fine ; les contrastes, moins efficaces.

Je vous arrête tout de suite, ce titre est trompeur. La BBC n'a pas racheté Netvibes, mais elle en a pris les attributs.

En effet, depuis quelques heures, la page d'accueil de ce monument du journalisme est complètement personnalisable.

Mise en page claire. Densité d'information raisonnable. Modules de contenu que vous pouvez étendre, rétracter ou déplacer comme bon vous semble. Voici la BBC à l'heure des widgets et des effets Ajax.

Surprenant, sans doute, pour les lecteurs habitués à l'ancien modèle. Mais l'ensemble reste très intuitif et totalement dans l'ère du temps. L'éditeur a néanmoins pris soin de prévoir des fonctions "Take the tour" et "Homepage feedback" pour accompagner le changement.

J'admire, pour ma part, le dynamisme de cette institution, capable d'innover avec pertinence. De notre côté de la Manche, certains comme d'autres feraient bien de s'en inspirer, non ?

Non, le multimédia, ce n'est pas uniquement ces animations flash bidons à l'entrée des sites web.

Jetez un coup d'oeil sur visiblebody.com pour saisir la puissance du visuel interactif.

Pénétrez virtuellement le corps humain. Voyagez dans le système digestif. Plongez dans les cellules. Localisez l'os de vos rêves via une recherche par mot clé.

Un bijou pour les étudiants en anatomie et physiologie.

Vous désirez vous faire entendre ? Dans ce cas, il va vous falloir maîtriser certains détails : les choix typographiques, les contrastes de couleur, les alignements, les espaces, la densité d’information,… sont autant de paramètres qui détermineront votre capacité à capter l’attention de vos lecteurs.

Lisez mon dernier dossier comparatif sur le thème de la lisibilité !

Toutes vos réactions, commentaires, clins d'oeil ou indignations sont bienvenus.

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, des grèves perturbent actuellement le réseau ferroviaire. Je viens d'annuler un billet Bruxelles - Paris, afin d'éviter les désagréments.

Chose positive : la société Thalys rembourse intégralement le billet ou vous permet de le postposer à une autre date.

En revanche, l'information relative aux perturbations du jour me semble particulièrement noyée sur la page d'accueil de Thalys.

Jetez donc un coup d'oeil sur la prise d'écran ci-dessous. 98% de l'espace est occupé par des communications ordinaires : description de la gamme de services, réservation en ligne, actualités culturelles, promotions. Si vous désirez en savoir plus sur les perturbations du jour, il vous faudra agripper, au bon moment, le texte défilant en-dessous de la barre de menu. Sept ou huit actualités défilent ainsi dans un espace réduit qui vous permet difficilement de lire une phrase en entier. Ce texte défilant n'est pas cliquable. Pour accéder aux informations concernant les perturbations, il vous faut saisir le lien "Info trafic", en orange souligné, en haut à gauche. Certes, ce lien est mis en évidence par un petit panneau "Attention", mais sa position décentrée et la place réduite qu'il occupe dans la page nous semblent très insuffisantes par rapport à l'importance que revêt cette information un jour de grève. Je soupçonne un véritable pic de fréquentation du site web dans de telles circonstances.

Pourquoi ne pas basculer vers une page d'accueil "bis" en cas de communication de crise ?

J'encourage les sociétés à prévoir un espace bien visible, dédié aux communications exceptionnelles.

Et vous, webmasters, est-ce que vous vous êtes déjà sentis coincés par une maquette rigide alors que vous aviez quelque chose d'important à communiquer ?

Le concept d'univers de la marque ne s'est jamais autant matérialisé que sur le Web de ces derniers mois.

Aujourd'hui, les grandes marques vous attirent dans un paysage virtuel interactif, imprégné de leurs produits et de l'atmosphère qu'elles désirent dégager.

Le site web international des brasseries Stella Artois est un univers à lui tout seul. Voyage dans le temps, interactif, insolite, énigmatique, débridé, métaphorique et ludique. L'environnement visuel est de toute grande qualité. A la frontière de l'illustration et de la vidéo.

Certains jeux invitent les internautes à mettre leurs amis au défi... le perdant est censé payer une Stella au gagnant ;-)

Source : Stella Artois.

Les publicitaires sont conscients depuis des décennies qu'il n'est pas anodin d'associer une marque à un climat. La mémoire associative inconsciente est redoutable en matière commerciale.

De son côté, Ikea aussi mêle subtilement vidéo, 3D et interactivité en Flash pour mettre en valeur ses cuisines.

Source : Cuisines IKEA.

L'air de rien, certains messages passent : Le fait que la gamme IKEA convienne à tous les styles de vie. Le fait que la marque couvre aussi bien le gros mobilier que les accessoires. Le côté "sur mesure" aussi. Et tous ces messages pénètrent sans effort, tandis qu'un discours marketing explicite ferait probablement fuir les visiteurs au quart de tour.

Vous connaissez d'autres univers réussis ? ... Faites-nous en profiter en commentaire !

Merci à Fred pour ces exemples.

Recommandation n°1 : associez une légende à vos photos... comme le fait la BBC, de manière toujours très professionnelle.

Recommandation n°2 : prévoyez une marge entre la photo légendée et le texte qui l'entoure, afin d'améliorer la lisibilité. Sur ce point, en revanche, je viens de prendre la BBC en défaut. Une fois n'est pas coutume ;-)

Prise d'écran : BBC, le 18 septembre 2007

Suite au dossier que j'avais publié, l'année dernière, sur les sites web des clubs de football en Belgique, un de mes amis, amateur passionné de ballon rond, m'indiquait que le site de l'équipe de Feyenoord (Pays-Bas) était, à ses yeux, à l'échelle internationale, une des réalisations les plus efficaces.

Après l'avoir parcouru, je confirme qu'au-delà d'une architecture pertinente, le site web de Feyenoord innove à plus d'un titre.

Sur la page d'accueil (ci-dessous), les actualités sont présentées de manière intéressante. Trois news centrales sont proposées. L'utilisateur peut choisir de développer l'une d'elle. En passant sa souris sur un des gros titres, un début d'article apparaît et la photo centrale, de grande taille, est alors remplacée. Si l'utilisateur ne fait rien, les news alternent dans un effet de fondu enchaîné léger. Est-ce l'AJAX(*) qui permet cette fluidité ? Toujours est-il que le résultat est efficace.

La navigation au sein des archives m'a également beaucoup séduit. L'imbrication des mois et des années y est limpide. Les couleurs du club (rouge, blanc, noir), exploitées sur le site web, conviennent parfaitement pour créer un contraste maximal.

Feyenoord possède sa boutique en ligne. Même des tutes et des biberons sont vendus, aux couleurs du club. ... A quand le marketing pré-natal ?

(*) La technologie AJAX, pas le club rival.

Je m'étais permis, à plusieurs reprises, lors de mes formations ou à travers certains billets, de critiquer le manque de bon sens du site web de la société des transports intercommunaux bruxellois (la STIB).

En effet, comme l'illustre la prise d'écran ci-dessous, l'ancienne page d'accueil était beaucoup trop chargée. Par ailleurs, l'accès au site était freiné par des avertissements juridiques peu pertinents.

Le site de la STIB vient de changer. Voici la nouvelle page d'accueil.

Les fonctionnalités clés (recherche d'itinéraire, horaires, plan du réseau) ne sont plus noyées dans la masse. L'architecture d'information est orientée action : "préparer son voyage", "acheter", "visiter Bruxelles",... La mise en page est plus sobre que celle de l'ancien site, mais très cohérente et très lisible. Beau progrès.

Une fois passé le cap de la page d'accueil, par contre, le moteur de recherche d'itinéraires me semble encore perfectible.

En témoigne ce choix complexe parmi d'innombrables options pour qui veut simplement se rendre à la Gare du Midi :

Ou bien ces caractères spéciaux mal codés dans la boîte à message :

Mais ne soyons pas trop sévères. Les problèmes prioritaires ont été traités. Reste à affiner.