Parties de la version mobile. Lequel choisir : mobile versus responsive design ? Comment se passe le développement de la version mobile dans notre studio web

Sergueï Loukochkine

26.03.2015 | | 0 commentaire

Internet a révolutionné le comportement des consommateurs. Pendant longtemps, ils ne sont pas allés en magasin pour sélectionner un produit. Bien au contraire : ils « grimpent » d'abord sur Internet, trouvent un produit, le comparent à des concurrents, puis trouvent un magasin, le comparent à d'autres et décident ensuite seulement où faire un achat.

Ce n'est qu'après cela qu'ils se rendront dans le magasin choisi ou commanderont simplement le produit via Internet. Aujourd'hui, plus de 60% des acheteurs font exactement cela.
Il semblerait que pour réussir, votre entreprise ait besoin d'un site Web ou d'une boutique en ligne, et c'est tout. Cependant, maintenant, cela ne suffit pas.

Pourquoi un site mobile ou un design réactif est-il important pour les entreprises ?

Le fait est qu'avec l'avènement des smartphones et des tablettes, de plus en plus d'acheteurs recherchent des biens et services sur Internet en utilisant ces appareils, et non à partir d'ordinateurs fixes ou portables. Et tout cela parce que c'est très pratique. Où que se trouve l'acheteur, il peut chercher directement depuis son téléphone portable, et il n'est pas nécessaire d'allumer l'ordinateur.
C'est génial, mais la taille physique de l'écran d'un gadget portable, qu'il s'agisse d'une tablette ou d'un smartphone, est assez petite et, par conséquent, un site qui a fière allure sur un ordinateur ou un ordinateur portable est très gênant pour l'affichage sur l'écran d'un appareil mobile.
C'est pourquoi il est maintenant plus important que jamais que votre site soit adapté à une utilisation sur smartphones, tablettes ou phablettes (une phablette est quelque chose entre la taille, entre un smartphone et une tablette).

Comment rendre votre site mobile friendly ?

Il existe deux approches pour résoudre ce problème :

1. Créer une version distincte du site qui s'ouvre sur un appareil mobile
2. Créez un site Web avec un design réactif qui s'adapte à n'importe quelle taille d'écran

C'est la deuxième option qui a reçu l'utilisation la plus répandue, car elle est moins chère à développer. La plupart des sites Web modernes sont conçus dès le départ de manière à être tout aussi confortables à consulter sur différents écrans.
Site responsive, s'ajuste automatiquement à la taille de l'écran de l'appareil sur lequel il est visualisé.
Par exemple, le site de notre laboratoire. Voici à quoi ressemble cet article sur un écran d'ordinateur.

Et voici à quoi cela ressemble sur un écran de smartphone


Comme vous pouvez le voir, même sur un smartphone, rien n'a besoin d'être zoomé. Tous les contrôles, liens, ainsi que les images et les polices sont très faciles à utiliser, même sur un petit écran.
Bien sûr, le coût et le temps de développement d'un site Web adaptatif ont augmenté, mais en même temps, quel que soit le marché sur lequel vous travaillez, un site Web avec un design réactif est un investissement très opportun pour votre entreprise. Et voici une liste des raisons les plus importantes.

Les 5 principales raisons de créer un site Web d'entreprise réactif

