Qu'est-ce que la «conception réactive» et comment l'utilisez-vous?

La conception réactive est l'idée de donner à votre site Web une belle apparence quelle que soit la résolution, pas seulement sur ordinateur et mobile. Avec un site réactif, votre site de bureau et votre site mobile sont sur la même page et évoluent avec la taille de la fenêtre.

Qu'est-ce que le Responsive Design?

La conception réactive permet à votre site de se redimensionner pour s'adapter à n'importe quel écran. Plutôt que de concevoir autour d'une mise en page spécifique ou de concevoir un site mobile et un site de bureau distinct, votre site doit s'adapter à n'importe quel appareil. Dans le monde réel, les gens utiliseront votre site de toutes sortes de manières différentes; il existe de petits téléphones, de gros téléphones, des tablettes, des tablettes en mode paysage, des netbooks, des ordinateurs portables et des iMac 5K.

Jetez un œil à la page d'accueil howtogeek.com. Sur le bureau, il comporte un en-tête avec un logo, des catégories principales, des boutons de médias sociaux et enfin un menu hamburger avec des catégories étendues. Les boîtes d'articles sont disposées dans une grille qui s'adapte à la taille de l'écran mais ne prendra jamais qu'environ 1000 pixels (car une trop grande mise à l'échelle aurait l'air bizarre). Dans l'ensemble, il y a beaucoup de place pour travailler, donc le site est le meilleur ici.

Réduisez un peu l'écran à la taille de la tablette et il n'y a pas autant d'espace. Le texte se brise différemment, les images sont réduites ou recadrées et les catégories principales disparaissent.

Les boîtes d'article conservent la mise en page, mais au prix d'avoir des lignes de texte supplémentaires. L'article de première page est cependant plus important et conservera son rapport hauteur / largeur et sa réduction sans recadrage.

Et sur de très petits appareils, vous ne pouvez pas vraiment vous permettre d'avoir tous ces boutons dans le menu, et il n'y a pas assez de place pour placer les boîtes d'articles les unes à côté des autres, donc le menu est réduit en un menu hamburger et les boîtes d'articles sont disposés dans une colonne. Cette colonne occupera toujours toute la largeur de l'appareil (moins 20 pixels de chaque côté pour le remplissage).

Vous pouvez tester cela par vous-même pour voir comment votre site évolue. Ouvrez les outils de développement de Chrome en cliquant n'importe où avec le bouton droit de la souris et en sélectionnant «Inspecter». Appuyez sur le bouton des appareils mobiles dans le coin supérieur droit du volet qui s'affiche, puis sélectionnez «Réactif» comme type d'appareil:

Vous pouvez saisir les poignées sur le bord de votre site pour ajuster la taille, ou vous pouvez entrer des valeurs de pixels manuelles. Vous pouvez également prévisualiser à quoi cela ressemblera sur les résolutions mobiles populaires (bien que vous devriez toujours tester sur un appareil réel).

Comment fonctionne la conception réactive?

Avant de faire une conception réactive, vous devez corriger un bogue avec les pages mobiles et la fenêtre d'affichage. Sans cela meta dans l'en-tête de votre HTML, votre page mobile peut être réduite et ne pas s'afficher correctement. Cela est peut-être déjà défini, car il s'agit d'un élément standard assez courant, mais si ce n'est pas le cas, ajoutez-le:

Le principal moyen de rendre les sites réactifs est d'utiliser la magie display: flex propriété, également appelée flexbox. Flexbox fonctionne en ajustant la taille des éléments dans un conteneur à l'échelle avec une taille de fenêtre changeante. Vous commencez par créer un conteneur et le définir sur display: flex:

.container {
   display: flex;
}

Et puis, réglez le flex paramètre de tous les enfants:

.child {
  flex: 1;
}

Cela amènera les enfants à se développer et à prendre autant d'espace que le conteneur le permet. Par exemple, si vous aviez deux enfants, chacun occuperait 50% de l'espace:

Si vous définissez à la place le deuxième enfant sur flex: 2, il prendrait deux fois plus d'espace que l'autre (66% au total).

Lorsque l'écran rétrécit, les enfants rétrécissent avec lui. Ils atteindront un point où ils ne pourront pas réduire plus petit que la taille de leur contenu, mais vous pouvez les faire revenir sur une autre ligne (comme du texte) avec flex-wrap sur le conteneur.

.container {
  flex-wrap: wrap;
}

Désormais, vous ne rencontrerez plus jamais de problème de voir le contenu de votre site hors de l’écran ou à un point tel qu’il est illisible.

Les requêtes multimédias sont un autre élément de la technologie CSS derrière la conception réactive. Les requêtes multimédias sont comme CSS If instructions qui vous permettent de vérifier une valeur avant d'appliquer du CSS. Vous pouvez l'utiliser pour appliquer un style dynamique aux composants en fonction de la largeur du navigateur. Par exemple, si vous aviez une barre de menus supérieure que vous vouliez masquer sur le mobile et la remplacer par un menu hamburger, vous pouvez la masquer avec un @media requete:

.topmenu {
  display: block
}

@media screen and (max-width: 600px) {
  .topmenu {
    display: none;
  }
}

600px est simplement une valeur arbitraire utilisée pour définir les limites de la plupart des appareils mobiles, mais vous pouvez avoir de nombreux points d'arrêt qui modifient le style. Vous pouvez les utiliser en combinaison avec flexbox pour modifier les propriétés flex en fonction de la taille de l'appareil; par exemple, une utilisation courante consiste à afficher des listes horizontales verticalement et alignées au centre, pour une lisibilité plus facile sur mobile.

Il y a beaucoup plus de responsive design que nous ne pouvons en couvrir ici, donc si vous souhaitez en savoir plus sur le CSS sous-jacent, vous pouvez lire cet excellent guide de flexbox à partir de CSS Tricks, ou lire la documentation W3Schools pour les requêtes multimédias.

Comment rendre mon site réactif?

Si vous ne voulez pas passer du temps à refaire votre site avec flexbox à l'esprit, il existe de nombreux modèles de site réactifs que vous pouvez utiliser comme base, y compris de nombreux modèles gratuits. De nombreux modèles que vous pouvez utiliser avec des fournisseurs d'hébergement géré (GoDaddy, SquareSpace, Wix, etc.) seront réactifs prêts à l'emploi. Underscores est un excellent modèle de démarrage gratuit pour WordPress.

Si vous voulez le coder vous-même, mais que vous ne voulez pas le faire tout à la main, il existe de nombreuses bibliothèques tierces pour travailler avec flexbox. Le plus populaire d'entre eux est Bootstrap, qui ajoute des classes faciles à utiliser pour travailler avec flexbox (ainsi que de nombreux autres éléments d'interface utiles). Avec Bootstrap, vous spécifiez des conteneurs avec le row classe, puis spécifiez la taille de la colonne avec des classes comme col-md-6, et le CSS est géré pour vous. Par exemple, le code suivant organisera chaque div en une ligne de trois sur le bureau et ajoutez un point d'arrêt de requête multimédia pour le transformer en une colonne pleine largeur sur mobile:

 
 //content 
 
 //content 
 
 //content 

Les tailles sont mesurées sur 12, donc col-md-4 définira le div à 33% de largeur sur une taille moyenne ("md") et col-sm-12 le définira sur une largeur de 100% sur les petits appareils ("sm").

Bootstrap propose également une tonne de thèmes et de modèles pour commencer. Il est conçu pour vous faire décoller très rapidement et vous débarrasser du temps passé à jouer avec HTML et CSS standard (d’où le nom).