Les ateliers se tiennent au Goodenough College. Le lieu est superbe et « so british »... une quasi collection de clichés sur ce qu'est une école d'enseignement supérieur anglaise (quelques photo sur Flickr). Un écrin parfait pour un atelier de haut niveau.

En guise d'introduction, Andy commence par nous présenter le processus de standardisation et le jeu permanent qu'il existe entre le W3C et les fabricants de navigateurs. Il en profite pour démystifier le sujet en insistant sur un point clé : la normalisation est faite pour les constructeurs par les constructeurs. Le point de vue des designer est très peu représenté (il n'y a que 2 experts invités dans le groupe de travail CSS) et chaque constructeur suie ses propres contraintes liées à son business model. Pour conclure ce premier round d'échauffement, on a eu droit a un excellent mini débat sur le thème « Un site doit-il être exactement semblable d'un navigateur à l'autre ? »... Je parle d'échauffement car la réponse est évidente et les objections toujours les mêmes. Andy en profite ici pour mettre un coup de griffe aux graphistes qui persistent à présenter des maquettes de sites sous forme d'images figées et encourage tout le monde à présenter des maquettes HTML, même si ce ne sont que de simple « point d'étape » tout en démontrant les bénéfices à travailler dans une logique de dégradation harmonieuse. Il estime que les maquettes fixes sont un problème car elles ne permettent pas d'anticiper certaines contraintes propre au média (par exemple, que ce passe-t-il quand un titre prévus sur une ligne est trop long et passe sur deux ligne ?) et le client étant incapable de faire cette gymnastique mental, il ne comprendra pas pourquoi le design peut évoluer d'un navigateur à l'autre.

Suite à cela, on entre dans le vif du sujet avec une présentation en règles des nouveautés qu'apporte CSS3 en termes de Webdesign. Les principaux points abordés sont :

  • La gestion de la couleur avec en particulier la syntaxe rgba ;
  • La gestion des arrières plans avec en particulier les images d'arrière plan multiples (et plus généralement l'utilisation de valeurs multiples sur un certains nombre de propriétés) et la possibilité de gérer finement le positionnement et la taille de ces images ;
  • Les bordures avec une revue de détail des bords arrondis ;
  • Les ombres sur le texte et sur les boites de contenu (qui permettent de faire bien plus que de simples ombres portées);
  • La gestion de la mise en page avec un focus sur le colonage ;
  • Les transformations 2D et 3D ;
  • Les transitions.

Toutes ces nouveautés ne sont bien sur pas disponibles avec IE (on en reparlera lorsque IE9 sera là) mais Andy à une position très claire sur la question : Il design pour le navigateur le plus avancé en termes de support de CSS3 (Safari ?) et ensuite il s'assure que la dégradation se fait correctement, quitte à prévoir un design alternatif pour certains navigateurs quand la dégradation est trop importante. Ce qui est important, ce n'est pas le design, mais l'expérience utilisateur. C'est cette expérience qui doit être préservée, pas le design. Et pour Andy, qui est un excellent designer, le design n'est clairement pas l'alpha et l'oméga de l'expérience utilisateur. En particulier, il insiste sur le fait qu'un site peut être vue sur différents navigateurs dans des situations très différentes (un macbook, un iPad et un iPhone n'offrent pas les même conditions d'utilisation... oui, c'est un fan d'Apple :) ).

Après nous avoir bien alléché avec toute ses possibilités, se pose la question de les mettre en œuvre. Comme on a pris un peu de retard sur le programme, il se contentera d'évoquer quelques scripts permettant de contourner quelques limitation clé de certains navigateurs (par exemple ie-css3.js de Keith Clark) et surtout « Modernizr ». A titre personnel, je suis assez réticent à utiliser ce petit bout de Javascript mais Andy le vend très bien. Ceci-dit, il l'intègre dans une logique de travail incluant un savoir-faire de haut niveau qui en fait un vrai plus à utiliser et de fait, je reste persuadé que c'est un outil qu'il ne faut pas mettre dans les mains d'un débutant. En effet, Andy maitrise à la perfection les questions de dégradation harmonieuse et d'enrichissement progressif, en conséquence il sait parfaitement quand utiliser un facilitateur comme « Modernizr » et quand ne pas l'utiliser, ce qui n'est pas nécessairement le cas du webdesigner moyen (en admettant que la notion de webdesigner moyen ait un sens)

En guise de dessert, nous terminons l'après-midi avec la gestion des polices typographiques \o/. La quasi totalité des navigateurs actuels supporte la gestion des polices typographiques. Néanmoins, chacun utilise des formats différents (eot, ttf, woff...). On commence donc par débroussailler ce sujet en ayant droit à une petite visite des utilitaires du site fontsquirrel.com. Néanmoins, actuellement la question des droits d'utilisation des polices sur le web est un problème délicat. Andy nous présente alors typekit.com en détail (Disclaimer : typekit sponsorise Andy Clark pour son intervention, mais ça n'enlève rien à la qualité de l'outil). Ce site propose un système qui permet de résoudre efficacement la question des droits d'utilisation et un ensemble d'outil permettant de se customiser ses polices aux petits oignons. Enfin, on fait un petit coucou aux Google Font API qui présente une alternative gratuite à typekit mais dont le catalogue est encore assez pauvre. Objectivement, il n'y a aujourd'hui aucun frein technique à l'utilisation des polices typographiques embarquées dans les page HTML (sauf pour des questions de performances, mais c'est un autre débat).

Voila pour cette première journée. Ce fut un plaisir de rencontrer Andy. C'est un webdesigner extrêmement talentueux à la fois enthousiaste et réaliste. Son prochain livre sort en Septembre, autant dire que je l'attend impatiemment :D