Dave Shea & Molly Holzschlag

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

Groupe Eyrolles, 2006, pour la prsente dition,ISBN : 2-212-11699-3

Cedric Savarese, designer

CS(S) MonkSignification du positionnement

et utilisation des grilles

Qui a dit que vous aviez besoin dun plan ?

Le designer Cedric Savarese a conu CS(S) Monk en faisant

des expriences dans Adobe Photoshop pour voir quels en

seraient les rsultats. Lavantage de cette approche est sa

fl exibilit : lorsque de nouvelles ides surviennent,

les anciens lments peuvent tre supprims ou ajusts

pour sadapter la mise en page corrige.

Savarese a dcid que le titre serait le point focal autour

duquel il organiserait le reste de sa prsentation. Aprs avoir

pass en revue plusieurs fois des centaines de polices, il a

choisi celles du titre et du sous-titre pour quelles se marient

avec le thme quil tait en train de dvelopper. Pour

complter la forte prsence du zen par une iconographie

sur le thme du jardin, des fl eurs ont t places de faon

donner une profondeur la mise en page, et une douce

harmonie de couleurs en rouge et gris a t mise au point

pour rendre le design sduisant.

www.csszengarden.com/070

110-115 ch3.indd 110110-115 ch3.indd 110 6/10/05 11:07:076/10/05 11:07:07

Positionnement et significationLimage dominante du moine dans CS(S) Monk occupe le point focal le plus

fort de la page : le coin suprieur gauche. Le premier lment du design est

galement le plus important, et il se trouve lemplacement le plus marquant.

Imaginons une surface plate aux dimensions fi xes comme une feuille de papier,

et partageons-la horizontalement et verticalement de faon former quatre

quarts. Les phrases des langues occidentales scrivent de gauche droite puis

de bas en haut dans la page. Le spectateur moyen a appris accorder incons-

ciemment chacun de ces quatre quarts une importance diffrente cause du

sens de lecture.

Vous tes-vous jamais demand pourquoi il y a un logo dans le coin suprieur

gauche, dans tant de sites ? Cest tout simplement parce que lil se pose natu-

rellement dessus. En plaant un lment dans le quart suprieur gauche vous

lui offrez une exposition maximale, cest donc idal pour y placer une marque

(FIGURE 1).

Le quart suprieur droit est galement important (FIGURE 2). Sur une page web,

le haut de laffi che , immdiatement visible sans dfi lement, est la zone la

plus apparente, quelle que soit la page. En plaant un lment dans le coin

suprieur droit, on suggre que son importance est lgrement moindre que

celle du coin suprieur gauche, mais que cest un lment signifi catif.

Les deux quarts infrieurs sont moins gnreux sur la plupart des pages web

(FIGURE 3). Certains designers y placent des accessoires redondants de naviga-

tion ; dautres y affi chent une simple dclaration de copyright et rien de plus. Dans le design imprim traditionnel, un lment plac en bas de page donne

le sentiment que les lments situs au-dessus le surplombent, sont surlevs.

Une impression de trois dimensions peut tre cre par un simple positionne-

ment sur une page imprime, mais sur le Web, les lments placs en bas de la

page seront vraisemblablement ngligs, voire totalement ignors.

Une pratique intressante qui gagne en popularit consiste placer les infor-

mations superfl ues au pied de la page web : des liens courants vers du contenu

FIGURE 1 Le quart suprieur

gauche.

FIGURE 2 Le quart suprieur

droit.

FIGURE 3 Les quarts infrieurs gauche et droit.

CS(S) MONK 111

110-115 ch3.indd 111110-115 ch3.indd 111 6/10/05 11:07:086/10/05 11:07:08

112 CHAPITRE 3 / MISE EN PAGE

interne ou des fonctionnalits du site, ou des liens nayant pas leur place dans

la hirarchie normale de la navigation. Si les utilisateurs les manquent, pas de

panique : ils peuvent accder aux contenus points par dautres moyens. Mais

les utilisateurs qui les remarqueront bnfi cieront de fonctionnalits suppl-

mentaires.

La grilleLa grille est un outil de mise en page important, mais elle est trop souvent

carte en raison de sa rigidit. Comme en mathmatiques, un repre en grille

est simplement compos dune srie de lignes rgulirement espaces se croi-

sant angle droit pour crer un ensemble de cases logiques et identiques. Ces

lignes et ces cases constituent une base pour les lments de design qui seront

ajouts par la suite. Lorsquune grille est respecte, les proportions et les espace-

ments sont gnralement plus harmonieux, si lon accepte de sacrifi er une part

dalatoire et de spontanit (FIGURE 4).

