Responsive Design
Le “Responsive design” se réfère à l’idée que votre site Web devrait s’afficher aussi bien dans tous les systèmes, qu’il s’agisse de moniteurs grand écran ou de téléphones portables. C’est une approche de la conception et du développement web qui élimine la distinction entre la version mobile de votre site Web et son homologue de bureau.
Le Responsive design s’effectue grâce aux « media queries » CSS (requêtes média en français). Pensez aux media queries comme le moyen d’appliquer conditionnellement les règles CSS. Ils indiquent au navigateur qu’il doit ignorer ou appliquer certaines règles en fonction de l’appareil de l’utilisateur.
Les Media queries nous permettent de présenter le même contenu HTML avec des mises en page CSS distinctes. Ainsi, au lieu de maintenir un site Web pour les smartphones et un site entièrement indépendant pour les ordinateurs portables / ordinateurs de bureau, nous pouvons utiliser le même balisage HTML pour les deux. Cela signifie que chaque fois que nous ajoutons un nouvel article ou que nous modifions une erreur de frappe dans notre HTML, ces modifications sont automatiquement reflétées dans les mises en page de tout les navigateurs. C’est la raison pour laquelle nous séparons le contenu de la présentation .
Dans ce chapitre, nous allons apprendre comment les media queries ne sont qu’une fine enveloppe de code autour du CSS avec lequel nous avons travaillé jusqu’à présent. Comme nous allons bientôt découvrir, il est vraiment très facile de mettre en œuvre une mise en page réactive. (Les images réactives, en revanche, c’est une autre paire de manche).
Mise en place
Créez un nouveau projet appelé responsive-design et un nouveau fichier appelé responsive.html. C’est la page Web la plus simple que nous ayons vue jusqu’à présent, mais cela nous aidera à démontrer quelque chose de très important dans la prochaine section:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Responsive Design</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<!-- Pour le moment c'est vide ! -->
</body>
</html>
Vous devrez également télécharger certaines images qui nous serviront plus tard dans le chapitre. Décompressez tout dans le même dossier que responsive.html , en gardant le dossier de images parent. Votre projet devrait ressembler à ceci avant de passer à l’étape suivante:
Media queries css
Nous allons commencer simplement en mettant à jour la couleur d’arrière-plan de l’élément <body> en fonction de la largeur de l’écran du périphérique. C’est un bon moyen de s’assurer que nos media queries fonctionnent réellement avant d’entrer dans des mises en page plus compliquées.
Distincions les mises en page mobile, tablet et ordinateur en créant une nouvelle feuille de style styles.css et en ajoutant ce qui suit:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile */
@media only screen and (max-width: 400px) {
body {
background-color: #F09A9D; /* Rouge */
}
}
/* Tablet */
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E; /* Jaune */
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF; /* Bleu */
}
}Lorsque vous redimensionnez votre navigateur, vous devriez voir trois couleurs de fond différentes: bleu lorsqu’il est supérieur à 960px de large, jaune lorsqu’il se situe entre 401px et 960px , et rouge lorsqu’il est inférieur à 400px.
Les media queries commencent toujours par le @media suivi d’une de déclaration conditionnelle, puis de quelques accolades. À l’intérieur des accolades, vous mettez vos règles CSS. Le navigateur ne prend en compte ces règles que si la condition est remplie.
Le « type de média » only screen signifie que les styles contenus dans cette requête ne devraient être appliqués qu’aux appareils dotés d’écrans (contrairement aux documents imprimés, comme lorsque vous appuyez sur Cmd + P dans un navigateur). Les codes max-width et min-width sont appelées « fonctions multimédia », et elles spécifient les dimensions de l’appareil que vous ciblez.
Les media queries ci-dessus sont de loin les plus courantes, mais il existe de nombreuses autres conditions que vous pouvez vérifier, par exemple, est ce que l’appareil est en mode portrait ou paysage, quelle est la résolution de son écran et s’il y a une souris ou non.
Quelques notes sur le design
Ok, @media nous permet de définir différentes mises en page pour des largeurs de périphériques spécifiques, mais quelles sont les mises en page que nous voulons mettre en place? L’exemple de la page Web de ce chapitre ressemblera à ceci:
Il existe quelques modèles bien définis (design pattern) pour la façon dont une mise en page de bureau s’adapte dans une disposition mobile. Il y a surtout deux concepts important que vous devez comprendre:
- Une disposition « fluide » est celle qui s’étend et se rétrécit pour combler la largeur de l’écran, tout comme les boîtes flexibles que nous avons étudier dans les chapitres précédant.
- Une disposition « à largeur fixe » est le contraire: elle a la même largeur indépendamment des dimensions de l’écran (nous avons créé l’une d’entre elles dans le chapitre sur les selecteurs CSS).
Dans notre page Web d’exemple, les versions mobile et tablette sont fluides, et la version de bureau est fixe.
Choisir les point d’arrêts
La plupart de ces modèles de conception réactifs (responsive design patterns) ont un comportement similaire, en utilisant des dispositions fluides pour les appareils mobiles / tablettes et des dispositions à largeur fixe pour des écrans plus larges. Il y a une raison à cela.
Les dispositions fluides nous permettent de cibler une large gamme de largeurs d’écran au lieu de cibler des appareils mobiles spécifiques. Ceci est très important pour les Designers Web. Lorsqu’ils créent une mise en page mobile, ils n’essaient pas de créer quelque chose pour un iPhone 6s, un Galaxy S7 ou un iPad mini, ils conçoivent une disposition fluide qui se situe entre 300 pixels et 500 pixels (ou un autre écart …).
En d’autres termes, les valeurs de pixel exactes entre les paramètres de max-width et de min-width dans une requête média (collectivement appelés «points d’arrêt» pour un site Web Responsive) ne les concernent pas vraiment. Notre site Web ne se préoccupe pas du périphérique spécifique sur lequel l’utilisateur le regarde. Tout ce qu’il faut savoir, c’est qu’il doit afficher une mise en page spécifique à une largeur de 400 pixels (ou autre).
Développement « mobile-first »
Passons directement à la mise en œuvre des designs de notre page web. C’est toujours une bonne idée de commencer par la mise en page mobile et de travailler jusqu’à la version de bureau. Les mises en page de bureau sont généralement plus complexes que leurs homologues mobiles, et cette approche « mobile-first » maximise la quantité de CSS que vous pouvez réutiliser dans vos mises en page.
Tout d’abord, nous devons remplir l’élément <body> de notre page responsive.html avec des cases vides. Chaque case contiendra une image afin de pouvoir les distinguer un peu plus facilement.
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<title>Responsive Design</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<div class='section menu'></div>
<div class='section header'>
<img src='images/header.svg'/>
</div>
<div class='section content'>
<img src='images/content.svg'/>
</div>
<div class='section sign-up'>
<img src='images/sign-up.svg'/>
</div>
<div class='section feature-1'>
<img src='images/feature.svg'/>
</div>
<div class='section feature-2'>
<img src='images/feature.svg'/>
</div>
<div class='section feature-3'>
<img src='images/feature.svg'/>
</div>
</div>
</body>
</html>Et voici notre style de base, qui devraient s’appliquer à toutes les mises en page (mobiles, tablettes et ordinateurs de bureau). Assurez-vous d’ajouter ces régles au dessus des règles @media que nous avons créées précédemment et en-dessous des règles de notre « réinitialiseur » :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
/* Mobile */
@media only screen and (max-width: 400px) {
body {
background-color: #F09A9D; /* Rouge */
}
}
/* Tablet */
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E; /* Jaune */
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF; /* Bleu */
}
}Si vous ouvrez la fenêtre du navigateur, vous verrez ce que cela donne. Assez facile, hein? Aucune media queries requise. C’est pourquoi on l’appelle «mobile-first»: la version mobile ne requiert aucune gestion particulière. Notez également que la propriété flex-wrap est définie sur la class .page. Cela facilitera la mise en œuvre de nos configurations pour les tablettes et les ordinateurs.
En gardant ces styles de base en dehors des medias queries, nous sommes en mesure de les remplacer lorsque nous implémentons nos mises en page spécifiques. Ceci est vraiment pratique lorsque, par exemple, votre concepteur veut modifier le code couleur pour l’ensemble du site. Au lieu de trouver les déclarations de background-color redondantes dans plusieurs règles @media , il suffit de la mettre à jour ici. Ce changement s’applique automatiquement aux configurations mobiles, de tablette et de bureau.
Mise en page tablette
La seule différence entre les maquettes mobiles et de tablette est que les sections Sign Up et Feature forment une grille 2 × 2 au lieu d’une seule colonne.
Grâce à Flexbox c’est vraiment simple. Il suffit d’ajuster la largeur des éléments flexibles pour être à la moitié de l’écran et flex-wrap prend soin du reste. Bien sûr, nous ne voulons que ce comportement ne s’applique qu’aux écrans de tablette, donc il doit être intégré dans une règle @media. Remplacez la requête existante /* Tablette */ avec ce qui suit:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
/* Tablette */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF; /* Bleu */
}
}Pour voir ces changements, assurez-vous que la taille de la fenêtre de votre navigateur est comprise entre 400 pixels et 960 pixels de large, puis faites défiler jusqu’au bas de la page. Vous devriez voir une grille colorée:
Encore une fois, peu importe la largeur exacte de l’écran: cette mise en page répond de manière fluide à toute largeur dans la gamme des media queries. Notre disposition mobile est également fluide, nous avons maintenant un site Web qui ressemble à notre design dans tous les périphériques de moins de 960px de largeur.
Mise en page ordinateur
Et c’est là que notre mise en page pour ordinateur arrive. Nous ne voulons pas que notre page Web se développe sans fin, donc nous allons lui donner une largeur fixe et le centrer avec des marges automatiques. Comme pour les styles de tablette, cela nécessite d’entrer une media queries. Remplacez la requête existante /* Ordinateur */ avec ce qui suit:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
/* Tablette */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Ordinateur */
@media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
}On a presque fini, mais notre disposition de bureau nécessite un certain réordonnancement: les boîtes Sign Up et Content devraient apparaître en dessous de toutes les sections Feature.
C’est là que Flexbox est vraiment utile. Essayer de créer cette combinaison de mises en page mobiles et de bureau serait très difficile avec les « float » . Avec la propriété de order de Flexbox, cela ne nécessite que quelques lignes de CSS. Ajoutez ces règles à la media queries des ordinateurs:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
/* Tablette */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Ordinateur */
@media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
.sign-up {
height: 200px;
order: 1;
}
.content {
order: 2;
}
}Ta da! Un site Web Responsive! Pas mal pour moins de cent lignes de CSS. Plus important encore, nous n’avons pas eu à modifier une seule ligne de HTML pour accueillir nos mises en page mobiles, tablettes et Ordinateurs.
Ce n’est qu’un exemple de mise en page d’un site responsive. Vous pouvez utiliser ces mêmes techniques pour mettre en œuvre toutes sortes d’autres mise en page. Commencez avec les styles de base qui s’appliquent à votre site entier, puis modifiez-les pour diverses largeurs de périphériques en appliquant sélectivement les règles CSS avec le media queries @media. Vous pourriez même ajouter une autre media queries, par exemple, créer une mise en page dédiée pour les moniteurs ultra-grand.
Désactivation du zoom
Nous avons une dernière tâche a réalisé. Avant que le Responsive Design existe, les appareils mobiles n’avaient que la mise en page pour ordinateur a afficher. Pour faire face à cela, ils ont dézoomé pour pouvoir voir l’intégralité du site pour ordinateur, laissant le soin à l’usager de zoomer pour meiux lire le contenu du site.
Ce comportement par défaut empêchera les appareils mobiles d’utiliser notre feuille de style mobile, ce qui n’est évidemment pas terrible. Pour le désactiver, ajoutez l’élément suivant à la balise <head> de notre document. Tout comme <meta charset='UTF-8'/>, c’est un élément très important qui devrait être sur chaque page Web que vous créez:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>Responsive Design</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<div class='section menu'></div>
<div class='section header'>
<img src='images/header.svg'/>
</div>
<div class='section content'>
<img src='images/content.svg'/>
</div>
<div class='section sign-up'>
<img src='images/sign-up.svg'/>
</div>
<div class='section feature-1'>
<img src='images/feature.svg'/>
</div>
<div class='section feature-2'>
<img src='images/feature.svg'/>
</div>
<div class='section feature-3'>
<img src='images/feature.svg'/>
</div>
</div>
</body>
</html>Pour voir cela en action, nous devrons simuler un appareil mobile dans notre navigateur de bureau. Ouvrez responsive.html dans Google Chrome, puis cliquez sur Afficher> Développeur> Outils de développement dans la barre de menus. Ensuite, pour simuler un appareil mobile, cliquez sur l’icône Toggle Device Toolbar , mise en évidence ci-dessous.
Résumé
Believe it or not, that’s actually all you need to know to create responsive websites. If we boil it down, we’re really only concerned with three things: Croyez-le ou non, c’est en fait tout ce que vous devez savoir pour créer des sites Web Responsive. En résumé, il y a trois choses essentielles:
- Le responsive design (les maquettes pour chaque mise en page)
- Les règles CSS pour la mise en œuvre de chacune de ces mises en page
- Les Media queries pour l’application conditionnelle de ces règles CSS
Nous avons commencé ce chapitre en apprenant la différence entre la disposition fluides et les dispositions à largeur fixe. Ensuite, nous avons utilisé une approche « mobile-first » pour créer la base de notre feuille de style que nous avons complété avec des media queries pour stylisé notre site web pour les tablettes et les écrans d’ordinateur de bureau. Enfin, nous avons désactivé le comportement par défaut du zoom de la fenêtre des appareils mobiles.
Donc, c’était la partie facile du Responsive Design. Dans le prochain chapitre, nous découvrirons la partie difficile: la gestion des images.