Dave Shea & Molly Holzschlag

00I-0IX debut.indd i 7/10/05 16:42:43 Code source

Le web de la ﬁ n des années 1990, c’était la jungle, un nouveau territoire à explorer. On y trouvait de tout, et tout s’y pratiquait. À cette époque, aucun de nous ne savait vraiment dans quelle direction s’orientait le Web. Comme c’est souvent le cas avec un nouveau jouet, nous étions très occupés à en tester les limites.

Genèse Nous avons donc poussé les limites, toujours plus loin. Au départ, HTML était un langage simple destiné à baliser des mémoires de recherche. Il ne permettait pas de déﬁ nir la mise en page, c’est pourquoi les graphistes et les éditeurs de navigateurs l’ont d’abord dédaigné. Pour combler ces lacunes de mise en page, des trucs et astuces furent mis au point, notam- ment par l’emploi détourné de balises et d’éléments de tableau. Or, ces bidouillages vont à l’encontre de l’objectif premier du HTML qui est un langage structurel.

Ainsi, on a utilisé des éléments de base à contre-emploi, tout en en négli- geant d’autres sous prétexte qu’ils « ne rendaient pas bien » à l’écran. Dans la pratique, les effets visuels se sont développés au détriment de la structure des pages web.

Les éditeurs de navigateurs n’ont pas aidé, c’est sûr. La situation s’est améliorée ensuite, mais à cette période le développement web s’engageait

0010-04510-045 ch1.inddch1.indd 1010 66/10/05/10/05 10:32:4410:32:44 sur une très mauvaise pente. Les deux principaux acteurs, Microsoft et Netscape, ajoutaient sans cesse de nouvelles extensions propriétaires pour rester en tête dans la rivalité qui les opposait. Certes, la compétition stimule l’innovation, mais elle peut aussi l’étouffer. Les auteurs web étaient obligés de produire plusieurs versions du même site parce que le code HTML rédigé pour un navigateur fonc- tionnait mal, voire pas du tout, dans un autre navigateur.

En bref, c’était très confus. Malgré ces problèmes, le Web a poursuivi sa crois- sance grâce aux mannes fi nancières qui pleuvaient durant le boom de la Net économie. Il était alors facile de justifi er un budget pour deux versions du même site quand l’argent coulait à fl ot. Toutefois, au tournant du millénaire, les auteurs web et les investisseurs en ont eu assez. FIGURE 1 Le WaSP. LES PRÉMICES D’UN CHANGEMENT Au début des années 2000, les budgets web ont soudain diminué quand les Info capitaux se sont taris. Pendant la crise économique, ceux qui avaient encore Le comité W3C a pour vocation d’améliorer du travail ont vite compris que taper du code en plus pour répondre aux défi - l’état du Web. Publiant des recommandations ciences et incompatibilités des navigateurs constituait une charge trop lourde : depuis 1996, il cherche à offrir des solutions aux divers défis technologiques que présente cela ne pouvait pas durer ainsi. le Web. Un groupe indépendant de designers web s’est formé sous le nom de WaSP (Web Standards Project : www.webstandards.org/about/mission/fr/) (FIGURE 1). Son rôle est d’inciter les éditeurs de navigateurs à respecter les recommandations du World Wide Web Consortium (W3C). La normalisation à partir des spécifi cations émises par le W3C a réduit les différences de traitement d’un navigateur à l’autre, ce qui a permis d’harmoniser les techniques de création pour le Web. Peu à peu, les développeurs web ont ainsi gagné la garantie que leurs pages HTML, même complexes, s’affi cheront de manière plus ou moins uniforme sous de nombreux navigateurs et systèmes d’exploitation.

Une bonne partie des spéciﬁ cations du W3C traite d’architecture et de détails techniques très pointus qui, en général, ne concernent pas les graphistes web. Le W3C a aussi publié une série de spéciﬁ cations décrivant le code à transmettre au navigateur, à commencer par la version standardisée du langage HTML. Ces recommandations tentent de résoudre les problèmes de compatibilité d’une manière intelligente et pratique sans négliger l’accessibilité. CODE SOURCE 11

0010-04510-045 ch1.inddch1.indd 1111 66/10/05/10/05 10:32:4610:32:46 DE L’INTÉRÊT DES STANDARDS Les groupes de travail du W3C rassemblent des personnes d’origine et de formation très variées qui se réunissent pour prévenir les questions que le desi- gner web moyen ne devrait jamais se poser. L’objectif est de fournir une série de recommandations si bien conçues, qu’en les suivant à la lettre, les développeurs d’outils de navigation et de créations web disposent de directives claires. Ces recommandations garantissent aussi aux designers web que leurs sites peuvent s’afﬁ cher et fonctionner sur le plus grand nombre d’agents utilisateurs.

