Je vous propose de décortiquer un site web chaque mois afin d’examiner son interface utilisateur. Je tâcherai de choisir des sites plutôt bien exécutés, utilisant des techniques actuelles et ayant des designs intéressants.

Pour la première édition de l’année, nous allons nous pencher sur le site Life In My Shoes. Quelles sont ses forces au niveau du design et de l’expérience utilisateur ? Quelles sont ses points faibles ?

Présentation du site

La campagne Life In My Shoes a pour vocation de combattre les idées reçues sur les personnes atteintes par le VIH. Il a été commissionné par l’association Body and Soul qui lutte pour le respect, la dignité et le bien-être des enfants, des jeunes et des familles vivant avec le VIH.

Le site vise un public jeune qu’il tente de sensibiliser à ces problématiques.

J’ai choisi de parler de Life In My Shoes car tout en étant un site relativement simple, le sujet est traité de manière intéressante et attractive, avec une expérience utilisateur assez riche.

Le style graphique

Le design de ce site est relativement épuré, voire minimaliste.

Couleur

La palette de couleurs est très réduite : en fait, une seule couleur est utilisée : le jaune. Pour l’accompagner, le designer a choisi d’utiliser toute une gamme de gris. Le gris, et les aplats de gris clair en particulier, on l’avantage de créer une atmosphère posée et propre, propice à la lisibilité de texte gris foncé ou noir.

Imagerie

Le travail sur les graphismes et les photos est intéressant. La plupart des visuels sont des mélanges de photographie et dessin manuel. Les photos on été découpées afin d’éliminer le fond et de ne conserver que le sujet principal.

Ce traitement de l’imagerie a permis d’harmoniser les visuels entre eux. Même si les différentes photos fournies étaient de style hétérogènes, leurs différences sont gommées par leur découpage et leur assemblage avec du dessin.

Typographie

Le travail typographique a été réalisé avec beaucoup d’habileté même si je ne suis pas une adepte du texte centré (sauf exception). La police d’écriture à l’honneur est Houschka Rounded. C’est une police sans empâtement, à la fois très lisible et agréable à regarder.

La police utilisée pour les titres en lettres capitales est Sevigne ST.

La taille du corps de texte varie entre 16px sur le blog, et 19px sur d’autres pages. L’interligne est très bien ajusté, ce qui fait que le tout est très facile et plaisant à lire.

Beaucoup de web designers (moi y compris) se permettent des tailles de police de 12px ou 11px sans se rendre compte que c’est très difficile à lire. L’interligne est souvent beaucoup trop serré, ce qui ne donne pas envie d’aller au bout du premier paragraphe.

Comme l’explique cet article du Typographe, un corps de texte en 16px est idéal car cette taille correspond à peu près à la taille de texte que nous avons l’habitude de lire sur papier.

Depuis que ma vue a baissé légèrement, je réalise à quel point il est important de ne pas proposer des tailles de textes en dessous de 14px. Très faible est la portion de la population ayant une vision à la Superman.

C’est la mode des designs minimalistes sur internet, bien qu’ils ne soient pas appréciés de tous. On peut le comprendre ; même si l’équilibre entre vides et pleins est harmonieux et que la typographie est belle, ces designs peuvent être visuellement un peu fade.

Dans le cas de Life In My Shoes, je trouve que cet écueil a été évité grâce à plusieurs techniques et astuces subtilement utilisées.

L’interactivité

« (Design is) not just what it looks like and feels like.Design is how it works. »
Steve Jobs

Pour paraphraser cette citation du brillant Steve Jobs, le design n’est pas uniquement affaire d’esthétique et de cosmétique. Le design comprend aussi la manière dont le produit – ici le site web – va réagir aux interactions. Pour résumer, ce qui importe ce n’est pas seulement si c’est « joli », c’est l’expérience utilisateur dans son ensemble.

J’ai trouvé que l’expérience utilisateur sur ce site était subtilement enrichie par différents niveaux d’interactivité et de réactivité.

Les transitions

Lors du passage d’une page à l’autre, la zone de contenu est balayée avec un effet de transition. On aurait pu simplement charger la nouvelle page de manière traditionnelle, mais cet effet est un petit plus assez attractif.

Les contenus de la page d’accueil et de la page Journey So Far apparaissent de manière animée eux aussi. Notez l’effet subtil de parallax sur la page d’accueil, c’est à dire que la photo de l’homme apparait en premier et le fond dessiné circulaire s’insère en décalé dans le temps. On retrouve cet effet sur les différentes pages de Journey So Far lorsqu’on navigue avec les flèches jaunes.

