Chez Jérémie - Mot-clé - @media

@media London 2010 : Day 4

Jeremie — Fri, 11 Jun 2010 21:28:00 +0200

Quatrième et dernier jour à Londres. Programme toujours aussi intense pour cette dernière journée avec encore six conférences de prévus. Heureusement, cette fois-ci les choix ont été un peu moins dure à faire.

La conférence d'ouverture est assuré par Andy Clark (« Hardboiled web design »). Andy est un vraie show-man et il joue sur un parallèle entre le web design et le roman noir pour expliquer que les web designers sont comme des détectives inflexibles : il doivent faire face à des conventions et des idées préconçus pour atteindre leur but : ex. « CSS3 n'est pas encore disponible dans IE » ce à quoi il répond « Oui, et alors ? ». Assez ironiquement, ce n'est pas un problème nouveau dans le web design. En effet, les théories de l'enrichissement progressif et de la dégradation harmonieuse date du début des années 2000 avec l'arrivée de CSS 2... étonnement les discourt étaient les mêmes à l'époque. Pour moi qui travail dans le Web depuis plus de 10 ans, ce n'est pas nouveau, mais c'est quelques choses qui doit être répéter encore et encore, surtout pour tous les jeune qui ne connaissent le Web que depuis quelques années (moins de 5 ans environ). Andy est un fervent partisan (pour ne pas dire un fanatique) de la logique de dégradation harmonieuse. C'est d'autant plus important que chaque navigateur à des capacité différentes et qu'il est impossible de fournir un design ou une expérience utilisateur exactement identique avec tous les navigateurs... il faut savoir lâcher prise pour ce concentrer sur l'important : l'utilisateur et l'accès qu'on lui donne à un service.

Au delà des différences entre navigateurs, le mode de construction de CSS3 est très particulier. En effet, CSS3 est composé de modules et rien ne garantie que les constructeurs de navigateurs acceptent de les implémenter tous, même si tous étaient à l'état de recommandation validé (ce qui en soit n'a rien de sur, après tout, CSS 2.1 n'est pas encore une recommandation du W3C, mais seulement un recommandation « proposée »). Globalement, cette présentation est une version concentré de l'atelier du premier jours.

Pour la deuxième conférence, il y avait le choix entre Matt Biddulph (« Mobile social location ») et Sandi Wassmer (« Inclusive design is for everyone »). Les deux sujets ne m'inspire pas plus que ça... bon, j'irai voir Sandi.

