RWD
Le “responsive web design” est un terme popularisé par Ethan Marcotte en 2010, d’abord lors de sa conférence “A Dao of Flexibility” (An Event Apart, Seattle, avril 2010), puis dans un article (mai 2010), puis dans un livre (2011).
Media Queries et RWD (Responsive Web Design)
L’élément-clé qui est au coeur de cette approche “responsive” du web design sont les Media Queries, un propriété introduite avec le CSS3.
L’ancêtre des Media Queries: les styles CSS pour l’impression
Depuis le standard HTML4/CSS2, introduit en 1997, un attribut media
est disponible, permettant de réserver des styles CSS à un certain type de médias. Voici leur liste:
all
aural
braille
embossed
handheld
print
projection
screen
tty
tv
En théorie, le CSS peut donc définir des styles particuliers pour des “médias” spécifiques – ces médias pouvant être des écrans (screen
), moniteurs de télévision (tv
), projecteurs (projection
), mais aussi des systèmes de synthèse vocale (aural
), voire des appareils rendant les contenus de manière tactile (braille
, embossed
).
Cependant, dans la pratique réelle, les seuls medias qui soient supportés par les navigateurs sont screen
et print
.
On utilise souvent l’attribut media print
pour charger des styles CSS spécifiques pour l’impression d’une page web:
<link rel="stylesheet" media="print" href="impression.css">
Ou à l’intérieur d’une feuille de styles CSS, avec la syntaxe suivante:
@media screen {
* { font-family: sans-serif }
}
Pour un bon exemple de styles destinés à optimiser une page web pour l’impression, on peut se référer au HTML5 Boilerplate. Lire également cet article de Manuel Matuzovic.
Références concernant @print:
- Faites bonne impression avec les CSS, par Eric A. Meyer, 2002
- Maîtriser l’impression CSS, par Nicolas Hoffmann, 2010
- La spécification CSS 2.1
- Les styles @print du HTML5Boilerplate - ces styles sont aussi utilisés dans Bootstrap.
Les Media Queries du CSS3
Avec l’évolution du HTML5 et CSS3, les possibilités de l’attribut “media” sont étendues: on peut maintenant charger des styles selon le format de la fenêtre du navigateur, la largeur, la hauteur, la densité des pixels…
Cela a rendu possible le “Responsive Web Design” (RWD).
RWD (Responsive Web Design)
TODO: explicatif et exemples…
Un exemple de media query:
@media screen and (min-width: 20em) {
.member-list {
column-count: 2;
}
}
Références:
- Responsive Web Design, par Ethan Marcotte, alistapart, 2010 (aussi en français)
- Responsive Webdesign – présent et futur de l’adaptation mobile, par Stéphanie Walter, openweb, 2013. Sujets abordés: images responsives,
<picture>
, srcset, image-set(), WebP, flexbox, CSS columns, Grid Layout, iframes, navigation…
Questions de détail
Faut-il les écrire les Media Queries en pixels ou en EM?
Un article qui préconise l’usage des EM:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/