Sur la page About us, on retrouve l’effet de parallax qui est cette fois vertical. Lorsque l’on descend dans la page, que ce soit en utilisant la molette de la souris ou les boutons présents dans la page, on voit que les morceaux de textes et les éléments graphiques bougent à des vitesses différentes. C’est une bonne manière d’inciter à parcourir toute la page, et de faire lire le texte à l’audience.

User input

Autre aspect sympa du site se passe sur la page Be Involved dont le contenu est généré par les utilisateurs. On leur propose d’uploader une photo de leurs pieds chaussés (référence au nom de la campagne) et de partager en une phrase un moment où ils se sont sentis différents, mis à l’écart.

C’est une manière simple et ludique pour l’internaute de s’impliquer et de partager avec d’autres. Visuellement, cela crée ces petites vignettes que l’on peut retourner d’un clic. La simplicité du concept et de l’interface donne envie d’explorer les différentes vignettes, et pourquoi pas d’y ajouter son emprunte.

Responsiveness

Le site a été conçu de manière a s’afficher correctement sur toutes les plateformes et résolutions d’écran. Que vous le consultiez sur un smartphone ou un grand écran d’ordinateur, l’interface devrait à peu près s’adapter. Je dis « à peu près » car le résultat n’est pas parfait sur certaines pages.

Si vous voulez en savoir plus sur ce sujet, je vous recommande de lire ce cas d’étude que j’ai écrit sur le « responsive design ».

Vidéos

Dans la liste des interactions avec le site, j’aimerais ajouter une petite note sur les vidéos car ce site en comprend plusieurs.
Il n’est pas a la portée de tous de proposer des vidéos sur un site, cependant lorsque c’est possible et que c’est pertinent, cela peut être une vraie valeur ajoutée. En tant qu’utilisateur on n’a pas toujours envie de lire du texte. Regarder une vidéo bien faite peut être tout aussi informatif et demander moins d’effort.

Rollovers

Sur la page Journey So Far, j’ai apprécié les petites bulles qui apparaissent lorsqu’on passe la souris sur les noms en noir des personnes citées. C’est une manière ludique de présenter plus d’informations à l’internaute tout en les rendant « optionnelles ». De cette manière elles ne polluent pas la page en étant tout le temps présente.

J’aurais aimé retrouver ce comportement sur d’autres liens du site, dans les contenus mais aussi par exemple sur les icônes des réseaux sociaux ou les logos des partenaires en bas de page.

Note sur l’ergonomie

Elle est plutôt bien pensée dans l’ensemble. La navigation est aisée, le texte est découpé en blocs faciles à lire. J’aurais cependant quelques critiques à émettre.

Navigation

L’état sélectionné d’un élément de navigation ne saute pas aux yeux. Lorsqu’on se trouve sur une page, l’élément de navigation correspondant est d’un gris un peu plus foncé que les autres éléments mais la distinction entre les deux états n’est à mon sens pas suffisante.

La navigation sur la page About us grâce à la barre verticale de droite n’est pas très explicite. J’ai mis du temps à comprendre pourquoi plusieurs points étaient en jaune. Je vous laisse deviner la raison mais voici un indice : cela dépend de la hauteur de votre fenêtre et de votre écran.

Heureusement, l’utilisateur a deux autres options pour naviguer dans cette page : en scrollant à l’aide de la souris ou de la barre de défilement du navigateur et à l’aide des boutons noirs sur jaune situés dans la zone de contenu.

URLs

La section Journey So Far est divisée en trois écrans. Au niveau du code il s’agit d’une seule et même page, mais du point de vue de l’utilisateur ce sont trois pages séparées. On navigue de l’une à l’autre à l’aide des flèches jaunes.

Une bonne pratique consiste à donner des URLs différentes à ces pages, même si en réalité il n’y a qu’une seule page. Dans cet exemple l’URL ne change pas.

En résumé

Les « plus »

• Palette de couleurs lumineuse et épurée
• Style d’imagerie créatif et homogène
• Typographie de qualité et hautement lisible
• Interactivité variée
• Animations par petites touches
• Site « responsive », c’est à dire qui s’adapte aux différentes résolutions d’écrans
• Vidéos qui égayent et informent

Les « moins »

• Ergonomie médiocre de la navigation
• Le texte centré est à éviter
• Utilisation de javascript pour répartir du contenu sur plusieurs pages, sans changer l’URL

Conclusion

J’ai aimé ce site à la fois pour sa simplicité et pour tous les détails qui apportent un « plus » à l’expérience utilisateur.

On sent que ce projet a nécessité beaucoup de temps et de réflexion afin d’aborder ce sujet sensible de manière ludique, interactive et attractive pour les jeunes (et les moins jeunes), sans tomber dans l’excès au niveau des animations.

