«image replacement» : une autre technique

Une nouvelle technique de remplacement par l’image a récemment été ajoutée au projet HTML5 Boilerplate. Ce billet explique son fonctionnement et comment elle se situe par rapport aux autres méthodes, utilisant text-indent notamment.

Voici le bloc CSS qui a fait son apparition dans la récente mise à jour de HTML5 Boilerplate et le framework Compass :

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Comment ça marche ?

1. font:0/0 a — Ce raccourci met à zéro les propriétés font-size et line-height. La valeur a fonctionne comme un raccourci pour font-family : font-size: 0; line-height: 0 et font-family: a. C’est une idée reprise de l’implémentation BEM. Bien que le validateur CSS fait sa chochotte avec les valeurs 0/0, il faut savoir que tous les navigateurs acceptent cette syntaxe et qu’il s’agit d’une erreur d’interprétation du validateur. En effet, si l’on utilise font: 0px/0, tout va bien, alors que dans le même temps, le validateur affiche font: 0/0.
2. text-shadow:none –- Permet de s’assurer que les ombres portées avec text-shadow sont supprimés du texte pour éviter l’apparition d’une ombre portée par-dessus le background.
3. color:transparent -– Requis pour les navigateurs qui ne parviennent pas à rendre le texte complètement invisible, comme Safari 4 ou certains navigateurs pour mobiles. Les versions d’Internet Explorer IE6/7/8 ne reconnaissent pas cette valeur pour la propriété color, mais heureusement, les versions IE7/8 ne montrent rien et IE6 n’affiche qu’une très légère trace du texte.

Dans HTML5 Boilerplate, nous avons également supprimé les éventuelles bordures et couleur de fond :

/* For image replacement */
.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Avantages par rapport à text-indent

Cette nouvelle technique évite les problèmes posés par la méthode de remplacement via text-indent, notamment les pertes de performances. Notez que ces dernières affectent également la dernière méthode proposée par Scott Kellum qui vise au départ à améliorer les performances sur iPad 1.

1. Fonctionne sur IE6/7 sur les éléments de type inline-block. Cf. les problèmes liés aux techniques basées sur l’indentation de textes à l’adresse http://jsfiddle.net/necolas/QZvYa/show/
2. N’implique pas la création d’une boite en dehors de la surface visible de l’écran qui entraine une baisse des performances.
3. Plus besoin de spécifier d’alignement de texte ou de masquer le contenu qui dépasse car le texte de la nouvelle méthode ne prend tout simplement plus de place.
4. Inutile de masquer les éventuelles balises ou d’utiliser un contournement avec display:inline impliqué par l’indentation du texte.
5. En tout état de cause, cette technique nécessite moins de lignes de code.

Effets de bord

Aucun hack de remplacement par image n’est parfait :

1. Laisse une légère trace de texte sur IE6.
2. Implique de ne pas utiliser l’unité em pour les marges de l’élément sur lequel vous appliquez cette technique, vu que la taille du texte est réglé à zéro.
3. Windows-Eyes a un bug qui empêche la lecture du texte caché par cette méthode. Il n’y a en revanche aucun problème avec les autres lecteurs d’écran testés. Merci à @jkiss pour ses précisions et à @wilto pour avoir confirmé que cette méthode fonctionnait avec JAWS 12 dans IE 6/7/8 et Firefox 4/5/6.
4. Comme beaucoup de méthodes de remplacement par l’image, elle ne fonctionne pas si les CSS sont chargées mais que les images ne le sont pas.
5. Le texte n’est pas caché si le visiteur a une feuille de style utilisateur avec une déclaration font-size se terminant par !important pour l’élément où vous avez appliqué la class .ir.

Il est utile de noter que le remplacement par l’image utilisant les pseudo-éléments — NIR image replacement — évitent ses désagréments mais ne fonctionne pas correctement sur IE6/7.

Pour finir

J’utilise cette technique sans encombre depuis que Jonathan Neal et moi-même l’utilisons dans le cadre d’un test de clearfix commencé il y a un an environ. Le framework BEM utilise également cette technique pour ses icônes. L’idée principale fut proposée dès 2003 mais le rendu des navigateurs de l’époque n’a pas permis une large diffusion de cette méthode.

Si vous rencontrez des problèmes en utilisant cette technique, merci de détailler le bug.

Traduit de l’article Another CSS image replacement technique avec l’aimable autorisation de l’auteur ⁽¹⁾.

⁽¹⁾ Nicolas Gallagher (@necolas) est un développeur web front-end freelance basé à Londres. Il a co-créé Normalize.css et il fait partie des développeurs du projet HTML5 Boilerplate.

N’hésitez pas à me faire part de vos remarques sur les contresens (l’anglais était ma 3e langue), les fautes d’orthographe et d’une manière générale tout ce qui pourrait être préjudiciable à l’article d’origine.

Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Une solution CSS accessible pour remplacer du texte HTML par une image
• 8 techniques CSS pour remplacer du texte HTML par une image
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Pour ceux d’entre nous qui travaillent chaque jour avec WordPress, il est étonnant de constater à quel point ce système de gestion de contenus a évolué en quelques années pour passer du statut de simple outil de blog à un système de publication complet qui n’a rien a envier aux ténors du marché.

Aujourd’hui nous allons jeter un oeil sur les nouvelles fonctionnalités de WordPress 3.3 qui, après des mois de tests en version bêta, devrait sortir sous peu.

Comparées à la sortie de WordPress 3.0 qui avait introduit des fonctionnalités majeures — comme les Custom Post Types ou le mode multi-sites –, les améliorations proposées par cette version 3.3 pourront sembler moins révolutionnaires. Toutefois, dans les faits, cette nouvelle version va impacter les utilisateurs comme aucune autre auparavant.

En effet, la plupart des améliorations sont destinées à l’expérience utilisateur pour tous les utilisateurs, et pas seulement pour celles et ceux d’entre nous qui construisent des sites web. Nos clients verront eux aussi des changements dans leur façon d’utiliser WordPress.

Voici les changements principaux qui arrivent avec WordPress 3.3 :

Barre d’administration

Ce redesign de la barre d’administration apporte des améliorations pratiques et stratégiques grâce à la suppression de nombreux éléments ; ceux qui restent sont judicieusement placés. Le champs de recherche et le menu «Apparence» disparaissent, tandis que le menu utilisateur est déplacé sur le côté droit, à l’image de ce que fait Google.

L’utilisation d’une ombre plus sombre et plus intense rend cette barre d’administration plus présente.

Nouvelle barre d'administration dans WordPress 3.3

Menu «A propos»

L’icône «W» située en haut à gauche cache un nouveau menu composé de liens «A propos» de WordPress, comme : les crédits, la licence, la documentation et le forum. Ces liens étaient auparavant cachés dans le pied de page, et donc peu visible ( NDT : ou placés dans la blogroll par défaut).

Menu A propos dans WordPress 3.3

Section d’aide améliorée

Premièrement, le lien «Aide» n’est plus relégué dans un coin de l’administration. Il est désormais bien visible, au centre de la nouvelle barre d’administration.

Ensuite, ce lien recèle une section retructurée avec une navigation sous forme d’onglets utilisables par les développeurs pour documenter leurs plugins ou leurs thèmes.

Menu d'aide dans WordPress 3.3

Bulle d’information (Tooltips)

Ces nouveaux Tooltips pourront sembler légèrement agaçants pour de nombreux utilisateurs, mais pourront être très utiles à d’autres.

Ces bulles d’informations guiderontles utilisateurs à travers les nouvelles fonctions de WordPress. Vous en verrez quelques-unes pointer vers la barre d’administration immédiatement après la mise à jour de votre installation.

Comme pour la section d’aide, les développeurs pourront utiliser les bulles d’informations pour leurs propres tours d’horizons. Les développeurs de thèmes trouveront là un moyen de présenter rapidement les fonctionnalités de leurs produits, comme l’a fait le développeur Yoast pour son plugin Yoast WordPress SEO récemment mis à jour.

Tooltips dans WordPress 3.3

Media Uploader

Nous étions nombreux à attendre une mise à jour du «Media Uploader». Les nouveautés qui touchent ce module concernent principalement : l’ajout du Drag & Drop pour glisser-déposer des images ou des documents PDF directement de votre bureau dans WordPress ; et le remplacement de Flash par HTML5 et Silverlight, pour offrir une plus large compatibilité au niveau des plateformes.

Media Uploader HTML5 dans WordPress 3.3

Menus déroulants

Les nouveaux menus déroulants vous feront économiser de nombreux clics pour accéder aux sous-menus. Cela peut sembler sans conséquence, mais si vous utilisez WordPress pendant de longues périodes, vous avez certainement déjà remarqué que le tableau de bord peut vite se transformer en usine à clics !

