Qu'est-ce qu'un site responsive ? Définition simple

Un site responsive, conçu selon le principe du responsive design, adapte sa mise en page à l'écran qui l'affiche. Sur un ordinateur, trois colonnes côte à côte ; sur un smartphone, les mêmes blocs empilés, un menu replié et des boutons faciles à toucher. Le visiteur n'a ni à zoomer ni à faire défiler la page de gauche à droite. Voici comment cela fonctionne et comment vérifier votre site.

Comment fonctionne un site responsive ?

Un site responsive combine trois techniques :

• Une grille fluide. La largeur des blocs est exprimée en proportion de l'écran plutôt qu'en pixels fixes.
• Des images flexibles. Elles se redimensionnent pour ne jamais dépasser leur conteneur, et le navigateur peut charger une version plus légère sur un petit écran.
• Des requêtes média. Ces règles CSS appliquent une mise en page différente selon la largeur de l'écran. Le CSS est le langage qui décrit l'apparence des pages web.

Une balise placée dans l'en-tête de chaque page, la balise meta viewport, indique aux navigateurs mobiles d'utiliser la largeur réelle de l'écran au lieu de simuler un écran d'ordinateur.

Quelle différence avec un site mobile séparé ou une application ?

Pourquoi un site doit-il être responsive ?

• Vos visiteurs utilisent leur téléphone. Une part importante de la navigation se fait sur mobile, souvent pour une consultation rapide avant d'appeler ou de se déplacer.
• Google explore la version mobile. Avec l'indexation mobile first, Google utilise principalement la version mobile d'une page pour l'explorer et la classer. Un contenu absent sur mobile risque de ne pas être pris en compte.
• L'accessibilité en dépend. Une mise en page qui s'adapte permet aussi d'agrandir le texte sans perdre d'information.
• Une seule version à maintenir. Chaque modification s'applique à tous les écrans.

Responsive et mobile first : quelle différence ?

Le responsive décrit un résultat : un site qui s'adapte. Le mobile first, en conception, décrit une méthode : on dessine d'abord la version pour petit écran, en ne gardant que l'essentiel, puis on enrichit la mise en page pour les écrans plus larges. Cette méthode oblige à hiérarchiser les contenus et produit souvent des pages plus claires sur tous les appareils. À ne pas confondre avec l'indexation mobile first de Google, qui désigne la façon dont le moteur explore les sites.

Comment vérifier que votre site est bien responsive ?

1. Testez sur de vrais appareils : un smartphone récent, un plus ancien, une tablette, un grand écran.
2. Utilisez le mode appareil des navigateurs : les outils de développement de Chrome, Firefox ou Safari simulent différentes tailles d'écran.
3. Vérifiez l'absence de défilement horizontal : aucun texte, tableau ou image ne doit dépasser de l'écran.
4. Touchez chaque bouton et chaque lien : ils doivent être assez grands et assez espacés pour être sélectionnés au doigt sans erreur.
5. Remplissez les formulaires sur mobile : le bon clavier doit s'afficher, par exemple le pavé numérique pour un numéro de téléphone.
6. Contrôlez la lisibilité : un texte lisible sans zoom et un contraste suffisant.
7. Mesurez la vitesse avec PageSpeed Insights, qui distingue les résultats sur mobile et sur ordinateur.

Quelles erreurs rencontre-t-on souvent ?

• Des tableaux trop larges qui débordent au lieu de défiler dans leur propre cadre.
• Des fenêtres surgissantes qui couvrent tout l'écran du téléphone.
• Des images lourdes, prévues pour grand écran, chargées aussi sur mobile.
• Des contenus utiles masqués sur mobile pour gagner de la place.
• Un numéro de téléphone qui ne se compose pas d'un simple toucher.

Si votre site actuel s'affiche mal sur mobile, une refonte peut repartir d'une conception mobile first ; l'article refondre sans perdre son référencement explique comment préserver vos positions. La page refonte de site internet présente l'approche de NexSecure.