Comment obtenir le succès Mobile-First

Si vous vous tenez au courant des dernières nouveautés en matière de référencement, vous connaissez peut-être les initiatives de Google pour les mobiles.

Surnommé «mobilegeddon» lorsqu’il est devenu connu en 2015, la transition des sites clients vers des expériences mobiles complètes est devenue une priorité pour les SEO partout dans le monde.

L’optimisation pour mobile est bien plus qu’une simple conception. Il s’agit d’une discipline entière conçue pour créer des sites Web qui s’affichent sur un large éventail d’appareils et de résolutions d’écran.

Et, n’oubliez pas, il y a aussi des facteurs SEO impliqués!

À mesure que Google se concentre sur le mobile avec son index mobile-first, il est désormais essentiel de s’assurer que votre site est entièrement optimisé pour la plate-forme mobile.

Si vous ne le faites pas, vous risquez de perdre un trafic important de l’index Google pour mobile.

En mars 2018, Google a annoncé qu’il avait commencé à déployer l’index mobile-first comme valeur par défaut pour tous les nouveaux domaines. Cela signifie que l’index Google est désormais principalement mobile.

Dans les secteurs qui dépendent de sites mobiles distincts sur des sous-domaines m-dot (m.), Vous devez faire certains pas en avant si vous souhaitez participer aux SERPs de Google. Il s’agit d’une décision critique et qui ne doit pas être prise à la légère.

Vous demandez peut-être:

• Quels éléments dois-je prendre en compte pour cette entreprise?
• Comment concevoir pour l’utilisateur mobile?
• Que dois-je faire pour m’assurer que mon site est compatible avec ces mises à jour?

Eh bien, vous avez de la chance, car nous avons les informations que vous pourriez trouver utiles pour réussir la mise en œuvre du mobile-first.

Facteurs de conception mobile à considérer

Ne vous y trompez pas, la conception et l’expérience utilisateur (UX) sont des facteurs critiques si vous espérez réussir la mise en œuvre du référencement mobile.

Des menus mobiles aux modèles de conception reconnaissables, ces éléments sont essentiels pour favoriser des conversions réussies.

En vous assurant que votre site est conçu de cette manière, vous pouvez avancer dans votre campagne de recherche en toute confiance en votre site mobile.

Une approche descendante de la conception mobile est préférable

Développer sur mobile nécessite un état d’esprit axé sur le mobile. Une approche qui fonctionne bien avec cet état d’esprit axé sur le mobile est une approche descendante.

Cette approche signifie qu’une planification approfondie est impliquée dans la création de la version finale. Chaque détail est soigneusement calculé et mesuré afin que votre site mobile ne ressemble pas à un artefact cloué.

Une approche ascendante est exactement le contraire. Le développement se fait module par module, avec peu de planification ou de réflexion impliquées dans le processus en cours de route.

Comme vous pouvez l’imaginer, la création d’un site mobile avec l’approche ascendante est une recette pour un désastre.

Pour des résultats optimaux, utilisez une approche descendante qui tient compte de tout dans votre conception, du plus petit au plus grand.

Menus mobiles

Les menus mobiles doivent être conviviaux, en gardant à l’esprit le plus petit appareil, et ne doivent pas être identiques à 100% à la navigation sur le bureau.

Bien que la structure ne changera pas, les éléments visuels changeront et leur apparence dépendra de votre appareil.

La création de modèles de conception reconnaissables pour votre navigation est essentielle pour obtenir une véritable conception centrée sur l’UX. Cela ne signifie pas copier tous les modèles de conception que vous avez réalisés précédemment.

Au lieu de cela, vous devez créer des icônes et des éléments reconnaissables déterminés par votre public.

N’oubliez pas de «concevoir pour le gros doigt» ou le plus gros doigt de votre public.

S’assurer que vos éléments sont conçus en fonction de ces facteurs se traduira par une expérience qui répond à vos utilisateurs et à leur besoin d’UX qui favorise de meilleures conversions et un site Web plus facile à utiliser.