Recherche mobile. Selon les statistiques (au moment d'écrire ces lignes), plus de 50 % des acheteurs recherchent des biens et services sur Internet à partir d'appareils mobiles. Et ce chiffre augmente très rapidement. Plus récemment, Google a annoncé que les sites qui n'ont pas de version mobile se classeront très bas dans les résultats de recherche mobile. Par conséquent, si vous ne possédez pas de version mobile du site, ne vous étonnez pas qu'il sera difficile de vous trouver dans une recherche sur smartphone.
Convivialité d'utilisation. Encore une fois, selon les mêmes statistiques, plus de 40% des utilisateurs ont déclaré qu'ils iraient sur un autre site si celui-ci n'avait pas de version mobile. Et encore une fois, leur part ne cesse de croître. Pour les entreprises, cela signifie que l'attention de l'acheteur sera captée par le fournisseur dont le site Web est pratique sur n'importe quel appareil.
Contact direct. Le smartphone permet à l'utilisateur d'appeler immédiatement le numéro de téléphone indiqué sur le site Internet (si le site Internet dispose d'une fonction click-to-call). Ainsi, vous vous rapprochez beaucoup plus de l'acheteur potentiel.
De nouvelles opportunités de promotion. Aujourd'hui, la publicité mobile se généralise, mais si vous n'avez pas de site mobile, son efficacité sera catastrophiquement faible. En revanche, les sites adaptés aux mobiles bénéficient d'un autre canal de promotion puissant.
Avantage compétitif. Et la dernière chose. Vérifiez si vos concurrents ont des versions mobiles de leurs sites. Sinon, vous avez une excellente occasion de créer un puissant avantage concurrentiel et d'obtenir les clients qui quittent les sites obsolètes de vos adversaires.

A l'ère d'Internet, la compétition est remportée par celui qui est le plus accessible à la majorité des utilisateurs du réseau, celui qui est le plus facile à trouver et avec lequel il est plus facile d'interagir depuis n'importe quel appareil.
Vous doutez encore d'avoir besoin d'une version mobile du site ou d'un responsive design ?

Cet article vous aidera à décider si vous avez besoin d'une version mobile du site, pourquoi vous en avez besoin et de quelles versions il dispose. Nous partagerons également quelques chiffres intéressants sur le sujet.

Les systèmes d'exploitation mobiles représentent environ 25 % du trafic Internet, et ce chiffre augmente chaque jour. Avec la croissance des internautes utilisant un appareil mobile, la question se pose de savoir s'il faut adapter le site au trafic mobile, quelles méthodes existent et cela en vaut-il la peine ? Trouvons-le !

Pourquoi un site Web a-t-il besoin d'une version mobile ?

• Il est beaucoup plus pratique d'utiliser la version mobile du site à partir de gadgets : il n'y a pas besoin de défilement horizontal du site, toutes les fonctionnalités du site fonctionnent correctement, la navigation sur le site procure du plaisir à l'utilisateur ;
• La version mobile du site est beaucoup plus légère, a un code moins volumineux, grâce à cela, le site à partir de gadgets mobiles se chargera plusieurs fois plus rapidement, ce qui aidera l'utilisateur à économiser de précieux mégaoctets;
• Une version spécialement développée du site pour les téléphones mobiles vous permet de travailler avec ce public cible, par exemple, pour la version mobile d'une boutique en ligne, vous pouvez insérer un message SMS directement depuis la version mobile ou déterminer l'emplacement et la distance au point de vente le plus proche ;
• Les moteurs de recherche utilisent la recherche mobile pour les téléphones, donc la version mobile de votre ressource sera mieux classée et le nombre de clics augmentera en conséquence.

Types de la version mobile du site

1. Conception adaptative... Avec CSS3, vous pouvez définir vos propres styles pour différentes tailles d'écran de site. Cette méthode est largement utilisée aujourd'hui, et elle est bonne car elle ne nécessite pas la production de pages supplémentaires sur le site. L'inconvénient est que tout sur le site n'est pas optimisé, le poids de la page est toujours élevé, mais en adhérant au principe « mobile first », cela peut être évité (principe lorsque le site est d'abord optimisé pour les téléphones mobiles).
2. Site mobile séparé... Les modifications apportées à cette version sont plus faciles à mettre en œuvre, car les structures de la version mobile et de la version desktop ne dépendent pas l'une de l'autre en termes de code.
3. RESS... Dans cette méthode, le logiciel côté service détecte l'appareil et affiche son code HTML et CSS pour celui-ci. Les inconvénients ici résident dans le fait que la technologie pour déterminer l'appareil de l'utilisateur n'est pas idéale, et c'est une charge supplémentaire sur le serveur.
4. - Demande séparée... Ce n'est pas exactement ce qui est qualifié d'espèce. Il s'agit plutôt d'un complément. Il y a de plus en plus d'applications, et certains utilisateurs ont commencé à faire des achats et à consulter les actualités des sites principalement par leur intermédiaire. Cette décision mérite réflexion sur les grands projets Internet visités ou voués à la réussite commerciale.

Fonctions requises dans la version mobile du site

1. Compatibilité... Le site doit s'afficher correctement sur les résolutions d'écran les plus courantes (480x320, 1280x720, etc.). Sur de tels sites, il est préférable d'utiliser xHTML, il est préférable de contourner JavaScript.
2. Convivialité... La navigation est la clé du succès, et une bonne navigation est un chemin direct vers la victoire, essayez de tout faire parfaitement, demandez constamment à vos amis ou dans divers forums d'évaluer la version, tenez compte des corrections proposées par les utilisateurs dans le développement ultérieur ;
3. Optimiser le contenu... Ce point s'applique particulièrement aux images : elles doivent être légères en kilo-octets et en taille ;
4. Concevoir. Le composant le plus important... La tendance actuelle du design pour mobile est la légèreté maximale et la facilité d'utilisation.

De quel type de site la version mobile a-t-elle d'abord besoin ?

Des études de différents portails Internet permettent d'évaluer la faisabilité de créer une version mobile pour les thématiques suivantes :

• Réseaux sociaux et services similaires;
• Médias de masse ;
• Magasins en ligne;
• Portails de référence.

Pour savoir avec certitude si votre site a besoin d'une version mobile, analysez le trafic de votre ressource au cours de la dernière année via n'importe quel système d'analyse, et si la part du trafic mobile est de 18% ou plus, pensez à créer une version mobile dès que possible .

Pensez-vous encore? Nous vous proposons de méditer sur ces petites statistiques :

• Les téléphones portables sont utilisés plus de 87% population, les 13 % restants sont des enfants de moins de 5 ans ;
• La croissance du commerce mobile d'ici 2020, selon diverses organisations, augmentera de plus de 99 fois.

La façon dont nous adaptons le site aux appareils mobiles détermine le coût de la promotion sur les moteurs de recherche et son résultat.

Vers les signets

Dmitry Mrachkovsky, un optimiseur d'Ashmanov & Partners, a expliqué comment choisir entre un site adaptatif et un site mobile et quels problèmes non évidents doivent être rencontrés.

Avantages des sites réactifs et mobiles

Il est difficile de répondre sans équivoque à la question de savoir quelle technologie d'adaptation pour smartphones et tablettes est la plus efficace en termes de référencement. Même parmi les acteurs majeurs, je n'ai pas remarqué d'avantage en faveur d'une quelconque décision. M.Video, DNS, Wildberries, Aviasales utilisent une mise en page adaptative et Lamoda, 220 Volt, Yulmart, Yandex.Market utilisent des sites mobiles. Mais voyons quels sont les avantages du premier et du second.

Mise en page adaptative du site "M.Video" et de la version mobile du site "220 Volts"

La mise en page réactive permet de se passer de développer une version mobile distincte. Cela a des avantages :

• Nous n'avons pas besoin d'une structure de page distincte pour l'affichage sur les appareils mobiles. Il suffit de corriger la version desktop du site à l'aide de CSS.
• Une seule URL est utilisée pour les versions de bureau et mobiles. Par conséquent, le contenu du site n'est pas dupliqué, les pages ne se font pas concurrence et le travail de promotion affecte le classement dans les recherches sur ordinateur et mobile.

La version mobile est une solution plus coûteuse et flexible. Il peut être modifié sans affecter le site principal. Cela donne des avantages :

• Un site mobile peut être rendu aussi léger et chargé que possible en supprimant les fonctionnalités inutiles au niveau du code.
• L'interface peut être améliorée pour les utilisateurs mobiles en ajoutant des fonctionnalités qui n'étaient pas disponibles sur la version de bureau du site.
• L'utilisateur peut toujours basculer vers la version principale du site sur un appareil mobile s'il le souhaite.

Je voudrais mentionner une autre technologie - RESS. Il affiche les modèles de bureau ou de mobile de l'utilisateur selon l'appareil, mais l'URL de la page ne change pas. RESS combine les avantages d'une version adaptative et d'une version mobile décrits ci-dessus. Mais il présente également deux inconvénients : une implémentation complexe et coûteuse et des erreurs dans l'identification de modèles de téléphones rares et impopulaires.

Problèmes avec la mise en page réactive

Adaptive est une solution économique et pratique, mais du point de vue de la promotion sur les moteurs de recherche, elle présente plusieurs pièges.

Mauvaise interprétation de l'adaptatif

Certains implémentent de manière incorrecte la mise en page adaptative et affichent deux modèles sur une page dans le code - ordinateur de bureau et mobile. Selon l'appareil de l'utilisateur, la partie requise du code reste visible, tandis que le reste est masqué à l'aide de l'affichage : aucun. Alors trois problèmes se posent :

1. Tous les éléments de contenu sont chargés deux fois : textes, images, en-têtes H1 et H6, fils d'Ariane, produits associés et vedettes, etc. Et les moteurs de recherche n'aiment vraiment pas les doublons.
2. Les éléments de contenu inutilisés sont masqués avec CSS. L'opinion des moteurs de recherche sur cette question est ambiguë. Google a déclaré ignorer le contenu des blocs cachés et Yandex - qu'il prend en compte l'intégralité du contenu de la page. La plupart des référenceurs s'accordent à dire qu'un tel stratagème crée un risque d'être sanctionné.
3. Le code est dupliqué et le site se charge plus lentement.

Une telle mise en œuvre est une mauvaise approche de la technologie RESS.

Cacher les éléments inutiles

Pour rendre l'interface de la version adaptative plus pratique, certains se débarrassent de certaines fonctionnalités : blocs de distraction, textes volumineux dans les catégories de catalogue, etc. Tout ce qui est inutile est masqué à l'aide de l'affichage : aucun. Mais le problème est que tout le code est utilisé pour charger la page et que le site est lent. De plus, comme mentionné ci-dessus, les moteurs de recherche ont une attitude controversée à l'égard de tels contenus - il existe un risque de tomber sous le coup de sanctions.

Utilisation abusive de JavaScript

Certaines personnes utilisent JS pour éviter de rendre des blocs supplémentaires sur les appareils mobiles. Mais cette façon n'est pas meilleure que l'affichage : aucun. Il existe un risque que les moteurs de recherche n'indexent pas le contenu qui leur est destiné, même sur la version desktop. Les moteurs de recherche ne perçoivent généralement pas toujours correctement le contenu AJAX, surtout si un certain nombre de conditions pour une indexation correcte ne sont pas remplies.

Pourquoi le responsive design est-il encore utilisé ?

Le choix d'un adaptatif est généralement dû à deux avantages principaux : le développement d'une seule version du site et l'absence de problèmes avec plusieurs URL.

C'est également une solution pratique pour la promotion dans plusieurs régions. Nous concentrons tous nos efforts sur un domaine et obtenons des résultats dans les recherches sur ordinateur et mobile. Pour ce faire, vous devez lier les régions d'intérêt au site dans Yandex.Directory.

Et pour Google, créez une page avec des adresses d'affiliés pour que le moteur de recherche comprenne dans quelles régions vous travaillez. M.Video utilise une mise en page adaptative avec un seul domaine avec beaucoup de succès. Le magasin occupe des positions élevées dans les résultats de recherche mobiles et de bureau pour les demandes de produits, de catégories et d'informations.

Alternativement, vous pouvez utiliser des sous-domaines géographiques pour augmenter la pertinence du texte de vos pages. Dans ce cas, des sous-domaines tels que spb.site.ru, samara.site.ru, kazan.site.ru se voient attribuer des régions via Yandex.Webmaster, puis les en-têtes et les balises META sont attribués avec le toponyme. Autre avantage : pour les sous-domaines géographiques, il est facile de configurer des analyses distinctes pour suivre les résultats par région. Cette méthode de promotion est pratiquée par MediaMarkt.

Problèmes avec les versions mobiles des sites

Le coût de développement relativement élevé n'est pas le seul inconvénient des sites mobiles. Voici une liste des problèmes moins évidents auxquels vous pouvez être confronté lors du choix de cette technologie.

Travail de double promotion

Le site mobile est optimisé et promu séparément du site principal, et cela nécessite plus de ressources que dans le cas du responsive. Vous devez commencer l'optimisation en vous assurant que la version mobile est correctement indexée et n'entre pas en concurrence avec celle de bureau. Pour ce faire, associez-les dans Yandex.Webmaster et Search Console, spécifiez les bons attributs rel = "alternate", configurez l'indexation et la génération d'une carte XML.

Chaos dû aux liens absolus dans le contenu

Dans 99% des cas, les modèles de bureau et mobiles téléchargent du contenu à partir d'une base de données. S'il utilise des liens absolus vers la page interne du site de bureau avec une indication du protocole et du domaine, ils seront également affichés sur la page mobile. En cliquant sur le lien, l'un des deux scénarios se produira :

• Si l'agent utilisateur est défini pour la version de bureau, la version mobile de la page s'ouvrira à l'utilisateur.
• Dans d'autres cas, l'utilisateur verra la page du bureau et le travail de création d'une version mobile sera vain.

Dans ce cas, le poids du lien interne du site peut être violé. Pour éviter ce problème, utilisez des liens relatifs dans votre contenu. Autrement dit, pour l'attribut href, spécifiez / page / au lieu de https://site.ru/page/.

Le contenu et la structure des sites pour ordinateur et mobile peuvent différer. Par conséquent, il est logique d'indexer le contenu des deux dans la recherche afin d'éviter les erreurs. Google, en revanche, recommande sur la version mobile d'indiquer que le contenu du site desktop est canonique. En revanche, le moteur de recherche indique que le contenu des pages non canoniques n'est pas comptabilisé.

Yandex est clair à cet égard - il indexe le contenu des pages mobiles et de bureau séparément. Pour ce faire, il suffit de définir l'attribut rel = "alternate" de la version principale vers la version mobile, et vous pouvez également mettre en place des redirections 301 de la version desktop vers la version mobile, en tenant compte de l'agent utilisateur du dispositif.

Exigences peu claires de l'index mobile-first

Pour préparer le passage à l'index mobile-first, il est logique de choisir la version mobile du site comme page canonique. Certes, il existe des ambiguïtés dans les recommandations concernant le mobile-first. Par exemple, les directives de Google indiquent que le contenu sur mobile et ordinateur de bureau doit être similaire, mais ne divulgue pas le degré de « similitude ».

Mais que se passe-t-il si un certain bloc de contenu est requis pour le classement dans la recherche sur ordinateur, ce qui dans la version mobile sera superflu, mais la priorité sera donnée à la version mobile ?

Extrait du Guide de Google pour l'indexation des sites mobiles

Extrait du rapport de Google sur la mise en œuvre de l'index mobile first

Utilisation inconsidérée des pages turbo

Certaines personnes introduisent les innovations des moteurs de recherche sans discernement, dans l'espoir d'influencer le classement. Par exemple, les pages turbo Yandex, qui ne remplacent pas les pages mobiles à part entière dans la recherche, incluent une petite partie des fonctionnalités utilisateur et convertissent moins. Si vous avez un site commercial et que vous avez confiance en la qualité de la version mobile, ne vous précipitez pas pour implémenter "turbo" - même pour les pages contenant des articles et des critiques.

Réduire l'effet des liens externes

Les liens sont toujours importants pour le classement, en particulier dans les recherches Google. Lorsque nous avons un sous-domaine mobile, certains utilisateurs commencent à s'y connecter dans les réseaux sociaux et les forums. Et l'autre partie utilise des liens vers l'adresse principale du site. Par conséquent, les liens ont moins d'impact sur les recherches sur mobile et sur ordinateur que si nous n'avions qu'un seul domaine.

Caractéristiques de la promotion dans les régions

Ci-dessus, nous avons parlé de deux moyens de promotion régionale d'un adaptatif - en utilisant un seul domaine et des sous-domaines géographiques. Considérons également ces options pour les versions mobiles.

Dans le premier cas, nous promouvons le domaine principal et le sous-domaine mobile m.site.ru. Chacun d'eux doit spécifier les régions via le "Yandex.Directory". Le problème est qu'il est parfois impossible de lier la version mobile du site à la succursale par vous-même. Vous devrez contacter le support technique, mais cela ne garantit pas non plus le résultat. Vous ne pouvez pas créer une organisation distincte pour la version mobile du site. Par conséquent, s'il y a plusieurs branches, la liaison peut prendre beaucoup de temps.

Nous excluons généralement l'option utilisant des sous-domaines comme m.spb.site.ru ou spb.m.site.ru. Bien que "Refrigerator.ru", par exemple, l'utilise. Mais dans ce cas, vous devez configurer l'adressage entre toutes les régions des versions mobile et de bureau, les tenir à jour, suivre les modifications et surveiller les services pour les webmasters. C'est un travail énorme et il est peu probable qu'il soit payant.

Envoi pour vérifier « l'adéquation mobile »

Si vous n'envoyez pas la version optimisée du site à Yandex.Webmaster pour les tests d'adéquation mobile, elle peut ne pas apparaître dans les résultats de recherche mobile. Le problème s'applique également à l'adaptatif. Cela n'arrive pas toujours, mais je vous recommande de suivre les messages du "Webmaster".

Fragment de communication avec le support technique Yandex sur l'attribution d'une région à la version mobile du site

Pourquoi les versions mobiles sont-elles utilisées ?

Les principaux avantages des versions mobiles sont sans aucun doute la possibilité de créer un modèle séparé et une vitesse de chargement élevée. De plus, il est plus facile pour les sites plus anciens de créer une version mobile distincte que d'en implémenter une adaptative.

De plus, de nombreux spécialistes du référencement ont noté une augmentation du trafic de recherche après l'introduction d'un site mobile au lieu d'un site adaptatif. Bien que je n'exclue pas que la raison de la croissance soit qu'il y avait des erreurs dans leur mise en page adaptative qui ont affecté négativement le classement.

Quelle option choisir

Si vous développez un site Web à partir de zéro ou si vous avez un petit projet, jetez un œil à la mise en page réactive. C'est une solution plus économique et plus rapide. Cependant, il est préférable de planifier la fonctionnalité immédiatement afin de ne pas avoir à masquer une partie du site sur les appareils mobiles à l'avenir.

Si vous privilégiez l'expérience utilisateur, vous devriez opter pour la version mobile. Il peut être modifié sans affecter le bureau. Ceci est important si le site occupe une position de leader dans les résultats de recherche sur ordinateur de son segment.

Vous pouvez également utiliser la technologie RESS, mais rappelez-vous que dans ce cas Google préfère la version mobile.

Extrait du Guide de Google pour l'indexation des sites à l'aide de RESS

Quelle que soit la technologie que vous choisissez, essayez de vous assurer que le site et ses versions sont correctement indexés, chargés le plus rapidement possible et affichés sur tous les appareils sans problème.

Merci aux spécialistes du référencement

Tout le monde parle de mobilité : des petites agences de marketing aux géants comme Yandex et Google.

Dans cet article, nous vous expliquerons pourquoi la version mobile du site fait tant de bruit, quelles exigences doivent lui être imposées et si vous en avez personnellement besoin.

Et je vais immédiatement révéler un grand secret, après sa mise en œuvre, nous avons commencé à recevoir plus de commandes. Tout. Le reste est plus loin.

Pourquoi? Pourquoi? Pourquoi?

Vous pouvez parler de la nécessité d'adapter le site aux appareils mobiles de différentes manières.

Mais globalement, il y a deux bonnes raisons en faveur de la création d'une version mobile du site - utilisateur et technique.

Regardons chacun de plus près. A la fois, comme d'habitude, court et précis. Nous laissons l'eau à l'extérieur des portes.

Convivialité

En 2016, les analystes de StatCounter ont été les premiers à remarquer que la part du trafic mobile dépassait celle du desktop : 51,3 % contre 48,7.

Cela signifie qu'en moyenne, tout site sur Internet est visité plus souvent à partir d'un téléphone que d'un ordinateur.

En Russie, le tableau est à peu près le même : la part des smartphones est supérieure à celle des ordinateurs et autres appareils. En témoignent les recherches de la société GfK Rus :

Statistiques

Chaque année, l'écart se creuse de plus en plus - par exemple, en 2018, la croissance était de 20 %. De plus, les analystes disent que ce n'est pas la limite.

Cette mise en page doit certainement vous faire réfléchir : à quoi ressemble votre site sur l'écran des smartphones.

Et très probablement la réponse est mauvaise. Lorsque vous ouvrez un site normal non adapté depuis un téléphone portable, la visualisation se transforme en quête - vous devez redimensionner les pages, viser les petits liens, attendre un long chargement.

Ajoutez à tout cela la précipitation et un tas de distractions - après tout, s'asseoir au téléphone n'est pas la même chose que s'asseoir sur un ordinateur, lorsque le visiteur est complètement concentré sur l'écran.

Les utilisateurs ne rechercheront pas la section souhaitée pendant longtemps et ne comprendront pas l'interface - le site Web d'un concurrent pratique est toujours ouvert dans l'onglet suivant.

Préférences des moteurs de recherche

Google et Yandex se noient depuis longtemps pour les versions mobiles. À cette fin, le premier a publié un algorithme spécial Mobile-first Index, par lequel il évalue la commodité d'un site mobile et, en fonction de cela, détermine sa position dans la recherche.

Pour le second, l'algorithme est sorti plus tard, mais en termes d'importance il est à peu près au même niveau. Il s'appelle "Vladivostok".

Il existe également des raisons indirectes qui affectent la situation de la version mobile dans la recherche. Entre autres facteurs, les moteurs de recherche prennent également en compte les caractéristiques comportementales.

Il s'agit du temps que vos visiteurs passent sur le site, du nombre de pages qu'ils ouvrent, de l'activité avec laquelle ils cliquent sur les boutons et les commutateurs.

Si un utilisateur passe d'un téléphone mobile à un site de bureau classique, il n'y restera pas longtemps.

Cela signifie que les caractéristiques comportementales vont se détériorer. En conséquence, vous êtes sur les dernières pages inhabitées de Yandex et Google.

Nous ne vous avons pas encore convaincu ? Ensuite, vérifiez par vous-même si vous avez besoin d'une version mobile, ou plutôt, à partir de quels appareils les visiteurs viennent sur votre site.

Vous pouvez le faire dans Google Analytics dans le rapport « Audience -> Mobile -> Aperçu ». Si c'est le cas, allez dans « Rapports -> Technologies -> Périphériques ».

Analytique

Si vous voyez qu'il y a plus de 15% de smartphones, alors c'est un signal d'alarme pour vous - il vous suffit d'optimiser votre site pour les téléphones mobiles. Par conséquent, voyons quels sont les moyens de le faire en général.

Important. Cette situation n'est pas observée chez tout le monde. Et dans certaines régions, l'utilisation de la version mobile est interdite, aussi étrange que cela puisse paraître.

types de versions mobiles

La plupart des sites et des boutiques en ligne que vous avez rencontrés utilisent l'une des trois approches suivantes : mise en page réactive, site mobile autonome et affichage dynamique.

Comme d'habitude, pour faire le bon choix, vous devez vous appuyer sur vos tâches et vos capacités.

1. Mise en page réactive

Techniquement, il s'agit d'un seul site, mais la structure de la page s'adapte à la taille de l'appareil.

Dans une version simplifiée, cela ressemble à ceci : pour les ordinateurs, ouvrez tous les éléments de menu et créez des produits en trois colonnes.

Pour les tablettes, nous montrons uniquement le panier et plaçons les marchandises sur deux colonnes ; pour les smartphones - nous cachons tout dans le bouton de menu, nous plaçons les marchandises, une pour chaque ligne.

Disposition adaptative

Le principal avantage de cette réactivité du site est que les versions mobile et desktop sont un seul et même site.

Cela signifie qu'il suffit d'apporter des modifications une fois, après quoi l'adaptation du site pour tous les écrans se fera automatiquement.

Cela peut être l'ajout d'un article, la modification du tri, une nouvelle couleur de boutons. Autres avantages de l'adaptatif :

• Bon marché et simple - il est développé relativement rapidement et à peu de frais, vous pouvez même implémenter l'adaptatif dans un site existant ;
• Adresse d'une page - pratique pour les utilisateurs et techniquement correcte (moins de tracas avec l'optimisation des moteurs de recherche) ;
• C'est ce que Google recommande. Sur la page des développeurs, il y a une recommandation officielle d'utiliser une mise en page réactive. Il n'y a pas d'arguments spécifiques, mais c'est Google lui-même.

La mise en page réactive présente également des inconvénients. Bien que par rapport à d'autres options, ils sont assez invisibles. Mais encore, comme je l'ai dit, ils sont:

• Un site avec de grandes fonctionnalités est difficile à adapter pour les téléphones mobiles. Ce sera soit gênant, soit vous devrez sacrifier certaines des possibilités ;
• Chargement lent. Rappelez-vous que nous avons dit que le même site est chargé à la fois pour les téléphones et les ordinateurs ?

  Ce sont des images lourdes, de longs menus et le reste des informations. Pour résoudre le problème, certains développeurs utilisent la compression de page, mais ils nécessitent également des requêtes supplémentaires au serveur, et donc du temps ;

• Impossible de passer à la version complète. Si quelque chose arrive, l'utilisateur ne pourra pas passer à la version desktop afin d'utiliser toutes les possibilités, car le site décide lui-même quelle version lui montrer.

Cependant, le responsive design est la version mobile la plus populaire sur le Web.

Il est utilisé par de nombreux moteurs, constructeurs, et d'ailleurs nous sommes sur certains d'entre eux.

2. Version mobile séparée

Dans ce cas, vous aurez deux sites différents - chacun avec sa propre adresse, sa propre conception et ses propres capacités. C'est la réponse à la question : « Quelle est la différence entre la version mobile du site et la version adaptative ?

Le site lui-même détermine la taille de l'écran du visiteur et décide de ce qui sera affiché - la version mobile du site ou celle de bureau.

Le plus souvent, c'est la version mobile qui commence par le lien par la lettre m (traduit par « mobile »).

Version mobile séparée

Cette approche est pratique car vous ne dépendez pas du tout de la version de bureau. Vous pouvez vous concentrer entièrement sur le confort des utilisateurs mobiles, ne laisser que les fonctions les plus élémentaires et prendre en compte toutes les petites choses de la convivialité.

La mise en page de la version mobile sera très différente de celle de bureau. Vous pourrez certainement garder un visiteur distrait qui se bouscule probablement dans un bus ou regarde dans un smartphone jusqu'à ce que son patron le voit.

Tous les boutons et interrupteurs peuvent être énormes pour pouvoir être frappés avec votre doigt à coup sûr.

Il existe également d'autres arguments pour créer une version mobile du site séparément : vitesse de chargement rapide - dans une version séparée, des images légères de qualité moyenne sont chargées et la page est généralement recadrée aux éléments de base.

Et il est également possible de passer à la version complète du site si le visiteur décide que les fonctions mobiles ne lui suffisent pas.

Pour être juste, une version distincte du site pour les appareils mobiles présente également des inconvénients :

• Différentes adresses de sites pour les téléphones mobiles et les ordinateurs de bureau. Cela peut créer des problèmes de référencement - les moteurs de recherche voient deux sites différents avec le même contenu.

  Et ils déclassent les postes pour duplication. Pour contourner le problème, vous devrez connecter des ressources supplémentaires ;

• Il n'est pas pratique de s'asseoir depuis la tablette - sur celle-ci, les éléments sont flous sur tout l'écran.

  Et pour la version desktop, l'écran de la tablette ne sera pas assez grand. Il s'avère que le visiteur est dans une impasse ;

• Coûte plus cher. Bien que la version mobile ait des fonctionnalités limitées, considérez quand même qu'il s'agit d'un nouveau site qui doit être créé à partir de zéro.

  Par conséquent, fixez un budget à l'avance pour le développement d'une version mobile du site ;

• Temps de gestion supplémentaire. Il y a deux sites, vous devez maintenir le travail et surveiller la pertinence ici et là-bas.

Comme vous pouvez le voir, il y a beaucoup de soucis. Mais de nombreux grands magasins en ligne choisissent cette méthode, car chaque mauvaise action peut effrayer un client de faire un achat.

Si vous avez les mêmes ventes « dangereuses », alors vous devez également faire attention au développement des sites de commerce électronique.

Site de la boutique en ligne

3. Affichage dynamique (RESS)

Et la troisième voie est une symbiose des deux options précédentes. Dans un premier temps, le site détecte l'appareil des visiteurs et, en fonction de la taille de l'écran, ouvre la version desktop, mobile ou tablette.

C'est-à-dire que seule l'option qui convient à un périphérique particulier est chargée. Les ordinateurs sont gros et encombrants, tandis que les smartphones sont limités mais légers. L'approche réduit considérablement le temps d'ouverture.

Le principal inconvénient de RESS est qu'il prend du temps et qu'il est coûteux. Développer un affichage dynamique revient à créer plusieurs sites différents à partir de zéro.

Et la technologie n'est pas parfaite non plus. Le RESS est un instrument relativement jeune, il peut donc arriver que l'appareil soit mal détecté ou pas du tout.

Parmi les personnalités qui utilisent RESS, citons Google. En général, comme je l'ai remarqué, la technologie n'est pas habitée, et si vous avez un budget limité ou que vous manquez de temps, il vaut mieux ne pas s'y risquer. Et faites attention aux deux options précédentes.

Il existe aussi une mise en page fluide. Certaines personnes pensent qu'il s'agit d'une variante d'un site mobile, mais ce n'est pas le cas.

Important. Une mise en page caoutchouteuse se produit uniquement lorsque le site est affiché aussi clairement sur le téléphone que sur le PC. De plus, complètement inchangé.

CRITÈRES D'IDÉALITÉ

Nous avons déjà dit qu'à l'ordinateur, l'utilisateur est concentré au maximum sur ce qu'il voit à l'écran.

Presque rien ne rivalise pour son attention. Qu'il s'agisse d'être assis devant un smartphone - tâches parallèles, route, notifications, appels, personnes autour. Cela doit être pris en compte en premier lieu lors du développement.

Par conséquent, quelle que soit l'approche que vous choisissez, vous devez respecter certaines règles du site pour les appareils mobiles. Voici les plus importants :

1. Grand texte noir sur fond clair. Il est préférable de concevoir tous les textes selon les classiques - police noire sur fond blanc.
2. Formes courtes. Laisser une demande, prendre un rendez-vous, effectuer un achat - quelle que soit la saisie de l'utilisateur, vous devez demander un minimum de données, ce qui est suffisant pour le premier contact.

   Les formulaires longs effraient en principe, sans parler des visiteurs mobiles.

3. Grands éléments cliquables. Le visiteur ne doit pas viser et attraper les boutons et les interrupteurs. Il est préférable de rendre tous les éléments interactifs grands - essayez de les piquer vous-même.

   Apple et Microsoft conseillent de viser 44 par 44 pixels. Le seuil minimum est de 24x24, mais c'est un dernier recours.

4. Vitesse de chargement du site Web. Il n'y a pas de normes spécifiques, mais vous devez toujours rechercher l'idéal.

   Il existe un schéma général : chaque seconde nécessaire pour charger une page réduit proportionnellement la conversion en ventes.

   Vous pouvez consulter la version mobile du site pour la vitesse de chargement dans les services spéciaux, dont un peu ci-dessous.

5. Le type de formulaire spécifié. Lors de l'élaboration des termes de référence, assurez-vous d'indiquer que lors du remplissage du téléphone, seul le pavé numérique doit être affiché.

   Idem pour les mots de passe, email et autres champs. Si vous développez le site vous-même, ne soyez pas paresseux pour définir le type approprié pour chaque formulaire.

6. Contacts cliquables. Comme pour les formulaires, les informations de contact ont également un type spécial de lien.

   Nous appuyons sur le téléphone - la composition du numéro s'ouvre, sur le courrier - le programme de messagerie. Les utilisateurs vont certainement pousser les contacts par habitude.

7. Informations dans une colonne. Pas de défilement horizontal ou de photos multi-colonnes sur un seul écran.

   Même les produits phares les plus cool n'ont pas de grand écran pour cela. Le texte dans une colonne est plus facile à lire et sur de grandes photographies, vous pouvez voir tous les détails.

Hack de vie. Si vous avez juste besoin d'informations complètes sur le client (pour la livraison, par exemple), divisez le processus de remplissage de la demande en plusieurs étapes.

Dans la première étape, demandez le nom et le numéro, ainsi que l'adresse et les détails ci-dessous. Même si l'utilisateur est trop paresseux et ne remplit pas le formulaire jusqu'au bout, vous aurez des contacts sur lesquels mettre la pression.

Formulaire de saisie

Contrôle de mobilité

Le meilleur expert qui vous dira si votre site est pratique est votre visiteur. Faites un petit test réfléchi de votre version mobile.

Choisissez dans l'environnement celui qui correspond le mieux à la description de votre potentiel acquéreur : par âge, profession, intérêts.

Demandez à un volontaire de passer une commande - laissez-le suivre tout le parcours du client. Ne l'interférez pas ou ne le corrigez pas.

Que tout soit aussi réaliste que possible - vous ne vous asseyez pas à côté de chaque visiteur et n'expliquerez pas où cliquer.

Toute difficulté ou confusion doit être commentée à haute voix par votre sujet.

Et vous continuez à jouer à l'espion : analysez les actions et prenez des notes en silence dans votre carnet. Vous ne pouvez aider qu'en dernier recours, si le volontaire se trouve dans une situation complètement sans issue.

Contrôle technique

Lorsque vous êtes convaincu que tous les éléments sont en place, et que l'interface est claire et prévisible, passez au côté technique.

Exécutez le site via différents services pour collecter les erreurs et les commentaires. Si vous pouvez - le réparer vous-même, non - vous saurez quoi écrire dans le TOR pour le programmeur.

Console de recherche Google est un service officiel de Google. Il montrera à quoi ressemble le site sur l'écran moyen d'un smartphone et donnera des recommandations d'amélioration.

Vous vous souvenez quand nous avons parlé de l'algorithme Mobile-first Index ? Le service est juste basé sur son travail, alors ne négligez pas ce point.

Console de recherche Google

Webmestre Yandex- un service similaire de Yandex. Avant de vérifier ici, vous devez ajouter le site au panneau du Webmaster et confirmer les droits sur celui-ci (télécharger un petit fichier émis).

Ce n'est qu'alors que vous pourrez utiliser le service en allant dans "Outils -> Vérification des pages mobiles". La chose est également utile - avec des recommandations et des commentaires.

Webmestre Yandex

Vérification à partir de la recherche Bing. Oui, il existe aussi un tel moteur de recherche. Laissez-le être utilisé par très peu de personnes, mais maintenant vous n'en avez plus besoin.

Le service peut voir des erreurs auxquelles les deux précédents ne prêteront pas attention. Eh bien, comme on dit, ça ne sera pas pire.

Vérification à partir de la recherche Bing

Vérification visuelle

Après les vérifications techniques, passez au visuel. Bien sûr, vous pouvez consulter le site depuis votre téléphone, mais vos visiteurs ont des appareils différents - des produits phares à écran large aux smartphones économiques.

Pour garder une trace de tout le monde, utilisez les services pour afficher le site sur différents écrans. En voici quelques uns:

responsinator.com - Affiche tous les appareils populaires à la fois sur une seule page. Il y en a dix dans le service : Pixel 2 (et Android en général), iPhones et iPads.

responsinator.com

iloveadaptive.com - vous pouvez choisir les plates-formes à afficher en même temps sans mélanger différents appareils.

Parmi les avantages supplémentaires : dans le coin supérieur droit, il y a des indicateurs de base de la vitesse de chargement des pages.

iloveadaptive.com

quirktools.com - n'affiche qu'un seul appareil à la fois, mais quel choix. Tous les écrans sont divisés en groupes : smartphones modernes, téléphones à bouton-poussoir, ordinateurs et téléviseurs.

Ci-dessus - une règle pratique avec une taille d'écran en pixels et des fonctions supplémentaires pour la rotation et le défilement.

quirktools.com

Il y a un hic dans les services - peu importe combien vous les essayez, ils ne vous donneront pas un affichage à part entière.

En raison de différentes plates-formes, technologies et approches de développement, l'image sur le service et dans un vrai téléphone peut différer - il y a plus de pixels, moins de pixels.

En général, cela n'affecte pas beaucoup la qualité de la mobilité, mais il vaut mieux en tenir compte.

D'ailleurs. Vous pouvez savoir exactement avec quelle taille d'écran les visiteurs viennent à vous dans la même métrique. Les statistiques se trouvent dans « Rapports standard -> Technologies -> Résolutions d'affichage ».

En bref sur l'essentiel

Donc, si vous prenez la version mobile, choisissez d'abord la méthode appropriée, puis assurez-vous que le développeur ne triche pas.

Mais avant tout ça, fais-en une bonne. Après tout, c'est une chose pour que tout soit bien exposé, et une autre chose pour que tout soit vendu. Et pour cela, seule la partie technique ne suffit pas.

Et aussi, c'est dommage que vous pensiez à la version mobile à l'instant. L'époque où ils disaient que c'était très pertinent est déjà révolue et la révolution mobile est arrivée.

De nos jours, l'adaptation du site Web pour les smartphones est la fonction par défaut. Nos conseils d'experts pour vous - mettez de côté les doutes et passez aux choses sérieuses.

Il s'agit d'une version simplifiée supplémentaire du site, généralement située sur un sous-domaine avec le préfixe "m" (par exemple, m. Site).

Comme vous pouvez le voir sur la photo, la version pour téléphones s'ouvre également sur les tablettes et elle s'étire en largeur, car la tablette est pratiquement un smartphone très, très large 🙂

Extérieurement et stylistiquement, bien sûr, il peut être fait comme le site principal (afin qu'il n'y ait pas l'impression que vous êtes sur une page étrange): les mêmes couleurs, polices, éléments. Mais la structure peut être radicalement différente, et le plus souvent elle l'est. Il est peu probable que quelqu'un choisisse un appartement ou récupère une voiture pour lui-même par téléphone, ou demande un prêt auprès d'une banque. Après tout, ce n'est pas pratique, l'écran est petit (par rapport à un ordinateur portable ou un ordinateur). Mais trouver les guichets automatiques les plus proches ou l'adresse d'une pizzeria est l'inverse. Par conséquent, les versions mobiles sont grandement simplifiées, sans calculatrices complexes, ni énormes tableaux de comparaison pour deux ou plusieurs produits similaires. Ils suppriment tous les plus difficiles et simplifient l'accès aux contacts, les horaires de travail, etc.

Avantages

• Comme il s'agit d'une version supplémentaire du site, il est chargé séparément (c'est-à-dire que le site principal n'est pas chargé). Et je le répète encore une fois : en règle générale, c'est grandement simplifié. Par conséquent, il se charge rapidement de manière relativement adaptative.
• La maintenance de la version mobile est assez simple : les changements et améliorations n'affectent pas les ordinateurs.

Défauts

• Moi, en tant que designer, j'exprimerai immédiatement ma "fée" à propos des tablettes : elles ont l'air terribles sur la version allongée pour smartphones. Non, bien sûr, vous pouvez l'utiliser. Mais l'adaptation à cet égard a couru très loin.
• Tout cela est extrêmement gênant pour l'optimisation du référencement. Deux adresses - le site principal et la version mobile - signifient que le contenu sera dupliqué.