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.


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.


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.


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é.


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.


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.


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.


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.


02_TCSS.indd 143 3/07/07 18:37:29

Transcender CSS Andy Clarke - EyrollesA fortiori si l’on a l’habitude d’un programme de dessin...

Documents

Transcript of Transcender CSS Andy Clarke - EyrollesA fortiori si l’on a l’habitude d’un programme de dessin...