Le mois prochain, je vous présenterai la critique d’un autre site.
D’ici là si n’hésitez pas à poster vos commentaires. Êtes-vous d’accord avec mon analyse ? Pas d’accord du tout ?

Dans cet article nous allons parcourir quelques règles d’accessibilité qui concernent le code HTML, l’écriture des contenus, ainsi que les phases de conception et de design. Ces règles rendent service à une multitude d’utilisateurs. En parallèle, elles favorisent un bon référencement naturel, ce qui n’est pas négligeable. Il y a donc tout à gagner en les implémentant.

Accessibilité web : qui est concerné ?

Selon Wikipedia, l’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.

Avec 22% de plus de 60 ans (INSEE) et environ 15% de personnes ayant un certain degré de handicap, on s’attendrait à ce que la majorité de sites web soient accessibles. Ils sont pourtant une faible minorité en ce début d’année 2011.

Il y a plusieurs causes à ce manque d’accessibilité du paysage web actuel :

• Les développeurs et intégrateurs ne sont pas formés en accessibilité ou ils ont du mal à communiquer au reste de leur équipe l’importance de l’accessibilité.
• Les clients ne sont pas sensibilisés à ce sujet ou pensent que ça va leur coûter trop cher.
• Les designers pensent qu’un site accessible ne peut pas être esthétique et que leur liberté de création va être réduite.

Il y a probablement d’autres causes en jeu, mais un des problèmes certain est le manque d’information de tous les partis concernés. En réalité, il est relativement facile de créer des sites accessibles en respectant quelques règles de base.

Règles de base pour un site accessible

• Une syntaxe HTML impeccable
  C’est une évidence ! Il s’agit par exemple de n’utiliser des tableaux que pour les données tabulaires ; d’utiliser des balises de titres pour les titres etc. Une bonne syntaxe sera aussi bénéfique pour les moteurs de recherches donc il y a tout à gagner.
• Des titres descriptifs
  Selon un sondage réalisé par WebAIM en 2009 sur l’utilisation faite des lecteurs d’écrans, 50% des personnes interrogées utilisent la fonctionnalité qui leur permet de naviguer d’un titre à l’autre lorsqu’ils cherchent une information. C’est leur manière de « lire en diagonale », d’où l’importance d’utiliser le bon marquage, et de choisir une formulation qui décrira le contenu qui correspond à cette section.
• Des liens descriptifs
  De la même manière qu’un utilisateur de lecteur d’écran peut lister tous les titres d’une page, il peut aussi lister tous les liens qu’elle contient. 16% des personnes interrogées dans le même sondage utilisent cette fonctionnalité. Il est donc important de choisir la formulation de chaque lien avec soin, pour qu’il ait du sens une fois sorti de son contexte. Il faut éviter à tout prix les libellés de type « cliquer ici » ou « en savoir plus ».

  Une méthode possible est de rajouter dans un span caché des internautes voyant une partie du lien :

  Par exemple considérons le lien suivant :

  <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_Web">
  en savoir plus <span class="lecteurDecran"> sur l'accessibilité du web</span>
  </a>

  Dans la feuille de style, définissons un style qui masquera à l’écran le texte contenu dans le span, mais le laissant « visible » pour les lecteurs d’écran :

  .lecteurDecran {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px); }
  

  Dans cet exemple, les personnes utilisant un lecteur d’écran entendent la totalité du lien, au lieu de seulement « en savoir plus » qui ne veut rien dire une fois sorti de son contexte. Cependant, les personnes utilisant un navigateur classique ne voient que « en savoir plus » à l’écran.

• L’importance des listes
  Les listes sont très utiles car les lecteurs d’écrans annoncent le nombre d’items qu’elles contiennent avant de les énoncer. Ne pas oublier de créer des listes pour les menus de navigation. En fait, les listes sont assez fréquentes et elles ne doivent pas nécessairement être accompagnées de puces ou des numéros à gauche.

  Une petite astuce consiste à se poser la question suivante : est-ce un titre ou un paragraphe ? Si la réponse est négative, il y a de grandes chances pour qu’il s’agisse d’une liste.

• Mettre les contenus importants en haut de page
  Dans le code HTML, il est préférable de mettre le contenu important avant les contenus contextuels ou secondaires. Les lecteurs d’écrans lisent les pages de haut en bas, il est donc logique de leur présenter les contenus importants en premier. Pour les internautes voyants, on se sert de CSS pour placer les différents contenus où on le souhaite sur la page.
