Comment modifier la version mobile du site WordPress
Pourquoi la version mobile de votre site Web est-elle cruciale pour votre réussite ?
Commençons par le fait que plus de 50 % du trafic Web mondial provient des téléphones mobiles. Cela signifie littéralement que plus de la moitié de vos clients consultent votre site depuis leur mobile. À partir de 2018, lorsque Google a lancé l’indexation mobile des sites, la conception Web réactive n’a fait que gagner en importance, et se concentrer sur l’expérience mobile d’un site Web est logiquement devenu une priorité pour quiconque prend son entreprise au sérieux. Un autre avantage important des sites Web adaptés aux mobiles est qu’ils sont simples et intuitifs.. Ils offrent une expérience utilisateur fluide, ce qui permet aux clients potentiels de vous contacter plus facilement. De plus, ils se chargent rapidement et rendent le partage de contenu facile et naturel. Une façon de penser à un site réactif est de le voir comme un moyen gratuit de mieux se classer sur les moteurs de recherche. Pourquoi rateriez-vous cette opportunité? Plus votre classement est bon, plus vous obtenez de résultats de recherche organiques, ce qui signifie plus de prospects et plus de conversions.
Comment prévisualiser la version mobile de votre site Web
Un thème WordPress responsive garantit de nombreux avantages mais encore faut-il vérifier en temps réel à quoi ressemble votre site sur les smartphones. Il existe de nombreuses variations possibles dans les tailles d’écran et les navigateurs, de sorte qu’aucun des aperçus mobiles ne peut vous fournir un aperçu parfait et précis à 100 %. Vous devez toujours vous fier à l’expérience réelle que vous obtenez en consultant votre site sur un smartphone ou un appareil mobile réel. Cela pourrait vous inciter à optimiser vos pages de destination clés et à créer différentes versions optimisées pour l’expérience mobile.
Voyons donc comment vous pouvez prévisualiser si vous avez un site compatible avec les mobiles WordPress de deux manières différentes.
Utilisation du personnalisateur de thème de WordPress
La première et la plus simple façon de voir l’aperçu de la version mobile est d’utiliser le personnalisateur de thème de WP. La procédure est simple. Connectez-vous à votre tableau de bord WordPress et accédez à Apparence > Personnaliser.
Après avoir cliqué sur WordPress Theme Customizer et l’avoir ouvert, vous verrez toutes les options dans le menu de gauche. Il peut y avoir des variations dans les options proposées en fonction du thème que vous utilisez.
Remarquez l’icône mobile en bas de l’écran. Cliquez dessus et vous verrez un aperçu de l’apparence de votre site sur les appareils mobiles.
Si les symboles d’édition bleus vous confondent, ne vous inquiétez pas. Ils ne sont visibles que dans l’aperçu et jamais sur votre site en ligne.
Astuce: Si vous n’avez pas encore lancé votre blog ou s’il est en mode maintenance, cette méthode de prévisualisation est très pratique car elle vous permet d’apporter des modifications et de vérifier leur apparence avant de mettre en ligne votre site.
Utilisation du mode appareil des outils de développement de Google Chrome
Si vous ne vous sentez pas à l’aise avec l’outil de personnalisation de thème WP pour une raison quelconque, vous pouvez toujours vérifier si WordPress est compatible avec les mobiles avec le navigateur Google Chrome. C’est aussi une procédure très simple et facile qui se compose de quelques étapes.
Ouvrez simplement votre navigateur Google Chrome comme vous le faites habituellement et accédez à la page que vous souhaitez consulter. Ensuite, faites un clic droit sur la page et choisissez Inspect.
Notez que de cette façon, vous pouvez voir un aperçu de n’importe quelle page sur n’importe quel site, pas seulement le vôtre. Il pourrait même s’agir du site Web de votre concurrent.
Sur votre droite, un nouveau volet s’ouvrira et ressemblera à ceci :
La vue du développeur vous permet de voir le code source HTML de votre site Web.
Maintenant, cliquez sur le bouton Basculer la barre d’outils de l’appareil pour voir la vue mobile.
Vous remarquerez quelques changements dans l’aperçu mobile : votre site Web est réduit pour s’adapter à la taille de l’écran mobile et d’autres changements peuvent avoir lieu. Regardez et notez attentivement les différences et notez ce que vous devriez changer.
Vérifiez ce qui se passe lorsque vous essayez de passer le curseur de votre souris sur la vue mobile – cela devient un cercle.
Le but du cercle est d’imiter l’écran tactile sur un appareil mobile.
Conseil : Si vous souhaitez voir comment l’écran de votre mobile effectue un zoom avant et arrière, maintenez la touche Maj enfoncée, puis cliquez et déplacez votre souris.
L’avantage d’utiliser cette méthode pour prévisualiser votre site Web mobile est qu’elle vous permet de voir à quoi ressemble la page sur différents types de smartphones. Ces options supplémentaires se trouvent au-dessus de la vue mobile de votre site. Quel que soit le type d’aperçu que vous avez ouvert lorsque vous avez cliqué sur Basculer la barre d’outils de l’appareil, vous pouvez modifier ici la taille de l’écran de l’appareil.
Conseil : utilisez l’icône de rotation dans le coin supérieur droit pour faire pivoter l’écran du mobile. Vous pouvez également inspecter des éléments sur la page en cliquant sur le clic droit et en sélectionnant l’option Inspecter.
Pourquoi Page Builder est-il important pour RWD
RWD est quelque chose auquel vous devez réfléchir attentivement dès le début de la création de votre site Web. Il y a beaucoup de choses à analyser lorsque vous devez rendre votre site aussi attrayant, navigable et efficace sur différentes tailles d’écran. Les constructeurs de pages WordPress ont un rôle déterminant dans ce processus, ils vous fournissent les pierres angulaires du design de votre site, vous devez donc bien vous informer avant de faire votre choix. Ainsi, en investissant du temps dans la recherche sur les constructeurs de pages, vous gagnerez en fait beaucoup de temps que vous pourrez consacrer à la création de votre site Web.
D’après notre expérience, WPBakery et Elementor sont d’excellents choix, car ils peuvent satisfaire un large éventail de besoins différents.
Si vous avez un budget limité, Elementor est votre meilleur pari. Il s’agit d’un plugin simple à utiliser et convivial pour les débutants qui a une version gratuite très généreuse avec un ensemble solide d’éléments. Il s’intègre également bien avec d’autres plugins et services WP de premier plan tels que MailChimp, WooCommerce, HubSpot, Yoast SEO, etc. Si vous pouvez vous permettre un plugin premium, WPBakery Page Builder ne vous décevra jamais. Il est livré avec une collection incroyablement large d’éléments, une pléthore de blocs et d’options. Il est également facile à utiliser et permet beaucoup de créativité.
Bien que les constructeurs de pages soient essentiels pour RWD, le thème que vous prévoyez d’utiliser est également important car il peut offrir des fonctionnalités étonnantes. Comme vous le savez peut-être, les auteurs de thèmes développent des widgets et des éléments spécifiques qui peuvent être ajustés séparément des constructeurs de pages. Beaucoup de ces éléments vous permettent de définir la réactivité en fonction de vos besoins. Pour cette raison, vous devez choisir le thème développé par des auteurs connus et dignes de confiance. Ceci est particulièrement important si vous souhaitez utiliser un thème WordPress gratuit. Pour économiser votre temps et vos nerfs, nous avons testé des tonnes de thèmes gratuits. Donc, si vous souhaitez utiliser un thème gratuit réactif, riche en fonctionnalités et fiable, nous vous recommandons d’essayer le thème Qi.
Comment modifier la version mobile de votre site dans Elementor
Il est prudent de dire qu’Elementor est de loin le meilleur constructeur de pages lorsqu’il s’agit de modifier la version mobile de votre site Web. Il se peut que vous ayez manqué de remarquer cette petite icône, appelée Viewport Icon, dans les paramètres :
Cette icône indique que toute valeur qui l’a à côté peut être modifiée séparément pour la version de bureau et pour la version du site mobile. Prenons par exemple les paramètres de largeur de colonne – vous pouvez ajuster la valeur pour le bureau, le mobile et la tablette. La valeur que vous entrez pour chaque appareil ne sera valide que pour cet appareil sélectionné. Notez que la balise HTML n’a pas l’icône à côté, ce qui signifie qu’elle a la même valeur pour chaque appareil.
Si vous souhaitez modifier la valeur de l’appareil mobile, il vous suffit de choisir l’option de mise en page mobile et d’entrer les valeurs souhaitées (ces valeurs seront implémentées uniquement sur les appareils mobiles). Sur le côté droit de l’écran, vous avez l’aperçu en direct de toutes les modifications que vous apportez, afin que vous puissiez voir immédiatement à quoi ressembleront les nouvelles valeurs sur l’appareil.
Pour revenir à la vue du bureau, vous devez passer à l’option de disposition du bureau. Vous pouvez le faire, comme nous l’avons mentionné ci-dessus ou en utilisant cette petite icône dans le menu du bas de la page :
Une autre chose importante à mentionner concernant la réactivité est que les colonnes et les lignes peuvent être désactivées pour des appareils individuels, c’est-à-dire que nous pouvons dire qu’elles ne seront pas visibles (ou seront visibles) sur certaines tailles d’écran.
Pour accéder à cette option, suivez le chemin :
- Clic droit sur la ligne/colonne
- Sélectionnez Modifier la section
- Cliquez sur l’ onglet Avancé
- Sélectionnez le menu déroulant Responsive
Cette option est très importante dans le cas où nous avons une section dont nous savons qu’elle n’a de sens que pour être affichée sur le bureau, nous l’annulerons donc sur d’autres appareils. Et pour compenser son absence, nous pouvons créer une section qui sera visible sur tous les autres appareils, à l’exception du bureau.
En ce qui concerne les colonnes, nous pouvons également trouver l’ option Inverser la colonne (Tablette / Mobile). Il est préférable d’expliquer cela par un exemple. Disons que nous avons une section comme celle-ci sur le bureau où le contenu est divisé en deux colonnes avec des images suivies d’un bref texte :
Naturellement, sur les appareils mobiles, le contenu sera réorganisé comme dans l’image ci-dessous, en suivant l’ordre d’origine depuis le bureau :
L’ option de colonne inversée nous permet de changer l’ordre d’une certaine section pour les appareils mobiles ou les tablettes. Lorsque nous le faisons pour la première section sur des appareils plus petits, le résultat est un contenu affiché plus efficacement :
Comment modifier la version mobile de votre site avec des plugins
Tôt ou tard, vous serez tenté d’utiliser une variété de plugins qui vous permettront d’ajouter facilement une barre latérale, un CTA, un widget ou un élément similaire à votre site. C’est le moment où beaucoup oublient qu’une barre latérale ou tout autre élément qui fonctionne parfaitement sur un écran de bureau peut ne pas être aussi génial sur mobile. Donc, avant de profiter de ces outils pratiques, vérifiez s’ils sont également réactifs. La vérité est que beaucoup d’entre eux le sont et peuvent réellement vous aider à améliorer l’expérience utilisateur. Mais pour en être sûr, lisez les critiques ou trouvez une démo avant d’en installer. Tant que le plugin se comporte bien sur mobile, vous pouvez être sûr que votre site Web est sur la voie du succès. N’oublions pas non plus que vos options varient beaucoup en fonction du thème que vous utilisez. Un thème premiumgarantit certainement beaucoup plus de possibilités.
Menu réactif – La première impression compte
Le menu est le pilier de l’expérience utilisateur. C’est la première ou l’une des premières choses sur lesquelles quelqu’un clique lorsqu’il visite votre site. Cela affecte la rapidité avec laquelle le visiteur trouvera ce pour quoi il est venu, combien de temps il restera et de nombreux autres aspects de l’UX. Il est important d’avoir un beau menu bien structuré qui rend la navigation fluide, mais ce n’est pas aussi simple qu’il n’y paraît. Vous pouvez avoir un excellent menu qui fonctionne parfaitement sur un ordinateur de bureau mais qui est trop lourd pour un mobile. Une solution dans ce cas consiste également à ajuster votre version de bureau à la taille de l’écran mobile. Mais que se passe-t-il si cela implique de perdre trop d’informations utiles ? Dans ce cas, vous pouvez créer un menu différent, personnalisé uniquement pour la taille de l’écran mobile. De nombreux thèmes WP offrent la possibilité de le faire. Si votre thème n’en fait pas partie, ne vous inquiétez pas, il y en a beaucoupexcellents plugins pour les menus réactifs. Notre recommandation est le plugin Responsive Menu qui comprend plus de 150 options de personnalisation et ne nécessite aucune connaissance en codage. Il vous permet d’ajouter des animations, des images d’arrière-plan, de définir la position des boutons de menu et bien plus encore. Il est incroyablement facile à utiliser, il est donc particulièrement pratique pour les débutants.
Images et galeries
Une image parle des milliers de langues, alors assurez-vous que la vôtre soit aussi belle sur n’importe quelle taille d’écran. Nous vivons dans une culture très visuelle, et quel que soit le créneau dans lequel vous vous trouvez, de superbes photos sont indispensables. Mais, quelle que soit la qualité de vos images, si elles se chargent lentement ou ne sont pas bien présentées, vous risquez de perdre un pourcentage important de votre public. Donc, pour vous assurer d’éviter ce scénario, nous vous recommandons le plugin Envira Gallery Lite qui vous aidera à créer des galeries puissantes comme un pro. Certains de ses avantages sont qu’il est hautement optimisé pour les performances du Web et du serveur, ce qui est une excellente nouvelle pour votre référencement.
Lorsque vous avez un excellent menu réactif et de superbes galeries, la prochaine chose à prendre en compte sont les boutons de partage social. Leur taille doit être adaptée à l’appareil. Un gros bouton sur un petit écran fait cliquer le visiteur à l’occidentale, ce qui est assez énervant. D’un autre côté, les petits boutons sur un grand écran ne sont pas si faciles à reconnaître. Un plugin qui peut vous aider à avoir des boutons personnalisés est le plugin Sassy Social Share. Facile à utiliser, totalement gratuit et adapté aux débutants, il facilite le partage à la fois pour vous et pour les visiteurs de votre site.
Sites Web Mobile Firendly
Dans les situations où vous avez besoin de rendre votre site mobile réactif rapidement, il n’y a pas de meilleure solution qu’un plugin comme WPtouch. Ce plugin est conçu de telle manière qu’il ajoute automatiquement un thème mobile simple et élégant à votre site WP. Le fait qu’il soit recommandé par Google en dit long sur son efficacité. Ainsi, même si vous n’avez pas de version mobile de votre site, un plugin comme celui-ci peut instantanément activer une version mobile de votre site Web, afin que vous ne perdiez pas votre classement. Il vous permet également de personnaliser de nombreux aspects de l’apparence du site.
La vitesse de chargement des pages est également un aspect très important de l’expérience utilisateur, en particulier sur les appareils mobiles. Si vous rencontrez des difficultés dans ce domaine, envisagez d’utiliser le plug-in Accelerated Mobile Pages, car il s’agit de l’un des moyens les plus rapides et les plus simples d’améliorer la vitesse de chargement de votre site.
Évitez d’ajouter des fenêtres contextuelles sur les appareils mobiles
Les popups sont rarement amusants, mais ils sont particulièrement irritants sur les mobiles. Ils couvrent une grande partie de l’écran et obligent le visiteur à les fermer avant d’accéder au contenu de la page. Par conséquent, il est préférable de les éviter complètement dans la version mobile de votre site. La façon dont vous allez les éviter dépend principalement de votre fournisseur de services, mais la majorité d’entre eux ont la possibilité de désactiver les popups intrusifs sur les mobiles. Gardez également à l’esprit que Google pénalise les sites qui ont des popups très intrusifs.
En conclusion
Étant donné que le nombre de personnes qui utilisent des smartphones pour accéder à Internet est en constante augmentation, il est logique d’attendre beaucoup plus de solutions et d’options pour les versions mobiles des sites. Les concepteurs travaillent dur pour répondre à la pléthore de modèles d’utilisation, mais les bases de RWD sont les mêmes – assurez-vous de choisir un thème WP adapté aux mobiles et un constructeur de pages qui a toutes les options dont vous avez besoin.
Alors, à quel point votre site est-il réactif ? Devez-vous faire beaucoup de changements pour le rendre plus mobile? Partagez vos réponses avec nous et n’hésitez pas à demander plus d’informations dans la section des commentaires.