Voulez-vous avoir un aperçu de la version mobile de votre site WordPress ?
La prévisualisation de la mise en page mobile vous permet de voir à quoi ressemble votre site web sur les appareils mobiles. Lorsque votre site est en cours de développement ou même lorsqu’il est en ligne, il est souvent plus facile de visualiser la version mobile sur un ordinateur de bureau. Vous pouvez ainsi apporter rapidement des modifications et en voir les effets.
Dans cet article, nous allons vous montrer comment afficher une version mobile du site WordPress à partir de votre ordinateur.
Pourquoi vous devriez prévisualiser votre site sur mobile
Plus de 50 % des visiteurs de votre site web utiliseront leur téléphone pour accéder à votre site. Environ 3 % utiliseront une tablette.
Cela signifie qu’il est très important d’avoir un site qui se présente bien sur mobile.
En fait, l’importance du mobile est telle que Google utilise désormais un index mobile-first pour son algorithme de classement des sites web. Cela signifie que Google utilisera la version mobile de votre site pour l’indexation.
Même si vous utilisez un thème WordPress réactif, vous devez toujours vérifier l’aspect de votre site sur mobile. Vous pourriez vouloir créer différentes versions des pages de destination clés qui sont optimisées pour les besoins des utilisateurs mobiles.
Il est important de garder à l’esprit que la plupart des prévisualisations mobiles ne seront pas totalement parfaites, car il existe une grande variété de tailles d’écran et de navigateurs. Votre test final devrait toujours être de regarder votre site sur un appareil mobile réel.
Cela dit, voyons comment vous pouvez visualiser la version mobile de votre site WordPress sur un ordinateur de bureau.
Méthode 1 : Utiliser l’onglet personnaliser le thème
Vous pouvez utiliser le personnaliseur de thème de WordPress pour prévisualiser la version mobile de votre site WordPress.
Il vous suffit de vous connecter à votre tableau de bord WordPress et de vous rendre dans l’écran Apparence > Personnaliser.
Cela ouvrira le personnalisateur de thème de WordPress. Pour ce tutoriel, nous utiliserons le thème Astra.
Selon le thème que vous utilisez, vous verrez peut-être des options légèrement différentes dans le menu de gauche.
En bas de l’écran, cliquez simplement sur l’icône mobile.
Vous verrez alors un aperçu de l’apparence de votre site sur les appareils mobiles.
Cette méthode de prévisualisation de la version mobile est particulièrement utile lorsque vous n’avez pas encore terminé la création de votre blog ou lorsque celui-ci est en mode maintenance.
Vous pouvez désormais apporter des modifications à votre site web et en vérifier l’aspect avant de les mettre en ligne.
Méthode 2 : utiliser le mode « Appareils » des DevTools de Google Chrome
Le navigateur Google Chrome dispose d’un ensemble d’outils de développement qui vous permettent d’effectuer diverses vérifications sur n’importe quel site web, y compris un aperçu de son apparence sur les appareils mobiles.
Il vous suffit d’ouvrir le navigateur Google Chrome sur votre ordinateur de bureau et de visiter la page que vous souhaitez vérifier. Il peut s’agir de l’aperçu d’une page de votre site ou du site de votre concurrent.
Cliquez ensuite avec le bouton droit de la souris sur la page et sélectionnez l’option « Inspecter« .
Un nouveau panneau s’ouvre à droite ou en bas de l’écran.
Il se présente comme suit :
Dans la vue développeur, vous pourrez voir le code source HTML de votre site, le CSS et d’autres détails.
Ensuite, vous devez cliquer sur le bouton « Toggle Device Toolbar » pour passer à la vue mobile.
Vous verrez l’aperçu de votre site web se réduire à la taille de l’écran mobile.
L’apparence générale de votre site web sera également modifiée dans la vue mobile. Par exemple, les menus se réduisent et les icônes supplémentaires se déplacent vers la gauche au lieu de la droite du menu.
Lorsque vous passez le curseur de votre souris sur la vue mobile de votre site, il se transforme en cercle. Ce cercle peut être déplacé avec votre souris pour imiter l’écran tactile d’un appareil mobile.
Vous pouvez également maintenir la touche « Shift » enfoncée, puis cliquer et déplacer votre souris pour simuler le pincement de l’écran mobile afin d’effectuer un zoom avant ou arrière.
Au-dessus de la vue mobile de votre site, vous verrez des options supplémentaires.
Ces paramètres vous permettent de faire plusieurs choses supplémentaires. Vous pouvez vérifier l’aspect de votre site sur différents types de smartphones.
Par exemple, vous pouvez sélectionner un appareil mobile tel qu’un iPhone et voir comment votre site s’affichera sur cet appareil.
Vous pouvez également simuler les performances de votre site sur des connexions 3G rapides ou lentes. Vous pouvez même faire pivoter l’écran mobile à l’aide de l’icône de rotation.
