Saviez-vous que plus de la moitié des visiteurs de votre site Web sont susceptibles de le consulter sur téléphone ou tablette ? Ce guide vous explique les étapes essentielles pour offrir une expérience utilisateur fluide sur tous les écrans, de la sélection d’un thème adaptable à l’ajustement de votre contenu.
Dans ce guide
Avez-vous une question ?
Interroger notre Assistant IALe choix d’un thème adapté aux appareils mobiles sur un site WordPress est crucial pour offrir une expérience utilisateur fluide et optimisée sur divers appareils, améliorer l’accessibilité et remonter dans le classement dans les moteurs de recherche.
Tous les thèmes proposés sur WordPress.com sont adaptés aux appareils mobiles, ce qui signifie qu’ils sont conçus pour convenir parfaitement aux navigateurs mobiles comme aux ordinateurs de bureau.
Si vous utilisez un thème tiers, assurez-vous qu’il est décrit comme adapté aux appareils mobiles et qu’il s’affiche correctement lorsque vous l’ouvrez sur un appareil mobile. Consultez la documentation du thème pour connaître les options de personnalisation ou les réglages qui vous permettent de contrôler l’apparence du thème sur mobile.
Après avoir choisi un thème adaptable, vous souhaiterez probablement apporter des modifications au contenu par défaut pour le personnaliser. Lorsque vous modifiez votre site dans l’éditeur WordPress, il convient de vous assurer qu’il s’affiche correctement sur tous les appareils.
WordPress ne contient pas d’« éditeur mobile » distinct. Les modifications que vous apportez à votre site se répercutent à la fois sur les appareils mobiles et les ordinateurs de bureau. Tant que votre site dispose d’un thème adapté aux appareils mobiles, le contenu s’adaptera aux écrans de toutes tailles. On parle alors d’« adaptabilité ».
Vous pouvez cliquer sur l’icône Voir dans le coin supérieur droit de l’éditeur pour avoir un aperçu de l’apparence de votre site pour un visiteur. Sélectionnez Mobile ou Tablette pour voir une approximation du contenu dans l’éditeur :
Nous parlons ici d’approximation car de nombreux éléments de la vue éditeur dépendent du thème du site. Les styles du thème ne s’affichent pas dans l’éditeur. Ils apparaissent uniquement lorsque vous prévisualisez la page dans un nouvel onglet ou si vous affichez votre site dans le navigateur de votre appareil. Pour afficher votre contenu avec les styles du thème appliqués, cliquez sur l’option « Prévisualiser dans un nouvel onglet ».
Après avoir cliqué sur l’option « Prévisualiser dans un nouvel onglet », vous pouvez voir la version mobile à l’aide de l’outil Inspecter de votre navigateur. Pour utiliser le mode Inspecter de votre navigateur afin de prévisualiser l’apparence d’une page ou d’un article en vue mobile :
- Cliquez sur l’icône Voir dans le coin supérieur droit de l’éditeur WordPress.
- Sélectionnez l’option « Prévisualiser dans un nouvel onglet ».
- Effectuez un clic droit sur la page d’aperçu et cliquez sur « Inspecter » (Chrome, Firefox, Edge) ou « Inspecter l’élément » (Safari).
- Dans le mode Inspecter du navigateur, cliquez sur l’icône d’appareil mobile pour basculer l’aperçu sur la vue mobile.
Après avoir publié vos modifications, il peut être utile d’ouvrir votre téléphone ou votre tablette pour afficher le site comme le ferait un utilisateur lambda, afin de confirmer qu’il apparaît comme vous le souhaitez.
Voici quelques conseils pour optimiser l’adaptabilité du design de votre site et vous assurer que le contenu est correctement présenté sur mobile, tablette et ordinateur de bureau.
Si le texte d’une image est conçu dans l’image elle-même, ce texte peut être coupé sur des écrans plus petits, comme dans cet exemple :
En effet, le texte conçu au sein même d’une image n’est pas adaptable.
À l’aide de l’éditeur WordPress, vous pouvez écrire du texte sur une image. Ajouter du texte à une image de cette manière le rend adaptable. Dans la vidéo ci-dessous, nous recréons la même image que précédemment à l’aide du bloc Bannière, adaptable sur les petits écrans :
Pour optimiser l’adaptabilité du dimensionnement des polices sur votre page, utilisez des unités em ou rem au lieu de pixels (px). L’utilisation de pixels pour la taille de police revient à coder en dur la taille de cette police spécifique dans la page, ce qui signifie que la police sera toujours affichée dans cette taille, quelles que soient les dimensions de l’écran. En revanche, des valeurs en em et rem correspondent à des unités de dimensionnement relatives qui augmentent ou diminuent en fonction de l’espace disponible sur l’écran de l’utilisateur.
Au lieu d’utiliser un menu texte pour votre mise en page mobile, vous pouvez personnaliser le bloc Navigation de votre site pour afficher le menu mobile, appelé menu superposé (ou encore « menu hamburger » ou « menu kebab »). Cette fonctionnalité peut aider à rendre l’en-tête plus compact et le menu plus accessible pour un affichage et une utilisation sur mobile.
Certains blocs incluent une option « Empiler sur mobile » pour mieux utiliser l’espace sur les petits écrans. Si le contenu est affiché côte à côte sur un écran d’ordinateur de bureau, il passera en dessous sur des écrans plus petits afin d’être lu plus facilement par les visiteurs sur mobile.
Le réglage « Empiler sur mobile » est disponible dans les blocs suivants :
Les boutons et les menus seront plus faciles à lire sur les petits appareils en autorisant leur disposition sur plusieurs lignes.
L’option « Autoriser le regroupement de lignes multiples » est disponible dans les réglages de mise en page des blocs suivants :
- Bloc Boutons
- Bloc Boutons de partage
- Bloc Navigation
- Bloc Icônes de réseaux sociaux
- Bloc Commentaires
- Blocs Ligne et Empiler
AMP (Accelerated Mobile Pages) est un cadre open-source tiers qui permet la création de sites Web capables de se charger presque instantanément sur mobile, offrant ainsi aux visiteurs du site une expérience de navigation rapide. Pour ajouter AMP à votre site, vous pouvez installer l’extension AMP. Pour les sites WordPress.com compatibles avec les extensions créés avant le 13 juin 2022, l’extension AMP a été installée par défaut.
Gardez à l’esprit que l’utilisation d’AMP supprime de nombreuses fonctionnalités sur votre site (mise en page, etc.) pour que les visiteurs sur mobile puissent charger le site rapidement. Il est préférable de ne l’utiliser que si votre thème a été conçu pour AMP. Tous les thèmes sur WordPress.com sont déjà adaptés aux appareils mobiles et n’ont donc pas besoin d’AMP pour fournir une expérience optimisée sur appareil mobile.
Si votre site rencontre des problèmes d’affichage et que l’extension AMP est installée, nous vous recommandons de la désactiver pour voir si cela améliore les performances de votre site. Si vous voyez une option « Quitter la version mobile » sur votre site Web que vous souhaitez supprimer entièrement, désactivez également l’extension AMP.
Si votre site utilise AMP depuis un certain temps, gardez à l’esprit que Google ne met pas à jour ses résultats immédiatement et continuera d’afficher les pages AMP pendant une certaine période après sa désactivation. Il se peut que vous souhaitiez configurer des redirections de page après avoir désactivé AMP. Les moteurs de recherche indexeront les URL des pages AMP et il leur faudra un certain temps pour supprimer ces URL de leur liste, ce qui signifie que certains visiteurs sur mobile pourraient être renvoyés vers une page d’erreur 404.
Vous avez le choix entre plusieurs extensions de redirection gratuites populaires. Vous pourrez configurer une redirection 301 et vous aurez probablement besoin d’une expression régulière (regex) de type /(.*)\/amp. Nous vous recommandons d’effectuer quelques tests pour vous assurer que vous avez configuré la bonne redirection, ainsi que de consulter les instructions de l’extension de redirection.
Assistance WordPress.com 