Les designs classiques, conus base de tableaux, dmontrent la nature intrin-

squement restrictive dune grille trop structure : un lment plac dans une

cellule de tableau na pas dautre choix que dy rester. Si lon souhaite raliser

un effet de superposition, les cellules voisines devront tre modifi es. Il arrive

souvent que la seule faon de sortir momentanment de la grille soit de dcouper

les images en lments plus petits et de les rassembler nouveau en laborant

des grilles dans la grille, ou de complexes tableaux imbriqus.

Les CSS permettent au contraire de contrler de faon bien plus prcise les

lments qui ne font pas partie de la grille. Une mise en page peut tre struc-

ture partir dune grille tout en contenant de nombreux lments sortant de

ses frontires, avec plus de fl uidit et de spontanit. Le modle de positionne-

ment en CSS confre une libert bien plus grande aux lments. Il vous permet

de sortir des lments de leurs contenants pour les replacer o bon vous semble

dans la page.

Construire la grilleSortir de la grille implique videmment den btir une en premier lieu. Si on

superpose une grille CS(S) Monk, le titre savre tre divis en trois compo-

sants spars, et la zone principale de contenu est forme de deux colonnes.

FIGURE 4 Diffrents arrangements de formes sur une grille.

110-115 ch3.indd 112110-115 ch3.indd 112 6/10/05 11:07:096/10/05 11:07:09

CS(S) MONK 113

EN-TTESi lon sappuie sur le poids relatif de chaque lment du titre, on observe

trois zones distinctes : la fi gure du moine, le titre Zen Garden et le texte du

#preamble, qui a t extrait du fl ot normal du document et plac dans len-tte.

Mais en examinant de plus prs les diffrentes images qui composent len-tte

de CS(S) Monk, il apparat que deux des objets, la fi gure et le titre, sont rassem-

bls en une seule image.

Bien quils constituent des parties diffrentes de la structure visuelle de len-

tte, pour des questions de code ils ont t traits comme un seul lment. Cest

une astuce couramment utilise en design web : les images doivent tre fusion-

nes en une seule au moment de la sauvegarde pour faciliter la programmation

venir (FIGURE 5).

ZONE DE CONTENUBien que CS(S) Monk repose sur une seule colonne de texte centrale, les titres

placs en marge sous-entendent lexistence dune deuxime colonne. Une

simple coloration en bleu met en vidence la faon dont les colonnes sont

proportionnellement agences dans la page (FIGURE 6).

La largeur de la colonne de gauche quivaut environ aux deux tiers de la largeur

de celle de droite, ce qui cre un rapport de 2/3. Lavantage dun lien numrique

aussi troit entre les colonnes est que les proportions sont automatiques : une

fois que la largeur de la premire colonne est tablie, la largeur de la seconde

est dtermine par celle de lespace restant. De plus, le rapport 2/3 de ces deux

colonnes est traditionnellement harmonieux et instaure un rythme typogra-

phique autant naturel quagrable.

Si vous souhaitez en savoir plus sur les proportions et les rapports dans le

design, vous pouvez consulter louvrage Gomtrie du design, de Kimberly Elam

( paratre aux ditions Eyrolles, 2006).

Briser les limites de la grilleSavarese a labor une mise en page base sur une grille pour crer le sque-

lette de CS(S) Monk, mais il a pu dplacer les lments pour rompre avec cette

structure et augmenter lintrt de son design.

FIGURE 6 Une seconde colonne sous-entendue dans la zone de contenu saligne sur la structure de la grille.

FIGURE 5 La figure et le titre sont compris dans une seule et mme image.

110-115 ch3.indd 113110-115 ch3.indd 113 6/10/05 11:07:096/10/05 11:07:09

114 CHAPITRE 3 / MISE EN PAGE

La fl exibilit du modle de positionnement en CSS autorise cette libert, que

vous choisissiez le positionnement absolu ou relatif. Une analyse des diff-

rences existant entre ces deux options vous aidera savoir quand choisir lune

ou lautre.

POSITIONNEMENT ABSOLUPour comprendre ce que positionnement absolu signifi e, il faut saisir le concept

de fl ot normal du document. Tel quil est crit, le HTML est linaire : un h1

vient gnralement en premier, suivi dun p, puis dun div. Il est effectivement

possible dimbriquer des lments, mais lorsquun document est interprt

sans sa feuille de style, le lecteur HTML commence en haut du document et

suit lordre dapparition des lments (FIGURE 7).

Le positionnement absolu offre non seulement la possibilit de placer un

lment o bon vous semble dans la page, mais galement de lextraire du

fl ot normal du document. Un bloc positionn dans labsolu na plus aucu