Responsive design

Cet atelier de programmation fait partie du cours de formation "Développer des progressive web apps", développé par l'équipe de formation Google Developers. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre.

Pour en savoir plus sur le cours, consultez la présentation du développement de progressive web apps.

Introduction

Cet atelier vous montre comment mettre en forme le contenu de votre site Web pour le rendre responsive.

Points abordés

  • Styliser votre application pour qu'elle fonctionne bien sur plusieurs facteurs de forme
  • Utiliser Flexbox pour organiser facilement votre contenu en colonnes
  • Utiliser des requêtes média pour réorganiser votre contenu en fonction de la taille de l'écran

À savoir

  • HTML et CSS de base

Ce dont vous avez besoin

  • Un ordinateur avec accès au terminal/shell
  • Connexion à Internet
  • Éditeur de texte

Téléchargez ou clonez le dépôt pwa-training-labs depuis GitHub et installez la version LTS de Node.js, si nécessaire.

Si vous n'avez pas de serveur de développement local préféré, installez le package Node.js http-server :

npm install http-server -g

Accédez au répertoire responsive-design-lab/app/ et démarrez le serveur :

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Vous pouvez arrêter le serveur à tout moment avec Ctrl-c.

Ouvrez votre navigateur et accédez à localhost:8080/.

Remarque : Annulez l'enregistrement de tous les service workers et effacez tous les caches de service workers pour localhost afin qu'ils n'interfèrent pas avec l'atelier. Dans les outils pour les développeurs Chrome, vous pouvez y parvenir en cliquant sur Effacer les données du site dans la section Effacer le stockage de l'onglet Application.

Si vous disposez d'un éditeur de texte qui vous permet d'ouvrir un projet, ouvrez le dossier responsive-design-lab/app/. Cela vous permettra de rester organisé. Sinon, ouvrez le dossier dans le système de fichiers de votre ordinateur. Le dossier app/ est celui dans lequel vous allez créer l'atelier.

Ce dossier contient :

  • index.html est la page HTML principale de notre exemple de site/application.
  • modernizr-custom.js est un outil de détection de fonctionnalités qui simplifie les tests de compatibilité Flexbox.
  • styles/main.css est la feuille de style en cascade du site exemple.

Revenez à l'application dans le navigateur. Essayez de réduire la largeur de la fenêtre à moins de 500 px et notez que le contenu ne répond pas bien.

Ouvrez les outils pour les développeurs et activez le mode Appareil dans votre navigateur. Ce mode simule le comportement de votre application sur un appareil mobile. Notez que la page est réduite pour que le contenu à largeur fixe s'affiche à l'écran. Cette expérience n'est pas idéale, car le contenu sera probablement trop petit pour la plupart des utilisateurs, qui devront faire un zoom avant et arrière.

Remplacez TODO 3 dans index.html par la balise suivante : 

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

Enregistrez le fichier. Actualisez la page dans le navigateur et vérifiez-la en mode appareil. Notez que la page n'est plus dézoomée et que l'échelle du contenu correspond à celle d'un ordinateur. Si le contenu se comporte de manière inattendue dans l'émulateur d'appareil, activez et désactivez le mode appareil pour le réinitialiser.

Remarque : L'émulation d'appareil vous donne une idée assez précise de l'apparence de votre site sur un appareil mobile, mais pour obtenir une image complète, vous devez toujours tester votre site sur de vrais appareils. Pour en savoir plus sur le débogage des appareils Android sur Chrome et Firefox, consultez les ressources correspondantes.

Explication

Une balise viewport Meta indique au navigateur comment contrôler les dimensions et l'échelle de la page. La propriété width contrôle la taille de la fenêtre d'affichage. Elle peut être définie sur un nombre de pixels spécifique (par exemple, width=500) ou sur la valeur spéciale device-width,, qui correspond à la largeur de l'écran en pixels CSS à une échelle de 100 %. (Il existe des valeurs height et device-height correspondantes, qui peuvent être utiles pour les pages dont les éléments changent de taille ou de position en fonction de la hauteur de la fenêtre d'affichage.)

La propriété "initial-scale" contrôle le niveau de zoom lorsque la page est chargée pour la première fois. Définir une échelle initiale améliore l'expérience, mais le contenu déborde toujours de l'écran. Nous allons résoudre ce problème à l'étape suivante.

Pour en savoir plus

Remplacez TODO 4 dans styles/main.css par le code suivant :

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Enregistrez le fichier. Désactivez le mode Appareil dans le navigateur et actualisez la page. Essayez de réduire la largeur de la fenêtre. Notez que le contenu passe à une mise en page à une seule colonne à la largeur spécifiée. Réactivez le mode Appareil et observez que le contenu s'adapte à la largeur de l'appareil.

Explication

