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 les ordinateurs de bureau et les appareils mobiles. Avec un site réactif, votre ordinateur 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 ?
< p>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 distincts, 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 des petits téléphones, des 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 de howtogeek.com. Sur le bureau, il comporte un en-tête avec un logo, des catégories principales, des boutons de réseaux 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 prend qu'environ 1 000 pixels (car une mise à l'échelle trop importante semblerait étrange). Dans l'ensemble, il y a beaucoup de place pour travailler, donc le site est le meilleur ici.
< /p>
Réduisez un peu l'écran à la taille d'une tablette, et il n'y a pas autant d'espace. Le texte se décompose différemment, les images sont réduites ou rognées et les catégories principales disparaissent.
Les zones d'article conservent la mise en page mais au prix de lignes de texte supplémentaires. L'article de première page est cependant plus important et conservera son rapport hauteur/largeur et sa taille réduite sans recadrage.
Et sur les 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 hamburger menu et les boîtes d'articles sont disposées dans une colonne. Cette colonne occupera toujours toute la largeur de l'appareil (moins 20px de chaque côté pour le rembourrage).
Vous pouvez tester cela par vous-même pour voir comment votre site évolue. Ouvrez les outils de développement de Chrome en cliquant avec le bouton droit n'importe où 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 “Responsive” 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 pixel manuellement. 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 bug avec les pages mobiles et la fenêtre d'affichage. Sans cette balise méta dans l'en-tête de votre HTML, votre page mobile pourrait être réduite et ne pas s'afficher correctement. Cela peut déjà être défini, car il s'agit d'un élément de passe-partout assez courant, mais si ce n'est pas le cas, ajoutez-le :
<meta content=”width=device-width, initial -scale=1″ name=”viewport” />
Le principal moyen de rendre les sites réactifs consiste à utiliser l'affichage magique : la propriété flex, également connue sous le nom de 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 configurer pour afficher : flex:
.container { display: flex; }
Ensuite, définissez le paramètre flex de tous les enfants :
.child { flex: 1; } Publicité
Cela entraînera l'expansion des enfants et l'occupation d'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 plutôt 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. Ils atteindront cependant un point où ils ne peuvent pas réduire la taille de leur contenu, mais vous pouvez les faire s'enrouler sur une autre ligne (comme du texte) avec un enroulement flexible sur le conteneur.
.container { flex-wrap: wrap; }
Maintenant, vous n'aurez plus jamais de problème avec le contenu de votre site hors écran ou si compressé qu'il 8217;s illisible.
Les requêtes média sont un autre élément de la technologie CSS derrière la conception réactive. Les requêtes multimédias ressemblent à des instructions CSS If qui vous permettent de vérifier une valeur avant d'appliquer des CSS. Vous pouvez l'utiliser pour styliser dynamiquement les composants en fonction de la largeur du navigateur. Par exemple, si vous aviez une barre de menus supérieure que vous vouliez masquer sur mobile et remplacer par un menu hamburger, vous pouvez la masquer avec une requête @media :
.topmenu { display : block } @media screen et (max -width : 600px) { .topmenu { display : aucun ; } }
600px n'est qu'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.
Publicité
Il y a beaucoup plus de responsive design que ce que nous pouvons couvrir ici, donc si vous souhaitez en savoir plus sur le CSS qui le sous-tend, vous pouvez lire cet excellent guide de flexbox de CSS Tricks, ou lire la documentation W3Schools pour les requêtes multimédias.
Comment rendre mon site responsive ?
Si vous ne voulez pas passer du temps à refaire votre site en pensant à flexbox, 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 les 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 souhaitez le coder vous-même, mais que vous ne voulez pas tout faire à 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 utilisateur utiles). Avec Bootstrap, vous spécifiez des conteneurs avec la classe de ligne, puis spécifiez la taille de colonne avec des classes telles que 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 ajoutera un point d'arrêt de requête multimédia pour le transformer en une colonne pleine largeur sur mobile :
<div class=”row”> <div class=”col-md-4 col-sm-12″> //contenu </div> <div class=”col-md-4 col-sm-12″> //contenu </div> <div class=”col-md-4 col-sm-12″> //contenu </div> </div>
Les tailles sont mesurées sur 12, donc col-md-4 définira la largeur du div à 33 % sur la taille moyenne (“md”) et col-sm-12 la définira à 100 % de la largeur 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 permettre de démarrer très rapidement et pour vous débarrasser du temps passé à jouer avec HTML et CSS standard (d'où le nom).