Académique Documents
Professionnel Documents
Culture Documents
Commentant son mtier, lAnglais Christopher Wren affirmait avec un brin dironie
que larchitecture vise lternit . Cette phrase a un ct intrigant : la diffrence
du Web, dont le contenu change souvent dune semaine lautre, larchitecture est
dfinie par sa permanence. Les fondations dun btiment sont son empreinte. Elles
dfinissent la charpente, qui donne sa forme la faade. Chaque tape du procd
architectural est plus immuable, plus statique que la prcdente. Les dcisions
cratives forment un espace physique, dfinissant la faon dont les gens vont voluer
dans cet espace durant des dizaines, voire des centaines dannes.
Le domaine du Web est une tout autre dimension. Notre travail revt un caractre
phmre, souvent modifi ou remplac dans les annes qui suivent et son apparence
dpend de la taille des fentres, de la rsolution des crans, des prfrences des
utilisateurs, des polices de caractres installes sur leurs machines Ces lments ne
sont quune petite partie des imprvus prendre en compte lors de la publication de
notre travail. Au fil des annes, nous sommes devenus des experts en la matire.
Jai rcemment rencontr des entreprises ayant pour projet de crer un site web
pour iPhone . Cette ide est intressante : premire vue, il sagit dutiliser la qualit
du moteur WebKit en tant que navigateur, mais aussi en tant quoutil puissant pour
dpasser la sdentarit des ordinateurs de bureau. En tant que crateur de sites Web,
je pense que ces demandes explicites sont rassurantes, puisquelles permettent une
dfinition claire des problmes associs. Lexprience mobile peut tre divise en
plusieurs sous-domaines, des espaces diffrents et spars du site non accessible
aux iPhone . Oui, mais aprs ? Un site pour iPad ? Un site pour le Nokia N90 ? Est-il
dans nos possibilits de continuer encourager chaque nouveaut possdant son
systme sur-mesure ? On finit au bout du compte par avoir limpression de jouer un
jeu somme nulle. Mais, en tant que Web designers, comment nous adapter et
comment adapter les produits que nous dveloppons ?
Aucune mise en page, quelle soit fixe ou variable, ne peut sadapter de faon
homogne un contexte autre que celui pour lequel elle a t conue. Dans cet
exemple, la mise en page sharmonise avec la taille du navigateur, mais des difficults
se prsentent trs rapidement en basse rsolution. Si laire daffichage est infrieure
800600, lillustration derrire le logo est rogne, le texte peut simbriquer, et les
images en bas de page deviennent trop compactes pour tre correctement lisibles. Les
plus basses rsolutions ne sont pas les seules affectes : en affichant la page sur un
cran large, les images deviennent encombrantes, dbordant sur les lments autour.
En bref, nos mises en page flexibles fonctionnent bien pour un affichage sur un
systme classique dordinateur de bureau, mais rencontrent des limites au-del de ces
affichages classiques.
Devenir ractif
Larchitecture rceptive est une nouvelle discipline qui tudie ladaptation des
espaces physiques la prsence des personnes qui y voluent. Grce une
combinaison de robotique et de matriaux sensibles, les architectes testent des
installations artistiques et des structures murales qui se courbent, se flchissent, et
slargissent quand la foule sen approche. Des capteurs de mouvements peuvent tre
associs un systme de contrle de la temprature ambiante pour ajuster lclairage
et la temprature dune pice au fur et mesure que des gens y entrent. Une
technologie de verre intelligent a dj t mise au point : le verre sopacifie
automatiquement lorsquon franchit le seuil dune pice afin doffrir davantage
dintimit ses occupants.
Cest la voie du progrs. Plutt que concevoir des systmes dconnects les uns des
autres en augmentant le nombre de dispositifs Internet, ces systmes peuvent tre
considrs comme les facettes dune exprience commune. Les sites Web peuvent tre
crs dans le but dobtenir une visibilit optimale, mais on peut aussi y implanter des
technologies standard, pour les rendre la fois flexibles et plus adapts au support de
lecture. Pour rsumer, les sites Web doivent tre ractifs. Oui, mais comment les
concevoir ?
Puisque les feuilles de style ne sont pas uniquement destines limpression, le CSS
fournit une myriade de types de mdia, chacun prvu pour une classe de
priphriques Web. Mais la plupart des navigateurs et des outils nont pas t conus
dans un esprit de spcialisation, et limplmentation est souvent imparfaite. Il arrive
mme que certains types de mdia soient tout bonnement ignors.
Par exemple, concernant la rcente ascension de WebKit, les requtes de mdia sont
utilises pour adapter la feuille de style aux iPhone, aux tlphones Android, et
autres. Pour ce faire, nous pourrions intgrer une requte dans un attribut mdia li
une feuille de style :
Par le pass, les concepteurs de sites Web ont test des mises en page grant la
rsolution, reposant pour la plupart sur des solutions JS comme lexcellent script de
Cameron Adams. Mais la requte de mdia est associe de nombreuses
fonctionnalits, qui vont bien au-del de la rsolution de lcran, largissant ainsi le
champ des requtes. De plus, linsertion du mot-cl and permet de multiplier les
valeurs au sein dune mme requte.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css"/>
Le nombre de requtes nest pas limit et ces dernires peuvent tre incluses dans
lattribut @media du CSS :
.column {
float: none;
Leffet est le mme dans les deux cas : si le support russit le test impos par notre
requte, la partie correspondante du CSS sera applique. Les requtes de mdia sont,
en rsum, des commentaires conditionnels. Au lieu de viser une version spcifique
dun navigateur, on peut oprer des corrections chirurgicales de la mise en page pour
quelle saffiche au-del de la rsolution initiale.
.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */
width: 31.121642969984202211%; /* 197px / 633px */
.figure {
float: left;
li#f-mycroft,
li#f-winter {
margin-right: 0;
On indique tout dabord une zone daffichage en-dessous dune certaine rsolution.
Disons 600px. En bas de la feuille de style, crons un nouvel attribut @media, comme
ceci :
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
Si lon ouvre la page modifie dans un navigateur rcent et que lon rduit la taille de
http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 7 sur 12
Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22
.figure,
li#f-mycroft {
li#f-watson,
li#f-moriarty {
margin-right: 0;
La disposition des images peut tre modifie pour sadapter aux petits
supports.
Ne faites pas attention aux pourcentages peu esthtiques ; nous sommes simplement
en train de redimensionner la grille fluide pour ladapter la nouvelle mise en page.
En fait, lorsque lcran franchit le seuil des 400px, nous passons dune mise en page
trois colonnes une mise en page deux colonnes, ce qui rend les images plus
visibles.
On peut conserver la mme approche pour les crans larges. Pour les rsolutions plus
importantes, on peut mettre en place un traitement permettant dafficher nos images
sur une mme ligne :
.figure,
li#f-mycroft {
Mais ce nest que le dbut. partir des requtes de mdia intgres au CSS, on peut
jouer sur de multiples facteurs au-del de la disposition de quelques images : on peut
par exemple utiliser des mises en page nouvelles ou alternatives, chacune ddie un
ventail de rsolutions, rendant peut-tre les lments de navigation plus visibles sur
un cran large, ou en les repositionnant au-dessus du logo sur les crans plus petits.
Allons de lavant
Les grilles fluides, les images flexibles et les requtes de mdia sont les trois
ingrdients indispensables dun Web design ractif, mais leur utilisation ncessite
ladoption dun nouveau mode de pense. Au lieu de laisser notre contenu de ct
pour cause dincompatibilit ou de configuration spcifique des supports, les requtes
Mais cette faon de penser le Web design ne doit pas tre systmatique. Aujourdhui
plus que jamais, nos crations visent tre exposes sur un maximum de supports. Le
Web design ractif nous permet daller de lavant et nous offre enfin un moyen de
concevoir le flux et le cours des choses .