Pour nous assurer que le texte est lisible, nous utilisons une requête média lorsque la largeur du navigateur atteint 48 rem (768 pixels à la taille de police par défaut du navigateur ou 48 fois la taille de police par défaut dans le navigateur de l'utilisateur). Pour en savoir plus sur les raisons pour lesquelles rem est un bon choix pour les unités relatives, consultez Quand utiliser em ou rem. Lorsque la requête média est déclenchée, nous passons d'une mise en page à trois colonnes à une mise en page à une colonne en modifiant la width de chacun des trois div pour remplir la page.

Le module de mise en page Flexible Box (Flexbox) est un outil utile et facile à utiliser pour rendre votre contenu responsive. Flexbox nous permet d'obtenir le même résultat que dans les étapes précédentes, mais il s'occupe de tous les calculs d'espacement pour nous et fournit un ensemble de propriétés CSS prêtes à l'emploi pour structurer le contenu.

Mettre en commentaire les règles CSS existantes

Mettez en commentaire toutes les règles de styles/main.css en les encadrant avec /* et */. Nous en ferons nos règles de remplacement lorsque Flexbox ne sera pas pris en charge dans la section "Flexbox en tant qu'amélioration progressive".

Ajouter une mise en page Flexbox

Remplacez TODO 5.2 dans styles/main.css par le code suivant :

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Enregistrez le code et actualisez index.html dans votre navigateur. Désactivez le mode Appareil dans le navigateur et actualisez la page. Si vous réduisez la largeur de la fenêtre de votre navigateur, les colonnes se rétrécissent jusqu'à ce qu'il n'en reste plus qu'une. Nous allons résoudre ce problème avec des requêtes média dans le prochain exercice.

Explication

La première règle définit container div comme conteneur Flex. Cela permet un contexte Flex pour tous ses enfants directs. Nous combinons l'ancienne et la nouvelle syntaxe pour inclure Flexbox afin d'obtenir une compatibilité plus large (pour en savoir plus, consultez Pour en savoir plus).

La deuxième règle utilise la classe .col pour créer des enfants flex de même largeur. Définir le premier argument de la propriété flex sur 1 pour tous les div de la classe col divise l'espace restant de manière égale entre eux. C'est plus pratique que de calculer et de définir nous-mêmes la largeur relative.

Pour en savoir plus

Facultatif : Définir différentes largeurs relatives

Utilisez la pseudo-classe nth-child pour définir les largeurs relatives des deux premières colonnes sur 1 et celle de la troisième sur 1,5. Vous devez utiliser la propriété flex pour définir la largeur relative de chaque colonne. Par exemple, le sélecteur de la première colonne se présenterait comme suit :

.container .col:nth-child(1)

Utiliser des requêtes média avec Flexbox

Remplacez TODO 5.4 dans styles/main.css par le code ci-dessous :

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Enregistrez le code et actualisez index.html dans votre navigateur. Si vous réduisez la largeur du navigateur, le contenu se réorganise en une seule colonne.

Explication

Lorsque la requête média est déclenchée, nous passons d'une mise en page à trois colonnes à une mise en page à une colonne en définissant la propriété flex-flow sur column. Cela permet d'obtenir le même résultat que la requête média que nous avons ajoutée à l'étape 5. Flexbox fournit de nombreuses autres propriétés, comme flex-flow, qui vous permettent de structurer, de réorganiser et de justifier facilement votre contenu afin qu'il réponde bien à n'importe quel contexte.

Comme Flexbox est une technologie relativement nouvelle, nous devons inclure des solutions de remplacement dans notre CSS.

Ajouter Modernizr

Modernizr est un outil de détection de fonctionnalités qui simplifie les tests de compatibilité avec Flexbox.

Remplacez TODO 6.1 dans index.html par le code permettant d'inclure la version Modernizr personnalisée :

<script src="modernizr-custom.js"></script>

Explication

Nous incluons une compilation Modernizr en haut de index.html, qui teste la compatibilité avec Flexbox. Cela exécute le test au chargement de la page et ajoute la classe flexbox à l'élément <html> si le navigateur est compatible avec Flexbox. Sinon, il ajoute une classe no-flexbox à l'élément <html>. Dans la section suivante, nous ajouterons ces classes au CSS.

Remarque : Si nous utilisions la propriété flex-wrap de Flexbox, nous devrions ajouter un détecteur Modernizr distinct pour cette fonctionnalité. Les anciennes versions de certains navigateurs sont partiellement compatibles avec Flexbox et n'incluent pas cette fonctionnalité.

Utiliser Flexbox de manière progressive

Utilisons les classes flexbox et no-flexbox dans le CSS pour fournir des règles de secours lorsque Flexbox n'est pas pris en charge.

Dans styles/main.css, ajoutez .no-flexbox devant chaque règle que nous avons mise en commentaire :

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

Dans le même fichier, ajoutez .flexbox devant le reste des règles :

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

N'oubliez pas d'ajouter .flexbox aux règles des colonnes individuelles si vous avez effectué l'étape 5.3 facultative.

Enregistrez le code et actualisez index.html dans le navigateur. La page devrait ressembler à ce qu'elle était auparavant, mais elle fonctionne désormais correctement dans n'importe quel navigateur et sur n'importe quel appareil. Si vous disposez d'un navigateur qui n'est pas compatible avec Flexbox, vous pouvez tester les règles de remplacement en ouvrant index.html dans ce navigateur.

Pour en savoir plus

Vous avez appris à styliser votre contenu pour le rendre responsive. À l'aide de requêtes média, vous pouvez modifier la mise en page de votre contenu en fonction de la taille de la fenêtre ou de l'écran de l'appareil de l'utilisateur.

Points abordés

  • Définir la fenêtre d'affichage visuelle
  • Flexbox
  • Requêtes média

Ressources

En savoir plus sur les principes de base du responsive design

En savoir plus sur Flexbox en tant qu'amélioration progressive

En savoir plus sur les bibliothèques pour les CSS responsifs

En savoir plus sur l'utilisation des requêtes média

Pour voir tous les ateliers de programmation du cours de formation sur les PWA, consultez l'atelier de programmation de bienvenue.