Les menus déroulants permettent aussi d’améliorer l’expérience visuelle, surtout lorsque vous vous connectez au site d’un client qui contient une foule de menus déroulés par défaut. Désormais, seul le menu actif est déroulé avec ses sous-menus.

Menus déroulants dans WordPress 3.3

Autres améliorations notables dans WordPress 3.3

Maintenant que nous avons fait le tour des changements les plus visibles, voyons rapidement ce qu’il y a sous le capot pour les développeurs de sites.

• Maquette adaptable : il s’agit juste de poser les bases pour WordPress 3.4, mais dans cette version 3.3 le menu gauche disparait automatiquement sur les petits écrans.
• Liens permanents : au lieu de saisir `/%postname%/` WordPress 3.3 propose un menu déroulant. Plus important, les problèmes de performances sont résolus. Ce réglage est donc désormais utilisable sans problème de performances, même sur les sites composés d’un très grand nombres d’articles ou de pages.
• jQuery 1.7.1 et jQuery UI 1.8.16 : jQuery est mis à jour et toutes les fonctionnalités de jQuery UI sont disponibles et prêtes à être «enqueued» dans WordPress 3.3.
• API de l’éditeur : les développeurs de plugins peuvent maintenant personnaliser l’éditeur de WordPress, y compris au niveau des boutons de TinyMCE. Il est même possible d’ajouter des éditeurs additionnels.

Soyez à jour !

Comme toujours, il est recommandé de mettre vos  sites web à jour avec la dernière version de WordPress dès qu’elle est disponible. Gardez donc un oeil sur la sortie de WordPress 3.3 pour commencer à découvrir ses nouvelles fonctionnalités.

Traduit d’après l’article de Brian Casel (@CasJam sur Twitter), fondateur de CasJam Media. Article original en anglais paru sur Mashable.com sous le titre WordPress 3.3: The 11 Most Important New Features.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• WordPress de A à Z — F comme Functions.php
• WordPress de A à Z — E comme Extensions (les plugins)
• WordPress de A à Z — C comme CSS & Composé HTML5
• Création de site WordPress de A à Z — B comme Basics

1. Echelle et proportion

Pour mélanger harmonieusement plusieurs polices de caractère dans la même page, assurez-vous qu’elles ont des proportions et une échelle en commun. Ainsi, Georgia et Verdana ont des formes similaires bien que l’une est avec serif et l’autre sans-serif. C’est pareil pour Times New Roman et Arial Narrow.

Observez les caractères de chaque fonte séparément, par mot ou par phrase pour dégager leurs points communs. L’idéal est de superposer les fontes les unes sur les autres dans votre logiciel graphique préféré.

2. Harmoniser vos polices à l’aide de la couleur et des styles

Placer six fontes de style et de couleurs différents n’est pas une bonne idée. Lorsque vous avez trouvé deux couleurs qui vont bien ensemble, essayez de les assembler en jouant sur la teinte et la saturation. En ce qui concerne les styles, il faut surtout s’assurer qu’ils s’adaptent à la graisse et à l’emphase des polices : certaines supportent mal l’italique et/ou la mise en gras, par exemple.

3. Priorité et emphase

Certaines polices de caractère ont plus de personnalité que d’autres. C’est un point à vérifier lorsque vous mélangez plusieurs familles de polices sur la même page. Certaines fontes seront trop présentes, d’autres pas assez. Ajuster la taille est une bonne option, mais n’oubliez pas de jouer avec les balises strong, em, ou les propriétés CSS comme italic, oblique, small-caps, etc. pour augmenter ou diminuer l’impact en fonction de votre objectif.

La couleur peut jouer un rôle central pour hiérarchiser l’information véhiculée par telle ou telle fonte. Si l’une d’entre elles est trop présente, il sera possible d’atténuer son impact visuel avec une couleur plus claire ou moins saturée.

4. Eviter les polices trop similaires

L’utilisation rapprochée de Georgia et de Garamond peut donner l’impression que l’une des deux polices n’est pas à sa place. Par ailleurs, une des raisons qui pousse à utiliser plusieurs familles de caractère dans la même page est de donner du rythme. Les famille de caractères trop proches ne sont donc pas une bonne idée !

5. Assurez la lisibilité des textes

Les fontes un peu funky peuvent trouver leur place dans la navigation, les titres ou les textes courts en général. Dès qu’il y a beaucoup de texte à lire, il est préférable de s’en tenir à une seule police de caractère en privilégiant la sobriété et la simplicité.

6. N’oubliez pas les styles

Voici un moyen simple pour ne pas se tromper dans le choix des polices de caractères de votre site web : utilisez une seule police et variez les styles, les tailles, les couleurs, les fonds. Vous aurez la diversité, le rythme, tout en évitant les mariages malheureux entre des polices disparates.

7. Faites confiance à votre instinct

Pour finir, voici probablement le conseil le plus important de cette liste : prenez du recul sur votre travail et si quelque chose ne semble pas à sa place, changez-le ou supprimez-le !

Note personnelle

J’ai pompeusement classé cet article dans Traduction, mais il s’agit plutôt d’une «craduction». Je ne saurais trop vous conseiller de lire l’article original qui contient par ailleurs de nombreux exemples illustrant visuellement chacun des points abordés, avec pour finir, une galerie de sites d’une grande qualité typographique pour développer votre imagination créative.

Articles sur le même sujet

• Webdesign, lisibilité, typographie et rédaction web
• Des ensembles de polices cohérents pour le web
• 940.css version fluide — Grille de mise en page en pourcentage
• Tutoriel grille verticale en CSS par Smashing Magazine
• Useful Shortcuts — Symboles accessibles via la touche Alt de votre clavier

Et puis, en lançant mon aggrégateur, je suis tombé sur ce billet de Gou où il est question d’un article de 37 signals qui envisage de se passer de la traditionnelle maquette sous Photoshop pour se coltiner directement avec le code. Si Gou n’est pas vraiment convaincu par cette approche, je suis pour ma part rassuré sur ma façon de voir les choses :-) En effet, si la maquette Photoshop (ou Illustrator) rassure le client sur vos compétences en graphisme, elle ne dit rien sur vos talents de webdesigner, c’est-à-dire d’organisateur d’espace sur le web en vue de favoriser le clic et la navigation !

Pour vous faire une opinion sur cette question, voici une « craduction » rapide des arguments avancés par 37 signals :

Pourquoi nous zappons Photoshop

Voici quelques raisons qui expliquent pourquoi nous devrions nous passer de Photoshop :

1. On ne peut pas cliquer sur une maquette. C’est probablement la première raison qui fait que nous avons abandonné les maquettes statiques. Elles ne sont pas réelles. Le papier ne l’est pas plus, mais il ne provoque pas les mêmes attentes. La présentation à l’écran d’une maquette réalisée sous Photoshop devrait fonctionner. Mais vous ne pouvez pas faire défiler les menus déroulants, ni saisir du texte dans un champs dessiné. Vous ne pouvez pas non plus cliquer sur un lien. A l’inverse, un prototype HTML/CSS est une vraie expérience.
2. Photoshop fournit trop d’outils qui nous scotchent sur les détails. Lorsqu’on utilise Photoshop, on ne peut pas s’empêcher d’accorder de l’attention aux alignements, aux couleurs, aux formes, etc. Tout ces petits détails qui auront certainement leur importance… mais plus tard. L’essentiel est invisible pour Photoshop !
3. Dans Photoshop, le texte n’est pas le même que sur le web. Quand on regarde une maquette réalisée sous Photoshop, on ne peut pas modifier le texte sans retourner dans le logiciel pour changer le texte, enregistrer le fichier, l’exporter au format gif/png/jpg, etc. On ne peut pas le mettre en ligne et demander à quelqu’un de recharger la page dans cinq secondes comme il est possible de le faire en éditant rapidement un fichier HTML. On doit dire : Donnez-moi quelques minutes… Par ailleurs, les polices de caractères n’ont jamais le même aspect ni la même taille qu’en HTML. Ce n’est pas la même expérience.
4. Photoshop met l’accent sur la production, pas sur la productivité. Photoshop sert à construire quelque chose qui doit « paraitre », pas quelque chose qu’on peut utiliser. Lorsqu’on s’inquiète seulement de l’apparence des choses, on passe trop de temps en « fignolage ». HTML/CSS permet d’être productif en permettant d’aller de l’avant après chaque modification.
5. On refait souvent les mêmes choses dans Photoshop. D’accord, vous avez passé trois jours sur une maquette. Et après ? Maintenant, il faut tout transformer en HTML/CSS. C’est du temps perdu. On peut prendre ce temps pour faire l’intégration HTML/CSS et passer plutôt du temps à l’améliorer, au lieu de tout construire/déconstruire. Si l’on est pas assez rapide en HTML/CSS, on peut passer plus de temps à apprendre à travailler plus vite.
6. Photoshop n’est pas un logiciel très collaboratif. J’ai déjà touché du doigt cet aspect plus haut, mais laissez-moi enfoncer le clou : HTML/CSS vous permet de faire des changements, d’enregistrer et de voir le résultat. C’est le flux de collaboration que nous avons mis en place : laissez-moi changer ça, ça y est, faites F5 ! Ces changements prennent quelques secondes. Attendez, je vais placer cet élément à gauche plutôt qu’à droite. F5 ! Toujours quelques secondes. Pas besoin de sélectionner un outil, de modifier quelques éléments manuellement, d’enregistrer, d’exporter, de télécharger, de donner au client le nouveau nom de fichier, etc. HTML/CSS est idéal pour faire des prototypes itératifs ; ce n’est pas le cas de Photoshop…
7. Phostoshop est lourdingue. Même après 10 ans de pratique intensive de ce logiciel, je trouve toujours que l’utilisation d’un crayon et du papier est plus naturelle que de faire des aller-retours dans la barre d’outils. Un crayon peut dessiner n’importe quoi, tandis que dans Photoshop, vous devez utiliser l’outil texte pour saisir du texte, l’outil forme pour dessiner une forme, la barre d’option pour ajuster tout ça, etc.

