mobileoptimisation

Responsive web design : comment réussir l'optimisation pour les mobiles

Dans cet article, je t'explique la différence entre "responsive" et "compatible mobile" et comment optimiser ton site pour les appareils mobiles. Tu découvriras également quelques astuces très cool qui te permettront d'améliorer le temps de chargement de ton site WordPress afin qu'il se charge rapidement.

De plus en plus de personnes se déplacent sur l'internet. Cela crée de nouvelles opportunités et, bien sûr, une nouvelle réflexion sur les thèmes de la "conception web réactive" et de "l'optimisation mobile du site web".

Pourquoi l'optimisation mobile ?

Avant de vous montrer des possibilités concrètes d'optimisation, j'aimerais discuter brièvement avec vous du "pourquoi". Ce faisant, j'aborderai plus en détail les deux raisons les plus importantes :

Raison #1

De plus en plus de personnes utilisent des appareils mobiles (smartphones et tablettes). En revanche, les ordinateurs et les blocs-notes sont de moins en moins utilisés. C'est particulièrement vrai pour un usage privé lors de la recherche d'un problème, d'un sujet, d'une solution, d'un restaurant, d'un produit ou d'un service spécifique.

Tout propriétaire de site web devrait s'adapter à ce changement. En effet, ce n'est que si ton site web s'affiche de manière optimale sur le terminal mobile que ton visiteur restera sur la page et réservera un produit ou un service chez toi.

Raison #2

Pour Google, les performances de votre site web sur les appareils mobiles constituent un critère de classement. Les deux aspects suivants sont extrêmement importants :

  1. Le site web est-il totalement réactif ?
  2. Quel est le temps de chargement de votre site web ?

Plus vous vous améliorez dans ces deux domaines, plus vous obtiendrez de points positifs et, en fin de compte, plus votre classement sera bon dans les résultats de la recherche.

Différence : Responsive ou compatible avec les mobiles

Sur de nombreux sites web, il est écrit qu'il te suffit d'avoir un design responsive pour que tout aille bien. Mais je suis d'un tout autre avis et c'est pourquoi j'aimerais insister sur ce point. C'est à ce niveau que tu peux optimiser ton site Web pour les appareils mobiles.

La procédure est fondamentalement la suivante : Un propriétaire de site web installe par exemple un thème responsive pour un site WordPress. Cela suffit généralement à régler le problème. Mais à mon avis, c'est là que tout commence vraiment. Car un thème responsive signifie seulement que le design s'adapte automatiquement au terminal concerné. C'est la condition sine qua non et elle est donc essentielle.

Un Theme réactif signifie seulement que le design s'adapte automatiquement à l'appareil final respectif.

Dans l'étape suivante, tu devrais regarder ton site web avec une tablette et un smartphone. Tu constateras rapidement si le design responsive est professionnel et accueillant. En effet, il arrive souvent que l'optimisation mobile n'ait pas été effectuée malgré un design responsive.

Pour cela, je voudrais vous donner quelques exemples, que vous avez sûrement remarqués sur certains sites web :

  • La police de caractères du titre est beaucoup trop grande.
  • La police du corps du texte est trop grande ou trop petite.
  • L'espacement des lignes est trop important.
  • Les images sont affichées trop grandes ou trop petites.
  • Certains formats ne s'affichent pas correctement sur l'appareil mobile.
  • La navigation est difficile à utiliser.

Cette liste pourrait être beaucoup plus longue, bien sûr, mais je pense que vous comprenez mon point de vue.

Même si ces aspects ne sont pas optimisés, tu as un site web responsive, ce que Google évalue aussi positivement. Cependant, pour tes visiteurs, tu dois vraiment prendre au sérieux l'optimisation mobile et prendre en compte ces aspects et les faire optimiser par ton programmeur.

Design web responsive & optimisation mobile

En général, tu as un smartphone et peut-être aussi une tablette. Mais si tu veux vérifier ton site web avec différents terminaux mobiles, tu atteindras rapidement tes limites. Il existe cependant une solution très simple pour cela. Si tu utilises le navigateur Google Chrome, tu as une fonction intégrée pour cela.

Tu peux afficher ton "design web responsive" pour de nombreux terminaux différents. Pour ce faire, clique avec le bouton droit de la souris et sélectionne "examiner" dans le menu qui apparaît (en anglais, "inspect"). Une console s'ouvre et tu peux sélectionner les appareils mobiles (voir capture d'écran). Le navigateur te montrera alors comment ton site web s'affiche avec certains terminaux.

test de conception de sites web adaptés aux appareils mobiles

Conseils : Optimiser WordPress mobile

Si tu utilises WordPress, les conseils suivants te seront certainement très utiles. Grâce à WordPress, tu peux effectuer de nombreuses optimisations avec un plugin ou une fonction interne. Cela facilite ton travail et te fait gagner du temps :

  • L'exigence de base est un Theme réactif. Je vous recommande de choisir une prime Theme pour WordPress . Cela coûte quelques dollars, mais vous avez beaucoup plus de possibilités. En outre, une prime Theme est généralement mieux programmée, dont vous bénéficiez également.
  • Si ton thème doit être optimisé dans la vue mobile, tu as deux options. Soit tu modifies le thème, soit tu optimises ton thème existant. Pour l'optimisation, tu peux utiliser un thème enfant. Demande à un·e programmeur·euse de mettre en œuvre les optimisations pour toi.
  • Il existe aujourd'hui de nombreux constructeurs de thèmes qui te permettent de créer facilement le design que tu souhaites et d'optimiser ainsi WordPress pour les mobiles. Thrive Themes ou Divi en sont des exemples.