La conception sans couture est impérative

Créer une conception transparente signifie que vous créez des éléments de conception sur tous les appareils, quelle que soit la plate-forme.

Il s’agit d’un concept différent du design réactif, que nous aborderons ci-dessous. Même s’ils se chevauchent un peu.

Si la conception réactive est créée pour combiner bureau et mobile, la conception transparente fait référence aux éléments de conception mobile.

Lorsque vous avez des éléments de conception homogènes, ils n’apparaissent pas différents sur les autres tailles d’écran. Un bouton rouge sur le bureau n’apparaîtra pas comme un bouton bleu sur mobile, par exemple.

Ou un formulaire d’appel à l’action n’apparaît pas différemment sur l’appareil mobile par rapport à l’appareil de bureau.

Différents éléments ne servent qu’à confondre les utilisateurs, et s’ils se déplacent entre les appareils dans certaines situations, cela ne fera que les confondre.

Envisager des tâches plus importantes et leur flux

À quand remonte la dernière fois que vous avez visité une application mobile, pour constater que son processus pour terminer une action était cauchemardesque par rapport au site Web lui-même?

Cela se produit lorsque la surveillance du développement Web mobile s’éloigne des responsables du site, avec un fluage de la portée et un mauvais jugement obscurcissant l’ingénierie des chemins réussis vers l’achèvement de l’application.

Si votre processus de paiement sur votre site mobile est cauchemardesque pour vos utilisateurs, vous pouvez dire adieu à ces conversions.

N’incluez pas d’actions mineures sur l’écran du mobile. Au lieu de cela, vous devez vous assurer que votre action principale est visible et clairement facile à faire.

Si votre utilisateur doit chercher le paiement par carte de crédit ou s’il doit travailler dur pour trouver autre chose, il abandonnera son panier.

Assurez-vous qu’ils peuvent au moins enregistrer où ils en sont également. Les appareils mobiles sont principalement utilisés en déplacement, et les utilisateurs doivent être en mesure d’enregistrer leurs progrès d’une manière ou d’une autre.

Créer une expérience mobile sans choix pour enregistrer votre place ne sert qu’à irriter et agacer, et pas beaucoup plus.

Évitez les enregistrements forcés

Les murs de connexion qui forcent l’enregistrement doivent être évités. Ces murs apparaissent lorsque votre application affiche un mur de connexion dès son entrée dans l’application elle-même. Vous ne gagnez pas la bonne volonté des utilisateurs lorsque vous forcez leur inscription.

Forcer un utilisateur à s’inscrire peut entraîner des désagréments de sa part et lui faire détester votre expérience mobile.

Le simple fait de faire cela entraîne également une perte de crédibilité et votre position en tant que service que les gens voudront utiliser.

À quand remonte la première fois que vous avez été frustré par le mur de connexion d’une application et que vous avez simplement choisi de ne pas l’utiliser à cause de cela?

Rendez-vous simple à la page d’accueil

Une simple icône menant à l’accueil est un excellent moyen de créer un lien facile vers la page d’accueil de votre site.

Si vous ne permettez pas aux utilisateurs de revenir facilement à la page d’accueil, ils abandonneront probablement votre site pour un autre qui le fera.

Les utilisateurs mobiles ne sont pas tous des référenceurs intelligents comme nous.

Ils ont besoin d’aide pour déterminer où se trouvent les choses sur votre site mobile jusqu’à ce qu’ils se familiarisent avec celui-ci.

Créer une ambiguïté conduit simplement à une mauvaise interface utilisateur et à moins de conversions en conséquence, car vos utilisateurs ne peuvent pas comprendre où se trouvent les choses.

Ce n’est pas parce que vous connaissez votre industrie que votre client la connaît de la même manière.

Utilisez la mise en page correcte

La création d’une mise en page pour l’appareil mobile a ses propres défis, mais peut être effectuée une fois que vous connaissez certaines choses.