Le terme « agent utilisateur » désigne les navigateurs web, bien sûr, mais pas uniquement. Grâce à l’expansion des appareils portables comme les téléphones mobiles, nous serons de plus en plus nombreux à pouvoir surfer sans ordina- teur. Tous les internautes ne vont pas choisir votre navigateur préféré ; certains ne le peuvent pas, d’ailleurs. Les malvoyants, par exemple, recourent à un appareil d’assistance qui synthétise le texte en voix, traduit en Braille ou grossit l’afﬁ chage.

Puisque les spéciﬁ cations du W3C en matière de design visaient justement à éliminer les problèmes d’incompatibilité qui caractérisaient le Web des années 1990, il serait absurde de produire différentes versions du même site pour chaque type d’agent utilisateur. Le W3C a tenu compte de tous ces aspects pour la mise au point des recommandations relatives à HTML 4.0, XHTML, CSS et DOM.

Il s’agit là des technologies adoptées par les designers et développeurs du WaSP. Il est logique de soutenir des spéciﬁ cations capables de garantir l’accessibilité la plus large, tout en offrant un contrôle précis sur la présentation. Le langage CSS répond à tous ces critères, mais il implique une manière radicalement diffé- rente de construire un site web. Le challenge, en fait, fut de convaincre les autres designers de l’intérêt d’apprendre ce langage ; il restait ensuite à réﬂ échir sur le bon emploi des styles CSS.

Voilà dans quel contexte a germé la première idée du site Zen Garden. Au départ, CSS était surtout utilisé par des développeurs et programmeurs ; ils se débrouillaient très bien pour résoudre les problèmes techniques qui apparais- saient lors de l’implémentation des styles CSS, mais ils produisaient des pages à l’esthétique minimale, jugées ternes et peu séduisantes. Les graphistes n’ont pas

FIGURE 2 Exemples de feuilles de styles du site Daily accroché tout de suite à l’idée d’exploiter les CSS, car il n’existait pas d’exemples CSS Fun. de beaux designs en CSS.

12 CHAPITRE 1

0010-04510-045 ch1.inddch1.indd 1212 66/10/05/10/05 10:32:4710:32:47 NAISSANCE DE ZEN GARDEN Dave Shea, le créateur du site Zen Garden, a commencé à réfl échir à ce problème Info fi n 2002. Comment les artistes capables de produire des merveilles en CSS Il importe de noter que les standards web pourraient-ils être inspirés par des exemples aussi quelconques ? Grâce à sa ne sont pas des normes ; la conformité n’est double formation artistique et technique, Dave Shea a su identifi er le potentiel d’ailleurs pas obligatoire, et le W3C les créatif des styles CSS. Parallèlement, il se rendait compte que ceux qui auraient appelle simplement des recommandations. dû travailler en CSS ne le faisaient pas. Dans la pratique, pourtant, nous sommes nombreux à leur attribuer la valeur d’une Une idée a ainsi commencé à germer : si seulement il existait une bibliothèque norme. Le WaSP publie un article à ce sujet centralisant les chefs-d’œuvre en CSS. Rassembler les pages CSS existantes ne (en anglais) sur www.webstandards.org/ ferait pas l’affaire, car il n’existait pas grand-chose digne d’intérêt. La solution buzz/archive/2004_10.html#a000463. était donc d’inciter les graphistes à produire de belles maquettes en CSS. Sur cette idée, un nouveau projet était né.

Influences Info Dans un article écrit en 2002, Jeffrey Zeldman, cofondateur du WaSP, exhortait Vous pouvez consulter l’article original de ceux qui comprennent les bénéfi ces du bon emploi des standards web à mettre Zeldman sur Daily Report : www.zeldman. eux-mêmes leurs conseils en pratique au lieu de passer leur temps à en persuader com/daily/0802c.html#Evangeline. les autres. C’était là la meilleure manière de mettre en avant ces avantages ; ainsi « pratiquer au lieu de causer » devint le mot d’ordre du projet. Finalement, Zeldman a écrit un manuel complet sur le sujet, un véritable guide de référence : Design web : utiliser les standards (Eyrolles, 2005 pour la version française). Info La même année, le développeur web Chris Casciano lançait un projet nommé Retrouvez Daily CSS Fun à l’adresse Daily CSS Fun (FIGURE 2). Il se donnait pour objectif, sur une durée d’un mois, www.placenamehere.com/neuralust- de produire chaque jour une nouvelle feuille de style capable de modifi er radi- mirror/200202. calement l’effet du code HTML de la page. Chris ne se prétendait pas graphiste, mais ses résultats furent convaincants : ils offraient enfi n un aperçu des possi- bilités de mise en page en pur CSS.