• L’attribut ALT
  Toutes les images qui ne sont pas des images de fond (ces dernières sont définies dans les feuilles de style), doivent impérativement avoir un attribut ALT. Si ces images sont purement décoratives cet attribut doit être laissé vide. De cette manière, le lecteur d’écran l’ignorera totalement.
  Si en revanche une image apporte du sens, le texte contenu dans l’attribut devrait être descriptif mais bref.

  77% des utilisateurs de lecteurs d’écrans veulent savoir qu’une photo représente une jeune femme qui sourit, contre seulement 12.8% qui préféreraient que ce genre d’image soit totalement ignorée par le lecteur d’écran. Ce type de visuel peut apporter une information sur le ton et l’image de marque d’une entreprise par exemple.

• La conclusion en premier
  Pour chaque paragraphe, il est conseillé de résumer le contenu de celui-ci dans la première phrase, pour que l’utilisateur de lecteur d’écran soit en mesure de décider s’il souhaite continuer à lire ou passer à une autre partie de la page. Tous les utilisateurs bénéficieront de ce style d’écriture.
• Des titres de pages descriptifs
  Le titre de la page web est le premier élément que lit un lecteur d’écran, c’est pourquoi il est essentiel qu’il soit pertinent et descriptif.

Une multitude de déficiences et de handicaps

Nous nous sommes focalisés sur les utilisateurs non voyants utilisant des lecteurs d’écrans, mais il existe bien d’autres profils d’utilisateurs handicapés auxquels il faut penser.

Selon une étude publiée en 2002 sur les handicaps, il y a en France environ 12 millions de personnes souffrant d’un handicap, à des degrés très variés. Cela correspond à environ 15% de la population. De plus, ces chiffres ne prennent pas en compte des déficiences assez répandues qui ne sont pas des réellement des handicaps, mais qu’il faut tout de même inclure dans la problématique de l’accessibilité web. Il y a par exemple le daltonisme (8% de la population), la dyslexie (10% de la population) et l’épilepsie (environ 1% de la population).

Pour faciliter l’expérience de ces utilisateurs ainsi que de tous les autres, on peut ajouter quelques règles pour les phases de conception et de design :

• Utilisation de contrastes forts
  Le contraste entre le texte et la couleur de fond doit être important pour être facile à lire. De plus, il est recommandé d’utiliser des fonds clairs avec du texte foncé plutôt que l’inverse pour les sites avec beaucoup de contenu.

  Il existe plusieurs outils en ligne pour vérifier que l’on a fait un bon usage des couleurs, comme Check my colours et Contrast-A

• Utilisation des couleurs avec parcimonie
  Il peut être tentant, pour le web designer débutant, d’utiliser une palette chromatique large, cependant trop de couleurs peuvent nuire à la lisibilité de la page et distraire l’oeil. De plus, éviter les associations de couleurs telles que le rouge avec le vert car les daltoniens auront des difficultés à discerner les deux.
• Eviter à tout prix les animations rapides et répétitives
  Avez vous essayé de lire un article avec plein de bannières de publicité animées à côté ? C’est très pénible pour beaucoup d’utilisateurs. Autant que possible, il faut éviter ces animations rapides et répétées. Si vous devez mettre de la pub sur une page, préférez des versions statiques ou des animations lentes et qui s’arrêtent au bout de quelques secondes.

Conclusion

Rendre un site web accessible, ce n’est pas très difficile, il y a quelques bonnes habitudes à prendre mais une fois qu’elles font parties de nos méthodes de travail, on ne peut pas dire qu’il y ait un travail supplémentaire à fournir.

Cependant l’accessibilité devient plus difficile à implémenter lorsqu’il s’agit d’applications internet riches plutôt que de simple sites web. En effet, celles-ci utilisent souvent des éléments de javascript et de AJAX qui permettent de rafraîchir une partie de la page seulement. D’autre part, ces applications comportent généralement des formulaires qu’il faut savoir intégrer correctement afin qu’ils soient accessibles. Nous explorerons ces domaines dans un prochain article.

Ressources utilisées pour la rédaction de cet article

• Improving usability for screen reader users (Webcredible)
• Sondage réalisé par WebAIM en 2009 sur l’utilisation faite des lecteurs d’écrans (WebAIM)
• Définition de l’accessibilité du web (Wikipedia)
• Personnes handicapées dans le monde, en Europe et en France
  (accessiweb.org)
• CSS in Action: Invisible Content Just for Screen Reader Users (WebAIM)
  
• Screen reader user survey results (WebAIM)

CSS3 en bref

CSS3 permet la création d’effets visuels qui ne pouvaient pas être réalisés auparavant, ou qui nécessitaient du marquage en plus et/ou du Javascript.

En bref, CSS3 simplifie le job de l’intégrateur et met plus d’outils à sa disposition.

Parmi les nouveautées inclues dans les specifications CSS3, on trouve :

