Quelques notes — Un seul design pour les rassembler tous ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Quelques notes — Un seul design pour les rassembler tous ?

La question du jour est : faut-il absolument qu’un site web s’affiche de manière identique sur tous les navigateurs ? Les réponses divergent selon que l’on est du côté de la conception graphique ou du côté de l’intégration web. On peut toujours répondre «non» ! La réponse toute faite étant qu’un visiteur donné n’utilise qu’un navigateur à la fois. Ce n’est pas faux, mais ce même visiteur peut très bien utiliser Internet Explorer 6 sur son lieu de travail, Firefox à la maison,  Google Chrome chez un ami et Opera chez un autre ami…

Le graphisme, c’est de l’expérience utilisateur

L’expérience utilisateur au sens large, c’est-à-dire en prenant en compte les différents contextes de visite d’un utilisateur qui bouge (sans se  limiter à la session en cours, donc), peut être compromise. Comment faire confiance à un site qui change d’apparence comme de chemise ? Selon l’écart qu’il peut y avoir entre les différents affichages, le visiteur peut légitimement se demander s’il n’est pas victime d’une tentative de Phishing (même s’il est plus facile de refaire une page web à l’identique qu’avec des différences, on est bien d’accord).

Ça va sans dire mais mieux en le disant : si la confiance est un élément important dans votre communication, il vaut mieux que votre site s’affiche de manière identique sur les différentes combinaisons plate-forme-navigateurs présentes sur le marché. Et vous l’aurez sans doute deviné, si l’on veut que le site web présente une interface identique sur tous les navigateurs, les notions d’amélioration progressive et de dégradation gracieuse perdent toute leur substance.

FUD ? Je reconnais qu’avec cette histoire de confiance, la peur, l’incertitude et le doute se sont insinués dans votre esprit. Et ce n’est que le début car j’aborde maintenant un élément essentiel dans toute communication d’entreprise : l’identité graphique. Il s’agit de faire en sorte que les signes distinctifs d’une marque (société, produit, etc.) soient explicités, sublimés et fixés dans la charte graphique que les différents intervenants devront respecter quel que soit le domaine d’intervention : plaquette imprimée, site web, drapeau planté sur la lune, etc.

Adapter la charte graphique au web, pas le contraire !

Pour s’en sortir, il faut parfois s’affranchir de la charte graphique de l’entreprise si celle-ci n’est pas adapté au support web. On rencontre souvent, par exemple, des chartes qui prévoient le logo en bas à gauche de la page compte tenu du parcours de l’oeil sur l’imprimé. Ce sens de lecture en Z, n’est pas forcément optimisé pour le web sauf à limiter la hauteur de la page à la hauteur de l’écran disponible sans défilement. Ce n’est pas impossible mais ce n’est pas souhaitable non plus si l’on veut profiter à fond du support.

Qui ne m’audit, consent…

L’idée serait donc d’adapter la charte graphique de l’entreprise au support web dans un premier temps, puis de faire un audit pour connaitre les limites de cette charte graphique quand vient le temps de l’intégration pour connaitre le temps qu’il faut réserver à ceux qui interviennent le plus souvent en fin de chaine et qui paient les pots cassés, soit sur le temps de travail (travailler plus pour gagner plus ?) soit au détriment de la qualité du produit fini.

Après cet audit, il sera possible de revoir la charte graphique pour l’adapter aux contraintes du web soit en éliminant les coins arrondis et/ou les ombres portées par exemple, soit en mettant en place des stratégies techniques pour que ces coins arrondis et ses ombres portées puissent voir le jour dans de bonnes conditions. Reste aussi la possibilité de déterminer une politique de dégradation gracieuse et/ou d’amélioration progressive dès le départ. L’objectif est que l’équipe chargée de l’intégration ait connaissance de ces contraintes le plus tôt possible pour travailler avec la charte graphique et non pas contre.

Pour (éviter de) conclure

