nodeo.net - Blog - Pour un web libre, moderne et ouvert ! - Webdesign

Qui sont les créateurs de sites web ? Résultats de l'étude du fameux "A list Apart"...

davidm — Wed, 31 Oct 2007 17:52:00 +0100

Le fameux webzine A list Apart a récemment publié la première étude sur les créateurs de site web : plus de 33 000 d'entre eux ont répondu à quelques 37 questions (etat civil, formation, environnement de travail, revenus...).

De quoi se situer, ce qui est toujours intéressant !

Parmi les chiffres qui étaient prévisibles :

43,6% des concepteurs web ont entre 25 et 32 ans
82,8% d'entre eux sont des hommes
51,6% se sont arrêtés au Bac
46,6% ont une formation dans un domaine différent
78,6% sont enthousiastes ou très enthousiastes par rapport à leur travail
la vaste majorité (42,1%) travaillent entre 40 et 50 heures hebdomadaires
environ 1/3 des concepteurs web a moins de 3 ans d'ancienneté dans ce métier

Un peu surprenant :

72,5% ont un blog (ce qui veut dire que 27,5% n'en ont pas !)
les freelance ne représentent que 4,4%, la vaste majorité des concepteurs web est employé dans des entreprises de 10 à 300 salariés (41,8%)

Je vous invite à lire l'étude complète (82 pages) qui comporte des analyses par catégorie.

Problématique de gestion des couleurs pour la conception de sites web : les choses se compliquent !

davidm — Sun, 25 Mar 2007 12:46:00 +0200

On ne répètera jamais assez que la réalisation de site web est un domaine bien plus complexe qu'il n'y paraît du point de vue du non-spécialiste. Parmi les éléments qui entrent en ligne de compte dans la réalisation, la gestion des couleurs est un élément qui est bien moins simple qu'il n'y paraît... je peux le confirmer après plusieurs heures de recherche et d'expérimentation ce week-end (mon forum de prédilection n'ayant donné aucune réponse, et le seul autre post sur le même thème non plus, il a fallu creuser...), qui a été riche en enseignement concernant la gestion de la colorimétrie pour le web !

Je n'avais pas encore rencontré ce problème car jusqu'ici :

j'ai toujours assuré la création graphique en plus de celle de l'intégration XHTML/CSS
j'utilise un logiciel de graphisme dédié au web (MacroMedia FireWorks) et non polyvalent (comme PhotoShop qui fait à la fois "print" et web)
je n'ai pas travaillé sur différentes plate-formes sur un même projet (PC -> Mac, et Mac -> PC)

Ce problème se résume en fait à celui de la gestion avancée des couleurs dans un workflow de production web, et en particulier lorsque les fichiers avec lesquels vous travaillez sont crées avec des applications de graphisme sur d'autres systèmes d'exploitation et/ou qui ne sont pas dédiées au web : Photoshop en est l'exemple même, puisqu'il s'adresse tout aussi bien aux créations pour le "print" que pour le web.

Cela suppose - nous verrons ça en détail - de prendre un certain nombre de précautions pour s'assurer que le rendu d'un site web est bien homogène d'une plateforme à une autre. Mais avant d'entrer dans le comment, retournons un peu au "pourquoi" et faisons un petit historique de la problématique de la gestion des couleurs pour la conception web, et essayons d'analyser comment l'évolution des plateformes a fait évolué la problématique pour nous, concepteur - réalisateur de sites web.

Sans rentrer trop dans la technique, il existe deux systèmes de représentation des couleurs. Le RVB avec 3 composantes : Rouge, Vert, Bleu et le CMJN avec 4 composantes : Cyan, Magenta, Jaune, Noir. Le CMJN est essentiellement utilisé en imprimerie alors que le RVB est utilisé pour les écrans, les scanners et les appareils photos.

