Comment afficher la version mobile des sites WordPress depuis un ordinateur de bureau

Examiner la version mobile de votre site WordPress dans un aperçu sur ordinateur est une tâche simple mais essentielle.

Cela vous permet de vérifier l'apparence de votre site sur les petits écrans, vous aidant à repérer les problèmes de mise en page ou les défauts de conception que vous pourriez autrement manquer.

Au fil des ans, nous avons travaillé avec de nombreux propriétaires de sites Web pour nous assurer que leurs sites ont fière allure et fonctionnent bien sur les appareils mobiles. Nous privilégions également les conceptions adaptées aux mobiles chaque fois que nous créons de nouvelles pages et de nouveaux articles sur le site WPBeginner.

Un défi que nous avons remarqué est que la vérification de la version mobile sur un ordinateur de bureau peut être délicate sans les bons outils.

Heureusement, le personnalisateur de thème de WordPress et le mode appareil des outils de développement de Google Chrome vous permettent de prévisualiser et d'apporter rapidement des ajustements.

Dans ce guide, nous vous présenterons les deux méthodes pour afficher la version mobile des sites WordPress depuis votre ordinateur.

Pourquoi vous devriez prévisualiser votre mise en page mobile

Plus de 50 % de vos visiteurs accéderont à votre site à l'aide de leur téléphone portable, et environ 3 % utiliseront une tablette.

Cela signifie qu'avoir un site qui a fière allure sur mobile est très important.

En fait, le mobile est si important que Google utilise désormais un index axé sur le mobile pour son algorithme de classement des sites Web. Cela signifie que Google utilisera la version mobile de votre site pour l'indexation. Vous pouvez en savoir plus en lisant notre guide ultime du référencement WordPress.

Même si vous utilisez un thème WordPress réactif, vous devez toujours vérifier l'apparence de votre site sur mobile. Vous pourriez vouloir créer différentes versions de pages de destination clés qui sont optimisées pour les besoins des utilisateurs mobiles.

Il est important de se rappeler que la plupart des aperçus mobiles ne seront pas complètement parfaits car il existe tellement de tailles d'écran et de navigateurs mobiles différents. Votre test final devrait toujours être de regarder votre site sur un appareil mobile.

Dans les sections suivantes, nous verrons comment vous pouvez afficher la version mobile de votre site WordPress sur un ordinateur de bureau.

Nous allons couvrir 2 méthodes différentes pour tester l'apparence de votre site sur mobile à l'aide de navigateurs de bureau. Vous pouvez cliquer sur les liens ci-dessous pour accéder à n'importe quelle section :

• Méthode 1 : Utilisation du personnalisateur de thème WordPress
• Méthode 2 : Utilisation du mode appareil de DevTools de Google Chrome
• Astuce bonus : Créer du contenu spécifique au mobile dans WordPress
• Tutoriel vidéo
• Foire aux questions

Commençons !

Méthode 1 : Utilisation du personnalisateur de thème WordPress

Vous pouvez utiliser le personnalisateur de thème WordPress pour prévisualiser la version mobile de votre site WordPress.

Connectez-vous simplement à votre tableau de bord WordPress et accédez à l'écran Apparence » Personnaliser.

Cela ouvrira le personnalisateur de thème WordPress.

Selon le thème que vous utilisez, vous pourriez voir 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 fini de créer votre blog ou lorsqu'il est en mode maintenance.

Vous pouvez maintenant apporter des modifications à votre site Web et vérifier leur apparence avant de les publier.

Méthode 2 : Utiliser le mode appareil des outils de développement de Google Chrome

La méthode suivante pour afficher la version mobile d'un site web consiste à utiliser le navigateur 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.

Ouvrez simplement le navigateur Google Chrome sur votre ordinateur de bureau et visitez la page que vous souhaitez vérifier. Il peut s'agir d'un aperçu d'une page de votre site ou même du site web de votre concurrent.

Ensuite, vous devez faire un clic droit sur la page et sélectionner l'option « Inspecter ».

Un nouveau panneau s'ouvrira sur le côté droit ou en bas de l'écran.

Cela ressemblera à ceci :

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 « Basculer la barre d'outils de l'appareil » pour passer en mode 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 changera également en mode mobile. Par exemple, les menus se réduiront et des icônes supplémentaires se déplaceront vers la gauche au lieu de la droite du menu.

Lorsque vous passez votre curseur de souris sur la vue mobile de votre site, il deviendra un cercle. Vous pouvez déplacer ce cercle avec votre souris pour simuler l'écran tactile d'un appareil mobile.