Netscape Navigator 4, avec ses graves déﬁ ciences vis-à-vis des CSS, était encore très répandu, c’est pourquoi les conseils se limitaient à la théorie. Enﬁ n, les choses ont commencé à changer lorsque les parts de marché de Navigator 4 ont soudain décliné. En 2003, on pouvait estimer que ce navigateur n’était plus d’usage. Il était temps de passer à la pratique.

Première ébauche Les idées relatives au projet Zen Garden ont fusionné, si bien qu’en mai 2003 Dave Shea présentait le résultat sur son site personnel, www.mezzoblue.com, avant de le déplacer vers l’adresse que vous connaissez : www.csszengarden.com.

CODE SOURCE 13

0010-04510-045 ch1.inddch1.indd 1313 66/10/05/10/05 10:32:5010:32:50 Fin 2002, Dave Shea travaillait déjà sur le prototype du Zen Garden par l’afﬁ - chage alternatif de quatre feuilles de style inspirées par quatre éléments natu- rels : terre, eau, feu et air. L’idée n’a pas été développée à fond, et les images y tenaient un rôle mineur. Vous constatez aux FIGURES 3 à 6 que les premières maquettes du Zen Garden n’étaient pas terribles.

Ces designs étaient sans intérêt parce qu’ils manquaient d’images. Les images de fond étaient insérées avec la propriété background-image, mais il était impossible d’afﬁ cher des images au premier plan. S’il avait eu recours à la balise img, Dave Shea aurait été obligé de se débrouiller avec un seul jeu d’images. Les images de fond à elles seules ne sufﬁ saient pas, parce que la conception graphique repose plus souvent sur l’emploi d’images éparpillées dans le texte que sur l’insertion d’une seule image derrière le texte. De toute évidence, les images de fond n’offraient qu’une demi-solution.

La solution est venue après la publication d’un article, à présent décrié, de Douglas Bowman décrivant le remplacement de texte par une image de fond. À partir de cette méthode, Dave Shea a pu extrapoler : il semblait facile d’in- sérer des images de premier plan en les associant aux nombreux éléments de texte dans la page, puis en les échangeant par d’autres ﬁ chiers graphiques.

FIGURE 3 Prototype du Zen Garden FIGURE 4 Prototype du Zen Garden sur le thème de la terre. sur le thème du feu.

FIGURE 5 Prototype du Zen Garden FIGURE 6 Prototype du Zen Garden sur le thème de l’air. sur le thème de l’eau. 14 CHAPITRE 1

0010-04510-045 ch1.inddch1.indd 1414 66/10/05/10/05 10:32:5110:32:51 Du code CSS allié à un petit supplément de balisage personnalisable a permis Info de remplacer des éléments textuels en ligne par des images d’arrière-plan. C’est Si vous lisez l’article original de Bowman sur le même principe qui détermine le comportement d’une balise img dotée d’un Stopdesign (www.stopdesign.com/articles/ texte de remplacement introduit par l’attribut alt. replace_text), notez qu’il nous prévient d’éventuels problèmes d’accessibilité avec En avril 2003, le projet Zen Garden a démarré pour de bon. Shea a rédigé sa méthode. Cette technique est reprise dans l’unique ﬁ chier HTML destiné à servir de base, et créé cinq maquettes pour le plusieurs designs de Zen Garden. Nous y lancement du site (FIGURES 7 à 11). reviendrons en détail au chapitre 4.

Info Comme le fichier HTML du projet Zen Garden ne pouvait plus changer après l’arrivée des premières maquettes soumises, il a fallu consacrer du temps en plus pour vérifier que le balisage et le texte étaient au point et définitifs, et qu’il y avait suffisamment FIGURE 7 n°001, Tranquille. FIGURE 8 n°002, Salmon Cream Cheese. d’éléments class et id à modifier par des styles. Après le lancement, d’autres consi- dérations, impossibles à prévoir, ont surgi à propos du balisage. Nous y reviendrons plus loin dans le chapitre.

FIGURE 9 n°003, Stormweather. FIGURE 10 n°004, arch4.20.

FIGURE 11 n°005, Blood lust. CODE SOURCE 15

0010-04510-045 ch1.inddch1.indd 1515 66/10/05/10/05 10:32:5310:32:53 TRANQUILLE, LE DESIGN PAR DÉFAUT Les cinq premières maquettes ont joué un rôle essentiel dans le succès initial du projet, mais seul le design par défaut était destiné à servir de vitrine à long terme. C’est pour son esthétique épurée que Tranquille a toujours été pressenti comme le design par défaut, mais la maquette n°002, Salmon Cream Cheese, a été un concurrent sérieux à un moment, du fait de son impact visuel immé- diat ; heureusement le choix s’est ﬁ xé sur Tranquille. FIGURE 12 Police Calligraphic 421. Les images et les titres du design par défaut ont été réalisés dans Photoshop. Au départ, Dave Shea voulait écrire les titres au pinceau dans un style calligra- phique, mais après une heure de vaines tentatives, il s’est donnait de meilleurs résultats (FIGURE 12).