• text-shadow : en une ligne on peut ajouter une ombre portée à du texte, et bien plus encore car on peut ajouter autant d’ombres qu’on le souhaite. Pour chaque ombre on définit les distances par rapport au texte d’origine sur les axes x et y, ainsi qu’une valeur de flou. Voici un exemple.
• RGBA : avant on avait la propriété « opacity » qui permettait de rendre des objets translucides. L’inconvénient c’est que tout ce qui est contenu dans cet objet devient translucide, ce qui peut rendre les textes moins lisibles. Avec RGBA on peut définir des couleurs de fond et leur degré d’opacité avec la propriété « background », donc pas de problème de texte illisible.
• Images de fond multiples : avec CSS3 on n’est plus limité à une image de fond par objet ; le nombre est a priori illimité.
• box-sizing : cette propriété permet de changer le « box model ». On a la possibilité d’inclure le padding dans la taille de l’objet, ou le padding + la bordure.

Cette liste n’est pas exhaustive ; Il existe bien d’autres propriétés : dégradés, animations, rotations et autres.

Le problème

Toutes ne sont pas compatibles avec les mêmes navigateurs et à ma connaissance, aucune n’est compatible avec les versions 7 et 8 d’Internet Explorer. Il faudra attendre IE9 pour voir du CSS3 chez Microsoft. (Voir ce tableau de compatibilité des navigateurs avec CSS3.)

Comment utiliser CSS3 dès aujourd’hui alors que Internet Explorer concerne plus du tiers des internautes ?

Cela va dépendre du projet, car si vous créez un site pour un public en particulier qui utilise à 80% IE7, ce n’est peut-être pas très intéressant d’utiliser CSS3. En revanche si votre public se situe dans la moyenne avec 35% de IE, ou mieux, si vous vous adressez à un public assez « geek », vous pouvez dès maintenant utiliser CSS3 tout en travaillant sur des vues alternatives pour les navigateurs moins évolués.

Par ailleurs, il faut savoir que certaines propriétés CSS3 peuvent être reproduites à l’aide de filtres pour IE (ombres, transparence, rotations). Ces filtres sont un peu pénibles à utiliser et ne produisent pas exactement les mêmes effets que CSS3 mais ça peut dépanner. Ne pas oublier de les mettre dans des feuilles de style séparées.

Solution : la dégradation gracieuse

Il est tout a fait possible de concevoir un site utilisant CSS3 pour des effets d’ombres, de rotations, de dégradés ou autre, et d’offrir une version alternative, plus simple, aux navigateurs moins évolués.

Cas pratique : CannyBill.com

Le site CannyBill.com a été réalisé par Andy Clarke. Si vous visualisez ce site sur plusieurs navigateurs vous verrez quelques petites différences. Cet article écrit par Andy Clarke explique sa démarche et présente des aperçus des différents navigateurs.

Selon Andy Clarke, star du Design Web et défenseur des standards Web, il ne faut pas chercher à obtenir exactement le même design dans tous les navigateurs ; il faut produire la meilleure version du site pour le meilleur navigateur (sa référence à lui est Safari 4), puis on descend la chaîne des navigateurs jusqu’à IE en adaptant le design.

Au final, l’utilisateur ne se rendra compte à aucun moment qu’il ne voit pas certains effets du fait du navigateur qu’il utilise. On parle donc de « dégradation gracieuse » car quel que soit le navigateur utilisé, l’internaute est face à un site cohérent visuellement.

Cas pratique : For a beautiful web

Sur la page d’accueil il y a 3 jaquettes de DVD en vente. Sur Safari 4, quand on passe la souris sur une jaquette, le DVD sort vers la droite avec un effet de rotation. Sur Firefox 3.6 le DVD sort sans effet de rotation, et sur IE 7 et 8, le DVD ne bouge pas.
Dans aucun de ces cas l’internaute se demande-t-il si c’est normal ou « cassé » – car peu de gens regardent un même site sur 5 navigateurs différents – donc il s’agit d’un petit plus pour les utilisateurs de Safari et Firefox.

CSS3 en 2010

Donc, pourquoi ne pas utiliser CSS3 dès aujourd’hui ? Il existe un outil qui permet de styler les éléments d’une page différemment selon qu’un navigateur supporte telle ou telle propriété CSS3 en incluant un simple fichier Javascript. Il s’agit de Modernizr. Par exemple, si le navigateur utilisé ne supporte pas le RGBA, Modernizr ajoute la classe « no-rgba » sur le tag HTML, ce qui permet de définir d’autres couleurs pour tous les navigateurs qui ne supportent pas RGBA.

Dans cette expérience, j’ai utilisé du RGBA, des images de fond multiples, et la propriété box-sizing pour inclure le padding et la bordure dans les tailles que j’ai défini.

Quelques liens