En RVB (RGB en anglais), les couleurs sont codées sur 3 octets, fréquemment notées en héxadécimal sous la forme: #RRGGBB. RR représente la valeur héxadécimale de l'octet codant la primaire rouge, GG représente valeur héxadécimale de l'octet codant la primaire verte et BB la valeur héxadécimale de l'octet codant la primaire bleue. En principe, ce codage permet de définir 16 millions de couleurs : plus que l'oeil humain ne peut discerner.

En réalité, les choses sont (comme toujours), plus compliquées et le principe retenu a été de se limiter aux couleurs qui peuvent être représentées sur n'importe quel écran et n'importe quel système. Rappelons qu'il n'y a pas si longtemps il existait encore une disparité importante entre les plateformes (Mac/PC) et les cartes graphiques (16 couleurs, puis 256, puis 16 millions et maintenant plus de 4 milliards de couleurs).

La première approche de la problématique de gestion des couleurs pour le web : la palette "web safe"

Au milieu des années 90, lorsque les premiers navigateurs web sont apparus, il a donc fallu trouver un compromis entre les palettes Mac (plus riches) et PC (plus restreintes). On a ainsi abouti à la fameuse palette "web safe" composée des couleurs communes aux deux systèmes, soit 216. Aujourd'hui, les systèmes ont évolués et les limitations liées au cartes graphiques a virtuellement disparu (seul une minorité infime ne dispose pas des 16 millions de couleurs), ce qui ne veut pas dire que la problématique de gestion des couleurs ai disparu... Pour commencer, en dehors des professionnels, bien peu de personnes ont un écran correctement étalonné. Comment, alors, s'assurer qu'au moins on dispose d'un référentiel de couleur correct pour que l'affichage soit aussi homogène que possible suivant les plateformes / écrans de l'utilisateur ?

De la palette "web safe" à la colorimétrie : les choses se compliquent !

... c'est le moins qu'on puisse dire. Si l'on est théoriquement sorti de la restriction creative de la palette web safe grâce à la démocratisation des cartes graphiques capables d'afficher 16 millions de couleurs, on se heurte - dans la pratique - à une nouvelle problématique : les combinaisons de systèmes d'exploitation (OS X, Windows) - écran (LCD, CRT) - navigateur (IE, FireFox, Opera, Safari...) ne permettent pas d'aboutir à un rendu homogène des éléments graphiques. Obtenir un rendu homogène quelque soit le périphérique d'édition ou de visualisation, c'est précisémment le but de ce qu'on appelle les profils ICC, qui sont "des fichiers décrivant la manière dont un périphérique rend compte des couleurs".

Garry Ballard explique bien sur son site dans deux articles (en anglais) titrés www Target ColorSpace: sRGB 2.2 Gamma et Color Shifts on the World Wide Web quels sont les aspects principaux de la problématique de la colorimétrie pour le web.

Précautions à prendre pour s'assurer que le rendu d'un site web est bien homogène d'un point de vue colorimétrique

Après avoir lu ces deux articles de Garry Ballard, mais aussi l'excellent billet de Cédric Girard concernant les profils ICC j'en identifie 3 :