Tout d’abord, vous devez savoir ce que les cibles de l’appareil à écran tactile vont faire et comment elles vont fonctionner.

La conception de la bonne taille de doigt est importante car cela signifie que vos utilisateurs pourront utiliser la conception de votre site mobile.

Adobe vous recommande de concevoir des cibles tactiles mobiles avec cette taille en tête: 7-10 mm. Leur argument est que cette taille «permet à un doigt de viser et de toucher la cible sans trop de frustration».

L’objectif ici est de rendre l’accessibilité mobile beaucoup plus facile qu’elle ne le serait autrement et votre site plus facile à utiliser pour l’utilisateur.

N’oubliez pas la taille du texte!

Une autre considération de conception est la taille du texte.

Non seulement la taille du texte des éléments de navigation doit être prise en compte, mais la taille du contenu normal du texte sur la page est également importante.

Sans texte de qualité à une taille lisible, vous pourriez perdre des lecteurs. Et vous ne pourrez pas communiquer efficacement.

En incluant la bonne taille de texte appropriée à l’application de votre site mobile, il vous aidera à fidéliser les lecteurs en les conservant sur votre site.

Ne laissez pas une chose simple comme la taille du texte vous empêcher de capturer votre public et de vous engager avec lui.

Le rapport de contraste des couleurs de votre texte est une chose à laquelle vous devez penser.

