Marketing de ContenuVidéos marketing et ventesInfographie marketingMarketing mobile et tablette

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 :

Infographie de conception Web réactive

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.

  • outils de développement chrome tablette réactive
  • outils de développement chrome horizontal mobile réactif
  • outils de développement chrome responsive mobile
  • outils de développement chrome bureau réactif

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!

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.