Responsive design : adapter et tester un site sur tous les écrans

Un site responsive doit permettre la même tâche sur un téléphone et un ordinateur : comprendre une offre, regarder une réalisation, trouver un contact. Réduire les éléments jusqu’à ce qu’ils tiennent dans l’écran ne suffit pas. Le contenu et les commandes doivent rester lisibles et utilisables.

Conserver les informations essentielles

Google utilise la version mobile du contenu pour l’indexation. Les textes, liens et ressources importantes doivent donc être accessibles sur mobile. Le chargement du contenu principal ne doit pas dépendre d’une interaction. Consignes Google sur l’indexation mobile.

Pour une page de restaurant, ne retirez pas les horaires ou le menu pour alléger l’écran. Pour un artisan, gardez les prestations, la zone d’intervention et le moyen de demander un devis. Changez la présentation, puis vérifiez que les mêmes réponses restent disponibles.

Exemple : le catalogue LR Studios

Le site LR Studios présente des jeux mobiles et leurs liens de téléchargement. Je l’ai développé en HTML, CSS et Bootstrap, avec une interface adaptée aux différents écrans. Le parcours à préserver est simple : reconnaître un jeu et trouver sa destination sur une boutique d’applications.

Cet exemple aide à définir la recette d’un catalogue : contrôler le titre, la capture, la lisibilité de la description et l’accès au lien de téléchargement sur un petit écran. L’étude de cas montre le travail livré ; elle ne prétend pas mesurer tous les appareils ni garantir un résultat commercial.

Construire une grille qui suit le contenu

Commencez par une colonne. Ajoutez des colonnes lorsque les cartes ont suffisamment de place, plutôt que d’associer chaque rupture à un modèle précis de téléphone. Utilisez des largeurs fluides et une largeur maximale pour éviter les lignes de texte interminables.

.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

Ce point de départ empêche une carte d’exiger plus que la largeur disponible. Testez toutefois les titres longs, les mots sans espace et les textes traduits : une grille correcte avec des titres de démonstration peut casser avec les vrais contenus.

Les liens principaux doivent être présents dès le HTML. CSS peut choisir une présentation différente sur ordinateur et mobile. Si vous utilisez un menu repliable, prévoyez une commande native ou une solution de repli qui laisse les liens accessibles lorsque JavaScript échoue.

Vérifiez aussi le sélecteur de langue sur une page profonde, pas uniquement sur l’accueil. Passer du français à l’anglais doit conduire à la traduction du contenu consulté. Une redirection systématique vers l’accueil oblige le visiteur à recommencer sa recherche.

Adapter images, textes et formulaires

Les images doivent suivre leur conteneur sans perdre leur ratio. Fournissez des tailles adaptées, puis vérifiez le cadrage dans les deux orientations. Le guide des images web explique comment choisir les fichiers réellement téléchargés.

Pour la typographie, associez unités relatives et bornes lisibles. Agrandissez le texte dans le navigateur : le zoom ne doit pas faire disparaître un bouton ou recouvrir un titre. Pour les champs, testez avec le clavier virtuel ouvert. Une barre fixe en bas de page ne doit pas cacher la saisie ou le bouton d’envoi.

Des cibles tactiles confortables et espacées sont préférables à des liens minuscules. Évaluez-les dans le contexte du parcours, avec un téléphone, plutôt que de considérer une dimension isolée comme une validation complète d’accessibilité.

Une recette pratique avant livraison

Testez au moins une largeur étroite, une largeur intermédiaire et un grand écran, puis redimensionnez lentement entre elles. Sur chaque page représentative :

Lire le titre et atteindre le contenu principal sans défilement horizontal.
Ouvrir les liens de navigation et changer de langue.
Parcourir les cartes et consulter une image.
Agrandir le texte et naviguer au clavier.
Utiliser le formulaire avec le clavier mobile ouvert.
Recharger en bloquant JavaScript pour vérifier la lecture et les liens essentiels.

Conservez les défauts observés avec l’URL et la largeur concernée. Ce relevé est une base utile pour une refonte, plus précise qu’une demande générale de « rendre le site mobile ».