Rien de tout ce qui précède n’est là pour dénigrer Photoshop, mais nous avons trouvé que plonger les mains dans le code HTML et CSS apporte une meilleure expérience créative. La voie du code est vraie comme Photoshop ne le sera jamais.

Quelques mots pour finir

Bon, j’espère que cette « craduction » ne comporte pas trop d’erreurs d’interprétation… J’imagine que beaucoup trouveront cette prise de position un peu extrême et se demanderont ce que l’on peut bien intégrer en HTML/CSS si on a pas fait de maquette avant…

En gros, on peut très bien dessiner une maquette sur le papier en commençant par le zoning global et en donnant des indications graphiques plus ou moins précises en fonction de la nature de la commande. Par exemple, dans la plupart des cas, il n’est pas nécessaire que la maquette soit exacte au pixel près, tant que le résultat final tient compte des détails.

L’avantage ? Selon, les méthodes de travail il sera ainsi possible de lancer Illustrator (ou de prendre son crayon) pour « dessiner » quelque chose sans se préoccuper de la largeur de la page ou de l’espace entre les colonnes. Ces éléments pourront trouver une réponse plus tard.

Je suis convaincu que même pour pour des projets ayant une charge graphique forte, il est possible de proposer l’univers graphique d’un côté pour s’assurer que la cible est prise en compte, et le prototype fonctionnel de l’autre pour valider les grands principes ergonomiques et « navigationnels ». Sachant que le premier influe sur le second et vice-versa ! Tiens, j’ai bien envie de relire Transcender CSS sous cet angle.

Articles sur le même sujet

• Frameworks CSS + Reset CSS : design from scratch
• Background CSS avec motifs double-fond et effet d'opacité multiple sur le texte et les images
• Check your <body> avec le W3C
• Quelques notes — Programme de formation HTML & CSS
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web

10 Principles Of Effective Web Design

Ce sont l’ergonomie et le service rendu — et non l’apparence — qui déterminent le succès ou l’échec d’un site web.  Étant donné que celui ou celle qui clique décide de tout, les designs orientés vers l’utilisateur (user-centric) sont désormais considérés comme une approche standard pour réaliser des sites web rentables. Si les utilisateurs ne peuvent pas utiliser une fonctionnalité, que fait-elle encore là ?

Nous ne parlons pas de l’implémentation des détails (comme l’emplacement de tel ou tel élément) qui a déjà été abordée dans de nombreux articles. A la place, nous nous pencherons sur les principes fondamentaux et heuristiques pour réaliser des designs web efficaces. Utilisées à bon escient, ces approches peuvent conduire à des décisions sophistiquées en matière de design et simplifier le processus qui mène à la mise en forme des informations.

Avant de continuer, vous pouvez pendre en compte que :

• les articles parlant d’ergonomie comme 10 cauchemars ergonomiques et 30 problèmes d’utilisabilité que nous avons publié auparavant pourraient vous intéresser.
• Nous aborderons d’autres principes pour concevoir des sites web efficaces dans nos prochains articles. Pour ne pas les rater, abonnez-vous à notre flux RSS.

Afin d’utiliser correctement ces principes, nous devons d’abord comprendre la manière dont les utilisateurs interagissent avec les sites web, comment ils pensent et quelles sont les bases de leur comportement.

Comment pensent les utilisateurs ?

Grosso modo, l’utilisateur a les mêmes habitudes sur le web que dans la « vraie vie ». Il jette un coup d’œil à chaque nouvelle page, parcourt quelques lignes et clique sur le premier lien qui attire son attention ou qui ressemble vaguement à ce qu’il cherche. Dans les faits, une grande partie de la page n’est même pas vue.

La plupart des utilisateurs cherche quelque chose d’intéressant (ou d’utile) et de cliquable ; l’utilisateur clique sur le premier élément qui semble correspondre à ses aspirations. Si ce n’est pas le cas, direction le bouton « Retour » et le processus de recherche est relancé.

• Les utilisateurs apprécient la qualité et la crédibilité. Un site qui fournit un contenu de qualité peut bien avoir un design pauvre envahi de publicité, le visiteur fera « avec ». Ceci explique pourquoi des sites pas « terribles » mais présentant un contenu attractif font de l’audience depuis des années. Qu’importe le flacon, pourvu qu’on ait l’ivresse, pourrait-on dire.
• Les utilisateurs ne lisent pas, ils parcourent la page. Face à une page web, le utilisateurs cherchent des points de repères ou des liens pour les guider à travers le contenu.

Les visiteurs ne lisent pas, ils scannent. Notez la manière dont les zones « chaudes »surgissent au milieu des phrases, ce qui est typique d’un processus de « scannage »

Notez la forme en « F » typique d’un processus de « scannage » [NdT]

• Les utilisateurs du web sont impatients. Ils réclament des gratifications immédiates. Si un site web ne peut pas répondre à leurs attentes, cela signifie que le designer a échoué dans sa mission et que l’entreprise perd de l’argent. Plus la charge cognitive pour accéder aux ressources du site est élevée, plus la navigation sur le site est absconse, et plus les utilisateurs auront tendance à quitter la page pour autre chose. [JN / DWU]
• Les utilisateurs ne font pas des choix optimaux. Ils ne cherchent pas le moyen le plus rapide pour trouver l’information. Ils ne scannent pas non plus la page sur un mode linéaire en allant d’une section du site à une autre : ils font « au mieux » en choisissant la première option raisonnable. Il y a de fortes chances pour qu’ils cliquent sur le premier lien qui les inspire. La rationalisation est chronophage, faire « au mieux » est plus efficace. [video ]

Le flux de lecture séquentiel ne fonctionne pas sur le web.

La capture d’écran à droite décrit le parcours de l’oeil sur une page donnée.

• Les utilisateurs suivent leur intuition. Dans la plupart des cas, ils improvisent au lieu de suivre le plan conçu par l’architecte du site. D’après Steve Krug, la raison est simple : les utilisateurs s’en moque : « si nous trouvons quelque chose qui marche, nous l’adoptons. Ça nous est égal de ne pas comprendre comment ça marche du moment que nous pouvons l’utiliser. Si vos visiteurs agissent comme si vous aviez conçu un panneau d’affichage, alors faites un beau panneau d’affichage. »
• Les utilisateurs veulent avoir le contrôle. Ils veulent pouvoir contrôler leur navigateur et se fier à la cohérence des données présentées tout au long de la navigation sur le site. Ils ne veulent pas de pop-up et veulent pouvoir revenir d’où ils viennent en utilisant un bouton « Retour ».

1. Ne faites pas réfléchir l’utilisateur

Selon la première loi d’utilisabilité de Krug, la page web doit être évidente et contenir toutes les explications nécessaires à sa compréhension. Lorsque vous créez un site, votre boulot est de supprimer les points d’interrogation — Les utilisateurs ne devraient pas peser le pour et le contre pour chaque clic.

Si la navigation et l’architecture du site ne sont pas intuitives, le nombre de points d’interrogation augmente et le système devient opaque : il devient plus difficile de se rendre d’un point A à un point B. Une structure claire avec des indications visuelles raisonnables et des liens facilement reconnaissables peuvent aider le visiteur à trouver son chemin.

Allez au-delà des apparences en changeant l’ordre des éléments.

Jetons un oeil à un exemple. Beyondis.co.uk se veut le « beyond channels, beyond products, beyond distribution ». Qu’est-ce que celà signifie ? Puisque les utilisateurs ont tendance à explorer les sites web selon un parcours en « F » ces trois assertions devraient être les premiers éléments visibles dès le chargement de la page.

