Qu'est-ce que le Responsive Design? (Vidéo explicative et infographie)

web design réactif

Il a fallu une décennie pour web design réactif (RWD) se généralise depuis Cameron Adams a présenté pour la première fois le concept. 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 il est visualisé?

Qu'est-ce que la conception sensible?

La conception Web réactive (RWD) est une approche de conception Web visant à créer des sites pour offrir une expérience de visualisation optimale - lecture et navigation faciles avec un minimum de redimensionnement, de panoramique et de défilement - sur une large gamme d'appareils (des téléphones mobiles aux ordinateurs de bureau moniteurs). Un site conçu avec RWD adapte la mise en page à l'environnement de visualisation en utilisant des grilles fluides basées sur des proportions, des images flexibles et des requêtes multimédias CSS3, une extension de la règle @media.

Wikipédia

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 la conception réactive et pourquoi votre entreprise devrait la mettre en œuvre. Nous avons récemment réaménagé le DK New Media site pour être réactif et travaillent maintenant sur Martech Zone Faire la même chose!

La méthodologie de création d'un site responsive est un peu fastidieuse car vous devez avoir une hiérarchie de vos styles qui sont organisés en fonction de la taille de la fenêtre.

Les navigateurs sont conscients de leur taille, ils chargent donc la feuille de style de haut en bas, interrogeant les styles applicables pour la taille de l'écran. Cela ne signifie pas que vous devez concevoir différentes feuilles de style pour chaque écran de taille, il vous suffit de déplacer les éléments nécessaires.

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

Si vous souhaitez voir un site réactif en action, pointez votre Google Chrome navigateur (je crois que Firefox a la même fonctionnalité) pour DK New Media. Maintenant sélectionnez Afficher> Développeur> Outils de développement du menu. Cela chargera un tas d'outils au bas du navigateur. Cliquez sur la petite icône mobile à l'extrême gauche de la barre de menu Developer Tools.

réactif-testing-chrome

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!

3 Commentaires

  1. 1
  2. 2

    Merci beaucoup Douglas pour cet article bien expliqué. Je dois être d'accord avec cela cependant sur le côté contenu des choses. Pour la plupart des sites que nous faisons une mise en page responsive ne suffira pas. Nous avons besoin de contenu réactif. Mais pour les sites Web les plus basiques, nous utiliserons certainement votre article bien documenté sur la façon de gérer cela !

    • 3

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..