En général, les designers apprécient le côté exotique et mystérieux des caractères chinois. Voulant éviter le travers habituel des artistes occidentaux qui choisis- FIGURE 13 Dessin de l’arbre. sent des signes en fonction de leur aspect sans tenir compte de la signiﬁ cation, Shea a mené des recherches pour donner du sens au kakemono dans l’angle supérieur gauche de la page. Malgré ses bonnes intentions, il n’a pas réussi à constituer un vrai message : les caractères choisis signiﬁ ent en gros « origine », « plénitude » et « habileté ».

Vous rappelez-vous ce cours d’arts plastiques, au collège, où l’on nous demande de verser de l’encre de Chine sur une feuille, et de soufﬂ er dessus avec une paille pour obtenir la forme d’un tronc et de branches ? C’est le souvenir d’un tel cours qui a inspiré l’arbre dans l’angle inférieur droit de la page. Le dessin s’est fait en plusieurs étapes à partir d’un croquis avec peu de couleurs, puis les détails sont venus s’ajouter sur différents calques (FIGURE 13).

IMPLICATIONS Le succès ne s’est pas fait attendre. Les premières maquettes sont arrivées en quelques jours, tandis que le site recevait des dizaines de milliers de visiteurs par jour, dès la première semaine. De plus, des bénévoles ont proposé de traduire le site vers une vingtaine de langues. C’était clair, sans équivalent sur le Web, Zen Garden répondait à une demande jusqu’alors inassouvie.

Depuis son lancement, Zen Garden est apparu dans des dizaines de magazines en toutes langues et a été cité dans plusieurs livres, conﬁ rmant ainsi son statut de référence ultime dans l’histoire du design web. Des lettres de remer- ciement sont arrivées de tous les coins du monde, de la part de graphistes et

16 CHAPITRE 1

0010-04510-045 ch1.inddch1.indd 1616 66/10/05/10/05 10:32:5710:32:57 de développeurs qui se sont servis du site pour convaincre leurs employeurs, clients ou collègues de l’intérêt du design en CSS. Et la plupart des auteurs, dont la maquette a été retenue, ont bénéﬁ cié d’un sérieux coup de pouce dans leur carrière grâce à leur présence dans Zen Garden.

Créé et géré par une seule personne, Zen Garden est pourtant le fruit d’un effort collectif et bénévole. Des designers talentueux ont contribué à ce succès par leurs travaux. Chacun apprécie Zen Garden pour des raisons différentes, et bien qu’il ait été construit dans le but de démontrer les bénéﬁ ces du design en CSS, on lui découvre aujourd’hui d’autres avantages.

Les designers qui peinent sur une mise en page peuvent venir y chercher une solution. Parmi la centaine de modèles présentés, il y a une forte proba- bilité que le même problème ait déjà été rencontré et résolu. Nous vous autorisons et encourageons à utiliser le code CSS du site pour apprendre et surmonter vos problèmes de mise en page.

Un assortiment d’effets et de techniques CSS sont à votre disposition. Il est fort probable que vous découvrirez des nouveautés parmi la centaine de créations exposées.

C’est l’endroit idéal pour tester les capacités de rendu d’un navigateur web. Tous les ﬁ chiers sont rédigés en code valide et conforme aux standards, ils devraient donc produire le même résultat dans tous les navigateurs. (Dans la pratique, ce n’est pas encore vrai. À cause de bogues et d’un défaut de prise en charge de certains éléments, les designers ont dû recourir à des astuces et ﬁ ltres CSS pour harmoniser le rendu.)

C’est un bon argument pour convaincre employeurs et clients d’adopter un design ﬁ dèle aux standards.

C’est un bon remède contre la panne de créativité. Promenez-vous dans le site en quête d’inspiration.

Le site offre une bonne vitrine pour les professionnels conﬁ rmés comme pour les graphistes débutants. Les artistes exposés sont régulièrement contactés par des employeurs ou clients potentiels séduits par cet aperçu de leurs compétences. Les travaux sont souvent publiés dans des livres et magazines internationaux.

Le site fournit un outil précieux aux formateurs pour enseigner les méthodes et tendances actuelles de design web.

CODE SOURCE 17

0010-04510-045 ch1.inddch1.indd 1717 66/10/05/10/05 10:32:5710:32:57