Bien que le design en lui-même soit simple et intuitif, le visiteur doit chercher plus loin pour comprendre de quoi il retourne exactement. Voilà un exemple de point d’interrogation superflu. C’est au concepteur du site de s’assurer que les zones d’ombre disparaissent. L’explication visuelle est placée du côté droit ; en changeant simplement la place des deux blocs, on augmente la « lisibilité » de la page.

Le slogan devient fonctionnel en fournissant au visiteur des options pour essayer le service

ExpressionEngine utilise une structure très proche de celle utilisée par Beyondis tout en évitant les points d’interrogation. De plus, le slogan devient fonctionnel en fournissant au visiteur des options pour essayer le service et télécharger une version gratuite.

En réduisant la charge cognitive, les visiteurs comprennent mieux le fonctionnement du système, ce qui vous laisse ensuite le loisir de communiquer sur les avantages du site et les bénéfices que les visiteurs peuvent en retirer.

2. Ne gaspillez pas la patience du visiteur

Dans un projet, lorsque vous vous apprêtez à offrir un service, essayer de simplifier les procédures au maximum. Moins il y a d’actions à accomplir et plus les chances qu’un visiteur X ou Y saute le pas augmentent. A priori, les visiteurs sont disposés à jouer avec le service, pas à remplir des formulaires web longs comme le bras pour ouvrir un compte qu’ils n’utiliseront probablement jamais. Laissez-les explorer le site et découvrir vos services sans les obliger à divulguer des informations les concernant. Il n’est pas raisonnable de forcer les utilisateurs à fournir une adresse email pour tester une fonctionnalité.

Comme Ryan Singer — développeur dans l’équipe 37Signals — le déclare, les utilisateurs seront probablement désireux de donner leur adresse email si on la leur demande après qu’ils avoir vu quelque chose qui fonctionne.

Stikkit est un service « user-friendly » efficace

Stikkit est un parfait exemple de service centré sur les besoins de l’utilisateur (user-friendly), rassurant et non intrusif. Et c’est sûrement ce que vous voulez que vos visiteurs ressentent sur votre site web.

Un enregistrement rapide grâce l’orientation judicieuse du formulaire

Apparemment, Mite demande plus. Néanmoins, l’enregistrement peut être fait en moins de 30 secondes, grâce à l’orientation horizontale du formulaire qui ne nécessite pas de faire défiler la page.

Dans l’idéal, faites sauter les barrières, n’imposez pas d’abonnement ou d’enregistrement dès le début (rien que l’enregistrement est un obstacle suffisant pour réduire le trafic).

3. Gérez l’attention de l’utilisateur

Comme les sites web fournissent à la fois du contenu statique et dynamique, certains aspects de l’interface utilisateur attirent plus l’attention que d’autres. Les images sont évidemment plus attirantes que le texte — comme les phrases marquées en gras sont plus attirantes que le texte normal.

L’œil humain n’est pas un instrument linéaire, et grâce à lui, les internautes peuvent reconnaitre instantanément les bords, les motifs et les mouvements. C’est pourquoi les publicités vidéo sont extrêmement agaçantes et perturbantes pour l’utilisateur, mais font parfaitement leur travail d’un point de vue marketing en captant l’attention.

“FREE.”, un signe subtil pour donner envie d’en savoir plus sur le service.

Humanized.com utilise le principe d’attention à la perfection. Le seul élément directement visible pour l’utilisateur est le mot « FREE. », attirant et séduisant, tout en étant reposant et purement informatif. Des signes subtils procurent au visiteur des informations suffisantes pour en savoir plus à propos de ces produits « free ».

Diriger l’attention sur des zones spécifiques du site avec un usage raisonnable d’éléments visuels aident vos visiteurs à aller d’un point A à un point B sans se demander comment ils sont supposés s’y rendre. Moins vos visiteurs auront de questions à se poser, et mieux ils pourront s’orienter dans le site. De plus, ils développeront une relation de confiance vis-à-vis de l’entreprise éditrice du site. En d’autres termes : moins on réfléchit, mieux on se porte.

4. Se battre pour passer en couverture

Les sites web modernes esont souvent critiqués à cause de leur tendance à vouloir guider le visiteur à l’aide de séduisants visuels, de 1-2-3-c’est-fini, de boutons larges avec effets spéciaux, etc. Mais dans une perspective de design, ces éléments sont plutôt une bonne chose ; ces lignes directrices sont extrêmement efficaces car elles guident simplement et de manière agréable les visiteurs à travers le contenu du site.

Des options visibles rapidement pour guider l’utilisateur.

Dibusoft.com combine visuel séduisant et structure claire. Le site possède neuf options pour la navigation principale visibles au premier coup d’œil, même si le choix de la palette de couleur aurait pu être un peu plus contrastée.

Permettre à l’utilisateur de voir clairement quelles fonctions sont disponibles, est un principe fondamental pour le succès d’une interface utilisateur. La manière d’y parvenir n’est pas très importante. Ce qui importe c’est que le contenu soit bien compris et que les visiteurs se sentent à l’aise avec la manière dont ils interagissent avec le système.

5. Utilisez un style de rédaction efficace.

Etant donné que le web est différent de l’imprimé, il est nécessaire d’ajuster le style d’écriture aux préférences de l’utilisateur et de ses habitudes de navigation. Un style de rédaction « promotionnel » ne sera pas lu. Les longs blocs de texte sans image ni mots-clé marqués en gras ou en italic seront évités. Les formulations emphatiques seront ignorées.

Parlez business. Évitez les intitulés trop malins ou subtils, propres au marketing, trop techniques ou spécifiques à l’entreprise. Par exemple, si vous décrivez un service et voulez que les visiteurs créent un compte, l’intitulé « Créer un compte » est mieux que « Commencez maintenant ! » qui reste encore mieux que « Explorer nos services ».

L’efficacité à l’état brut.

Eleven2.com va droit au but. Pas d’intitulé subtil, pas de déclaration exagérée. A la place, un prix, juste ce que recherche les visiteurs.

Pour écrire efficacement, une solution optimale consiste à utiliser :

• des phrases courtes et concises (venez-en au but le plus rapidement possible), - une maquette « scannable » (catégorisez le contenu, utilisez plusieurs niveaux de titres, mettez des visuels et des liste à puces qui ne perturbent pas le flux uniforme du texte),
• un discours simple et objectif (une promotion n’a pas besoin de ressembler à une publicité ; donnez à vos visiteurs quelques raisons valables d’utiliser votre service et de rester sur votre site).

6. Luttez pour la simplicité

Le principle KIS – Keep it simple (restez simple) – devrait être le but premier de tout design de site.

Les utilisateurs viennent rarement sur un site pour en admirer le design. Battez-vous pour la simplicité.

Crcbus s’adresse aux visiteurs avec un design simple et net. Vous pouvez n’avoir aucune idée de quoi il s’agit si vous ne parlez pas italien, néanmoins vous reconnaitrez la navigation, l’en-tête, la zone de contenu et le pied de page. Notez comment les icônes transmettent clairement les informations. Lorsque les icônes sont survolées, des informations complémentaires apparaissent.

Du point de vue du visiteur, le meilleur design de site web est constitué de texte brut, exempt de publicité ou autres blocs de contenus alternatifs qui ne correspondent pas exactement à la requête des visiteurs ou au contenu qu’ils sont en train de chercher.

Une version imprimable du site allant à l’essentiel est indispensable à une bonne expérience utilisateur.

Finch présente clairement ce qu’il faut savoir concernant le site et donne aux visiteurs la possibilité de choisir entre plusieurs options sans pour autant surcharger la page.

7. N’ayez pas peur de l’espace blanc

Il est aujourd’hui difficile d’ignorer l’importance des blancs tournants. Non seulement les espaces blancs contribuent à réduire la charge cognitive des visiteurs, mais ils facilitent la perception des informations présentées à l’écran. Lorsqu’on aborde une maquette pour la première fois, on a tendance à parcourir la page et à diviser les zones de contenu en morceaux d’information digestes.

Il est difficile de lire, de scanner, d’analyser ou de travailler avec des structures complexes. Si vous avez le choix entre séparer deux segments du design par une ligne visible ou en laissant de l’espace entre eux, il est généralement judicieux d’utiliser la deuxième solution.

Les structures hiérarchisés réduisent la complexité (Loi de Simon) : l’existence d’une hiérarchie visuelle facilite la perception du contenu.

L’espace blanc, c’est bon. Cameron.io l’utilise comme élément constitutif du design. Le résultat est une maquette facile à parcourir qui donne au contenu la position dominante qu’il mérite.

8. Communiquez efficacement avec un langage « visible »

Dans son journal sur la communication visuelle efficace, Aaron Marcus établit trois principes fondamentaux impliqués dans l’usage de ce que l’on peut appeler « langage visible » — le contenu que l’utilisateur voit sur son écran.