Il s’agit d’un point d’accessibilité car plus votre rapport de contraste est mauvais, plus vous excluez certains types de lecteurs (en particulier ceux qui sont daltoniens0.

Utilisez l’outil de vérification du contraste des couleurs du site Web ici pour déterminer si les couleurs que vous avez choisies atteignent ou non le seuil minimum d’accessibilité défini par le niveau que vous souhaitez atteindre.

Adobe recommande un rapport de contraste de 4,5: 1.

En savoir plus sur les directives d’accessibilité des couleurs du W3C pour en savoir plus sur les taux de contraste des couleurs.

Considérations relatives au référencement Google Mobile

En plus de la conception, il y a des considérations de référencement pour l’index Google Mobile-First, surtout si vous passez à Mobile-First.

Les considérations incluent des choses comme:

• Vitesse de page.
• Multiplateforme.
• Compatibilité multi-affichage.
• Non compris les pop-ups ou les interstitiels.
• Contenu mobile.
• Optimisation d’image appropriée.

L’index Google Mobile-First ne contient que les résultats mobiles

Il était une fois avant l’index Google Mobile-First, vous aviez un mélange de résultats sur ordinateur et sur mobile.

Si quelqu’un effectuait une recherche à partir du bureau, il obtiendrait des résultats filtrés pour le bureau.

Si quelqu’un effectuait une recherche sur un appareil mobile, il afficherait des résultats adaptés au mobile.

Ce n’est plus le cas. Depuis la mise à jour Google pour mobile, tous les résultats de recherche sont déterminés à l’aide de la version mobile de la page indexée.

La considération ici est critique car elle affectera la façon dont vous créez du contenu et la conception de votre appareil mobile.

Ce que Google considère comme un appareil mobile

Pour poursuivre la bonne stratégie dans la lutte contre le monde du référencement mobile, nous devons d’abord identifier ce que Google considère comme un appareil mobile. Considèrent-ils tous les appareils portables comme les appareils mobiles?

Non, ils ne pas.

Dans les Consignes aux développeurs Web de Google pour les appareils mobiles, ils mentionnent ce qui suit:

« Mobile: Dans ce document, «appareils mobiles» ou «mobiles» fait référence aux smartphones, tels que les appareils fonctionnant sous Android, iPhone ou Windows Phone. Les navigateurs mobiles sont similaires aux navigateurs de bureau en ce sens qu’ils peuvent afficher un large éventail de spécifications HTML5, bien que leur taille d’écran soit plus petite et dans presque tous les cas leur orientation par défaut soit verticale.

Comprimés: Nous considérons les tablettes comme des appareils dans leur propre classe. Lorsque nous parlons d’appareils mobiles, nous ne faisons généralement pas référence aux tablettes. Les tablettes ont généralement des écrans plus grands, ce qui signifie que, sauf si vous proposez du contenu optimisé pour les tablettes, vous pouvez supposer que les utilisateurs s’attendent à voir votre site tel qu’il apparaîtrait sur un navigateur de bureau plutôt que sur un navigateur de smartphone. »

Comme vous pouvez le voir, il est préférable de poursuivre une approche de conception réactive, car elle cible tous les appareils mobiles et répond aux exigences de Google en matière de compatibilité avec les mobiles.

C’est pourquoi une approche descendante est si importante. Il prend en compte tous les appareils potentiels plutôt que simplement un ou deux.

Assurez-vous que votre contenu est le même

Votre contenu doit être le même sur ordinateur et sur mobile.

Vous vous demandez peut-être si un contenu plus long convient mieux à l’un ou l’autre.

Vous serez peut-être surpris d’apprendre que les gens liront réellement un long contenu sur les appareils mobiles selon cette étude de cas:

Cette étude de cas montre également ce qui suit:

«Les données révèlent également que si le contenu des nouvelles plus court est beaucoup plus répandu que le format long et attire donc plus de trafic total, les articles longs sont accessibles à peu près au même rythme. Au total, 76% des articles étudiés comptaient moins de 1 000 mots. Mais, article pour article, les histoires longues attirent les visiteurs à peu près au même rythme que les versions courtes: 1 530 interactions complètes par article long et 1 576 par forme courte. »

Si vous n’avez pas le même contenu sur le bureau que sur le mobile, vous pouvez être victime de réclamations de camouflage ou d’autres tactiques SEO manipulatrices.

En cas de doute, utilisez toujours le même contenu sur les deux plateformes.

Assurez-vous que Google est capable de tout explorer

Pour certains sites, vous pouvez avoir de nombreuses ressources bloquées dans votre fichier robots.txt.

Ces ressources incluent des éléments comme JavaScript, CSS et d’autres types de fichiers que vous ne souhaitez peut-être pas indexer.

Sans surveillance adéquate du développement, vous pourriez rapidement perdre de vue ces types de fichiers.

Effectuez une analyse de votre fichier robots.txt et assurez-vous qu’il ne bloque pas trop de ressources critiques.

Ces ressources affectent toutes le rendu, l’analyse et l’indexation.

Pour tirer le meilleur parti de votre site mobile, vous devez vous assurer que votre site est entièrement explorable et accessible par Google mobile.

Comme Gary Illyes de Google le dit: « Faites ce putain de site explorable! « 

Traitez les interstitiels ennuyeux avant d’être pénalisé

Connaissez-vous les interstitiels?

Vous ne savez peut-être pas ce que c’est, surtout si vous les avez rencontrés en passant.

Vous savez, les publicités qui apparaissent bloquent la page sur les appareils mobiles?

Des publicités qui ne semblent tout simplement pas vouloir s’arrêter ou qui vous permettent de cliquer pour éviter leur agacement?

Celles-ci sont connues sous le nom d’interstitiels ou de publicités modulaires qui s’affichent inopinément dans la fenêtre de votre téléphone.

Ils bloquent votre expérience de visionnage, vous obligeant parfois à cliquer sur les annonces.

Google a déployé une pénalité interstitielle, en 2017.

Pour vous assurer que vous ne respectez pas les directives de Google à cet égard, vous devez vous assurer que:

• Le site ne cache pas de contenu avec des annonces.
• Les fenêtres contextuelles ont un objectif.
• Les plugins (si vous utilisez WordPress) sont conformes aux directives de Google pour les interstitiels.

Testez votre conception mobile et ajustez-la au besoin

Une fois votre conception terminée, c’est une excellente idée de la tester à l’aide d’un programme de test comme Browser Stack.

Ce programme vous permettra de visualiser votre site mobile sur autant de plates-formes différentes que possible, fournissant une rétroaction directe que vous ne recevriez pas grâce à l’analyse traditionnelle.

L’élaboration d’une méthodologie de test vous permettra d’augmenter l’efficacité et de détecter les problèmes de conception avant qu’ils ne deviennent des problèmes pour vos clients.

Vous pouvez également utiliser l’extension Web Developer Toolbar pour Chrome et Firefox pour tester votre conception mobile directement dans votre navigateur.

La vitesse des pages est critique

Des sites Web plus rapides sur mobile devraient être votre objectif ultime.

Maintenant, plus que jamais, l’optimisation de la vitesse des pages doit être un élément essentiel de votre stratégie d’optimisation.

Il existe de nombreuses façons d’atteindre les vitesses de page les plus faibles possibles sur votre site Web.

La compression d’images sans perte d’Adobe Photoshop pour le Web est une fonction formidable que vous pouvez utiliser pour redimensionner et resserrer physiquement vos graphiques.

Quelle est la différence entre le redimensionnement physique et le crunching?

Lorsque vous redimensionnez physiquement vos images, vous ne redimensionnez que les dimensions de largeur et de hauteur. Votre densité de pixels reste la même.

Vous vous retrouverez donc avec une image plus petite, mais la taille de votre page sera toujours de 300 Mo en raison de cette image de 300 Mo.

Crunching votre image se réfère à la réduction de la densité de pixels physiques de l’image. La compression d’images sans perte d’Adobe Photoshop cible les deux, et vous devez choisir les paramètres appropriés pour ce faire.

Si vous avez un site WordPress, l’utilisation d’un plugin appelé SMUSH peut faire les deux pour vous, résultant en une image finale qui se charge assez rapidement pour mobile.

Testez votre site pour la vitesse de la page

L’évaluation de la vitesse des pages de votre site et les ajustements nécessaires sont un autre point critique de votre processus d’optimisation.

En utilisant l’outil ici, vous pouvez tester uniquement la vitesse de votre page et apporter les modifications nécessaires pour satisfaire leurs recommandations.

Tester régulièrement votre site peut vous tenir au courant des modifications récentes apportées par votre développeur Web ou tout autre membre de votre équipe. Et, cela vous aidera à contrôler les goulots d’étranglement de la vitesse de votre page.

En cas de doute, testez toujours!

Obtenir votre site sur mobile prend d’abord du temps

Ne vous y trompez pas, vous assurer que votre site est entièrement compatible avec les mobiles est une entreprise opportune et coûteuse.

En utilisant les principes ci-dessus et en travaillant sur l’intégration d’une philosophie entièrement axée sur le mobile, il est possible d’obtenir votre site sur mobile.

L’embauche d’un développeur compétent est la première étape. Ceci est suivi d’une approche descendante, garantissant que toutes les pièces du puzzle SEO mobile de votre site s’assemblent correctement.

Il est essentiel de s’assurer que les goulots d’étranglement sont bouchés et ne présentent aucun autre problème, ainsi que la mise en œuvre de conceptions crédibles d’éléments mobiles qui raviront vos consommateurs.

Malgré le défi, mettre votre site sur une plate-forme mobile-first est crucial à l’heure actuelle de l’index mobile-first de Google.

Vous devez vous tenir à jour en lisant autant de ressources que possible sur le sujet avant de vous lancer dans les parties de gestion de projet.

Un simple aperçu au niveau de la surface suffit, à condition d’embaucher le bon développeur qui peut coder votre site.

Que vous soyez un SEO ou quelqu’un qui se familiarise avec toutes les pièces mobiles, vous devez vous assurer que toutes vos tâches d’optimisation mobile sont effectuées correctement.

Vos performances SERP vous en remercieront plusieurs fois.

Davantage de ressources:

Crédits d’image

Image vedette: Créé par l’auteur, février 2020