hors d'une palette web safe, la prise en compte de l'espace colorimétrique est indispensable pour un rendu homogène des couleurs : Si les professionnels du "print", les astronomes ou les photographes sont familiers des problèmes de colorimétrie, c'est moins vrai des concepteurs web.
les PC et Mac ayant des moniteurs étalonnés sur des gammas différents (1.8 pour Mac, 2.2 pour PC, TV...) le rendu colorimétrique d'une image conçue sur un PC sera "délavée" lorsque visualisée sur un Mac et inversemment une image conçue sur Mac sera sombre sur un PC. Cela signifie qu'un concepteur sur Mac (c'est mon cas) doit passer en gamma 2.2 pour s'aligner sur le standard de facto pour le web.
seuls quelques navigateurs sont capables de prendre en compte un profil ICC : cela veut dire que si ces navigateurs afficheront correctement les images quelques soient l'espace colorimétrique dans lequel elles ont été conçues, la vaste majorité se repliera sur le profil par défaut (sRGB IEC61966-2.1, ou plus simplement sRGB) ce qui si le concepteur n'a pas prévu ce cas de figure conduira à des écarts de rendu significatifs (voir la page de test publiée par Garry Ballard)

Conclusion : en attendant que les navigateurs progressent, le couple sRGB / Gamma 2.2 est incontournable

Le domaine du "print" (presse, impression offset) maîtrise depuis longtemps la gestion de la colorimétrie. Force est de constater que les concepteurs de site web le sont beaucoup moins peut-être parcequ'ils se sont formés à une époque ou la palette "web safe" leur épargnait l'apprentissage des aspects de colorimétrie.

Peut-être aussi parceque très peu de navigateurs web interprètent ces données pourtant essentielles étant donné la diversité des plateformes permettant de consulter un site web (encore une fois, nous devons composer avec les limitations de l'environnement de développement actuel :P).

Aujourd'hui seuls Safari, Omniweb (même moteur WebCore) et Internet Explorer pour Mac supportent les profils ICC. Le reste des navigateur interprète toute image comme appartenant à l'espace sRGB (donc une image traitée sur Mac avec un profil Adobe 1998 est complètement délavée dans un navigateur sur PC). Il va donc falloir en tenir compte en se basant sur un profil sRGB et en vérifiant que nos moniteurs sont correctement étalonnés et sur une gamma de 2.2.

Créer un schéma de couleur : un outil qui facilite la vie du designer

davidm — Sat, 25 Feb 2006 18:27:00 +0100

Le choix des couleurs dans le cadre de la conception d’un site web est souvent un élément déterminant mais dont les choix sont peu formalisés. Il est généralement admis qu’il s’agit d’un processus artistique et en tant que tel, il est rarement explicitement discuté avec le client. Le designer s’appuie plus ou moins sur la symbolique des couleurs ainsi que sur sa pratique du design, ainsi que sur les meilleures pratiques (comme ici) pour proposer des schémas de couleurs. Le choix des couleurs fait partie de la “navette” qui a lieu entre le designer et le client lors de la conception de la maquette.

C’est une approche qui fonctionne et je suis de ceux qui pensent que rien ne remplace l’oeil du designer. Mais force est de constater qu’on peut amélioréer l’efficacité du travail accompli (notamment d’un point de vue des délais et de l’interactivité) en utilisant des outils comme ColorSchemer.

Voici quelques raisons d’utiliser ce type de logiciel…

Si on dit souvent que les goûts et les couleurs sont une question de goût… ce n’est qu’en partie vrai : leur choix et leur association est déterminante dans la conception de site web. Il existe quelques règles de bases (éviter les couleurs criardes, les contrastes trop forts...) et des complémentarité de couleurs… Si on cherche plus loin, on tentera d’utiliser une couleur et une intensité lumineuse adaptée à chaque élément de mise en page, chaque bordure et chaque élément de texte… Mais une fois ces règles admises, il existe une variété de schéma de couleur possibles pour un site web donné... ColorSchemer est un outil qui peut servir à un webdesigner pour présenter des alternatives de schéma de couleur rapidement.

Ce type de logiciel permet :

de montrer au client, à partir d’une couleur donnée, en un clic, les couleurs complémentaires qu’on peut lui associer
la possiblité de “prendre” des couleurs “naturelles” au sein d’une photographie (une technique que j’utilise souvent, qui donne des teintes plus naturelles) : ColorSchemer fait même mieux en proposant une thématique couleur directement en filtrant une photo :)
de donner un premier exemple de page web générée automatiquement à partir d’une thématique couleur
de créer des “gradients” harmonieux (dégradés de couleurs)
de déterminer des combinaison possible entre couleur de fond et couleur de texte
d’imprimer des schémas de couleurs compris dans un thème : cela permet de générer une fiche de synthèse des couleurs utilisées pour la charte du site
d’importer des schémas de couleur : d’un site web, d’une image ou encore d’une palette de couleur photoshop (fichier .aco)
d’exporter