J’ai trouvé plusieurs outils qui génèrent les styles en donnant les versions des différents navigateurs. Chacun de ces outils ne propose pas les mêmes propriétés donc il faut en utiliser plusieurs.

• CSS3 please
• CSS3 generator
• Plusieurs outils par Western Civilisation :
  • pour les transformations 2D et 3D
  • pour les dégradés
  • pour les ombres de texte
  • pour les contours de texte
• CSS3 gradient generator pour générer des dégradés
• Border radius pour générer des coins arrondis

Toujours à la recherche de nouveaux process, outils et pratiques, je me suis penchée sur l’idée de ne plus passer par Photoshop pour la création graphique de sites, mais de passer tout de suite à l’intégration. Francis Chouquet (fran6art) parle de « maquettes interactives« .

Le sujet fait un peu de bruit depuis quelques mois, certains voient les avantages de cette manière de travailler, d’autres ne sont pas prêt d’abandonner Photoshop de ci-tôt. Et bien sûr il y a ceux qui se situent au milieu.

Pourquoi une idée aussi farfelue ?

Tout Designer Web soucieux des meilleures pratiques en matière d’ergonomie, de référencement et d’accessibilité, saura que le contenu d’un site est primordial. Alors pourquoi ne pas structurer le contenu d’une page avant de passer à la couche design ? Voilà d’où est née l’idée du « designing in the browser », ou en français, du design dans le navigateur.

Cette manière de travailler n’est pas nouvelle, mais la naissance de CSS3 lui donne un intérêt nouveau. En effet, il est maintenant possible de créer de nombreux effet tels que des ombres, des rotations, des transparences et des dégradés, avec CSS3.

Vous me direz, CSS3 ne marchera pas dans de nombreux navigateurs populaires, alors pourquoi compter dessus ? Il y a plusieurs réponses possibles à cette question ;

1. On pourrait dire que justement, cette méthode va permettre de concevoir un site avec les principes de « dégradation gracieuse » en tête. Peut-être que IE n’aura pas de coins arrondis ni d’ombre, mais on peut faire en sorte que la page reste visuellement intéressante et ergonomique sans ces éléments de design.
2. Travailler dans le navigateur dès le début peut permettre d’éduquer son client de manière plus efficace : il verra tout de suite les différences d’un navigateur à l’autre au lieu de s’étonner qu’au final, son site n’est pas tout à fait le même que la maquette sous Photoshop.
3. On peut choisir cet outil de travail comme point de départ, mais rien ne nous empêche d’altérer le code et de rajouter des images par la suite pour que certains effets soient visibles sur tous les navigateurs. Avant tout l’intérêt est de ne pas travailler dans un format statique. On peut même faire des captures écran et les envoyer au client si on veut mais ça perd un peu de son intérêt.

Photoshop vs. le navigateur

Alors bien entendu chaque méthode a ses avantages et ses inconvénients. Dans Photoshop il sera sans doute plus rapide d’arriver à un design satisfaisant. D’après Dan (Wuup), qui a testé le design dans le navigateur pour ses clients, la phase du design initial est plus longue que dans Photoshop mais au final on gagne du temps sur le développement et donc sur la totalité du projet.

Je pense que les deux méthodes sont valables ; qu’on travaille dans Photoshop ou dans le navigateur, il s’agit de choisir un outil de création graphique qui sera le plus adapté à un projet et à un Designer Web.

Dan coupe la poire en deux en suggérant que le design d’une ou deux pages soit fait dans Photoshop, et le reste du site dans le navigateur. Ça me parait assez raisonnable comme approche, mais je ne suis pas sûre que ce soit très novateur.

Au moins, si on est le genre de Designer Web qui sait coder, on a le choix des outils. Mais ça c’est un autre débat qui fait du bruit depuis plusieurs années…

Quelques liens

• sxsw.beercamp.com : voici un site qui a été réalisé non seulement dans le navigateur, mais surtout avec aucune image – que du code !
• 24ways.org (en anglais) : Meagan Fisher exprime son dégoût pour Photoshop et son approche du design qui consiste à commencer par le contenu.
• Design Shack (en anglais) : voici une liste d’astuces et d’outils pour aider à concevoir un site dans le navigateur.

Récemment, alors que j’étais en phase d’intégration d’un site dont je venais de réaliser la maquette graphique, je me suis heurtée à quelques problèmes de rendu de typographie.

Il faut savoir que le site en question a un fond très foncé avec du texte clair, et que j’ai plus souvent conçu des sites clairs au texte foncé (meilleure lisibilité).

1er problème : rendu du texte plus gras sur mac