Avant de rentrer dans le vif du sujet, Sandi commence par faire le distinguo entre Design et Art. La différence principale résidant dans l'aspect « utile/utilisable » explicite du Design. Un bon design a des objectif claire et suit un certain nombres de principes dont elle détaillera quelques uns mais sans trop insister. Plus spécifiquement, les designs inclusifs sont des designs qui sont prévus pour tenir compte de tous les utilisateurs, quelque soit les capacités et handicaps de chacun... et ce n'est pas seulement une question d'accessibilité. Globalement, cette conférence insiste sur le fait qu'un bon Design est avant tout orienté utilisateur (c'est un peu le leitmotive de toutes les conférences : pensez à l'utilisateur avant tout, c'est tout bénéfice pour vous), que ce soit au niveau du look & feel ou au niveau de l'architecture de l'information... rien de vraiment neuf sous le soleil. C'est peut être parce que ce sont de notions que je connais déjà, mais ça me donne l'impression d'enfoncer des portes ouverte. J'en ressort vaguement dessus.

Troisième conférence, cette fois avec au choix : Hannah Donovan (« Telling Stories through design ») ou Patrick H. Lauke (« Brave New World of HTML5 ») en remplacement de Bruce Lawson. C'est mon coté geek qui l'emporte, en avant pour HTML 5.

Cette conférence est une revue de détail de ce qu'il est possible d'utiliser aujourd'hui en provenance de la future norme HTML5. Avant toute chose, Patrick commence par débroussailler tous le bruit qu'il y a autour du mot « HTML 5 » qui a tendance à devenir un « buzz word ». Il fait un petit passage historique avec l'initiative WHAT-WG, l'abandon de XHTML 2.0 et la réintroduction du projet WebForms au sein du W3C qui donnera le HTML 5.

A bien des égards HTML5 entre en compétition avec Flash et Silverlight, mais essentiellement à un niveau peu perceptible par les utilisateurs et n'a pas vocation à les remplacer mais plutôt à les compléter en donnant aux développeurs la possibilité de choisir la technologie qu'ils veulent selon le contexte d'utilisation. Fondamentalement HTML5 est une simple évolution de HTML4 qui standardise un grand nombre de comportement liée au fonctionnement interne des navigateurs. Cela fait de HTML un langage à la fois plus strict (le comportement de tous les navigateurs sera unifié) et plus permissif (la syntaxe reste très, très souple... trop dirons certains). HTML5 rajoute également un certains nombre de nouvelles balises et un certains nombre de nouvelles API pour Javascript. Une des fonctionnalités les plus attendu est sans doute tout ce qui touche à la gestion des formulaires et en particulier à la validation du contenue de formulaire sans avoir recourt à Javascript. Patrick parle aussi évidement de la gestion de la video et de l'audio (LA fonctionnalité qui fait le buzz autour de HTML5 !), de la balise canvas (une zone de dessin accessible directement via Javascript mais attention au problèmes d'accessibilités, il insistera sur ce dernier point). La encore, je n'ai rien appris de neuf, mais Patrick est un excellent orateur qui sait communiquer son enthousiasme (il n'est pas Tech Evangeliste chez Opera pour rien ).

Pendant la pause déjeuner, une discussion s'improvise entre Andy Clark est une cinquantaine (!?) de personnes sur la difficulté qu'il y a à expliquer aux clients que le rendu d'un site web peut être parfois très, très différent d'un navigateur à l'autre. Gros débat qui ne trouvera pas sa conclusion aujourd'hui, mais va très certainement se continuer en ligne dans les semaines qui arrivent (à suivre sur @malarkey)

L'après midi-débute avec la quatrième conférence. Tant pis pour Relly Annett-Baker (« All the small things »), mais je vais voir Remy Sharp (« Browser with wings: HTML 5 API ») histoire de compléter la conférence du matin.

Comme lors de la conférence de Patrick Lauke, Remy commence par démonter le hype autour de HTML 5, pour ensuite s'attacher au cœur du sujet : les nouvelles API introduites par HTML5 pour Javascript :

D'abords les médias avec la gestion de la video et de l'audio. Les API associés permettent de contrôler le fonctionnement de ces éléments ce qui permet de créer des contrôles personnalisés.
Canvas qui est une zone de dessin vierge qui n'a de sens qu'avec son API de dessin. Elle permet de dessiner n'importe quoi dans un contexte 2D (le dessin dans un contexte 3D est encore hyper expérimental, en particulier au travers de l'API WebGL, mais devrait voir le jour très prochainement, Chrome et Firefox y travail dure) et d'exporter le résultat.
Les API de stockage qui permettent de stocker des données localement sous forme de paire clé / valeur. Ce stockage peut être permanent ou limité dans le temps (pour la durée de la session utilisateur par exemple). Il est aussi possible d'aller plus loin avec les API SQL qui repose sur l'utilisation d'une base de données SQL dans le navigateur, en l'occurrence IndexDB.
L'API de géolocalisation permet elle d'accéder à la position géographique de l'utilisateur (s'il le souhaite).
Les Web Socket permet de gérer un flux de donnée binaire permanent, montant et descendant entre le navigateur et le serveur (cette API, en dehors de son support dans les navigateurs à aussi besoin de bénéficier de serveurs capables de gérer de tels flux) ce qui permet d'implémenter à peut près n'importe quel protocole de haut niveau (XMPP par exemple) en Javascript.
La gestion de la mise Offline permet de savoir quand un navigateur est déconnecté et de proposer des actions dont le résultat ne sera réellement exécuté qu'une fois le navigateur reconnecté (par exemple avec un webmail). Il est également possible de gérer assez finement le cache des éléments nécessaires à l'application grâce au manifeste de cache.
Enfin, L'API de fichiers permet d'accéder au système de fichier local du navigateur.

Bien que HTML5 soit encore en cours de normalisation (tous les navigateurs n'ont pas encore implémenté toutes ces API ou pas forcement exactement de la même façon) on peut déjà commencer à utiliser ce qui existe. Certes avec prudence, mais c'est possible, en particulier avec toutes les solution de substitution et de contournement qui existent.

L'avant dernière conférence (déjà !?) offre le choix entre Aral Balkan (« The art of emotional design ») et Steve Souders (« Even faster web sites »). Depuis le temps que j'entends parler de Steve, impossible de manquer ça. Aller hop !

Steve revient sur la question des performances coté client. Il ne s'étend pas trop sur les méthodes et l'outillage, il se contente de nous montrer rapidement les différences et points communs existant entre Yslow et PageSpeed. En effet, l'essentiel de sa présentation tourne autour de tests réalisés par Google (Steve travail pour Google) qui permettent de mettre en évidence les amélioration de performances mises en œuvre par les différents éditeurs de services en lignes. On voit bien à quel point les développeurs ont pris conscience de l'importance des performances au sein du navigateur (tout ce qui touche au chargement et à l'exécution du code par les navigateurs). Il nous parle d'ailleurs de l'émergence d'un nouveau métier : le WPO (Web Performance Optimisation) qui est au développement ce que le SEO est au marketing web.

La conférence de clôture sera assuré par Scott Berkun (« The myths of innovation, remixed and remastered »). Cette conférence assez théorique nous fait rentrer dans les mécanismes qui président à l'innovation et comment celle-ci est possible... on pourrait résumé sa pensé par l'expression « 100 fois sur le métier tu remettras ton ouvrage ».

Ce fut dense et de très haut niveau. Globalement les orateurs sont excellents et même si je n'ai pas appris grand chose sur HTML 5, les rencontres faites sur place ont été particulièrement enrichissante. L'organisation était au top. Si vous hésitez, je vous invite vivement à assister à la prochaine édition et entre temps, Paris-Web vous tend les bras au mois d'octobre

@media London 2010 : Day 3

Jeremie — Fri, 11 Jun 2010 01:03:00 +0200

Troisième jour à Londres. Aujourd'hui, fini les ateliers, c'est le débuts des conférences. Le programmes est dense et le choix de chaque conférence a été difficile. L'évènement à lieu au Hall Queen Elizabeth à proximité de la gare de Waterloo. Le lieu est bien choisi, et malgré la présence d'au moins 300 participants, on ne se sent ni à l'étroit ni perdu au milieu du vide. La qualité de l'accueil est impeccable, mais ce qui compte vraiment ce sont les conférences

Démarrage à l'américaine à 9h avec une courte introduction par john Allsopp qui plaisante un peu sur les australiens pour expliquer que @media est maintenant organisé par Web Direction qui est une entreprise australienne.

On enchaine directement par la première conférence : Brendan Eich (directeur technique de Mozilla Corporation) sur l'évolution de Javascript, langage dont il est à l'origine. Une session ultra technique (au réveil, ça fait mal), mais passionnante sur les prochaines évolutions de Javascript. Javascript est un langage à la fois très simple et très complexe avec beaucoup de subtilité. De gros travaux sont actuellement fait pour le rendre plus structuré et plus fiable, on à droit à une revue de détail, code à l'appuie.

Pour la deuxième conférence on à le choix entre il faut choisir entre Christian Crumlish (« Designing for play ») et Doug Schepers (« SVG today and tomorrow »). Dans la mesure ou j'ai déjà passé une journée avec Christian, je choisie d'aller voir Doug (et puis j'adore SVG, je suis en train de vous préparer un petit article sur le sujet).

La conférence démarre sur les chapeaux de roues, en effet, tous ses slides sont en SVG et on commence directement par une demo tiré du site SVG Wow! Plus prosaïquement, Doug nous présente tous ce qu'il est possible de faire avec SVG (découpes, filtres, animations, etc... je suis en train de préparer un article sur la question). C'est un grand tour d'horizon du sujet, exemple à l'appuis. Franchement je suis certain qu'avec la sortie de IE9, cette technologie va décoller de manière intensive. Pour mémoire, SVG est un format d'image vectoriel. D'ailleurs, Doug fait également le parallèle avec l'élément Canevas en montrant les différences entre ces deux technologie et comment elles se complètent. Il conclus en évoquant rapidement les outils qui permettent de créer des document SVG... et c'est sans doute là que se jouera l'avenir de ce format car pour l'instant, ce n'est pas très reluisant.

La troisième conférence met en compétition Rachel Andrew (« Core CSS3 ») et John "jQuery" Resig (« Testing mobile web apps »). Comme je maitrise déjà bien le sujet CSS3, pas d'hésitation, direction la conférence de John.

Le développement d'application web utilisant Javacript est de plus en plus communs, mais l'univers des mobiles est extrêmement hétérogène. John nous présente la démarche qu'il a suivit pour tester la prochaine version de jQuery sur les plateforme mobile. En effet, en temps que principal développeur de jQuery, il fait en sorte de s'assurer que ce Framework peut fonctionner sur les plateforme mobile les plus importantes. Une des principales difficultés et d'arriver à trouver des statistiques pertinentes pour savoir quoi faire et à qu'elle plateforme s'intéresser (en l'occurance : Symbian, iPhone OS, RIM et Androïd). Basiquement la stratégie de test à avoir est la même que pour les environnements de bureau (via une logique de qualification tel que celle utilisé par Yahoo!), mais la différence tiens au nombre de plateformes et de navigateurs bien plus important. Pour pouvoir faire des tests, les simulateurs (parfois difficiles à se procurer) sont un bon début pour réaliser un certain nombre de test automatique, mais il est toujours nécessaire de faire un test sur un support physique pour valider les partis-pris mis en œuvre. Au final on reste un peu sur sa faim car on ne découvre pas grand choses sur les résultats concret de ce travail. Par contre on ressort avec une vision assez claire de l'état de l'art des environnements mobiles, ce qui n'est pas rien.

Quatrième conférence de la journée, et cette fois ci, il faut choisir entre Tom Hughes-Croucher (« Introduction to server-side Javascript ») et Simon Willison (« Building crowdsourcing applications »). L'utilisation de Javascript coté serveur, même si c'est un sujet passionnant, n'est pas exactement ma tasse de thé. Je préfère donc aller voir Simon pour comprendre ce qu'il entend exactement quand il parle de « crowdsourcing ».

Simon commence donc par essayer de définir le termes « crowsourcing ». C'est essentiellement un buzz word comme a put l'être l'expression « Web 2.0 ». Il s'agit d'ailleurs de notions assez proches. L'expression « Intelligence collective » ne traine pas loin, mais n'est finalement pas utilisé. En fait, plutot que de s'essayer à une définition hasardeuse, il préfère utiliser des exemples pour définir le terme : wikipedia, openStreetMap, Google Image Labeler, Mapumental, XKCD.

Il rentre ensuite dans le détaille de ce qu'il à fait pour le site Internet du Guardian. Ils ont proposés aux visiteurs d'analyser, trier et voter pour les documents liés aux dépenses des parlementaires Anglais pour savoir sur quels sujets il fallait aller investiguer. Cette expérience a été faite deux fois ce qui à permis de l'améliorer à chaque fois en se reposant à la fois sur les mesures d'utilisation et sur les retour d'utilisateurs. Une conclusion intéressante fut de dire que finalement, peut importe qu'une expérience de crowdsourcing fonctionne ou non, il y a toujours quelque chose à en tirer.

On arrive à l'avant dernière conférence, et il faut encore choisir. Soit Mark Boulton (« Designing grid systems ») soit Jonathan Stark (« Building mobile apps »). Je préfère finalement aller voir Mark qui propose une conférence un peu plus généraliste sur un sujet assez chaud dans le milieu du webdesign : l'utilisation des grilles de mise en page.

Ça démarre assez lentement sur des considérations très théoriques, on pare de très loin, avec un passage historique par le gestion des container de fret maritime jusqu'au théorie canon de l'impression papier pour enfin commencer à arriver à parler de web (enfin bon, plus 20 minute pour en arriver là... ce fut très, très long pour pas grand chose). Enfin dans le vif du sujet, on en revient à la question essentielle : le web est un média à part entière avec ses propre règles graphiques. Il faut arriver à se détacher des maquettes Photoshop fixe pour arriver capturer l'essence du Web : la flexibilité. 3 notions sont en jeux : la notion de grille de mise en page flexible (pas de largeur ni de hauteur prédéterminé), la notion de taille d'image flexible et la notion d'espace visible (« viewport » en anglais). Le problème des supports physiques, c'est qu'ils mélangent la gestion du contenu et sa mise en forme. Le web sépare les deux, ce qui demande un gymnastique intellectuelle complètement nouvelle. Mark finira par détaillé explicitement les type de grilles possibles, mais comme cela arrive en fin de conférence, c'est survolé assez rapidement et on est finalement un peu frustré malgré la qualité de la prestation et de la démarche intellectuel, c'est un peu dommage.

La dernière conférence est une table ronde avec Jeremy Keith, Christian Crumlish, Hannah Donovan, John Allsopp et Simon Willison. Cette dernière partie est un peu décevante dans le sens où l'interaction avec la salle fut réduite à la portion congrue, ce qui donnait la sensation d'assister à une discussion d'expert sans vraiment y participer... sans doute le gros fail de la journée.

En conclusion, ce fut un journée dense avec des orateurs de haut niveau. Et même si la fin de journée fut un peut moins enthousiasmante (la fatigue aidant peut-être aussi), cela n'enlève rien au niveau global de cet événement qui permet de côtoyer certain des meilleurs web designer de la planète. Vivement demain pour la suite.

@media London 2010 : Day 2

Jeremie — Wed, 09 Jun 2010 19:41:00 +0200

Deuxième jours à Londres. Cette fois-ci, j'assiste à l'atelier « Designing Social Interface » conduit par Christian Crumlish (et toujours des photos sur Flickr)

Pour s'échauffer, Christian commence par nous faire un peu de théorie sociale et en particulier de ce que l'on met derrière le mot « Social »... il y a beaucoup plus de choses qu'on ne l'imagine mais basiquement cela revient à avoir des gens qui communiquent entre eux (ne rigolez pas, j'ai dit "basiquement"). Ensuite, Christian rentre dans la différence qu'il peut y avoir entre un utilisateur solitaire et un utilisateur qui interagie avec d'autres utilisateurs. Il définie 3 espaces sociaux : L'espace de l'utilisateur (centré sur lui même), l'espace de ses activités (centrés sur un objet externe), l'espace de ses interactions sociales (centré sur un ou plusieurs autres utilisateurs). La suite de la conférence ne fera que détailler concrètement ces 3 espaces.

On entre à présent dans des choses un peu plus concrètes. Les grandes lignes du design sociale suivent un certain nombre de points connus :

Travailler au service de l'utilisateur, par exemple en fournissant systématiquement des messages humainement compréhensible (en particulier les erreurs)... comme si le site avait une conversation humaine avec l'utilisateur (sans sombrer non plus dans une fausse idée de « robot parlant ») et de manière général en écoutant ses utilisateurs (en balisant les chemins de traverse... « paving the cow path » en anglais, j'adore cette expression).
Le deuxième point reprend un axiome connu des développeurs informatiques : « ne pas réinventer la roue ». Dans la logique social, c'est la même choses. Il est inutile de réinventer Facebook ou Twitter, utilisez les. A tout le moins utilisez des interfaces techniques interopérables avec ce type de services.
s'inspirer de la logique des jeux en en reprenant les grands points : la logique de notation, la logique de feedback, la possibilité d'interaction et de personnalisation
Le respect de la dimension éthique du service

Pour terminer ce premier échange, Christian nous propose un petit exercice pratique en nous demandant de choisir un sujet (un objet social) et de construire une proposition de site autour des principes vus pendant la matinée. Bon c'est un peu brouillon mais rigolo

Pour terminer cette première partie Christian approfondie la question de l'espace utilisateur. Cet espace comprend tous ce qui touche à son activité et son interaction avec le site : Inscription, Identification, Page d'accueil personnalisé, personnalisation du site (carte d'identité, avatar, gestion du profil utilisateur complet), gestion de la visibilité des données personnelles, accès au offres personnalisées, etc. Christian détail aussi la logique de réutilisation et la façon dont les usages d'un utilisateur évolues selon son degrés d'adhésion au service.

On enchaine sur nouvel exercice qui fait le lien avec le précédent. Cette fois, il s'agit de proposer et discuter des meilleurs actions à mener pour offrir un espace utilisateur adapté à l'objet social que nous avions sélectionné précédemment.

La deuxième partie de matinée est consacré à la présence en ligne : microblogging, liste d'amis, etc. Il enchaine sur la question de la réputation qui est un corolaire de la présence en ligne. La réputation se construit au travers des actions que l'on mène au sein d'une communauté. Il existe certains leviers de motivation pour agir et construire sa réputation. Leur mise en scène est souvent très inspiré des techniques ludiques (les jeux quoi :-p) : la collecte de bonus, le gains de points, les classements...

A nouveau on enchaine avec un exercice qui nous permet d'approfondir les différentes techniques sur des cas (quasi) réels.

On termine la matinée et on redémarre l'après-midi sur la question de l'espace des activités sociales. En effet, un site à vocation sociale doit proposer des outils qui permettent d'atteindre ses objectifs : Système d'expression (commentaire, feedback, blog, wiki), de notation, de discussion (chat, forum, murs de discussion), de socialisation (statuts, humeur, flux d'action), de partage (Sauvegarde, Favoris, Tags, recommandations)... un utilisateur doit pouvoir être actif. C'est l'occasion de faire un petit détour par le notion d'intelligence collective, mais pour une fois de manière assez réaliste. En effet, Christian détail bien les différents profil d'utilisateurs, certains très passif (les plus nombreux) et d'autres très actifs (les plus impliqués dans une communauté) avec une possibilité de progression d'un profil à l'autre mais sans garantie.

Et comme le matin, on passe à un exercice pratique de mise en situation.

Suite à cela, on passe à la question de l'espace des interactions sociales. Le cœur d'un système sociale passe par la gestion de la communauté qui le compose. Christian détaille les méthodes permettant à un utilisateur de gérer sa communauté de connaissance (non, pas forcément des amis ) :

La capacité de trouver des gens.
La capacité d'ajouter des gens à sa communauté.
La capacité de catégoriser ses relations avec les membres de sa communauté et de définir ce que l'on partage avec chacun.
La capacité de filtrer les contenus de sa communauté.
La capacité de signaler les abus.
La capacité de créer des liens en dehors du média (organiser des rencontres, se geolocaliser, se retrouver via mobile) et réconcilier le tout (importer/exporter ces informations pour un usage déconnecté).

Au final, la communauté interagie et trouve son propre mode de fonctionnement (définition de normes communes). Les outils mis à sa disposition doivent être là pour faciliter et encourager son développement et celle de l'utilisateur.

Et oui, vous l'aurez deviné, on passe à une mise en pratique de ce point.

Pour finir la journée Christian s'attaque au « Anti-Patterns » sociale, ce qu'on pourrait résumé par : ce qu'il ne faut pas faire.

Imiter quelque chose qu'on n'a pas compris ce qui le rend inutile.
Casser le principe de fonctionnement des e-mail (et plus généralement des différents services d'Internet).
Demander les identifiants d'un services à votre utilisateurs.
Ne pas gérer la fin d'une relation au sein du réseau.
Se donner des grands airs en proposant trop de choses inutiles.

Exercices ? Oui, oui : comment lutter contre les anti-patterns.

En conclusion, même si je pense que cet atelier aurait du s'intituler « Designing Social Websites » à la place de « Design Social Interface », ce fut une excellente journée, très enrichissante. L'équilibre entre théorie et pratique était bon et Christian est un excellent orateur. La matière de cette atelier était tiré de son livre « Designing Social Interfaces » dont le contenu est intégralement disponible en ligne sur le site http://www.designingsocialinterfaces.com

Les slides de l'atelier sont disponibles à cette adresse : http://mediajunkie.com/presos/wdx/DSI-wdx-@media.pdf

@media London 2010 : Day 1

Jeremie — Tue, 08 Jun 2010 22:17:00 +0200

Cette année j'ai pu me rendre à @media (c'est comme Paris Web, mais à Londres et en plus chère ). Ce cycle de conférences comprend 2 jours d'ateliers (1 atelier = 1 journée... autant dire qu'on rentre sérieusement dans le détail) et 2 jours de conférences. Choisir entre les différents ateliers fut une vraie torture, mais finalement, pour le premier jours, j'ai opté pour l'atelier de Andy Clark sur le thème « Advanced CSS styling ».

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