Formation Webdesigner > Blog > Créer un site internet > Que veut dire "Responsive" ?
Qu'est-ce que le Responsive Design ?
Le Responsive Design fait référence à la conception d'interface utilisateur graphique (GUI) qui s'adapte en à différentes tailles d'écran. Les concepteurs l'appliquent dans les interfaces graphiques telles que les pages Web qui doivent fonctionner sur des appareils de différentes tailles(PC Tablette Smartphone).
Les Responsive Designs répondent aux changements de taille d'écran en ajustant le placement des éléments de conception pour s'adapter de manière optimale à l'espace disponible, une qualité liquide offrant une polyvalence.
La technique de conception responsive est similaire à la conception adaptative, qui s'adapte également aux différentes tailles d'écran. La différence est que le contenu se déplace de manière dynamique dans le design responsive alors qu'il est fixe dans les tailles de mise en page dans le design adaptatif.
Un design responsive n'a donc qu'une seule mise en page, qui se redimensionne et se déplace en fonction de la taille de l'écran. Alors qu’un design adaptatif, utilise plusieurs mises en page fixes qui ne se redimensionnent pas. Le site Web choisira la mise en page la plus optimale pour la taille de l'écran et non en fonction du terminal utilisé.
Vu que la navigation sur smartphone est plus importante que celle sur PC, le design responsive se conçoit normalement en utilisant le principe «mobile first».
C'est-à-dire que les concepteurs définissent l'expérience sur les plates-formes mobiles telles que les smartphones et les tablettes, puis l'adaptent à des écrans plus grands.
L'avantage de la conception responsive est qu'elle permet la création d'interfaces graphiques pour plusieurs tailles d'écran sans avoir à concevoir chaque interface graphique séparément. Un inconvénient est que le concepteur n'a pas un contrôle complet sur la façon dont l'interface graphique apparaît sur les différentes tailles d'écran.
Cela est particulièrement problématique pour les conceptions complexes qui peuvent ne pas se traduire de manière transparente sur toutes les tailles d'écran. Un autre inconvénient de la conception responsive est qu'elle nécessite un code plus compliqué.Elle doit pouvoir mettre à l'échelle le contenu en fonction de la taille de l'écran de manière dynamique et correcte.
Ainsi, la nature architecturale de la conception responsive nécessite une réflexion approfondie au départ. D'autant plus que la cohérence des pages Web est vitale pour la reconnaissance de la marque et la préservation de l’expérience utilisateur.
La différence entre le Design Adaptatif et le Design Responsive
Les différences entre les approches de conception adaptative et responsive mettent en évidence des options importantes pour les concepteurs de sites Web et d'applications. Choisir avec perspicacité peut vous permettre de planifier et d'exécuter vos conceptions avec de meilleurs objectifs, objectifs et résultats.
Avec l'omniprésence et la diversité des appareils mobiles, le concepteurs, doivent répondre à la variété des tailles d'écran. C'est un défi auquel chaque concepteur de sites Web et d'applications est actuellement confronté. De l’écran géant publicitaire en passant par l’écran d’ordinateur de bureau, à la montre connectée, il existe aujourd'hui un grand nombre de façons pour les utilisateurs d'accéder aux informations en ligne.
Les concepteurs qui cherchent à combler l'écart entre les appareils ont deux options pour leurs conceptions: le site adaptatif ou le site responsive (réactif en français).
Il existe une certaine confusion quant à la différence entre le design responsive et le design adaptatif. Les limites peuvent sembler floues à ceux qui n'ont aucune expérience de l'un ou l'autre style de design, mais il y a des différences claires lorsque vous regardez de plus près les deux.
Responsive Design
Le terme Responsive Design a été inventé pour la première fois par le concepteur et développeur Web Ethan Marcotte dans son livre, Responsive Web Design. Les design responsives répondent aux changements de largeur du navigateur en ajustant le placement des éléments de conception pour s'adapter à l'espace disponible.
Un site en responsive design affiche un contenu basé sur l'espace de navigation disponible. Si vous ouvrez un site responsive sur le bureau, puis modifiez la taille de la fenêtre du navigateur, le contenu se déplacera dynamiquement pour s'organiser de manière optimale. Sur les téléphones portables, ce processus est automatique; le site vérifie l'espace disponible et se présente ensuite dans la disposition idéale.
Le design responsive est simple. Parce qu'il est fluide, cela signifie que les utilisateurs peuvent accéder à votre site web en ligne et en profiter autant sur leur appareils portables que sur un écran de grande taille de bureau. Pour que cela soit possible, le responsive design nécessite une très bonne conception du site et une connaissance approfondie des besoins et désirs des utilisateurs finaux.
Conception en Responsive Design
La conception de sites Web adaptatifs a été introduite en 2011 par le concepteur Web Aaron Gustafson dans son livre, Conception de sites Web responsives : créer des expériences riches avec une amélioration progressive.
Lorsque le design responsive repose sur la modification du modèle de conception pour l'adapter à la taille d’écran disponible, la conception adaptative a plusieurs tailles de disposition fixes. Lorsque le site détecte l'espace disponible, il sélectionne la disposition la plus appropriée pour l'écran. Ainsi, lorsque vous ouvrez un navigateur sur le bureau, le site choisit la meilleure disposition pour cet écran de bureau; le redimensionnement du navigateur n'a aucun impact sur la conception.
Certains sites ont rapidement adopté le design responsive. Amazon, Apple, et Cdiscount par exemple se sont configurés pour être des sites Web optimisés pour les mobiles dès le début. Notez que la mise en page affichée sur un site Web mobile utilisant un design responsive peut être différente de la version du bureau. Cependant, c'est parce que les concepteurs ont choisi une disposition différente pour l'écran du téléphone plutôt que de supprimer le design pour essayer de réorganiser le contenu.
En design adaptatif, on développe six design pour les six largeurs d'écran les plus courantes (320, 480, 760, 960, 1200 et 1600 pixels)
Conception mobile autonome
Il existe également la possibilité de créer un site Web uniquement mobile (ceux-ci sont généralement indiqués dans la barre d'URL d'un navigateur à l'aide du préfixe «m»). Cette option était autrefois une excellente approche. Les concepteurs créeraient des sites pour les appareils mobiles, en accordant les éléments et la mise en page pour un format dédié. Google a fourni des classements des moteurs de recherche aux sites mobiles, mais aujourd'hui, les mêmes préférences sont accordées aux sites adaptatifs et responsives.
Le gros inconvénient de la création séparé est qu'il nécessite une maintenance beaucoup plus importante afin de garder les deux versions d'un site Web homogènes. Depuis quelques années, les versions mobiles de site disparaissent pour les place au design responsive.
Pour en savoir plus :
