Transcender CSS Andy Clarke - EyrollesA fortiori si l’on a l’habitude d’un programme de dessin...
Transcript of Transcender CSS Andy Clarke - EyrollesA fortiori si l’on a l’habitude d’un programme de dessin...
Transcender CSSSuBlimez le deSiGN WeB !
Andy ClarkeAvant-propos de Molly E. Holzschlag
Préface de Dave Shea
PDT_CSS.indd 3 5/07/07 10:37:38
© Groupe Eyrolles, 2007, pour la présente édition,
ISBN : 978-2-212-12107-0
2.11 Coucher un balisage sur un design statique.
Partie 2 : Processus 123
02_TCSS.indd 123 3/07/07 18:36:55
02_TCSS.indd 124 3/07/07 18:36:57
Utiliser des prototypes interactifsOn comprend facilement pourquoi bien des outils des premières étapes du projet — cartes
des contenus du site, diagrammes de flux, grilles de mise en page — reposent sur des images
statiques. Il n’en reste pas moins que le Web est un média interactif. Quand esquisses
et croquis figés ne pourront jamais donner qu’une vague idée d’un site web finalisé,
les prototypes interactifs ouvrent bien d’autres portes. Pour exploiter au mieux le média,
il faut travailler en osmose avec lui.
Créer des prototypes interactifs reposant sur un balisage valide, pourvu de sens, et stylé
en CSS fournira aux designers des objets capables d’illustrer leurs idées. Quant aux déve-
loppeurs, ils pourront plus facilement incorporer de nouvelles fonctionnalités avec Ajax et
des technologies de ce type pour mettre en place un prototype entièrement fonctionnel.
Le lecteur pensera peut-être qu’il est plus long de produire des prototypes en XHTML et CSS
codés à la main que de créer des images, notamment quand on a l’habitude d’un logiciel de
dessin vectoriel ou que l’on peut piocher dans une bibliothèque de symboles réutilisables.
Opter pour XHTML et les feuilles de style permet pourtant de travailler plus vite :
• Un ou plusieurs fichiers CSS pourront donner corps aux prototypes.
• Les styles doteront un nombre arbitraire de pages d’un agencement, de couleurs et
de choix typographiques.
• On pourra tester rapidement des modifications sans changer le balisage.
• Le même contenu pourra servir de base à de multiples variantes du même design.
Les prototypes interactifs permettent encore aux designers de mettre en œuvre plus vite et
plus fréquemment les diverses itérations d’un design, de tester de nouvelles idées, de réor-
ganiser les mises en page — tout cela sans modifier la structure ou l’ordre des contenus.
Un peu de concretPrésenter un design dans un navigateur web donnera aux clients l’occasion d’interagir
avec lui de manière bien plus pertinente. Au lieu d’inférer l’apparence d’un gadget à partir
d’un croquis, ils l’auront directement sous les yeux. Même si tout n’est pas finalisé ni encore
parfaitement fonctionnel, cela réduit les risques de malentendus.
Partie 2 : Processus 125
02_TCSS.indd 125 3/07/07 18:36:58
Si vous suivez les usages modernes et les
standards du Web, ces pages reposeront sans
doute sur XHTML pour leur structure et sur
CSS pour la présentation. XHTML, excellente
structure, pourra servir de squelette à une grille
que l’on transformera ensuite en prototype
avant de mettre le tout en forme grâce à CSS.
—nicK FincK www.blueflavor.com/ed/information_architecture/
recyclable_information_archite.php
02_TCSS.indd 126 3/07/07 18:36:58
Les clients s’impliquent davantage quand ils peuvent interagir avec des maquettes
en HTML. Non seulement ils apprécient plus le processus, mais il comprennent mieux
les propositions et leur contexte qu’avec un schéma rendu sur une feuille de papier.
— Jeff Gothelf, Boxes and Arrows (www.boxesandarrows.com/
view/practical_applications_visio_or_html_for_wireframes)
Les prototypes interactifs sont de puissants outils pour présenter des designs aux clients.
Toute remarque ou réaction de leur part peut immédiatement déclencher l’implémentation
correspondante ; si l’idée ne fonctionne pas, on le saura de suite et on pourra revenir à la
situation antérieure. En travaillant ainsi, on obtiendra plus rapidement l’accord des clients
pour une proposition de design, même s’ils se trouvent au bout du monde et vivent dans
un autre fuseau horaire.
Écrire du code réutilisableQuand on développe avec du balisage sémantique stylé en CSS, on peut reprendre
une bonne partie de ses créations. On accélère ainsi considérablement le temps de déve-
loppement, et il est bien moins probable qu’il faille réinventer la roue. Si l’on suit lors
de la phase de recherche et développement la même discipline et les mêmes conventions
que pour un site de production, les prototypes pourront servir à nouveau.
Celui qui travaille dans l’intention de conserver et de reprendre ce qui peut l’être produira
de fait des designs qui auront plusieurs vies. Cette méthode accélère presque toujours le
développement et réduit les coûts pour le studio, l’organisation, les managers,
et les clients.
Des esquisses et prototypes au comportement modèleDisposant désormais de nouvelles manières d’améliorer la communication entre tous
les intervenants organisant des contenus, il est temps de se familiariser avec les conseils
des pros et d’apprendre comment utiliser un navigateur web et toute une collection
d’extensions pour gérer efficacement ses feuilles de style.
Partie 2 : Processus 127
02_TCSS.indd 127 3/07/07 18:36:58
WYSIWYG : vision ou myopie ?Des applications comme Macromedia Dreamweaver proposent un environnement de design
WYSIWYG [1] intégrant des templates et des bibliothèques d’éléments à glisser-déposer.
Ces interfaces sont en grande partie responsables de la transition à HTML pour les proto-
types : il est désormais bien plus facile d’écrire des maquettes pour le Web sans connaître
à fond son langage, son balisage, CSS, ou les usages en la matière.
Les éditeurs WYSIWYG étant conçus pour écrire les balises à la place de leur utilisateur, on
pourrait les penser plus efficaces et rapides que l’écriture à la main les codes XHTML et CSS.
A fortiori si l’on a l’habitude d’un programme de dessin vectoriel ou si l’on dispose d’une
bibliothèque de composants réutilisables. Pourtant, cela n’est pas forcément le cas.
Le tableau suivant donne quelques avantages de XHTML et des prototypes CSS réalisés
artisanalement sur les codes produits automatiquement dans des interfaces intégrées :
Interface WYSIWYGBalisage et CSS reposant sur les standards du Web
Impose l’achat d’un logiciel comme Dreamweaver ou Adobe GoLive.
Il suffit d’un éditeur web élémentaire ou d’un éditeur de texte comme Notepad pour Windows ou TextEdit pour Mac OS X.
Impose de se familiariser avec une application rarement utile pour le développement des pages web finalisées.
Il suffit de connaître un minimum de balises et de CSS.
Le balisage sera probablement fondé sur la présentation et difficile à maintenir ou réutiliser.
Le balisage sera structuré, bien ordonné, et pourvu de sens. Vous pourrez reprendre la plus grande partie des codes XHTML et CSS.
Toute modification du design visuel imposera souvent de changer le balisage et l’ordre dans le code source, et ceci sur de nombreuses pages.
Il suffit d’intervenir sur quelques fichiers CSS, cibles de liens ou importés, pour en répercuter les effets sur un nombre arbitraire de pages.
1. N.D.T. What You See Is What You Get, « ce que l’on voit est ce que l’on obtiendra » — ou encore « tel écran, tel écrit ». Qualité de programmes proposant prétendument sur le moniteur une vision fidèle du résultat final (page imprimée dans le cas de suites bureautiques ; ici, site web).
128 Transcender CSS
02_TCSS.indd 128 3/07/07 18:36:59
De même qu’un écrivain dresse une esquisse
de son récit avant d’écrire un livre, [la méthode
de la boîte grise] me sert de croquis visuel
préliminaire à l’attaque d’un design.
Tronçonner ce travail en étapes permet
de remettre en question les choix de mise
en forme et leur pertinence avant d’être
entièrement accaparé par les détails des mille
et une petites décisions à prendre.
—Jason santa Maria www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php
02_TCSS.indd 129 3/07/07 18:36:59
02_TCSS.indd 130 3/07/07 18:37:03
Les conseils des pros en matière de prototypes interactifsMême si les différentes étapes sont ici présentées sous forme linéaire, l’ensemble du processus
est plus complexe. Travailler en partant des contenus, ce n’est pas suivre fidèlement
un ensemble rigide de directives prêtes à l’emploi. Il s’agit d’astuces pour améliorer
son workflow, et qui vaudront aussi bien pour un designer isolé aux multiples casquettes
que pour ceux qui émargent en équipe.
Choisir un navigateur pour le développementLors de la conception, des tests, et des démonstrations des prototypes interactifs, on
évitera les bizarreries et autres problèmes posés par les vieux programmes. Il est essentiel
d’opter pour une plate-forme stable qui servira de référence lors de la phase de program-
mation, et de s’y tenir tout au long du workflow.
On veillera à informer les autres intervenants de cette contrainte, de sorte qu’ils ne
s’étonnent pas d’observer un résultat différent s’ils consultent les créations du projet
dans une autre application.
Le choix du navigateur dépendra de plusieurs facteurs. Pour concevoir un intranet d’entre-
prise où la majorité des salariés susceptibles d’en lire les pages sont des adeptes de Micro-
soft Internet Explorer 5 pour Windows 2000, il faudra malheureusement se plier à cette
contrainte. La popularité de ce programme repose sur le fait qu’il est fourni par défaut avec
le système d’exploitation, avantage significatif même après quelques années. De même, on
optera pour Safari s’il est le chouchou des visiteurs ciblés. Retenir une application prenant
correctement en charge CSS et proposant tout un panel d’outils de développement facilitera
grandement les étapes de programmation et de tests.
Faire appel aux extensions des navigateursInternet Explorer 7 a beau proposer ses propres gadgets et une barre d’outils pour le
développeur, la plupart des designers sensibilisés aux standards retiendront Mozilla Firefox
à cause de son époustouflante ribambelle d’extensions de qualité. Le site web en compte
déjà plusieurs centaines, et s’enrichit presque tous les jours de nouvelles propositions.
Tout au long des exercices exposés dans ce manuel, nous utiliserons ce type de compléments. Dans
le cas de Firefox, je chéris particulièrement Web Developer de Chris Pederick, ainsi que Firebug.
Partie 2 : Processus 131
02_TCSS.indd 131 3/07/07 18:37:03
2.12 La fonctionnalité Show Element Information (présenter les détails de l’élément) de l’extension Web Developer dans ses œuvres.
2.13 Inspection du DOM menée par Firebug.
Personnaliser son navigateur. On trouvera les extensions pour développeur de Firefox à l’adresse http://addons.mozilla.org/.
Employer l’extension Web DeveloperLe complément le plus essentiel au développeur est l’extension Web Developer pour Firefox et
autres navigateurs de la famille Mozilla, que l’on doit à Chris Pederick. Sa barre d’outils est si
riche que l’on pourrait y consacrer un livre entier — et cela se produira peut-être (figure 2.12).
Téléchargement et installation : On peut obtenir l’extension Web Developer à l’adresse http://chrispederick.com/work/webdeveloper/.
Explorer le DOM avec FirebugCette extension de Firefox est très utile : elle facilite l’exploration du DOM en consignant
dans la console toutes les erreurs JavaScript, CSS et autres qui se produisent. On peut
encore se déplacer au clavier dans le modèle objet de document, et tout nœud sélectionné
sera mis en valeur dans la page (figure 2.13).
Téléchargement et installation : On trouvera Firebug à l’adresse http://addons.mozilla.org/firefox/1843/.
132 Transcender CSS
02_TCSS.indd 132 3/07/07 18:37:05
Modifier le CSS en direct avec Web DeveloperCette extension fournit bien des outils puissants, dont la possibi-lité de contrôler les styles et fichiers CSS chargés dans le naviga-teur. Il est alors très facile de changer l’apparence d’un prototype sans devoir intervenir sur les feuilles de style dans un éditeur de texte externe. Quand on a besoin d’un retour immédiat, cette tech-nique est particulièrement efficace.
L’une des fonctionnalités les plus intéressantes de Web Developer est le panneau Edit CSS (modifier le CSS), qui permet de changer les styles et de visualiser le résultat sans jamais quitter le navigateur.
Imaginons qu’un client ou manager ait reçu des retours suite à des tests utilisateurs : la taille de police par défaut est trop petite à leur goût. Rien d’inhabituel dans cette requête ; ne prenez pas la remarque trop à cœur. Bien des designers adorent les polices minuscules, qui forcent leurs aînés à coller le visage sur l’écran.
Choisissez Edit CSS dans le menu de la barre d’outils ; un panneau apparaît alors, présentant toutes les informations relatives aux styles intégrés comme aux feuilles de styles externes — le tout organisé proprement sous forme d’onglets.
Pour modifier la taille de police de référence, rendez-vous dans le bon onglet (ici, il s’agit de typography.css) et augmentez le pourcentage de taille de texte défini pour l’élément <body> :
body {font: 82%/1.5 “Trebuchet MS“, “Lucida Grande“,“Lucida Sans Unicode“, Verdana, sans-serif; }
Le résultat de l’opération apparaîtra immédiatement dans le
navigateur.
Après avoir validé les modifications effectuées, revenez au panneau Edit CSS pour sauvegarder la nouvelle taille de police dans la feuille de style externe.
Travailler directement dans le navigateur de développement peut faire gagner énormément de temps. On mènera des essais, des tests, et (le cas échéant) sauvegardera des modifications même importantes de la mise en forme, le tout sans jamais devoir invoquer son éditeur web préféré.
Partie 2 : Processus 133
02_TCSS.indd 133 3/07/07 18:37:10
Limiter au maximum les éléments <div>Le fait de multiplier sans raison les éléments <div> augmente considérablement les risques
d’erreurs. Pour éviter ce souci lors de la phase d’écriture du code XHTML, on restera aussi
chiche que possible sur les balises.
Avant d’incorporer quelque division que ce soit, démarrez en vous limitant aux éléments
structurels tels qu’en-têtes, paragraphes, listes, et citations — puis continuez en partant
des contenus.
Évitez ensuite autant que possible les éléments <div>, en les ajoutant au fur et à mesure
que vous identifierez les besoins vraiment nécessaires. Cette approche vous aidera à libérer
autant que possible documents de travail et prototype finalisé de tout balisage superflu ou
de présentation.
Maintenir un balisage toujours valideLes codes mal écrits font toujours perdre un temps précieux : il faut d’abord trouver les
erreurs, puis les corriger. Tester régulièrement son balisage pour s’assurer qu’aucune erreur
grammaticale ne s’y est glissée est non seulement sage, mais essentiel pour être efficace.
Un balisage valide est toujours rentable ; il réduit les risques d’erreurs et jette de solides
fondations sur lesquelles on peut ensuite édifier les designs.
Préférer le positionnement aux flottantsLes flottants sont devenus le standard de fait en matière de mises en page CSS par colon-
nes. Ce n’était pas leur objectif initial, mais ils s’acquittent bien de cette lourde tâche.
Malheureusement, cette médaille a un revers frustrant lors de cette étape : ils sont très
sensibles. Il suffit parfois d’ajouter un texte en italiques ou une image dépassant d’un pixel
la largeur de la colonne flottante pour tout flanquer par terre.
Le remède, c’est le positionnement CSS. Il semble peut-être plus compliqué de comprendre
les bases des placements absolus, relatifs ou fixes que d’appréhender le fonctionnement des
flottants, plus simples en comparaison. Cependant, c’est en maîtrisant le positionnement,
son comportement très robuste et son énorme potentiel en termes de souplesse de mise en
page que l’on récoltera le plus de fruits — le jeu est compliqué, mais il en vaut la chan-
delle si l’on souhaite apprendre correctement CSS.
Alors que les agencements à base de flottants pourront s’écrouler au moindre tremblement,
les mises en page positionnées sont capables d’absorber des images surdimensionnées ou
des textes énormes sans frémir. Elles sont donc idéales dans cette phase du projet. Même si
Penser à faire valider ses créations
L’extension pour Firefox HTML Validator et le plug-in Tidy pour Safari vous harcèleront d’icônes d’avertissement dans la barre de statut du navigateur en cas d’erreurs dans les pages web. Il est très formateur de faire valider ses documents. Attention ! même si un site respecte parfaitement les stan-dards, de nombreux systèmes de ges-tion des contenus et autres services d’injection de publicités produisent du code invalide. De nombreux designers et développeurs n’ont aucun contrôle sur cela. Il n’en reste pas moins qu’il est important d’intégrer la validation des codes écrits dans le workflow de production.
134 Transcender CSS
02_TCSS.indd 134 3/07/07 18:37:11
plus tard on reprend le CSS pour y mêler flottants et placements, on s’accorde à recommander
de n’employer d’abord que cette dernière technique, quitte à faire des changements plus tard.
Le problème des flottantsLes navigateurs web contemporains suivent la spécification du W3C (World Wide Web
Consortium) dictant qu’un élément large de 200 pixels (comme par exemple une division)
respectera toujours la taille imposée. S’il comporte des objets trop étendus, ces derniers
déborderont simplement sur ses côtés. Le résultat sera sans doute laid, mais la mise en
page n’en sera pas perturbée (figure 2.14).
Les développeurs des premières versions d’Internet Explorer n’étaient pas d’accord. Ils
ont développé leur application de manière à lui faire grossir les conteneurs de manière à
s’adapter à la largeur de ce qu’ils renferment. Ainsi, la même colonne de largeur 200 pixels,
si elle incorpore une image de 220 pixels de large, grossira jusqu’à occuper cet espace. En
conséquence, une colonne flottante pourra passer sous sa voisine, ce qui anéantira la mise
en page (figure 2.15).
On peut certes résoudre ce type de problème à l’aide de flottants, mais cela prend du temps
— ressource rare lors du prototypage.
2.14 Déborder sur le côté de son élément parent.
2.15 Un élément flottant déplacé car il ne tenait plus.
Partie 2 : Processus 135
02_TCSS.indd 135 3/07/07 18:37:13
Incorporer la transparence alpha PNG dans le workflowLors de l’étape de design statique, les couleurs de fond des colonnes et autres divisions
sont susceptibles de changer plusieurs fois. Rien n’est plus ennuyeux et démotivant que
de créer et d’exporter les mêmes images encore et encore, de sorte que leur couleur de fond
corresponde à la valeur CSS background-color.
Celui qui travaille dans un environnement de développement ayant opté pour un navigateur
capable de transparence alpha dans le format d’images PNG choisira ce dernier en lieu et
place de GIF ; il évitera ainsi des heures de manipulations rébarbatives (figure 2.16).
Avec le format PNG, on peut exporter un ensemble d’images une fois pour toutes, en dotant
celles-ci d’un fond transparent. Cela permet de changer la couleur d’arrière-plan des feuilles
de style autant que fois qu’on le souhaite, sans jamais devoir revenir sur la planche à
dessin numérique.
Organisation des CSSIl existe tant de manières d’organiser et de commenter les fichiers CSS que si un groupe
de designers convenaient de déterminer la meilleure lors d’un dîner, ils ne sauraient épuiser
la question avant que le restaurant ne ferme.
Une référence du balisage. Le Markup Reference de Mozilla.org est un exemple illustrant à merveille comment documenter des standards en matière d’écriture de balises et de CSS (www.mozilla.org/contribute/writing/markup).
Il est essentiel d’organiser ses styles selon une structure claire et facile à comprendre
avant que les fichiers correspondants ne se multiplient et ne deviennent trop complexes.
Cette discipline vous aidera à produire un CSS plus efficace et permettra aux autres
de mieux rentrer dans vos archives quand ils voudront les modifier. Évidemment, chacun
aura sa méthode préférée.
Rassembler par grandes zones de contenusCertains organisent leurs règles selon les divisions de la page web, rassemblant
dans un groupe tout ce qui relève des signes distinctifs (#branding) et dans un autre
ce qui traite du contenu (#content) :
/* =content_main (contenu principal) */ div#content_main { width: 70%; }div#content_main p { font-size: 100%; }div#content_main p > a { text-decoration: underline; }
2.16 Transparences PNG et GIF comparées.
136 Transcender CSS
02_TCSS.indd 136 3/07/07 18:37:14
/* =content_sub (contenu secondaire) */ div#content_sub { width: 30%; }div#content_sub p { color: #666; }div#content_sub p > strong { font-weight: normal; }
Marquer des sections dans les CSSEn bornant des parties faciles à repérer grâce à des commentaires CSS, des marqueurs
de section, et des tirets, on facilitera la recherche de certaines règles et l’on saura plus
facilement lesquelles s’appliquent à telle ou telle portion du design :
/* Contenu principal----------------------------------------------- */
Mettre ainsi en valeur le début de chaque section pourra vous faire gagner du temps lors
du débogage ou quand vous reviendrez sur un projet après plusieurs mois passés sur
d’autres fronts.
Reposer sur les élémentsD’autres designers encore préfèrent rassembler leurs règles élément par élément,
en groupant tout ce qui relève des en-têtes, des paragraphes, ou encore des listes :
/* p */ p { line-height: 110%; }blockquote p { padding-left: 1em; }div#site_info p { text-align: center }
/* ul */ ul { list-style-type: disc; }div#nav_main ul { list-style-type: none; }div#content_sub ul { border: 1px solid #ccc; }
D’astucieux fanionsUn simple caractère (par exemple le signe égale « = ») permet parfois de retrouver plus
facilement une portion du fichier portant sur tel ou tel élément :
/* =p */
La fonction de recherche de votre éditeur de texte, si elle reçoit la chaîne « =p », vous
emmènera directement au bon endroit sans perdre de temps sur des faux positifs comme
list-style-type or encore padding.
Partie 2 : Processus 137
02_TCSS.indd 137 3/07/07 18:37:15
Répartir le code CSS sur plusieurs fichiersLes opinions divergent quant à savoir s’il est plus pratique de gérer, dans un produit fini,
un fichier CSS unique, lié, ou importé — c’est l’étude du cas particulier qui donnera
la solution. En revanche, il ne fait nul doute que plusieurs fichiers présentent un certain
nombre d’avantages lors de la réalisation d’un prototype interactif.
On pourra par exemple en ventiler les styles dans plusieurs fichiers comme suit :
• styles de mise en forme incorporant propriétés d’affichage, flottants et positionnement,
largeurs et hauteurs, remplissages et marges (layout.css) ;
• styles définissant les couleurs, et notamment les propriétés d’arrière-plan, de couleurs,
et d’images, ainsi que les teintes des textes (color.css) ;
• informations de nature typographique, comprenant les familles et tailles de polices, les
hauteurs de lignes, l’espacement entre les lettres, et les décorations portant sur le texte
(typography.css).
Par souci de simplicité et pour réduire le nombre de feuilles de style auxquelles le balisage
fait référence, on pourra rassembler le tout dans un seul fichier qui se chargera des appels
@import nécessaires pour charger l’ensemble.
Pour fonctionner correctement, les feuilles de style importées apparaîtront au tout début
du fichier CSS, avant toute autre règle :
@import url(color.css); @import url(type.css); [ reste de la mise en forme et des règles CSS ]
Nous avons vu que l’emploi d’un balisage pourvu de sens et de CSS pour produire
des prototypes interactifs aidait le designer à écrire un code léger et sémantique, à émettre
des contenus accessibles, et à concevoir un design souple. De tels prototypes permettent
aussi de communiquer plus efficacement avec les collègues et les clients.
138 Transcender CSS
02_TCSS.indd 138 3/07/07 18:37:15
Les prototypes HTML et le choix d’une
méthode de développement agile sont de plus
en plus indiqués et viables pour minimiser
les fossés culturels et les malentendus tout en
livrant plus rapidement des résultats précis.
Si vous ne vous êtes pas encore penché sur
la question, c’est peut-être le bon moment.
—Garrett DiMon www.digital-web.com/articles/
just_build_it_html_prototyping_and_agile_development/
02_TCSS.indd 139 3/07/07 18:37:15
02_TCSS.indd 140 3/07/07 18:37:19
Mettre le processus en pratiqueC’est le moment de se retrousser les manches et d’appliquer le workflow et les techniques
que l’on a évoqués. Cette section guidera le lecteur au fil des étapes du travail fondé sur
les contenus avec pour objectif la création d’un prototype interactif à choisir parmi trois
designs visuels — reposant sur un balisage sémantique et mis en forme en CSS.
Ingrédients de la recetteImaginons un instant que vous ayez le plaisir de travailler sur un nouveau design à la
demande d’une start-up. Cette jeune pousse dispose de bureaux flambants neufs et ses
capitaux-risqueurs l’ont dotée d’une trésorerie digne du budget d’un petit pays — y compris
ses fonds secrets. Cookr ! [1] — c’est son nom — a pour projet la création d’une application
web formidable : les visiteurs pourront y mettre en ligne et partager leurs recettes.
La première étape du processus consiste à rassembler tous les contenus et à les organiser,
en prêtant une attention particulière aux problèmes de moteur de recherche, d’ergonomie,
et d’accessibilité.
Ouvrir les boîtes grisesLa méthode de la boîte grise est ici tout à fait adaptée à la description des contenus pré-
sentés sur le site et aux relations liant par nature certaines de leurs régions. Faciles à créer,
les boîtes grises fournissent exactement aux infographistes les informations dont ils ont
besoin, sans limiter aucunement leur marge de manœuvre et la manière dont ils souhaitent
organiser la page.
Cet exemple élémentaire utilise des boîtes grises pour deux zones principales
(figure 2.17) :
• contenus présentant un intérêt particulier ;
• navigation et outils.
Celles-ci sont subdivisées plus finement comme suit :
• La première comprenant le texte principal d’une recette, avec sa description, ses ingré-
dients, et sa méthode opératoire.
• Dans la navigation, on trouve des liens menant vers les fonctionnalités du compte utilisateur
et des outils facilitant l’utilisation du site.
Si l’on souhaite détailler davantage le concept, ces boîtes grises pourront accompagner une
documentation plus volumineuse décrivant mieux la page ou donnant des précisions sur les
contenus et fonctionnalités du site.
1. N.D.T. : Référence au mot cooker, qui signifie « cuisinier ».
2.17 Représentation du prototype de Cookr ! à l’aide d’une boîte grise.
Partie 2 : Processus 141
02_TCSS.indd 141 3/07/07 18:37:20
Examen des maquettes graphiques proposéesLe processus du design créatif passera probablement toujours par des propositions
statiques. Imaginons que, dans le cadre de ce projet, vous en ayez produit trois. Le client
choisit celui qui reflète le mieux sa culture d’entreprise et les émotions qu’il souhaite faire
véhiculer au site web (figure 2.18).
Écrire le balisage en partant des contenusQuel que soit votre rôle dans le processus, l’équipe peut d’ores et déjà s’atteler à écrire un
document XHTML doté de sens, qui sera élaboré à partir des contenus décrits et organisés
dans les boîtes grises. Pas besoin d’attendre les finitions du design visuel ; tout le monde
gagnera du temps en faisant d’ores et déjà progresser ce chantier.
Il est certes tentant de s’inspirer de la maquette pour jeter les fondations de la struc-
ture du balisage, mais cela aurait pour conséquences de vous faire abuser de certains
éléments — notamment les divisions <div>. D’autre part, l’ordre des contenus serait
soufflé avant tout par l’apparence recherchée et serait confus en l’absence de feuilles
de style. Pour éviter les écueils du balisage de présentation et les problèmes d’ordre,
on démarrera toujours des contenus et de leur sens.
2.18 Trois propositions de designs statiques pour le projet Cookr !
142 Transcender CSS
02_TCSS.indd 142 3/07/07 18:37:28
Visualiser la structureSi l’on revient aux boîtes grises et aux visuels de design statique, on observera que la page
en cours de prototypage comprend plusieurs grandes zones :
• une recette principale expliquant son mode de réalisation et ses ingrédients ;
• des recettes semblables et des variantes.
Le design statique reprend les fonctionnalités souhaitées du site et non directement liées à
ses contenus principaux : signes distinctifs, navigation, et informations de contact.
J’ai pour habitude de les appeler les garnitures du site.
Contenu principalÉvidemment, le nom du site, Cookr !, est important pour identifier celui-ci. Il est d’ailleurs
si fondamental qu’on lui réservera l’en-tête de premier niveau <h1> dans le balisage.
Intéressons-nous maintenant à la recette principale : on y trouve son nom et une courte
description (figure 2.19).
Titres du site et de ses pages
Certains développeurs préfèrent recourir à un en-tête de premier niveau sur la seule page d’accueil pour baptiser l’ensemble du site. Le titre propre aux autres pages est donné par un élément <h1>, sans y reprendre le nom du site.
2.19 Gros plan sur les informations de la recette principale.
Partie 2 : Processus 143
02_TCSS.indd 143 3/07/07 18:37:29