2.5Responsive & aperçu mobile
L'essentiel en 30 secondes
- Un site responsive adapte sa mise en page à l'écran : trois colonnes au bureau s'empilent sur téléphone.
- Google indexe en priorité la version mobile (mobile-first) : le responsive n'est pas optionnel.
- On vérifie avec l'aperçu par appareil de l'éditeur, puis sur un vrai téléphone : texte lisible, boutons espacés, images non débordantes.
Mini-cas filé — l'atelier sur téléphone
Samir consulte le site de Hassan sur son téléphone : la galerie déborde, un titre est immense et le bouton de contact est collé au bord. Il comprend que la majorité des visiteurs de l'atelier arriveront depuis un mobile, souvent via les réseaux sociaux. Il reprend les réglages responsive avant de livrer.
Suite du cas 2.4 — l'accueil est composée, on vérifie sur tous les écrans.
1. Responsive et mobile-first
Le responsive design adapte automatiquement la mise en page à la taille de l'écran : une seule version du site, lisible sur ordinateur, tablette et téléphone. Les bons thèmes le gèrent nativement, mais les contenus ajoutés peuvent casser cette adaptation — une image trop large, un tableau, une colonne mal réglée.
Google applique le mobile-first : il indexe d'abord la version mobile du site. Un site difficile à lire sur téléphone est donc pénalisé, en plus de faire fuir les visiteurs. Samir considère le mobile comme l'écran de référence, pas comme une option.
2. Vérifier et corriger
L'éditeur de blocs propose un aperçu par appareil (bureau, tablette, mobile) qui montre le rendu sans quitter WordPress. Certains blocs offrent des réglages par appareil : masquer un élément sur mobile, ajuster une taille de police ou empiler des colonnes. On corrige ensuite les défauts classiques.
Les problèmes mobiles les plus fréquents : texte trop petit, boutons trop proches, images qui débordent, colonnes non empilées, menu illisible. Après l'aperçu, Samir teste sur un vrai téléphone ou via les outils du navigateur : le test réel révèle ce que l'aperçu masque.
🔎 Exemple concret — Corriger la galerie mobile (cas Samir)
Problème : galerie à 3 colonnes qui déborde sur mobile.
1. Aperçu mobile : constater le débordement.
2. Régler la galerie à 1 colonne sur mobile.
3. Réduire le titre du héros sur petit écran.
4. Espacer le bouton de contact.
→ Test sur téléphone réel : OK.Résultat : une page lisible et confortable sur mobile.
Leçon : l'aperçu guide, le téléphone confirme.
Vocabulaire de la section
- Responsive design
- Adaptation automatique de la mise en page à la taille de l'écran.
Exemple simple : les trois collections s'empilent sur téléphone.
Ce que ce n'est pas : figer une largeur fixe qui déborde.
Réflexe : un site, tous les écrans.
- Mobile-first
- Google indexe et évalue en priorité la version mobile du site.
Exemple simple : un site illisible sur mobile perd du référencement.
Ce que ce n'est pas : ne tester que sur ordinateur.
Réflexe : mobile = référence.
- Aperçu par appareil
- Boutons bureau/tablette/mobile de l'éditeur pour voir le rendu.
Exemple simple : Samir bascule en mode mobile dans l'éditeur.
Ce que ce n'est pas : publier sans jamais regarder le mobile.
Réflexe : vérifier avant de publier.
- Réglages par appareil
- Options de bloc permettant d'ajuster taille, colonnes ou visibilité selon l'écran.
Exemple simple : masquer un élément décoratif sur mobile.
Ce que ce n'est pas : supprimer un contenu utile pour tous.
Réflexe : adapter, pas amputer.
- Défauts mobiles courants
- Texte trop petit, boutons collés, images débordantes, colonnes non empilées, menu illisible.
Exemple simple : un bouton de contact collé au bord de l'écran.
Ce que ce n'est pas : ignorer ces défauts parce que le bureau est parfait.
Réflexe : traquer ces cinq défauts.
En pratique — Vérifier et corriger l'affichage mobile
- Dans l'éditeur, basculez l'aperçu en mode mobile.
- Traquez les défauts : lisibilité, boutons, images, colonnes, menu.
- Corrigez les tailles et les colonnes, testez le menu hamburger.
- Vérifiez sur un vrai téléphone ou avec les outils du navigateur.
Script prêt à dire — rassurer sur le mobile (20 s)
« La plupart de vos visiteurs arriveront depuis un téléphone. Je vérifie chaque page sur mobile : texte lisible, boutons accessibles, photos qui ne débordent pas. Google regarde d'abord cette version, donc c'est aussi bon pour votre visibilité. »
Relier le mobile à l'expérience client et au référencement.
Modèle copier-coller — check mobile
PAGE TESTÉE : _______________
TEXTE LISIBLE : oui / non
BOUTONS ASSEZ GRANDS ET ESPACÉS : oui / non
IMAGES SANS DÉBORDEMENT : oui / non
COLONNES EMPILÉES : oui / non
MENU UTILISABLE : oui / non
TEST SUR VRAI TÉLÉPHONE : oui / nonGalerie photo
Une colonne sur mobile, deux sur tablette, trois sur bureau.
Tableau de tarifs
Souvent illisible sur mobile : préférer des cartes empilées.
Menu chargé
Réduire aux entrées essentielles et vérifier le menu hamburger.
Boutique
Tester le tunnel d'achat sur téléphone, pas seulement la page d'accueil.
✓ Bonnes pratiques
- Considérer le mobile comme l'écran de référence.
- Utiliser l'aperçu par appareil avant de publier.
- Toujours confirmer sur un vrai téléphone.
✗ Pièges fréquents
- Publier sans regarder le mobile.
- Réduire tout le texte pour faire tenir la page.
- Désactiver le responsive du thème.
Points clés à retenir
- Le responsive adapte la mise en page à chaque écran.
- Google indexe d'abord la version mobile.
- L'aperçu par appareil guide les corrections.
- Le test sur un vrai téléphone reste indispensable.
Défi 48h — appliquez demain
Ouvrez trois pages de votre site sur un téléphone réel : notez chaque défaut (texte, boutons, images, colonnes, menu) et corrigez-en au moins trois. 20 minutes.
- Je vérifie une page avec l'aperçu mobile.
- Je corrige les défauts responsive courants.
- Je teste sur un vrai téléphone avant de livrer.
Questions fréquentes
Mon thème est responsive, dois-je quand même vérifier ?
Oui. Le thème fournit une base adaptative, mais les blocs, images et tableaux que vous ajoutez peuvent casser l'affichage. Une vérification par page reste nécessaire.
Comment tester sans téléphone ?
Utilisez l'aperçu mobile de l'éditeur, puis les outils de développement du navigateur (F12 → mode appareil). Ces outils simulent la taille, mais un test réel reste préférable pour la lisibilité et le toucher.
Le mobile-first concerne-t-il aussi le référencement ?
Oui : Google indexe principalement la version mobile. Un site lent ou illisible sur téléphone peut être moins bien classé, en plus de perdre des visiteurs.
La page Collections déborde sur téléphone. Quel est le bon réflexe ?