Responsive Web Design

Remi Forax

RWD ?

“Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes.”

source: Wikipedia.org - RWD

RWD ?

“Le responsive web design (RWD) est une approche de la conception de sites web qui fait en sorte que les pages web soient affichées corectement sur une grande variété d'appareils et de tailles de fenêtre ou d'écran.”

source : Wikipedia.org - RWD

Responsive Web Design

Repose sur 3 idées

• Media Queries CSS
• On place les éléments sur une grille fluide (grid)
• Images flexibles en unités relatives (em ou %)

Devient une réalité suite au Google Mobilegeddon

Autres termes

Mobile first

on développe le site web pour mobile et on tweak le CSS pour qu'il s'adapte au desktop

Progressive enhancement

on affiche les données importantes d'abord, on charge progressivement avec des scripts supplémentaires pour offrir de l'interactivité

CSS3 Media Queries

Sélecteur @media

Le sélecteur @media permet d'appliquer des règles CSS différentes en fonction par exemple de la taille de la zone d'affichage (viewport).

body { background-color: silver; } @media screen and (min-width: 480px) { body { background-color: tan; } }

Type d'afficheurs

@media est suivi d'un type d'afficheur parmi

1. all, tous types d'afficheurs (par défaut)
2. screen, page affichée à l'écran
3. print, page imprimée
4. speech, page lue, pour les malvoyants

min-width et max-width

min-width indique la taille minimum,
donc cela s'applique si la taille est supérieure (>=)
max-width indique la taille maximum,
donc cela s'applique si la taille est inférieure (<=)

body { background-color: silver; } @media screen and (min-width: 450px) { body { background-color: lightblue; } } @media screen and (max-width: 250px) { body { background-color: tomato; } }

Composition de @media query

On utilise and pour appliquer plusieurs critères
On utilise not pour inverser les critères

body { background-color: silver; } @media screen and (min-width: 250px) and (max-width: 450px) { body { background-color: tan; } }

Ou entre @media queries

Pour fait l'équivalent du ou,
on sépare les critères par des virgules

body { background-color: silver; } @media screen and (max-width: 250px), (min-width: 450px) { body { background-color: tan; } }

Media Query en HTML

On peut indiquer le media dans la balise link

mais on le fait pas car le browser charge tous les fichiers avant d'appliquer le bon

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="wide.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css">

Affichage sur mobile ?

Sur mobile on ne veut pas de scrollbar horizontale,
donc on fixe la largeur du viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

initial-scale est le facteur de zoom

Grille fluide

Affichage sur mobile ?

On affiche chaque div avec une largeur de 100%

* { box-sizing: border-box; /* les tailles sont est celle de la boite ! */ } .title { background-color: tan; width: 100%; }

Ne pas oublier de contrôler le viewport avec la balise meta !

HTML d'une grille simple

col-1 est une case qui prend une colonne,
col-2 est une case qui prend deux colonnes

<div class="row"> <div class="col-2 title">Titre</div> </div><div class="row"> <div class="col-1 fact">div avec col-1</div> <div class="col-1 fact">div avec col-1</div> </div><div class="row"> <div class="col-2 story">div avec col-2</div> </div>

CSS d'une grille simple

.row::after { content: ""; clear: both; display: table; } .col-1 { width: 50%; float: left; padding: 15px; } .col-2 { width: 100%; float: left; padding: 15px; }

Faire une grille simple

Dans chaque case de la grille,
on met un div qui contient le texte

<div class="row"> <div class="col-2"><div class="title">Titre</div></div> </div><div class="row"> <div class="col-1"><div class="fact">div avec col-1</div></div> <div class="col-1"><div class="fact">div avec col-1</div></div> </div><div class="row"> <div class="col-2"><div class="story">div avec col-2</div></div> </div>

Avec une media-query

[class*="col-"] { float: left; padding: 15px; width: 100%; } @media only screen and (min-width: 400px) { .col-1 { width: 50%; } .col-2 { width: 100%; } }

Une vraie grille

Souvent, les grilles ont une taille de 12 colonnes

.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}

mais le principe est le même.

d'autre façons de faire des grilles

qui permette surtout un meilleur alignement vertical

flexbox

mais marche sur un seul axe

grid

support seulement récemment sur macOS/iOS

Textes et Images Flexibles

Texte Flexible

vw pourcentage en fonction de la largeur du viewport
vh pourcentage en fonction de la hauteur du viewport

.heading1 { font-size: 10vw; } .heading2 { font-size: 8vw; } .heading3 { font-size: 6vw; }

Cela évite d'essayer de calculer la taille de la fonte en px, pt ou em

Image Flexible

width agrandit/rétrécit l'image
pour qu'elle tienne en largeur
max-width rétrécit l'image pour qu'elle tienne en largeur

.lena { /*width: 100%; */ max-width: 100%; }

Image Multi-Taille

La balise HTML5 picture accepte aussi les media-queries

<picture> <source srcset="lena-small.jpg" media="(max-width: 400px)"> <source srcset="lena.jpg"> <img src="lena.jpg" alt="Lena"> </picture>