A ma grande surprise, mes titres en Palatino italisés apparaissaient en gras sur Mac. Je savais que sur Mac le texte était plus gras que sur Windows, ce que je ne savais pas c’est que l’écart est encore plus élevé quand le fond est foncé et le texte clair. En plus de ça chaque navigateur a un rendu un peu différent. Je n’étais pas prête à accepter une telle injustice donc je me suis lancée en quête d’une solution.

Je n’en ai pas trouvé à ce jour. Les différentes valeurs de font-weight (100, 200, … 900) ne servent à rien si la famille de police d’écriture ne contient pas suffisamment de variations, ce qui est souvent le cas. J’espérais trouver un moyen de tricher un peu avec de Javascript, sans succès.

Pour éviter ce genre de surprise, je vais peut-être essayer TypeKit sur le prochain projet. C’est une bibliothèque de polices d’écritures qui ne coûte pas cher (gratuit jusqu’à 2 polices pour un site) et qui est censée avoir un impact négligeable sur la performance du site. Cela me permettra de jouer sur les différentes variations d’une même police (extra light, light, roman, etc.).

2ème problème : rendu du letter-spacing

Dans Photoshop j’avais choisi de réduire l’espacement entre les lettres par -5 pour les titres. Dans ma feuille de style j’ai donc joué avec différentes valeurs de letter-spacing afin d’arriver à un résultat similaire. J’étais plutôt satisfaite de la valeur -0.02em. Sauf que ça ne marchait ni dans IE6 ni dans IE7, mais ce qui me dérangeait le plus était que ça ne marchait pas bien dans Chrome alors que le rendu devrait être le même que sur Safari (en théorie).

Je n’ai pas trouvé d’explication valable mais sur un forum on m’a proposé d’utiliser la valeur -1px au lieu d’une valeur relative en EMs et c’est l’option que j’ai choisie. J’utilise toujours des valeurs relatives pour le texte mais dans ce cas particulier j’estime que ça n’enlève rien à l’accessibilité du site.

Par contre sur la dernière version de Firefox pour Mac (3.6), les lettres de mes titres sont un peu trop serrées. A propos de Firefox, voici un article qui révèle quelques bugs qui varient d’une version de Firefox à l’autre. Mon problème pourrait en être un de plus.

Au final j’ai donc choisi la valeur -1px car elle rend bien sur la plupart des navigateurs. Après tout, peu de gens sont sur Firefox pour Mac et quand bien même ils utiliseraient ce navigateur, c’est tout à fait lisible.

Conclusion

Il faut accepter que les rendus seront un peu différents d’un navigateur à l’autre et que ça fait partie du jeu. En tant que designer web avec des qualités d’intégrateur, j’ai toujours envie que le site soit la réplique exacte de mon PSD, puisque c’est ce que le client a validé, cependant certains détails échapperont toujours à notre contrôle.

Quand on pense au temps que le designer passe à rendre son site « joli » dans tous les navigateurs, l’idée de travailler directement dans celui-ci fait sens. Nous explorerons cette idée dans le prochain article.

Je vous propose quelques astuces qui peuvent aider le Designer Web à retrouver sa muse. Si vous en avez d’autres n’hésitez pas à les partager dans les commentaires.

1) Consulter des galeries de sites

Ces galeries n’arrêtent pas de se multiplier sur le web.. Elles sont très utiles car elles offrent souvent une sélection de très bons designs dans l’air du temps. Il est inutile de les consulter toutes car on finit par retrouver les mêmes liens et on risque de se disperser. Mieux vaut en choisir quelques unes qui vous conviennent.

Certaines permettent de filtrer les résultats par catégories (charte graphique, style, type de site, éléments de design) :

• Site Inspire
• Design Shack
• Dossier Design

D’autres galeries ne permettent pas de filtrer les résultats par catégorie mais sont tout de même intéressantes :

• Best Web Gallery
• CSS Evo

2) Consulter des collections d’éléments

Il s’agit d’un concept un peu différent des galeries de sites. Patterntap est composé de 45 collections d’éléments web. Admettons que vous souhaitiez trouver des idées de style de navigation, il vous suffit de consulter la collection de capture écrans de navigations. Parmi les 45 collections on trouve : header, footer, boutons, icônes, titres, typographie, listes, 404…

Je ne connais que Patterntap dans ce genre. Si vous en trouvez d’autre n’hésitez pas à les partager dans les commentaires.

3) Jeter un œil sur la concurrence

Allez voir à quoi ressemblent les sites des concurrents de votre client et d’autres sites du même domaine. S’il s’agit d’un restaurant, regardez des sites de restaurants à travers le monde. Cela vous donnera des idées de ce que vous aimeriez faire ou au contraire de ce que vous voulez à tout prix éviter.

4) L’auto-inspiration

