Site web responsive
Un site responsive utilise des grilles fluides, des images flexibles et des requêtes média CSS pour qu'une page s'adapte à toutes les tailles d'écran.
Qu’est-ce qu’un site web responsive ?
Un site web responsive (ou adaptatif) propose le même code HTML sur tous les appareils et adapte sa mise en page à l’aide de grilles fluides, d’images extensibles et de requêtes média CSS (media queries). Contrairement à un site mobile distinct (m-dot), le contenu se repositionne de manière dynamique pour adapter les colonnes, les polices et la navigation à la largeur de l’écran. La base de cette configuration est la balise <meta name="viewport" content="width=device-width, initial-scale=1"> placée dans l’en-tête <head> de la page — sans elle, les navigateurs mobiles affichent la page dans sa largeur de bureau et ignorent vos requêtes média.
Pourquoi un site web responsive est-il important ?
Google utilise l’indexation mobile-first, ce qui signifie que c’est la version mobile de votre page qui est explorée, indexée et utilisée pour le classement. Une configuration responsive avec une seule URL et un seul code HTML est également l’approche recommandée par Google, car elle est plus facile à maintenir et évite les erreurs SEO qu’introduisent souvent les sites mobiles distincts. Pour une boutique en ligne, c’est aussi une question de pure conversion : la majorité du trafic provenant des mobiles, une page produit étriquée ou un processus de paiement inadapté à l’écran nuisent directement aux ventes.
Cas d’utilisation courants
- Pages produits sur mobile : s’assurer que les images, le prix et le bouton « Ajouter au panier » sont lisibles et cliquables sans zoomer.
- Dimensions réservées : définir une largeur/hauteur ou un ratio d’aspect sur les images et les bannières afin d’éviter les décalages de mise en page qui nuisent au CLS.
- Priorité au contenu au-dessus de la ligne de flottaison : les contenus les plus importants doivent être visibles sur petit écran sans avoir à faire défiler la page.
- Tests multi-appareils : vérifier le comportement du thème sur téléphone, tablette et ordinateur avant chaque modification importante.
Perspective Shopify
Les thèmes Online Store 2.0 de Shopify, comme Dawn, sont conçus pour être responsives et adaptés aux mobiles dès le départ, mais les personnalisations et les applications tierces peuvent compromettre cela. Les fenêtres pop-up, les barres collantes (sticky) et les scripts tiers sont les perturbateurs les plus fréquents sur mobile. Testez vos modifications dans la vue par appareil de l’éditeur de thème ainsi que sur un vrai téléphone, et suivez les signaux Web essentiels (Core Web Vitals) dans la Search Console, plutôt que de supposer que le thème gère tout de manière automatique.