Bon évidemment cette démarche est réserver à celles et ceux qui veulent vraiment s’investir dans le web, pour les autres, il sera nécessaire d’expliquer à leurs prestataires qu’ils sont trop exigeants et qu’il faut apprendre à gérer les problèmes au lieu d’essayer de les éviter en amont !

PS : Les Quelques notes regroupent des débuts de billets restés longtemps sous forme de brouillons faute de matière suffisante que je partage en l’état :  l’humour peut côtoyer la mauvaise foi et l’exactitude peut se mélanger à l’approximation… Un joyeux b***** en fait, même si tout n’est pas à jeter !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



6 commentaires pour “Quelques notes — Un seul design pour les rassembler tous ?”

  1. GregLone dit :

    Malgré ma jeune expérience dans le domaine, je suis assez d’accord avec toi. Cependant, concernant les différences entre navigateurs, je pense qu’elles restent assez minimes. Du moins pas de quoi inquiéter l’utilisateur lambda qui ne remarquera même pas ces différences (coins arrondis, ombres, police, etc). Donc je suis plutôt pour les dégradations armonieuses. Sinon, si vraiment je devais classer les sites « de confiance », je simplifierais la chose en « besoin de ma carte bleue / pas besoin de ma carte bleue » (peut-être à tord?).

    Concernant l’autre point abordé, je suis de ceux qui pensent que ceux qui interviennent dans une chaine de développement doivent connaitre un minimum le travail des autres intervenants, et principalement ceux qui sont en début de chaine. Je veux dire par là, qu’avant de vendre une usine à gaz, il faut plus ou moins savoir si c’est possible à réaliser (je ne dis pas qu’un designer doit être également développeur mais devrait avoir au moins quelques notions d’intégration, et inversement, si le designer a mis un espace là c’est qu’il y a peut-être une bonne raison). Et je rajouterais même que, malheureusement pour nous, le « maillon faible » se situe en tout début de chaine: le client, qui la plupart du temps n’a pas du tout la philosophie web, et ne comprendra pas pourquoi il y a des différences, pourquoi le logo de son entreprise ne devrait pas être en bas, etc. Mais bon, on est aussi là pour expliquer les choses et faire des compromis ;)

  2. Emmanuel C. dit :

    la question introduisant ton billet me fait immédiatement penser à ceci : http://dowebsitesneedtolookexactlythesameineverybrowser.com/ :-)

  3. MrThieu dit :

    Les sites dont la confiance de l’utilisateur est vital ne doivent pas développer des interfaces complexes dans le but d’assurer une homogénéité absolue. Non ?

  4. Bruno Bichet dit :

    @GregLone — Dans la plupart des cas, les différences peuvent rester minimes, mais si l’on décide d’utiliser CSS3 pour les coins arrondis et les ombres portées quand c’est possible, il faut décider comment traiter les autres navigateurs. Dans certains cas, il est possible de palier les manques avec des scripts au prix de toutes petites différences. Mais il arrive aussi que les scripts ne donnent aucun résultat et en fonction de la maquette, les différences peuvent être assez importante.

    @Emmanuel C. — Bien vu ;)

    @MrThieu — Je ne sais pas. Faudrait voir si les sites où la confiance est importante sont moins complexes que les autres.

  5. […] On parle de plus en plus de design dans le navigateur (cf. mon tutoriel paru dans le magazine Web Design), ce qui est une bonne chose. Mais cette tendance ne doit pas être l’arbre qui cache la forêt. En effet, il est très, mais alors très rare que les fantaisies graphiques des .psd que j’ai eu l’occasion de découper jusqu’à présent aient pu se satisfaire des propriétés CSS3. Cela voudrait dire que le graphiste ne s’est pas cassé la tête pour concevoir ses bords arrondis, ses dégradés, ses ombres portées ou ses dégradés dont le rendu reste perfectible, sans compter les différences d’affichage selon les navigateurs. […]

  6. Paraselection dit :

    La réflexion est intéressante. Âpres inutile de se compliquer la vie, pour des modifications et changements minimes, surtout si nous sommes les seuls à les remarquer au final.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site