Si vous travaillez comme designer web depuis quelques années, vous avez probablement réalisé quelques bon designs dont vous avez momentanément oublié l’existence. Les consulter peut vous aider à reprendre confiance et trouver de nouvelles idées. Le mieux est d’avoir votre propre site portfolio que vous gardez à jour.

5) Utiliser un site de bookmarking

J’utilise Delicious depuis plusieurs années mais il y en a d’autres (Digg, StumbleUpon…). L’essentiel est d’en choisir un et de l’utiliser activement.

Quand vous surfez sur le web et que vous voyez un site dont le design vous plait, ajoutez-le à vos favoris et choisissez bien les mots-clef que vous lui associez. Si c’est un site très sombre n’hésitez pas à ajouter le mot « sombre » ou « dark ». Si vous aimez particulièrement le logo, et la typographie, ajoutez donc les mots « logo » et « typographie ». Peut-être est-ce un site de ecommerce? Ajoutez donc le mot « ecommerce ». Vous serez bien content de retrouver ces sites plus tard quand vous manquez d’inspiration.

Vous pouvez aussi faire une recherche parmi les favoris des autres utilisateurs. C’est souvent plus utile que de passer par un moteur de recherche classique.

6) S’éloigner de l’ordinateur

C’est sans doute le conseil que j’applique le moins ; beaucoup vous le diront, prendre une pause et regarder le paysage ou un livre de design (pas forcément web) peut aider à trouver de l’inspiration.

Et vous, qu’est ce qui vous inspire ?

Mise à jour : the Smashing Magazine vient de publier un article avec d’autres conseils pour trouver de l’inspiration (en anglais).

Vous connaissez sûrement WordPress, le meilleur outil de blog à ce jour. WordPress est un produit (ou logiciel) Open Source, c’est à dire qu’il a été développé par la communauté de développeurs web à travers la planète. Il a connu de multiples évolutions et améliorations, et en est aujourd’hui à la version 2.8.3. Mais vous ne connaissiez peut-être pas encore WordPress MU, son grand frère.

Pourquoi WordPress MU ?

WordPress permet de mettre en place un blog ou un site web simplement et très rapidement. La plupart des bloggers utilisent aujourd’hui cet outil né en 2003. WordPress répond donc parfaitement au besoin de la mise en place d’un blog.

Dans dans certains cas, lorsqu’un blogger gère plusieurs blogs par exemple, ou lorsqu’une entreprise ou une administration souhaite animer une communauté en proposant à ses membres d’ouvrir un blog, les tâches d’administration et de maintenance seraient trop lourdes si elles devaient être effectuées pour chaque blog un à un. WordPress MU est né du besoin de mutualiser ces tâches. Voyons maintenant les grandes caractéristiques de WordPress MU.

L’interface d’administration de WordPress MU

L’interface de WordPress MU est la même que celle de WordPress. Elle est donc très ergonomique, d’une prise en main simple et rapide. La copie d’écran parle d’elle même :

Tout comme WordPress, WordPress MU bénéficie d’un système d’extensions (ou plugins)

Une des grandes forces de WordPress est son système de plugins permettant d’étendre ses fonctionnalités afin d’obtenir une solution spécifique à chaque besoin. on trouve ainsi des plugins pour le référencement, pour gérer les formulaires de contact, pour analyser le trafic du blog ou bien pour optimiser des performances.

L’interface d’administration du super administrateur

D’un point de vue super administrateur, c’est à dire administrateur de la plateforme, l’interface est identique, au détail près qu’elle ajoute un onglet supplémentaire, l’onglet « Admin. du site », regroupant divers options de configuration de la plateforme.

Sur WordPress MU, la question du design n’est pas laissée de côté, et la personnalisation de chaque blog est gérée.

La gestion du design sur WordPress MU

D’un point de vue blogger, WordPress MU permet tout comme WordPress d’habiller son blog avec n’importe quel thème compatible (Voici notre classement des meilleurs thèmes WordPress). Le super admin, lui, peut autoriser les bloggers à ajouter tel ou tel thème installé sur la plateforme, de même qu’il peut décider d’autoriser blog par blog le thème qui sera utilisable. Ce qui est particulièrement pratique dans le cas où la plateforme héberge des blogs de différentes entités.

La conclusion sur WordPress MU

WordPress MU est donc un logiciel extensible, robuste et répondant parfaitement à la problématique multiblogs. Son interface sobre et efficace permet une prise en main rapide. Son système de plugin permet de le personnaliser en fonction de chaque besoin!

Pour les plus techniques de nos lecteurs, n’hésitez pas à consulter notre tutoriel sur l’installation de WordPress MU. Sinon, n’hésitez pas à nous contacter pour étudier ensemble votre projet.