• Organisez : apporter à l’utilisateur une structure conceptuelle claire et cohérente. Cohérence, maquette, relation entre les éléments et navigabilité sont des concepts importants de l’organisation. Les mêmes règles et conventions devraient être appliquées à tous les éléments.
• Économisez : faites le maximum avec le minimum d’effets et d’éléments visuels. Quatre points sont à souligner : simplicité, clarté, distinction et accentuation. La simplicité s’applique seulement aux éléments qui sont les plus importants pour la communication. La clarté : tous les composants devraient être conçus de manière à ce que leur signification ne soit pas ambiguës. Distinction : les propriétés des éléments nécessaires devraient être distincts. Accentuation : les éléments les plus importants devrait être facilement perçus.
• Communiquez: adaptez la présentation des informations aux capacités des visiteurs. L’interface utilisateur doit jongler entre la lisibilité, la lecturabilité, la typographie, le symbolisme, les vues multiples, et les couleurs ou textures pour communiquer efficacement. Utilisez au maximum trois polices de caractères dans un maximum de trois tailles — avec un maximum de 18 mots ou 50/80 caractères par ligne de texte.

9. Les conventions sont vos amies

Un design conventionnel n’est pas synonyme de site web ennuyeux. En fait, les conventions sont vraiment utiles car elles réduisent la courbe d’apprentissage, le besoin de d’imaginer la manière dont les choses fonctionnent. Par exemple, il serait cauchemardesque que chaque site web ait sa propre représentation des flux RSS. Ce n’est pas très différent de ce que nous faisons dans notre vie de tous les jours lorsque nous utilisons des principes de base pour organiser nos données informatiques (fichiers) ou lorsque nous faisons du shopping (placement des produits).

Grâce aux conventions, vous pouvez gagner la confiance des visiteurs et améliorer votre crédibilité. Suivez les attentes des utilisateurs — ce qu’ils attendent de la navigation d’un site, de la structure du texte, de l’emplacement du champ de recherche, etc. (cf. Les Alertbox de jakob Nielsen pour plus d’information).

Babelfish en action : Amazon.com en Russie.

Un exemple typique d’expérience d’utilisabilité est de traduire une page en japonais (à supposer que vos utilisateurs ne connaissent pas le japonais, e.g. avec Babelfish) et demandez à vos testeurs d’effectuer une tâche, comme rechercher quelque chose sur la page traduite. Si les conventions sont bien appliquées, les utilisateurs seront capables de réussir des objectifs assez larges, même s’ils ne comprennent pas un seul mot.

Steve Krug suggère qu’il vaut mieux innover uniquement lorsque vous savez que vous avez une meilleure idée, sinon, optez pour les avantages des conventions.

10. Testez tôt, testez souvent

Ce principe appelé TETO (Test Early, Test Often) devrait être appliqué pour chaque projet de design web où les tests d’utilisabilité font souvent ressortir les problèmes et les questions liées à une maquette donnée.

Ne testez pas trop tard, pas trop légèrement et pas pour de mauvaises raisons. Dans ce dernier cas, il faut comprendre que la plupart des décisions concernant un design sont locales ; ce qui signifie que vous ne pouvez pas répondre globalement pour savoir si une maquette est mieux qu’une autre étant donné que vous devez l’analyser à partir d’un point de vue très spécifique (en considérant le cahier des charges, les intervenants, le budget, etc.).

Quelques points importants à garder à l’esprit :

• d’après Steve Krug, effectuer un test avec un seul utilisateur est 100% mieux que pas de test du tout, et tester avec un utilisateur tôt dans le projet est mieux qu’avec 50 près de la fin. D’après la première loi de Boehm, les erreurs sont plus fréquentes durant l’établissement du cahier des charges et la mise en place du design et sont plus coûteuses à corriger à mesure que le projet avance.
• Les tests sont un processus itératif. Cela signifie que vous concevez quelque chose, vous le testez, corrigez et le testez à nouveau. Il peut y avoir des problèmes qui n’ont pas été trouvés pendant le premier round étant donné que les utilisateurs ont été bloqués par d’autres problèmes.
• Les tests d’utilisabilité produisent toujours des effets bénéfiques. Soit ils vous renseignent sur les problèmes que vous avez, soit vous savez que votre projet est exempt de défaut, ce qui est – dans les deux cas – de bonne augure.
• d’après la loi de Weinberg, n’est pas le mieux placé pour tester son propre code. Cela est vrai aussi pour les designers. Après que vous avez travaillé sur un site pendant quelques semaines, vous ne pouvez plus le considérer avec un œil neuf. Vous savez comment il a été construit et donc vous savez exactement comment il fonctionne — vous avez la sagesse que les testeurs indépendants et les visiteurs de votre site n’aurait pas.

Dernière chose : si vous voulez un grand site, vous devez tester.

Références

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Desig

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• Design de formulaire : faites moche, c'est mieux !
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Personnalisez vos formulaires avec CSS et Javascript
• Deux mots sur le graphisme, le design et l'ergonomie des sites web
• Quelques notes sur XHTML et CSS, au fil de l'eau…

Acid2 : la visite guidée

Acid2 est une page web créée par The Web Standards Project (WaSP) pour tester les navigateurs afin d’aider les éditeurs de logiciels de navigation à sortir des produits compatibles avec les fonctionnalités demandées par les designers web.

Ces fonctionnalités font partie des standards existants mais n’ont pas pour autant été correctement implantés dans les principaux navigateurs du marché. Acid2 tente de changer la donne en permettant aux navigateurs de se mesurer au test avant d’être diffusés.

Acid2 est une page web complexe pleine de fonctionnalités sous-utilisées car peu ou mal implémentées. Il a été conçu pour que tout le monde puissent vérifier facilement que son navigateur préféré « roxorise » ou pas. Dans le premier cas, un petit smiley apparait ; sinon le smiley sera déformé et/ou s’affichera partiellement en rouge.

Le but de ce document est d’expliquer le fonctionnement d’Acid2. Le balisage utilisé par la page de test est particulier dans la mesure où, sur une simple page, il doit tester de nombreuses fonctionnalités. Nous n’envisageons ni recommandons de concevoir une page web normale de cette manière, mais celà convient parfaitement pour ce test.

Si au premier coup d’oeil le code source est ardu, cette visite guidée vous en expliquera certains détails. La lecture de ce guide demande des connaissances techniques sur la façon dont le HTML, les CSS et le format PNG fonctionnent.

Note : Acid2 fait un usage intensif des datas URLs. Pour permettre aux clients web qui n’incluent pas encore cette fonctionnalité de passer le test, une version sans datas URLs est disponible.

Note : lors du test, assurez-vous d’utiliser les réglages par défaut de votre navigateur. La modification du niveau de zoom, de la taille minimum du texte, l’application d’un algorithme pour adapter la largeur du document à la taille de la zone de visualisation ou tout autre changement peut altérer le rendu de la page sous Acid2, sans pour autant être considéré comme un échec de compatibilité (ajouté le 21 juillet 2006).

Que sommes-nous donc en train de tester, au juste ?

Acid2 a été conçu si les fonctionnalités réclamées depuis longtemps par les designers web sont bien implémentées dans les navigateurs. Tout en restant dans le périmètre des standards du web, Acid2 n’inclut pas l’ensemble des spéfications et ne peut donc garantir aucune conformité vis-à-vis d’aucune d’entre elles.

Après ces précautions d’usage, nous avons sélectionné et testé les fonctionnalités que nous considérons comme les plus importantes pour le futur du web. Bien que ce test a été inspiré par l’annonce d’IE7 par Microsoft, il n’a pas été conçu pour un navigateur en particulier. Nous pensons qu’Acid2 mettra en lumière les problèmes dans tous les navigateurs courants.

Acid2 part du principe que les navigateurs sont compatibles avec HTML4, CSS1, PNG et Data URLs. les trois premiers éléments de la liste sont présents pour des raisons évidentes : ils forment la colonne vertébrale de tout contenu web. Les Datas URLs sont décrit dans HTML4 mais sont peu implantés. Nous pensons que les Datas URLs sont pratiques et utiles pour les webdesigners et faciles à implanter dans les navigateurs.

De plus, Acid2 considère que le navigateur utilise une résolution de 96 ppp, conformément au dernier appel du document de travail pour les CSS 2.1. Concernant les agents utilisateurs qui autorisent l’agrandissement des polices de caractère, le taux de 100% est retenu. Voici un aperçu des fonctionnalités les plus importantes testées par Acid2 :