Vous pouvez également maintenir la touche « Maj » enfoncée, puis cliquer et déplacer votre souris pour simuler le pincement de l'écran mobile afin de zoomer ou de dézoomer.

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'apparence de votre site sur différents types de smartphones.

Par exemple, vous pouvez sélectionner un appareil mobile comme un iPhone et voir comment votre site apparaît dessus.

Vous pouvez également simuler les performances de votre site sur des connexions 3G rapides ou lentes. À l'aide de l'icône de rotation, vous pouvez faire pivoter l'écran mobile.

Astuce bonus : Créer du contenu spécifique au mobile dans WordPress

Il est important que votre site web ait une conception réactive afin que les visiteurs mobiles puissent naviguer facilement sur votre site web.

Cependant, avoir simplement un site réactif peut ne pas suffire. Les utilisateurs d'appareils mobiles recherchent souvent des choses différentes des utilisateurs de bureau.

De nombreux thèmes et plugins premium vous permettent de créer des éléments qui s'affichent différemment sur ordinateur par rapport aux mobiles. Vous pouvez également utiliser un constructeur de pages comme SeedProd pour modifier vos pages de destination en vue mobile.

Vous devriez envisager de créer du contenu spécifique aux mobiles pour vos formulaires de génération de prospects. Sur les appareils mobiles, ces formulaires doivent demander un minimum d'informations, idéalement juste une adresse e-mail. Ils doivent également être esthétiques et faciles à fermer.

Pour plus de détails, vous pouvez consulter notre guide sur comment créer une page de destination dans WordPress.

Une autre excellente façon de créer des popups et des formulaires de génération de prospects spécifiques aux mobiles est avec OptinMonster. C'est le plugin de popup et l'outil de génération de prospects le plus puissant du marché pour WordPress.

OptinMonster dispose de règles d'affichage spécifiques de ciblage d'appareils qui vous permettent d'afficher différentes campagnes aux utilisateurs mobiles par rapport aux utilisateurs de bureau. Vous pouvez combiner cela avec la fonctionnalité de géociblage d'OptinMonster et d'autres fonctionnalités de personnalisation avancées pour obtenir les meilleures conversions.

Vous pouvez consulter notre guide sur comment créer des popups mobiles qui convertissent pour plus d'informations.

Tutoriel vidéo

Avant de partir, vous pourriez vouloir consulter notre tutoriel vidéo sur la façon de visualiser la version mobile des sites WordPress depuis le bureau.

S'abonner à WPBeginner

Foire aux questions

Voici quelques questions fréquemment posées par nos lecteurs concernant l'aperçu de la mise en page mobile de votre site.

Ces aperçus sur ordinateur correspondront-ils exactement aux appareils mobiles réels ?

Pas toujours. Bien qu'utiles pour repérer les problèmes de mise en page évidents, ces outils basés sur le bureau ne peuvent qu'émuler les dimensions de l'écran, le comportement du navigateur et les conditions réseau.

Ils peuvent ne pas capturer les bizarreries de performance ou les interactions spécifiques au matériel comme les gestes tactiles.

C'est pourquoi nous suggérons de toujours tester sur des appareils réels, y compris les téléphones et les tablettes, pour confirmer la convivialité dans le monde réel avant la mise en ligne.

Puis-je modifier mon site en vue mobile depuis mon bureau ?

Oui, WordPress vous permet de modifier le contenu tout en prévisualisant le mode mobile dans le personnaliseur ou en utilisant des constructeurs de pages comme Elementor, SeedProd et Beaver Builder.

Lorsque vous passez à la prévisualisation mobile, vous pouvez :

• Ajuster le rembourrage, les marges et la taille des polices pour les petits écrans.
• Masquer ou afficher certains éléments uniquement sur mobile (comme les grandes images ou les bannières uniquement pour ordinateur).
• Tester les menus et les widgets conçus pour les interactions tactiles.

La plupart des constructeurs fournissent des paramètres spécifiques à l'appareil, vous pouvez donc personnaliser les mises en page sans affecter les versions ordinateur ou tablette.

Comment puis-je vérifier la vue mobile de mon WordPress sans me connecter ?

Si vous souhaitez voir à quoi ressemble le site en direct pour les visiteurs, essayez ces méthodes :

• Ouvrez votre site dans une fenêtre de navigateur incognito et utilisez le mode appareil des outils de développement.
• Utilisez des vérificateurs de conception réactive en ligne comme le Responsive Design Checker.

Ces outils vous permettent de visualiser votre site à différentes résolutions sans avoir besoin d'identifiants de connexion.

Nous espérons que cet article vous a aidé à apprendre comment prévisualiser la mise en page mobile de votre site. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs plugins pour convertir un site WordPress en application mobile et apprendre les moyens de créer un site web adapté aux mobiles.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.