Le responsive web design, c’est quoi ?
Mai 2010, Ethan Marcotte, un webdesigner reconnu, fournit une des premières définitions les plus complètes du responsive web design. Le responsive web design englobe les techniques qui permettent de proposer des contenus auto-adaptables. C’est en fonction des interfaces (portable, tablette, pc) utilisées par le visiteur à l’aide de grilles flexibles, d’images fluides et de media queries que ce fait le responsive. Il s’agit d’adapter le site à toutes les résolutions. Les blocs de contenus se redimensionnent et se réorganisent en fonction de l’espace disponible sur l’écran.
L’augmentation de l’utilisation des appareils mobiles à rendu le responsive indispensable.
Une page web peut se redimensionner en fonction de la taille de l’écran utilisé. L’organisation du contenu peut être également automatiquement adaptée.
Par exemple, un contenu visible en trois colonnes, affichera une présentation en une colonne sur l’écran d’un téléphone.
Le CSS3 a rendu possible le Responsive Web Design
C’est l’arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style) qui a permis au responsive de se développer. Les sites responsives sont en général construits comme ceci :
📌 Une seule base de code HTML identique pour tous les supports.
🎈 Un système de grilles fluides où se placent les contenus de la page.
📌 Une utilisation des CSS3 Media Queries pour appliquer la feuille de style adéquate.
🎈Des images flexibles/adaptatives dont la résolution s’ajuste automatiquement.
L’interface du site web est donc lisible et utilisable sur tous les appareils. Il est aussi possible de cacher un contenu.
Par exemple, la barre de navigation peut n’être visible que sur le site web en mode ordinateur et tablette. Puis absente (ou en burger menu) pour un affichage sur mobile.
La distinction entre les sites web responsives, statiques, fluides et adaptatifs
🌟 Un design statique/fixe : se réfère à des dimensions figées, quelle que soit la surface de l’écran.
🌟 Une structure fluide/liquide : toutes les largeurs de colonnes sont exprimées en unités variables (pourcentages, em, etc.) et qui s’adapte généralement automatiquement à la taille de fenêtre. Elle comporte quelques limitations.
🌟 Une construction adaptative : amélioration du design statique, les unités de largeur sont fixes, mais différentes selon la taille de l’écran, qui est détectée via CSS3 Media Queries.
🌟 Un design responsive : amélioration du design liquide associé à des méthodes CSS3 Media Queries permettant de modifier la réorganisation de la page selon certains critères, pour s’adapter complètement à la taille d’écran.
Les avantages du responsive web design
🚀 Site unique : un seul site Web à mettre à jour, les changements seront automatiques sur la seconde plateforme.
😀 Amélioration de l’expérience utilisateur : améliorer l’utilisabilité de votre site web, vos visiteurs seront plus enclins à rester et vous éviterez ainsi les taux de rebond.
☑️ Optimisation du référencement : les sites responsive ont une seule URL quel que soit l’appareil. C’est ce qui permet à Google d’indexer votre site Web plus efficacement sans que le contenu soit dupliqué.
🎯 Génère plus de trafic : l’accès à Internet est permanent. Cette tendance est à la hausse avec l’émergence d’une vaste gamme d’appareils mobiles.
✒️ Contenu homogène : consiste à fournir une expérience utilisateur cohérente entre l’accès mobile et desktop.
Les inconvénients du responsive web design
🚩 Risque de chargement plus long
Le contenu est identique au site desktop, les appareils mobiles chargent donc le code HTML. Si le temps de chargement excède 3 secondes plus de 40% de vos internautes quitteront la page.
🚩 Dépendance à la qualité de la connexion
Une mauvaise connexion internet ou un réseau mobile faible ralentiront le temps d’affichage de votre site, augmentant le taux de rebond.
Le lien entre responsive web design et mobile friendly
Les sites mobiles friendly sont des sites dont les contenus sont conçus pour que la navigation et l’affichage soient optimisés sur les appareils mobiles. Ils apportent une expérience utilisateur confortable pour les internautes et sans le responsive web design, la navigation ne serait pas optimale.
Mobile friendly et mobile first
La part d’utilisateurs accédant à internet via un support mobile a dépassé celui des supports bureau. Ce changement affecte les sites internet dans la mesure où Google y met son grain de sel. Maintenant le géant priorise le mobile first dans l’indexation des pages Google.
Le mobile friendly partait du design de bureau pour s’adapter au design mobile. A l’inverse, le mobile first se concentre dans l’élaboration du site mobile avant le site desktop.