Qu'est-ce que le Responsive Design? (Vidéo explicative et infographie)
Il a fallu une décennie pour web design réactif (RWD) pour se généraliser depuis Cameron Adams a présenté pour la première fois le concept en 2010. L'idée était ingénieuse – pourquoi ne pouvons-nous pas concevoir des sites qui s'adaptent à la fenêtre d'affichage de l'appareil sur lequel ils sont visualisés ?
Qu'est-ce que la conception sensible?
La conception Web réactive est une approche de conception qui garantit qu'un site Web offre une expérience de visualisation optimale sur n'importe quel appareil, quelle que soit la taille ou la résolution de l'écran. Cela implique l'utilisation de mises en page flexibles, de mises en page basées sur une grille et de requêtes multimédias pour créer un site qui s'adapte à la taille de l'écran sur lequel il est affiché. Cela signifie qu'un site Web conçu avec une conception Web réactive aura l'air et fonctionnera bien sur un ordinateur de bureau, une tablette ou un smartphone.
En d'autres termes, des éléments tels que des images peuvent être ajustés ainsi que la disposition de ces éléments. Voici une vidéo qui explique ce qu'est le design réactif et pourquoi votre entreprise devrait le mettre en œuvre. Si vous faites développer une nouvelle conception de site ou une nouvelle application Web, la conception Web réactive est un must, pas une option, étant donné que plus de la moitié de tout le trafic Web provient d'appareils mobiles qui ont des largeurs et des hauteurs de fenêtre variables.
La conception réactive est également optimale pour les concepteurs Web, qui n'ont pas à créer des expériences indépendantes uniques en fonction de l'appareil ou de la fenêtre d'affichage. La conception Web réactive peut être réalisée à l'aide de CSS.
Requêtes de fenêtre d'affichage CSS de conception réactive
Voici un exemple de feuille de style qui ajuste la taille de la police en fonction de la fenêtre d'affichage à l'aide d'une requête multimédia :
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
Les navigateurs sont conscients de leur taille et chargent la feuille de style de haut en bas. En interrogeant les styles applicables pour la taille de l'écran, vous pouvez définir des éléments de style spécifiques pour chaque largeur minimale et maximale de l'appareil. Cela ne signifie pas que vous devez concevoir des sites différents pour chaque taille d'écran, il vous suffit de déplacer les éléments nécessaires à l'aide des requêtes multimédias.
Travailler avec une mentalité de mobile d'abord est la norme de base aujourd'hui. Les marques de premier ordre ne se demandent pas seulement si leur site est compatible avec les appareils mobiles, mais aussi l'expérience client complète.
Lucinda Duncalfe, PDG de Monetate
Voici une infographie de Monetate illustrant les avantages potentiels de la création d'un design réactif pour plusieurs appareils :
Votre site est-il réactif ?
Un moyen simple de voir si votre site est réactif consiste simplement à agrandir ou à réduire la fenêtre de votre navigateur pour voir si les éléments se déplacent en fonction de la largeur du navigateur.
Pour plus de précision, pointez votre Google Chrome navigateur à votre site. Sélectionner Afficher> Développeur> Outils de développement du menu. Cela chargera un tas d'outils dans un panneau ou une nouvelle fenêtre. Cliquez sur la petite icône à gauche de la barre de menus des outils de développement qui ressemble à une icône de mobile et de tablette. Vous pouvez sélectionner certains appareils standard et même changer si vous souhaitez afficher la page horizontalement ou verticalement.
Vous pouvez utiliser les options de navigation en haut pour changer la vue de paysage en portrait, ou même sélectionner n'importe quel nombre de tailles de fenêtre préprogrammées. Vous devrez peut-être recharger la page, mais c'est l'outil le plus cool au monde pour vérifier vos paramètres de réactivité et vous assurer que votre site a fière allure sur tous les appareils!