Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

Responsive Web Design , par Ethan Marcotte

Le contrle quexercent les designers au sein du mdia imprim et quils
dsirent souvent retrouver au sein du virtuel est simplement le produit dune
limitation de la page imprime. Nous devrions accepter le fait que le Web na
pas les mmes contraintes, et concevoir en fonction de cette flexibilit. Mais
avant, nous devons accepter le flux et le cours des choses.

John Allsopp, Le Matre du Web Design .

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.

Mais lenvironnement change, peut-tre plus vite quon ne le souhaiterait. La

navigation mobile devrait prendre le pas sur celle effectue partir dordinateurs de
bureau dici trois cinq ans. Deux des consoles de jeux vido les plus vendues sont
quipes dun navigateur (lun dentre eux est excellent). On assiste la cration de
nouveaux claviers, classiques ou T9, de souris, de manettes de jeux plus compactes,
dinterfaces tactiles. Pour rsumer, nous devons, plus que jamais, grer un nombre
croissant de priphriques, de systmes dentre de donnes, et de navigateurs.

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 1 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

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 ?

Une base flexible

Prenons un exemple de mise en page. Jai cr une page simple pour un hypothtique
magazine. La page est organise en deux colonnes, et base sur un systme de
grille fluide. Quelques images flexibles y sont disperses. En tant que partisan de
longue date des mises en page non fixes, jai longtemps pens que leur flexibilit
serait un gage de leur persistance. Cela est vrai jusqu un certain point : les mises en
page flexibles ne tiennent pas compte de la taille de la fentre dun navigateur et
sadaptent de faon esthtique aux crans qui peuvent sutiliser en mode portrait ou
paysage.

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 2 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

Les grandes images restent grandes. Notre mise en page, pourtant

flexible, sadapte mal aux changements de rsolution ou daire dachage.

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.

Dans Interactive Architecture, Michael Fox et Miles Kamp dcrivent ce processus

dadaptation comme un systme bas sur de nombreux circuits, dans lequel on peut
entrer en dialogue ; un change dinformations continuel et constructif . Je pense
quil faut noter cette distinction subtile, mais majeure : plutt que crer des espaces
immuables, statiques qui dfinissent une exprience donne, lhabitant et la structure

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 3 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

peuvent (et doivent) sinfluencer mutuellement.

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 ?

Dcouvrir les requtes de mdia

Depuis larrive du CSS 2.1, nos feuilles de style ont gagn en popularit sous leffet de
la diversit des types de mdia. Si vous avez dj rdig une feuille de style destine
limpression, vous connaissez dj le concept :

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

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.

Heureusement, le W3C a intgr une requte de mdias (media queries ) au CSS3,

ce qui permet damliorer la compatibilit avec les diffrents types de mdia. Une
requte de mdia permet de viser certaines catgories de mdia, mais permet
galement de vrifier les caractristiques principales du support affichant le travail.

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 4 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

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 :

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css"/>

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"

href="shetland.css"/>

La requte comprend deux lments :

1. un type de mdia (screen), et

2. la requte elle-mme, entre parenthses, contenant une fonction mdia (max-
device-width) contrler, suivi de la valeur cible (480px).

En clair, on interroge le mdia pour vrifier si sa rsolution horizontale (max-

device-width) est infrieure ou gale 480px. Si oui (en dautres mots, si le travail
saffiche sur un petit cran comme celui de liPhone), alors le support charge
shetland.css. Sinon, le lien est tout bonnement ignor.

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"/>

<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 :

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 5 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

