Responsive web design

Le Responsive Web Design (RWD) est une approche du design web qui permet de construire des pages dont l’affichage s’effectuera correctement sur tous types de périphériques et de tailles de fenêtres ou d'écrans.

Un site conçu ainsi s’adapte à l'environnement de visualisation en utilisant des grilles fluides et proportionnées, des images flexibles, et des “requêtes de média” (media queries):

Media queries

Les media queries sont un ensemble de directives permettant aux auteurs de feuilles de styles de réserver la mise en forme CSS à certains médias ou périphériques selon leurs caractéristiques.

Ces caractéristiques peuvent être liées au support : screen, print, handheld, tv, etc. Elles sont un élément fondamental du Responsive web design.

CSS2

Ci-dessous, un attribut media est associé au lien d’importation des feuilles de styles pour déterminer le type de média auquel doit s’appliquer l’ensemble des règles écrites dans les fichiers screen.css et print.css.

Cette approche est autorisée depuis la version 2 de la spécification CSS. Elle est aujourd’hui moins utile, remplacée et augmentée par la version 3 du langage CSS.

<!doctype html>
<html>            
    <head>
        <meta charset="utf-8">
        <title>Media Queries !</title>
        <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
        <link rel="stylesheet" media="print" href="print.css" type="text/css" />
    </head>
    <body>
    ...
    </body>
</html>

CSS3

En CSS3, plusieurs critères peuvent être combinés pour déterminer la cible des règles. Ainsi, dans l’exemple ci-dessous, seuls les navigateurs écran dont la taille est au minimum de 200px et au maximum de 640px verront leur arrière-plan coloré en rouge.

@media screen and (min-width: 200px) and (max-width: 640px) {
    body {
        background:red;        
    }
}

Orientation et résolution

Les media queries peuvent également déterminer des règles en fonction de l’orientation du périphérique – en mode portrait ou paysage :

@media screen and (orientation:portrait) {
    body {
        background:red;        
    }
}
@media screen and (orientation:landscape) {
    body {
        background:blue;        
    }
}

Les media queries permettent de réserver des règles aux périphériques en fonction de leur résolution / densité de pixels :

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Usages

Les media queries permettent d’adapter les règles d’affichage en fonction du périphérique.

On utilisera fréquemment ces adaptations pour :

Mobile first

Plusieurs stratégies peuvent être employées dans les logiques de mise en œuvre du responsive web design.

Il est possible de concevoir en priorité son interface pour le support disposant de la moindre taille d’écran (mobile first). Dans ce cas, les premières règles seront dédiées aux affichages restreints, et augmentées progressivement en utilisant les attributs min-width des media queries :

Ci-dessous, la taille par défaut est de 18px – pour les mobiles, donc. Elle ne deviendra de 21px que pour des écrans plus larges que 640px.

body{
    font-size: 18px;
}

@media (min-width:640px) {
    body {
         font-size: 21px;                    
    }
}

Desktop first

À l’inverse, on peut spécifier un ensemble de règles standards pour les interfaces de type “ordinateur de bureau”, et ajuster ces règles au fur et à mesure de la diminution de la taille d’écran.

Ci-dessous, un élément servant d’ornement pourra être affiché sur les grands écrans, et disparaitre sur les interfaces mobiles.

.ornement{
    height:600px;
}

@media (max-width:640px) {
    .ornement {
         display:none
    }
}

Aller plus loin

Un exemple de mise en page avec navigation responsive sur ateliers.esapyrenees.fr/web/exemples/mq/

Redimensionner votre fenêtre de navigateur (ou utilisez “l’affichage adaptatif”, dans Firefox, ou Chrome) pour voir les règles à l’œuvre.

Typographie Responsive

Quelques définitions

La définition du responsive web design par Wikipédia (où responsive se traduit en “adaptatif”), la première mention du terme, dans un article d’Ethan Marcotte sur A List Apart (en anglais) ainsi que Responsive Typography: The Basics, un article d’Olivier Reichenstein

Quelques exemples

Typographie

Webtypography.net, où Richard Rutter reprend les grands principes du livre The Elements of Typographic Style de Robert Bringhurst (indispensable à la santé de votre bibliothèque) et les applique au web, en y ajoutant des exemples de code.

Un article de Jon Tangerine, The Paragraph in Web Typography & Design, accompagné de douze examples de code pour styler les paragraphes.

Le monde merveilleux de l’OpenType enfin accessible en css ; une introduction sur le blog de FontDeck et la référence sur Mozilla Developper Network des propriétés font-feature-settings et font-variant.

Mise en page

Responsive Patterns, a collection of patterns and modules for responsive designs.

Quelques scripts pour aller plus loin

Slabtext, un plugin jquery pour faire des gros titres (voir aussi fittext, ou bigtext)

Un exemple (vite fait…)

Tom Joad