Si le thème de WordPress est encore nouveau pour toi, mais que tu trouves cela intéressant, tu peux regarder ce qui suit. Sur cette page, tu trouveras un tutoriel WordPress dans lequel tu apprendras toutes les bases importantes de ce système de gestion de contenu génial.

Passons maintenant à une petite astuce secrète qui est extrêmement puissante : dans le texte de ton site web, fais un lien vers des sous-pages internes en rapport avec le sujet. Cela permet à tes visiteurs de naviguer facilement sur ton site. En effet, les utilisateurs de smartphones préfèrent cliquer facilement sur un lien dans le texte plutôt que de chercher péniblement dans le menu Burger.

En procédant à cette simple optimisation, vous créez plusieurs choses positives à la fois :

  • Les liens internes sont un facteur de classement sur Google.
  • En créant des liens internes, vous facilitez la tâche de vos visiteurs et ils se sentent plus à l'aise sur votre site.
  • En moyenne, vos visiteurs consultent plusieurs de vos sous-pages, ce qui augmente le temps qu'ils passent sur votre site. Et c'est aussi un facteur de classement qui aura un effet positif.

"*" indique les champs requis

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Temps de chargement des appareils mobiles

Maintenant, nous avons beaucoup parlé de l'optimisation du site web pour les appareils mobiles. Mais il y a un autre aspect dont tu dois également tenir compte : Le thème de l'optimisation du temps de chargement. Selon moi, ce sujet est particulièrement important pour deux raisons :

  • Le temps de chargement de ton site web est un facteur de classement de Google.
  • Plus le temps de chargement de ton site est long, plus tu auras d'abandons de visiteurs.

Cela se répercute énormément sur les visiteurs mobiles, car les temps de chargement sont toujours un peu plus longs par rapport à l'environnement de bureau. Voici trois conseils concrets pour optimiser WordPress en termes de temps de chargement pour les appareils mobiles :

1 : Images :

Les images représentent le pourcentage le plus élevé du temps de chargement. C'est donc ici que tu as le plus de pouvoir. La chose la plus importante est que tu télécharges les images dans WordPress à la taille exacte dans laquelle tu vas intégrer l'image. Tu économises ainsi de la taille de fichier et tu réduis le temps de chargement.

De plus, il existe aujourd'hui des outils gigantesques qui te permettent de réduire automatiquement la taille de tes images. Tu peux définir toi-même si la qualité doit être maintenue ou légèrement réduite. Pour cela, je te recommande les deux plugins WordPress suivants :

ewww image optimizer optimiser les images

Avec certains plugins d'optimisation d'images, tu peux aussi créer automatiquement des images WebP. Il s'agit d'un tout nouveau format de Google qui réduit encore plus la taille du fichier tout en conservant la même qualité.

2 : Mise en cache

Le deuxième point important concerne la mise en cache. Je ne veux pas entrer dans les détails, car tu n'as pas besoin de connaissances de base.

Le fait est que les recherches dans la base de données ne sont pas effectuées à chaque fois que votre site web (ou une sous-page) est appelé. Grâce au "caching", une copie de chaque sous-page est stockée sur votre serveur et est donc disponible beaucoup plus rapidement car aucune requête séparée ne doit être effectuée.

Ma recommandation de plugin : WP Rocket. WP Rocket est facile à utiliser et complètement configuré en quelques minutes. De plus, le plugin offre d'autres optimisations qui te permettront d'économiser du temps de chargement supplémentaire.

3 : Éliminer les plugins et les thèmes

Certes, ce tuyau semble très banal, et il l'est. Néanmoins, elle est efficace :

Je vous recommande de désinstaller tous les sites Plugins et Themes, que vous n'utilisez pas. Le handicap seul ne suffit pas.

Cela permet également de garder votre système propre et chaque extension supplémentaire comporte un certain risque de sécurité. Au fil du temps, de nombreux Plugins et Themes s'insinuent dans votre vie sans que vous n'en ayez vraiment besoin.

Sur mon site, tu trouveras une série de vidéos gratuites sur la manière d'accélérer WordPress. Ces explications montrent en direct à l'écran quels paramètres tu dois définir et où.

Conclusion : l'optimisation mobile est-elle rentable ?

Internet évolue à la vitesse de la lumière. Il y a beaucoup de sujets intéressants et tu te demandes peut-être si l'optimisation mobile vaut vraiment la peine pour moi ? Bien sûr, c'est à toi de décider. Je te recommande toutefois d'optimiser ton site web dans cette direction :

  • Optimiser le site web pour les appareils mobiles
  • Améliorer et optimiser le temps de chargement

Un site web est LA vitrine qui te sert 365 jours par an. Et pour que ta vitrine remplisse ses fonctions, elle doit être régulièrement polie. Ma recommandation est donc la suivante : polis ton site web pour les appareils mobiles et tu en profiteras certainement.

Responsive Webdesign - tes questions

Quelles questions poses-tu à Oliver ? N'hésite pas à utiliser la fonction de commentaire. Tu veux être informé des nouveaux articles sur le marketing en ligne ? Alors suis-nous sur Twitter, Facebook, LinkedIn ou via notre Newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.