• Transparence des images au format PNG — les yeux sont des PNG transparents.
• Elément object — les yeux sont attachés à une balise object. Pouvoir utiliser object (qui peut avoir un contenu alternatif) est l’une des plus anciennes demandes des webdesigners,
• Positionnement absolu, relatif et fixe — indispensable pour les mises en page avancées,
• Modèle de boite — le test Acid d’origine était axé sur le modèle de boite CSS. Acid2 continue le combat en testant les valeurs height, width, max-width, min-width, max-height et min-height.
• Tableaux CSS — il n’y a rien de mauvais à utiliser display: table pour la mise en page. C’est un puissant système de maquettage qui prend tout son sens sur les écrans larges bien que l’utilisation de tables puisse entrainer des désagréments. Pouvoir spécifier une mise en page de cette manière est important. CSS tables — There is nothing wrong with table layouts. It is a powerful layout model which makes sense on bigger screens. However, the table markup is troublesome as it ties the content to these screens. Therefore, being able to specify table layouts in CSS is important.
• Marges —Les CSS définissent des algorithmes précis pour le calcul des marges autour des éléments.
• Contenu généré — La possibillité d’ajouter des éléments décoratifs ou des annotations à une page web sans modifier le marquage a été réclamé depuis longtemps par les auteurs.
• Analyse des CSS — Acid2 inclus quelques déclarations CSS illégales qui devraient être ignorées par les navigateurs conformes aux directives.
• Paint order — nous vérifions que l’imbrication se fait dans le bon ordre. Ce n’est pas une fonctionnalité en soi, mais un pré-requis qui permet à d’autres fonctions de se dérouler correctement.
• Interlignages (Line-heights) — le test Acid2 vérifie quelques éléments-clés du modèle de boite CSS des éléments en ligne dont toute page web conforme aux standards dépend.
• Effet de survol (:hover) — un des éléments du smiley change de couleur au passage du pointeur. Savez-vous lequel ?

Vous devez prendre en compte qu’Acid2 s’affiche en mode standard. La page de test comprend un DOCTYPE qui signale que le navigateur devrait traiter la page conformément aux standards. Les développeurs de client web réticents à effectuer des changements dans la manière de rendre des documents anciens peuvent continuer à le faire sous l’appellation Quirks mode.

Qu’est-ce qui devrait apparaitre ?

Lorsque les choses se passent pour le mieux, le test Acid2 affiche une ligne de texte (Hello World) et un smiley dans une grille de 14×14. Chaque carré mesure 12 pixels de haut et 12 pixels de large. Le smiley possède un fond jaune avec un contour noir. Dans cette section, nous vous expliquerons comment tout celà a été créé.

Voilà, c’est fini…

La suite du texte est composé du découpage du smiley avec, à côté, un tableau récapitulant les éléments utilisés pour produire chaque ligne, les déclarations CSS mise en oeuvre ainsi qu’une courte description que je vous invite à consulter pour mieux comprendre le fonctionnement du test et des CSS par la même occasion.

N’hésitez pas à apporter votre grain de sel si vous pensez qu’une erreur s’est glissée à l’insue de mon plein gré ou si vous avez trouvé une formulation plus élégante, nottamment pour l’élément de liste « Tableaux CSS » et la traduction de « Paint order ». Merci d’avance !

PS : Je vous souhaite à toutes et à tous un joyeux nowel ;)

Note du 28/12/2007 : voir aussi (ou encore) l’article de Florent Verschelde sur le blog d’Alsacréations concernant les progrès du support CSS d’Internet Explorer 8.

PS2 : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats
• Petit bilan statistique du CSS Naked Day
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Check your <body> avec le W3C

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillés. Or, nous ne sommes pas obligé de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue à chaque fois.

C’est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d’avoir un code de bonne qualité dès le départ. Mais qu’est-ce vraiment qu’un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l’on peut utiliser lorsqu’on travaille sur le design d’un nouveau site web.

• Cet article ne couvre pas l’ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l’utilisation d’une grille en lisant l’article Designing With Grid-Based Approach.
• Vous trouverez des centaines de templates CSS dans l’article Free CSS Layouts and Templates.
• Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

Qu’est-ce qu’un framework CSS ?

• Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C’est ce que nous appellons un environnement de travail CSS.
• Un framework CSS n’a pas besoin d’être compliqué ou de tout prendre en charge. Il peut ne contenir qu’un simple jeu de feuilles de style CSS tel que :
  • typography.css pour les règles typographiques de base,
  • grid.css pour la mise en page par grille ou
  • layout.css pour des maquette générales,
  • form.css pour des styles de formulaires basiques,
  • general.css pour tout autre style supplémentaire.
• et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].
• En bref, les frameworks sont un jeu d’outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent de convertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l’obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

Les avantages du framework CSS

• Vous augmentez votre productivité et évitez les erreurs les plus courantes. Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.
• Vous normalisez votre code et vos classes. Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d’utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l’ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.
• Vous avez un meilleur flux de production au sein de l’équipe. Si le framework CSS est bien documenté, il peut être utilisé dans l’équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.
• Vous optimisez la compatibilité entre les différents navigateurs. Si votre frameworks CSS est à l’épreuve des balles, vous n’avez pas à vous soucier d’éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !
• Vous avez un code finalisé, propre et bien structuré. Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N’avez-vous jamais oublié l’élément code ou abbr ? CQFD.

Les inconvénients des frameworks CSS

• Vous aurez besoin de temps pour comprendre le framework. Pour l’utilisateur moyen, [...] le temps requis pour comprendre l’architecture d’un framework l’emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don't use frameworks]
• Vous devrez avoir une connaissance approfondie de l’architecture de votre code. En utilisant un framework CSS externe, vous ne serez pas dispensé d’une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d’une bonne connaissance de l’architecture de votre site que vous ne pouvez pas apprendre par l’étude ou la documentation. [Why I don't use frameworks]
• Vous héritez des bugs ou des erreurs de quelqu’un d’autre. Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.
• Vous développez des sites grâce au framework et non pas d’après une solide connnaissance des CSS. Un des grands problèmes posés par les frameworks, c’est que les développeurs finissent par s’attacher au framework lui-même au lieu du code qu’il y a derrière. La connaissance qui en résulte n’est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].
• Vous avez du code inutile. Qu’il s’agisse des frameworks pour les langages côté serveur ou des bibliothèques Javascript, il y a souvent une grande partie du code qui ne sera pas utilisée. Si ce n’est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s’agit d’un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Les CSS peuvent ne pas être sémantiquement correctes. CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu’il est impossible d’englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d’identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]
• Ignore les spécificités de vos projets web. Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

Les frameworks CSS en détail

YAML (Yet Another Multicolumn Layout)

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s’accomode de tous les navigateurs web modernes. Tous les bugs de rendu d’Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d’IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l’impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

Vous avez aussi la possibilité d’utiliser l’interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l’ordre dans lequel vous voulez les voir apparaitre dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d’afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

Blueprint

Le framework Blueprint, créé par l’étudiant norvégien Olav Frihagen Bjørkøy, semble très prometteur. Ce framework propose : des fondations solides pour la typographie ; une grille de mise en page facilement personnalisable ; une gestion pratique de la typographie et des lignes de base pour le texte ; une feuille de style pour l’impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n’est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l’utilisation de Blueprint que l’on peut considérer comme le nouveau standard à venir dans l’approche du design web basé sur une grille de mise en page.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d’affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs ; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents, permet à l’utilisateur d’ajuster la taille des polices en gardant une consistance d’un navigateur à l’autre. Fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d’empiler ou d’imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d’ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

Reset Global CSS

• Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.
• *{margin:0;padding:0} est une mauvaise pratique. Malheureusement, ce n’est pas une bonne pratique. C’est très difficile pour les agents utilisateurs d’appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d’être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]
• Tripoli Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d’éléments (tables, listes, typographie, mais aussi les en-têtes (h1 – h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.
  
• Reset CSS Reloaded d’Eric Meyer. Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit, Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l’être, chacun selon leur nature.
• Reset CSS de Yahoo! UI Library Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d’un navigateur à l’autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.
• CSS Global Styles Reset par Kyle Neath. Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.
• CSS Global Reset par Christian Montoya – css L’idéal est d’avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.
• CSS Global Reset par Mike Rundle.
• Master Stylesheet Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l’espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

Styles de base CSS

Web Typography: bottom margins of paragraphs and lists par Marko Dugonjic.

Compose To A Vertical Rhythm L’unité de base de l’espace vertical est la hauteur de ligne (line-height). En établissant une hauteur de ligne qui puisse être appliquée à l’ensemble du texte de la page, qu’il s’agisse des titres, du corps du texte ou des notes de bas de page, on obtient un rythme vertical sur laquelle s’appuyer, qui guide le lecteur à travers le contenu.

Baseline Stylesheets par Darren Hoyt.

One clean HTML markup, many layouts… par TJKDesign.

Mike Stenhouse’s CSS Framework Il est possible de séparer les éléments d’une feuille de style en composants réutilisables pour d’autres projets. La suite logique est d’étendre ce principe pour mettre en place un framework CSS, autorisant des développements rapides avec des composants déjà testés. Tout ce qu’il faut pour y parvenir est de créer un jeu de convention de nommage et un template de base assez souple…

Développez votre propre framework CSS !

Garder à votre framework CSS un degré d’abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d’un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d’identifiants et d’éléments HTML ; garder à l’esprit l’importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit par Sven Lennartz et Vitaly Friedman de Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d’informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n’essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C’est ce qui nous rend différent. En fait, nous frappons vos esprit avec l’information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J’ai essayé de suivre au mieux les intentions de l’auteur et le déroulement de l’article, mise en forme comprise afin de permettre une comparaison rapide avec l’original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Alors, ces frameworks, on les utilise ou pas ? (notes personnelles en guise de conclusion)

Les frameworks CSS ont le vent en poupe et c’est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d’organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d’utilisation :

1. Vous savez ce que vous voulez comme structure HTML en terme d’éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l’utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c’est comme beaucoup de choses, j’imagine qu’avec de la motivation et de l’huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d’intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c’est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Exercice de style CSS et HTML : table vs div
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Vos positions s'affaissent ? Mettez le bottom à zéro…

Ruiner l’expérience utilisateur

Pendant un récent voyage d’affaire à Seattle, j’ai passé deux soirées à déguster la cuisine locale. Je me suis régalé à chaque repas, mais je garde de l’un deux un souvenir bien plus marqué. Mais pourquoi ?

Les deux restaurants présentaient de nombreux points communs : les plats étaient alléchants et présentés avec goût ; l’atmosphère était sympathique et chaleureuse ; les menus offraient un large choix de plats tout deux à un prix raisonnable, et le personnel était aux petits soins. Alors qu’est-ce qui fait que le second restaurant m’a laissé un bien meilleur souvenir que le premier ?

Comme souvent dans la vie, ce sont les détails qui comptent le plus. Prenez un verre d’eau, par exemple. Un serveur négligent peut le servir glacé, ou pire encore, vous laisser mourir de soif avant de vous resservir. Alors qu’un serveur bienveillant s’assurera que le niveau de l’eau ne descendra jamais plus bas que la moitié du verre ; les meilleurs vous feront la surprise de trouver le verre que vous venez de finir, rempli à ras bord une nouvelle fois.

Pour nous les ergonomes du web, Il y a beaucoup à apprendre d’une chose aussi simple qu’un verre d’eau.

Qui est le client ?

Quand vous êtes serveur dans un restaurant, vous savez que les gens viennent avec certains besoins et, parfois même, avec quelques attentes. Souvent, le verre d’eau est le « premier contact » avec le client. S’il est rempli rapidement, vous marquez un point, mais ce n’est que le début. En effet, certaines personnes boivent plus vite que d’autres et demandent à être resservies plus souvent. Certains clients ne boiront pas avant d’avoir les plats devant eux. D’autres encore ne toucheront pas à leur bouteille d’eau… ou demanderont peut-être un peu de thé glacé, ou encore autre chose. Au départ, vous ne pouvez vraiment pas savoir à qui vous avez à faire. Et lorsqu’il s’agit d’une table de 4, 6 ou même 10 personnes il vaut mieux s’être préparé à l’avance…

Sur le web, c’est la même chose. Nous faisons de beaux sites qui (nous l’espérons) font une excellente première impression, mais nous devons nous assurer que chaque point d’interactivité renforce cet avis favorable tout au long de la navigation, sinon nous risquons de dilapider le peu de crédit acquis au départ. Ce type de pensée à donné naissance au concept d’amélioration progressive

Sur le web, nous ne savons rien à propos de la personne qui vient visiter notre site. Nous ne connaissons pas le navigateur utilisé. Nous ignorons si le serveur est interrogé depuis un téléphone portable. Nous ne savons pas si le clavier est préféré à la souris. Nous ne savons pas si Javascript (ou même CSS) est activé. Nous ne savons pas si la page doit être imprimée. Nous ne savons pas si l’utilisateur consulte le site à l’aide d’un lecteur d’écran. Nous ne savons vraiment rien…

Alors, que fait-on quand on ne sait rien ? On an-ti-ci-pe.

En tant que développeurs, nous devons pouvoir satisfaire les besoins de nos clients. Et si nous sommes assez pointus, nous pouvons régler leurs problèmes sans qu’ils ne se rendent compte de notre intervention.

Une douche froide ?

Lala.com est un site bâti autour d’une communauté de gens qui aiment la musique. Le système facilite l’échange de CD dans toute la communauté par la poste.

Je ne dirais pas que leur site web est attractif, mais il est utilisable… sauf si Javascript est désactivé.

Vous apprécierez le fait qu’il y a un message indiquant un Chargement en cours alors que rien ne se charge.

Pour régler le problème (la copie d’écran ci-dessus a été prise entre le moment où j’ai commencé à me servir du site comme exemple de ce qu’il ne fallait pas faire et la finalisation de l’article), tout ce qu’ils ont été capable de faire, c’est de ressortir ce vieux message au parfum entêtant datant de la dernière guerre des navigateurs.

Le problème ici n’est pas que le site utilise Javascript, mais qu’il ne fonctionne pas sans. La raison ? Et bien, apparemment, les concepteurs se font plaisir en Ajax-isant tout le contenu. Dans leur précipitation, ils ont entassés tous les trucs du web 2.0 sous le capot et se sont aliénés une bonne partie des utilisateurs du web 1.0, et une part importante du marché des appareils mobiles. Et ils ne sont pas les seuls.

Pensez à ceci : vous êtes un utilisateur de Lala.com, vous êtes proche d’un magasin de disque et vous vous arrêtez sur l’album des Fatals Picards ["Arcade Fire" dans la version originale, NdT]. Vous n’avez pas réalisé qu’il était sorti et voulez l’ajouter à votre liste de souhaits avant de l’oublier. Si votre téléphone mobile ne supporte pas Javascript (ou si vous l’avez désactivé pour réduire le temps/coût de chargement), vous allez vous retrouver devant un écran qui vous donne des informations pertinentes sur Lala, suivies malheureusement du message indiquant que Javascript est nécessaire pour utiliser le site.

Vous ne pouvez pas accéder à votre liste de souhaits ou à quoi que ça soit d’autre, d’ailleurs. Même le champs de recherche (en bas de la page) ne fonctionne pas. Pour une application de type intranet, cela peut être acceptable, mais pour un site web grand public, c’est un désastre.

Réfléchissez avant de servir

Nous avons déjà établi qu’en tant que développeur web nous sommes généralement dans le brouillard quant aux desiderata de nos utilisateurs. Le mieux que nous puissions faire est d’anticiper ce que pourrait être leurs besoins et s’assurer qu’ils sont pris en compte à tout les niveaux pour apporter la meilleure expérience possible. C’est là que l’amélioration progressive entre en scène. Nous devons penser aux besoins des différents types d’utilisateurs et leur apporter une réponse.

1. Niveau 1 : pas de fioriture

   Certains utilisateurs veulent seulement accéder au contenu. Ils peuvent surfer depuis un appareil mobile, chercher à imprimer quelques informations, ou utiliser toutes sortes de périphériques d’assistance pour naviguer. Ils peuvent même avoir désactivé l’affichage des images. En gardant un marquage propre et bien-ordonné et en respectant la sémantique associée aux balises HTML, vous répondrez aux besoins de ces utilisateurs qui veulent consommer léger et afficher les pages rapidement, sans chichi.

2. Niveau 2 : faites joli

   D’autres, aiment les belles vitrines (ou une tranche de citron). Pour eux, concevez un design graphique visuellement attractif. Vous pouvez même ajouter quelques fioritures visuelles (ou un peu de Flash) et ils seront contents. Aussi longtemps qu’il n’y a pas de confusion entre les éléments de décoration et le contenu de la page, que vous avez réalisé tout vos tests sur les navigateurs (ou que vous fournissez quelques styles basiques pour les médias alternatifs), ça devrait le faire.

3. Niveau 3 : c’est la fête !

   D’autres encore, veulent le grand jeu. Pour ceux-là, vous pouvez faire sauter le bouchon et créer une merveilleuse application web 2.0 avec fondu-enchainé, widget en veux-tu en-voilà, et Ajax en abondance. Gardez toutefois à l’esprit, que ces niveaux ne sont pas toujours aussi clairement identifiables. Un palier intermédiaire entre les niveaux 1 et 2 sera peut-être nécessaire pour donner à Netscape 4.x et IE5/Mac quelques styles typographiques spécifiques. Ou vous pouvez avoir envie d’offrir des raffinements Javascript selon les navigateurs, ou encore injecter un peu de crème au nougat entre les niveaux 2 et 3…

Passer inaperçu

Une fois que vous avez décidé des niveaux à prendre en compte, vous pouvez construire votre site.

Commencez par le contenu. Quelquefois, les webdesigners et les développeurs oublient que les gens viennent surtout pour ça. Travaillez-le avec amour sans noyer vos visiteurs sous les informations. N’empilez pas les blocs comme pour un buffet. La production du contenu demande toujours beaucoup de travail. Mettez-le en valeur.

Lorsque le contenu est balisé, il est temps d’établir le look and feel du site. Concevez un design adapté à vos utilisateurs en utilisant pour chaque niveau les différentes techniques à votre disposition : cachez certains fichiers CSS aux navigateurs les plus anciens et donnez des styles spécifiques à ceux qui demandent un peu plus d’attention. Les commentaires conditionnels sont réellement vos amis pour la vie en la matière. Mais n’oubliez pas les vieilles recettes comme les règles @import et les combinaisons pour les médias spécifiques qui permettent d’offrir sélectivement un parfum différent pour les navigateurs collés au radiateur du fond de la classe.

Vérifiez la présentation de votre contenu à l’impression et son affichage sur les périphériques mobiles. A ce propos, envisagez-vous une mise en pages spécifique ou seulement un traitement basique en terme de couleur ou de typographie ? Quel sort réservez-vous aux images et aux formulaires ? Essayez d’anticiper les fonctionnalités qu’un utilisateur mobile voudrait, et ôtez le superflu ! Si vous utilisez la pseudo-classe :hover sur un lien, n’oubliez pas de considérer également la pseudo-classe :focus, et les utilisateurs de claviers ou d’appareils mobiles vous remercieront.

Lorsque le design est validé, ajoutez quelques étincelles avec une pincée de Javascript non-intrusif. Vous connaissez déjà les méthodes de détection pour savoir si un script peut fonctionner sur tel navigateur ? Considérez aussi comment vos scripts peuvent interférer avec les interactions communes aux navigateurs telles que « bookmarker » un lien ou utiliser le bouton retour. Et n’oubliez pas l’interdépendance qui peut exister entre des scripts différents : votre site deviendrait-il inutilisable si un script fonctionnait et pas un autre ?

Si vous créez un widget ou autre interface de contrôle, générez le marquage additionnel quand avez déterminé qu’il est prêt à être utilisé, et que tout le reste fonctionne encore. Et si vous séparez les CSS liées à votre widget de votre code Javascript comme un bon petit soldat des standards, assurez-vous que les styles ne sont pas actifs tant que le script n’a pas indiqué que le widget peut être utilisé. Une bonne pratique est d’utiliser l’échange de classe (cf. Table 1) :

Au final, si vous envisagez d’utiliser Ajax, faites-le avec discernement : il n’est pas nécessaire de charger l’ensemble de la page via des appels asynchrones qui finissent par devenir une barrière entre l’utilisateur et votre contenu. Paradoxalement, cela peut entraîner une augmentation de la charge serveur, rendre votre contenu invisible pour les moteurs de recherche, et rendre votre site inutilisable pour quiconque utilise un lecteur d’écran ou un mobile.

Ne me faites pas dire ce que je n’ai pas dit, Ajax a sa place, mais il est important de savoir laquelle, et plus encore, de savoir où elle n’est pas.

Conclusion

Anticipez les besoins de l’utilisateur avec précaution et occupez-vous d’eux en vous faisant remarquer le moins possible. C’est la clé pour laisser une première bonne impression. Comme avec un verre d’eau, vos utilisateurs ne devraient jamais avoir à réclamer pour être servi.

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

Merci à Véro pour son coup de main quand j’étais « Lost in translation » ;)

Note du 24/05/07 : Merci à Goulven pour sa relecture et les améliorations qu’il a apportées à cette traduction.

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• Framework JQuery pour écrire du Javascript non-intrusif
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quelques notes sur XHTML et CSS, au fil de l'eau…
• Trucs et astuces CSS
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

Ce conseil, et d’autres encore concernant les éléments à prendre en compte lorsqu’il s’agit de concevoir pour des ados plutôt que pour des adultes, est disponible dans une étude publiée par Jakob Nielsen. Si on considère que les trois-quart des ados (américains) utilisent le web, on mesure la pression qui pèse sur les webdesigners pour prendre en compte les spécificités de cette population !

L’intéractivité semble être le dénominateur commun, dit Nielsen, qui a observé des ados américains et australiens utilisant des douzaines de sites web dans des registres différents. Les ados veulent faire quelque chose plutôt qu’être simplement assis pour regarder, ce qu’ils trouvent ennuyeux et ce qu’ils ont l’impression de faire déjà à l’école.

Nielsen explique que les meilleurs éléments interactifs sont composés de messages personnalisés, de sondages, de quizz, de questions à poser à des experts, et d’outils permettant aux ados de construire leur propre page web.

Un autre élément que les ados trouvent attirant, c’est l’utilisation d’images et de photographies pour libérer le texte du fardeau de la communication des idées. Mais malheureusement cela n’allège pas notre page web ! Et alors que les adultes n’apprécient pas les pages surchargées ou demandant trop de lecture, ils supportent plus facilement que les ados, un ratio texte/images important.

Les ados sont aussi beaucoup moins disposés que les adultes à rester devant un site ayant un contenu intéressant mais mal présenté. Ceci est flagrant : après une ou deux pages, les ados sont prêt à émettre un jugement sur le site. Les adultes n’y passent pas deux heures, mais sont tout de même plus patients s’ils pensent avoir besoin des informations pour leur travail ou pour préparer leur vacances.

Dans son étude, Jakob Nielsen montre des exemples de sites appréciés des jeunes.

Parmis ceux-ci, on trouve SparkNotes qui propose des fiches techniques dans les domaines proches de la chimie afin de préparer des tests d’aptitudes scolaires. Nielsen explique dans son étude, que les ados apprécient la combinaison d’informations utiles, l’apparance propre et l’interactivité. L’interface du site est conçue pour faciliter la recherche des informations nécessaires pour la réussite de leurs devoirs scolaires.

Le site d’Apple Computer en est un autre exemple : présentation soignée, bon équilibre entre les images et le texte présentés sur un fond blanc. Par ailleurs, la facilité avec laquelle les ados trouvent les informations confortant leurs intentions d’achats est un plus pour le site.

Nielsen ajoute qu’une des choses que les ados font (online) est une variante de e-commerce. Variante, parce qu’ils envisagent le plus souvent d’acheter leur produit via un canal physique, mais effectuent leurs recherches en ligne. Il est donc important pour les entreprises s’adressant aux jeunes de soigner les descriptions de leurs produits !

Mais tous les sites s’adressant aux ados n’essaient pas de leur vendre quelque chose. Nielsen écrit que les sites comme CSUMentor et TeensHealth sont bien évalués par les sujets de l’étude en raison de l’intelligent compromis entre information pertinente et présentation, sans oublier que ces sites ne demandent pas aux ados un travail de réflexion trop intense.

C’est comme si ce n’était pas un travail très difficile de jouer sur le site web et c’est ce qui attire les jeunes, dit encore Nielsen à propos de CSUMentor. Lorsqu’ils surfent, les ados recherchent la facilité.

D’autres sites sont identifiés par l’étude pour être ados friendly. Parmi ceux-ci ont trouve des sites : communautaires (createblog.com, MySpace.com, TeenChat.com) ; de loisirs (RollingStone.com, CartoonNetwork.com) ; de jeux (Real.com, GameFAQs.com, PlanetDreamcast) ; de contenu (Lyrics.com, ReligiousTolerance.com) ; d’achats (LaCie.com, WetSeal.com) et de sport (MLB.com, race-deZert.com).

Pour Susanna Stern, Professeur Assistante à l’Université de San Diego qui travaille régulièrement avec des ados, un des facteurs les plus importants pour attirer les jeunes, c’est de leur faire sentir qu’ils sont respectés. Si vous les prenez au sérieux, alors il vous prendront au sérieux, ajoute-t-elle.

Tout aussi important, dit-elle, c’est de permettre aux jeunes d’explorer leur identité en leur fournissant un environnement dans lequel ils peuvent expérimenter des idées de style, leur façon d’être, leur manière de s’habiller, ainsi que leurs pensées à propos des problèmes qu’ils rencontrent – et tout ça de manière anonyme.

Mais Stern ajoute que les ados ont besoin de compréhension et s’inquiètent moins de leur vie privée sur internet que les adultes. Elle avoue être souvent surprise de voir combien les ados sont prêts à se dévoiler. Tout ceci pour dire que les jeunes n’ont pas la même attitude que les adultes vis-à-vis des sites commerciaux, notamment lors du recueil d’informations personnelles. Les jeunes ont tendance à aller au-delà des intentions des entreprises.

Au final, dit-elle, les ados ne semblent pas s’inquiéter du fait que les entreprises essaient d’en profiter. Il faut dire que les jeunes sont très futés lorsqu’il s’agit de la publicité, mais aussi qu’ils s’en moquent pas mal !

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.

Articles sur le même sujet

• L'expérience utilisateur et l'ergonomie des sites web
• Accessibilité des sites web… et si on faisait notre job ?
• 35 blogs de développeurs web
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le prêt-à-bloguer bride-t-il la créativité ?