@media screen and (max-device-width: 480px) {

.column {
float: none;
}

@media screen and (max-device-width: 480px) {

.column {

float: none;

Ou dans la commande @import :

@import url("shetland.css") screen and (max-device-width: 480px);

@import url("shetland.css") screen and (max-device-width: 480px);

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.

Sadapter, ragir et vaincre

Prenons le cas spcifique des images en bas de la page. Dans la mise en page initiale,
le CSS ressemble ceci :

.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */
width: 31.121642969984202211%; /* 197px / 633px */

.figure {

float: left;

margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */

width: 31.121642969984202211%; /* 197px / 633px */

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 6 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

li#f-mycroft,

li#f-winter {

margin-right: 0;

Il me semble important de prciser quelques proprits typographiques de la mise en

page : Chaque .figure est redimensionn environ un tiers de la colonne
conteneur, la marge de droite tant rduite zro pour les deux images la fin de
chaque range (li#f-mycroft, li#f-winter). Cela fonctionne assez bien,
jusqu ce que la zone daffichage devienne plus petite ou plus grande que celle de la
mise page initiale. Grce aux requtes de mdia, on peut appliquer des adaptateurs
de rsolution , qui grent la mise en page en fonction des changements daffichage.

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 :

@media screen and (max-width: 600px) {

.mast,
.intro,
.main,

@media screen and (max-width: 600px) {

.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

la fentre en dea de 600px, la requte de mdia va dsactiver la proprit float, et

les lments vont ainsi se positionner les uns au-dessus des autres. Notre mise en
page minimaliste saffiche convenablement, mais les images ne sont toujours pas
rduites de faon intelligente. Lintgration dune nouvelle requte mdia permet
dinfluencer laffichage des images :

@media screen and (max-width: 400px) {

.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */

@media screen and (max-width: 400px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 48.341232227488151658%; /* 306px / 633px */

li#f-watson,

li#f-moriarty {

margin-right: 0;

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 8 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

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 :

@media screen and (min-width: 1300px) {

.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */

@media screen and (min-width: 1300px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 13.902053712480252764%; /* 88px / 633px */

Nos images sorganisent parfaitement, de la plus basse la haute des rsolutions,

optimisant ladaptation de la mise en page aux changements de taille et de
rsolutions.

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 9 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

Lindication dune largeur minimale plus leve dans la requte de mdia,

permet d acher les images sur une seule ligne.

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.

En faisant de la conception ractive, nous pouvons adapter nos contenus

aux petits supports aussi bien quoptimiser leur prsentation sur toute une
srie de supports.

La conception ractive ne se limite pas aux modifications de la mise en page. Les

requtes de mdia permettent des rajustements incroyablement prcis pendant la
rorganisation des pages : on peut augmenter la taille de la zone cible des liens pour
les petits crans, afin de respecter la loi de Fitts relative aux supports tactiles ; choisir

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 10 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

de montrer ou cacher des lments pouvant amliorer la navigation ; appliquer une

composition ractive pour modifier graduellement la taille du texte, optimisant donc
la lecture sur les petits supports.

Quelques notes techniques

Les requtes de mdia sont parfaitement compatibles avec les navigateurs les plus
rcents, tels que Safari 3+, Chrome, Firefox 3.5+ et Opera 7+, de mme que la plupart
des navigateurs pour mobiles (Opera mobile et WebKit par exemple). Les versions
plus anciennes de ces navigateurs ne sont bien entendu pas compatibles avec les
requtes de mdia. Bien que Microsoft se soit engag intgrer les requtes de mdia
dans IE9, cette fonction nest toujours pas intgre.

Cependant, si on veut intgrer une fonction requtes de mdia dans un navigateur, on

peut adopter une solution JavaScript :

Un plugin jQuery (2007) permet dutiliser des fonctions de requtes de mdia

limites, appliquant uniquement les proprits largeur min et largeur max.
css3-mediaqueries.js, sorti plus rcemment, prtend rendre IE 5+, Firefox 1+
et Safari 2 compltement transparents et compatibles avec les requtes de mdia
CSS3 intgres par lattribut @mediablock. Mme sil sagit seulement de la
version 1.0, jai trouv cet outil plutt bien fait, et je compte suivre son volution.

Lutilisation de JavaScript en rebute plus dun et cest parfaitement comprhensible.

Ce code est nanmoins trs utile pour la mise en page base sur les grilles fluides,
assurant la flexibilit de vos pages et leur compatibilit avec des navigateurs ou
supports inconnus.

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

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 11 sur 12

 Responsive Web Design , par Ethan Marcotte | Goban Club 10/02/2014 13:22

de mdia nous permettent damliorer notre travail progressivement pour le publier

sur divers supports. Cela nempche pas les clients de commander des pages
exclusivement destines des supports prcis. Par exemple, si les contenus des sites
pour supports mobiles sont plus limits que leurs quivalents pour PC, alors il
pourrait tre intressant de proposer des contenus diffrents pour chacun dentre eux.

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 .

http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/ Page 12 sur 12