Version mobile ou mise en page adaptative. Version adaptative ou mobile. Pourquoi les gens utilisent-ils encore le responsive design ?

Voir à quoi ressemble le site sur un appareil mobile est plus facile sur votre téléphone. De plus, une capture d'écran d'un tel appareil réel sera l'affichage le plus précis du site sur les appareils mobiles, plutôt que d'utiliser un émulateur.

Si vous avez besoin de vérifier la version mobile du site en ligne sur un ordinateur, les émulateurs d'appareils mobiles viennent à la rescousse. Les plus précis d'entre eux sont des outils destinés aux développeurs de systèmes d'exploitation mobiles, dont les plus populaires sont Android Studio et Apple Xcode. Ces kits ont les émulateurs les plus complets divers appareils et la vérification de la version mobile du site correspondra le plus précisément à un appareil mobile réel. Cependant, il faut beaucoup de temps, d'expérience et de connaissances logicielles pour installer des outils de développement sur un ordinateur typique.

Des moyens simples pour vérifier la version mobile du site

Contrairement à la manière la plus difficile de vérifier un site sur des appareils mobiles, abordée dans le paragraphe précédent, la plus d'une manière simple est de réduire la largeur de la fenêtre du navigateur à la taille d'une colonne étroite. Si votre site s'adapte à cette largeur, alors la version mobile de votre site est réalisée à l'aide de la technologie de conception adaptative.

Cependant, cette méthode ne fonctionne pas si la version mobile du site est réalisée à l'aide d'un design distinct. Dans ce cas, le serveur hébergeant le site doit indiquer explicitement que le visiteur provient d'un appareil mobile. Le serveur reçoit ces données de la chaîne User Agent, qui est requise de votre navigateur par tout site visité. Par conséquent, afin de voir à quoi ressemble le site sur les appareils mobiles, vous devez "tromper" le serveur et lui fournir la chaîne de l'agent utilisateur à partir du téléphone et non de l'ordinateur.

La deuxième option la plus difficile, qui vous permet de vérifier la version mobile du site via un ordinateur, consiste à installer un navigateur spécial. Par exemple, l'émulateur Opera Mobile Classic. Des versions existent pour Windows, Mac et Linux. Malheureusement, ce développement est basé sur l'ancien moteur Presto, utilisé avant la version 12 du navigateur Opera, et ne montrera pas vraiment comment le site s'affiche dans un navigateur mobile moderne. Depuis 2013 Navigateur Opera fonctionne sur le moteur logiciel Blink, il est donc préférable de vérifier le site mobile sur un navigateur moderne. Il peut s'agir d'Opéra ou Chrome qui s'exécutent sur le même moteur Blink basé sur WebKit que celui utilisé dans Apple Safari.

Doit être activé dans les navigateurs spécifiés mode spécial développeur (F12 dans Chrome ou Ctrl+Maj+i dans Opera) et passez en mode appareil mobile :

Après cela, vous pouvez facilement voir à quoi ressemble le site sur un appareil mobile.

Si une évaluation personnelle visuelle ne vous suffit pas pour consulter un site mobile, il existe programmes spéciaux, qui peut analyser le site du point de vue d'un appareil mobile et donner non seulement une évaluation quantitative de la mobilité du site, mais aussi donner des recommandations sur la façon d'améliorer la visibilité du site sur les smartphones. Sur notre site, il existe un tel service basé sur la technologie Compatible avec Google Mobile. Il vous suffit d'entrer l'adresse de votre site dans une ligne spéciale et de cliquer sur le bouton "Vérifier". Le robot ira à adresse spécifiée, prendra une capture d'écran de la page au format mobile et donnera un avis sur la qualité de votre site mobile.
Par exemple, ceci.

Bonjour mes chers lecteurs du blog. Galiulin Ruslan est en contact. Aujourd'hui, nous allons parler des versions mobiles des sites que chaque site ou blog devrait avoir pour passer au TOP moteurs de recherche. Dans l'article, je donnerai des codes de style et des exemples de mise en page prêts à l'emploi que vous pourrez télécharger sur votre ordinateur.

Si votre site n'est toujours pas adapté aux mobiles, je vous recommande d'utiliser mes conseils ou de contacter des professionnels - http://www.mobile-version.ru qui fera tout selon les standards des moteurs de recherche. Vous pouvez également vérifier la mobilité de votre site en utilisant le même lien.

En 2013, Google a commencé à mettre la pression sur les webmasters ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convaincant de la nécessité de créer des modifications légères du site Web, et depuis 2015, la mobilité est devenue l'un des aspects du classement ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex n'est pas à la traîne, ayant créé un algorithme spécial de Vladivostok qui prend en compte l'adéquation du site pour la visualisation à partir de téléphones.

Mobile Friendly aujourd'hui, ce n'est pas seulement s'occuper des visiteurs, c'est une condition indispensable à la promotion.

Lorsqu'un site est créé à partir de zéro, l'approche Mobile First est appliquée. Mais la plupart ont d'anciens projets de travail. La principale question que soulève la version mobile du site dans de telles situations est de savoir comment le réaliser sans ruiner le template existant ?

Il existe trois approches :

Adresse et mise en page séparées - placées sur un sous-domaine du formulaire m.site.ru. La redirection se produit via une redirection de serveur par l'agent utilisateur.
Conception réactive - l'url et le html restent les mêmes que dans format de bureau, mais dans les requêtes média CSS, des règles de retour pour différents écrans.
RESS est une conception réactive, l'adresse reste la même, mais le serveur envoie des ensembles de styles en fonction du type de matériel qui demande la page.

Pour les propriétaires d'anciens projets, le meilleur choix est d'utiliser la mise en page adaptative. Comment le faire vous-même et sans utiliser de plugins dangereux, nous examinerons étape par étape.

Version mobile du site : comment bien faire les choses

Les étapes suivantes nécessiteront une solide connaissance de base du HTML et du CSS ou la capacité de rechercher rapidement des choses incompréhensibles sur Google.

Information pour les débutants : en CSS, les mots avant les accolades désignent les parties spécifiques du fichier html qu'ils sont chargés d'afficher. Ecrit le plus souvent avec un point ou un dièse - #place (propriété : valeur ;).

Étape 1. Supprimez les restrictions.

Les propriétaires de mise en page fluide peuvent ignorer cette étape. Le reste devra travailler dur.

Largeur- nous recherchons de grandes sections dans le code avec un affichage défini de manière rigide. Si le paramètre est spécifié en pixels ou en points, vous devez modifier sa valeur en pourcentages, ems et autres unités sensibles à l'environnement. Souvent, le conteneur principal ou la zone de contenu a une largeur fixe - dans la plupart des cas, les restrictions sont supprimées en le remplaçant par max-width.

Images- au lieu de tailles claires, nous prescrivons des propriétés pour la balise img, ce qui donnera une adaptabilité aux images. Les photos changeront de rapport d'aspect dans leurs conteneurs parents.

image(

Max-largeur : 100 %

hauteur : automatique ;

les tables- L'adaptabilité totale ne peut pas être définie, mais vous pouvez créer des pages avec celles-ci adaptées aux appareils mobiles en ajoutant ce code :

tableau (

bloc de visualisation;

Largeur : 100 % ;

débordement-x : défilement ;

débordement-y : masqué ;

ms-overflow-style : -ms-autohiding-scrollbar ;

webkit-overflow-scrolling : toucher ;

Wraps - sont définis par la propriété float. La définition de cette option permettra aux boîtes de se déplacer en fonction des paramètres de la fenêtre, en s'ajustant aux éléments avec une position stable ou dans les conteneurs parents. Les éléments div standard sont traduits par défaut chacun en nouvelle ligne. Par exemple, en plaçant des blocs div de 200 px dans un conteneur de 1000 px, vous pouvez voir cette image.

Les blocs sont empilés les uns sur les autres. L'ajout d'un habillage supprime les retours à la ligne, place les éléments sur une ligne sur tout l'espace disponible.

Étape 2 : Planifiez la réorganisation du contenu.

Découvrez quels détails du site de bureau doivent être affichés sur les appareils mobiles. Pour ce faire, répondez-vous aux questions suivantes :

Quels blocs remplissent uniquement des fonctions décoratives ? - Le plus souvent, ce sont des curseurs, des décorations de barre latérale, des questionnaires, des photos aléatoires.
Qu'est-ce que les visiteurs ignorent ? - Les cartes thermiques des clics et des chemins aideront à répondre à cette question. Nous cachons impitoyablement les éléments les moins actifs.
Que doit-il rester dans la version mobile ? - Il s'agit généralement d'une publicité, d'un formulaire Rétroaction, d'abonnement ou de médias sociaux.
Réfléchissez à la façon dont le site devrait apparaître sur les tablettes, les smartphones et les petits téléphones anciens - vous pouvez définir votre propre apparence pour chaque appareil.

Étape 3. Commodité.

Navigation : les écrans des téléphones sont trop petits, le menu habituel du site rentre rarement dans de tels cadres. Il est d'usage de paramétrer le menu déroulant sur le bouton.

Zone de contenu : les téléphones définissent généralement la largeur du bloc principal dans CSS à 100 % en fonction de l'espace disponible. Cela signifie que le texte, les modules, les publicités et le contenu de la barre latérale seront affichés sur les petits appareils dans une colonne.

Capteurs : les doigts ne sont pas aussi précis qu'une souris, laissez-leur beaucoup de place. L'espace autour des liens et autres éléments actifs doit être d'au moins 28 x 28 pixels.

Aidez vos visiteurs à définir l'espace actif - rembourrage, surbrillance, changement de couleur et autres éléments pouvant être définis pour les touches, prescrire la pseudo-classe de survol pour les liens et les boutons.

Implémentation de Media Queries avec des exemples

Si vous avez déjà créé des tableaux CSS pour l'impression, vous avez déjà une idée des possibilités d'attribuer des styles individuels en fonction des conditions.

requêtes des médias- expressions booléennes, y accéder implique une réponse avec un paramètre vrai ou faux. Si le résultat de la requête est vrai, c'est-à-dire que les dimensions de l'agent utilisateur ou de l'appareil correspondent au type de média spécifié, les règles de style spécifiées dans le bloc média sont automatiquement appliquées.

Les requêtes média peuvent être affectées par des paramètres :

largeur et hauteur de la fenêtre du navigateur ;
largeur et hauteur de l'appareil ;
orientation - mode paysage ou portrait ;
résolution d'écran.

Une liste à jour des arguments est disponible sur spécification officielle.

Passons aux exemples. Il y a modèle prêt, la taille de sa partie contenu est de 1000 pixels, tous les éléments et détails internes sont configurés par rapport à ce paramètre.

Si l'écran de l'utilisateur est plus étroit que la partie de contenu spécifiée, une barre de défilement s'affiche. Les éléments de conception flottants peuvent se comporter de manière imprévisible - se heurter, s'étaler, se rétrécir trop.

Tout d'abord, nous supprimons la taille fixe qui crée la bande afin qu'elle n'interfère pas avec le réglage. Dans notre modèle, il s'agit du wrapper de navigation. Dans une disposition de lecteur, cela peut être un ou plusieurs éléments. Si vous êtes perdu avec la définition, ouvrez les outils de développement du navigateur - en utilisant la vue du modèle de boîte, trouvez un élément qui ne rentre pas dans les dimensions de l'écran.

Pour résoudre ce problème, nous supprimons les cadres fixes en ajoutant aux styles de modèle :

Écran @media uniquement et (largeur maximale : 1 000 pixels) (

Navigation (largeur : 100 % ; )

Maintenant, si la largeur de l'écran de l'utilisateur est inférieure à 1000px, alors la largeur du menu sera égale à 100% de sa taille. La version principale du modèle est la même qu'avant. Le remplacement de la propriété a supprimé la barre de défilement inférieure lors de la réduction de l'écran.

Mais les blocs ont toujours l'air douteux - changeons leur affichage en augmentant la largeur en pourcentage pour s'adapter aux dimensions souhaitées.

Nous ajoutons à la même mediaquery :

Bloc(largeur : 35 % ;)

Comment connaître les tailles optimales pour les blocs de votre site ? Calculez manuellement ou prenez comme base n'importe quelle grille prête à l'emploi - grille fluide. Vous pouvez vous concentrer sur les normes existantes : dans les mises en page à deux colonnes avec une largeur de fenêtre de 980 à 1 050 px, l'enveloppe est prise à 95 %, le contenu à 60 % et 30 % sont laissés pour la barre latérale. L'espace restant est consacré à la formation des bordures et à la marge de précision.

Cependant, vous pouvez appliquer le box-sizing au contenu, afin de ne pas calculer les pixels à chaque fois, mais de travailler en fonction des dimensions globales.

Passons au paramétrage de l'affichage sur des écrans de résolution inférieure :

Écran @media uniquement et (largeur maximale : 600 px) (

Bloquer (

flotteur : aucun ;

Largeur : 85 % ;

Marge : 1em auto ;

Si l'écran est inférieur à 600 px, nos blocs doivent tenir dans une colonne - nous supprimons l'habillage, définissons de nouveaux retraits, centrons et modifions la largeur. Le plus souvent, 100 % est défini, mais si, pour une raison quelconque, cela ne convient pas, nous définissons notre propre taille.

Ainsi, vous pouvez définir non seulement les dimensions des blocs de contenu, mais également leur affichage. Par exemple, pour interdire l'affichage de grands éléments, en les remplaçant par des éléments pratiques.

Démontrons les possibilités en utilisant l'exemple de la modification des couleurs et des affichages.

Dans la version smartphone, le menu principal est masqué et la couleur du bloc est changée en bleu, tandis que le plus grand écran affiche le design sans ces changements.

Le masquage de la navigation est nécessaire dans la plupart des cas - il est remplacé par un bouton. Il est plus approprié de le faire en utilisant javascript, vous pouvez utiliser des solutions toutes faites.

Les modifications sont effectuées ponctuellement, la plage peut être limitée à la fois par le haut et par le bas. C'est rapide et pratique - une ligne définit un CSS distinct pour différents appareils, sans affecter la vue principale du site.

Vous pouvez déclarer des règles @media n'importe où à l'intérieur tableau existant styles, ou créez-en un distinct pour ces déclarations, puis importez-le dans le CSS principal à l'aide de la règle @import.

Version mobile du site: comment faire et quoi chercher

Tout le monde comprend les médias navigateurs modernes, mais cela ne fonctionnera pas dans IE 8 et inférieur. Le problème est résolu en se référant à l'ancien IE via des commentaires conditionnels. Ils doivent être écrits dans le code du modèle, pas en CSS.

Le script lui-même est disponible sur github ( https://github.com/scottjehl/respond), ajoute la prise en charge des dimensions minimales et maximales et des mediaqueries aux anciens IE.

Un autre problème est que la conception réactive implique l'utilisation de Html5, qui est à nouveau incompréhensible pour les navigateurs plus anciens. Traité avec un hack:

Le code est écrit en html, de plus, l'affichage des blocs des éléments créés est paramétré en CSS :

en-tête, navigation, section, article, côté, pied de page (affichage : bloc ;)

Abordons immédiatement la question - comment faire en sorte que certains scripts s'affichent uniquement lorsque paramètres donnésécran. Si jquery est installé, vous devrez ajouter un script simple au code du modèle. Les numéros sont remplacés par les numéros nécessaires. Il se lit comme suit : si la largeur de la fenêtre dépasse 980 pixels, le script spécifié dans le chemin est appliqué à la page. Vous pouvez en spécifier plusieurs, la syntaxe s'écrit par analogie au travers d'un point-virgule entre accolades.

Si ($(document).width() > 980) (

$.getScript("chemin vers le script");

Un autre point est de savoir comment navigateur mobile L'iPhone doit traiter le contenu donné, que son augmentation soit autorisée. Pour ce faire, la gamme initiale est écrite dans la tête :

Il ne reste plus qu'à vérifier l'exactitude - pour cela, vous pouvez utiliser propre navigateur et les services téléphoniques ou de contact.

Si le site est converti en serveur local, l'exactitude peut être déterminée dans ami.responsivedesign.is. Pour un affichage correct, les propriétaires de Denver devront changer l'encodage en utf-8 en modifiant le fichier httpd.conf du serveur.

Le service montrera à quoi ressemble le projet sur différents appareils.

De plus, le modèle est testé https://developers.google.com/speed/pagespeed/insights/ ou sous forme spéciale https://www.google.com/webmasters/tools/mobile-friendly, ainsi que chez les webmasters.

Dans Yandex, cela semble détaillé et Google signalera simplement qu'il n'y a pas de problèmes.

Si tout est fait correctement, il n'y aura pas de défilement, pas d'éléments inutiles. La version mobile est prête et vous avez maintenant appris à la créer vous-même. Si le matériel vous a été utile, alors aimez et abonnez-vous à la newsletter du blog. Tous mes vœux.

Ci-dessous, en cliquant sur l'un des boutons, vous pouvez télécharger 2 exemples de la page pliée dans cette leçon et il est facile de travailler avec les pages finies et de copier le code.

Cordialement, Galiulin Ruslan.

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 suscite un tel émoi, quelles sont ses exigences 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 tergiverser le sujet 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.

Examinons chacun de plus près. En même temps, comme d'habitude, court et direct. Nous laissons de l'eau derrière la porte.

Convivialité

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

Cela signifie qu'en moyenne, n'importe quel site sur Internet est visité plus souvent depuis un téléphone que depuis 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émoigne une étude de 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.

Cet alignement devrait 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 ordinaire inadapté à partir d'un téléphone mobile, la navigation se transforme en une quête - vous devez redimensionner les pages, viser de petits liens, attendre longtemps pour charger.

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

Les utilisateurs ne chercheront pas longtemps section désirée et comprendre l'interface - le site Web d'un concurrent pratique est toujours ouvert dans l'onglet suivant.

Préférences du moteur de recherche

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

Le deuxième algorithme est sorti plus tard, mais en termes d'importance, il est à peu près au même niveau. Ça s'appelle Vladivostok.

Il existe également des raisons indirectes qui affectent la position de la version mobile dans la recherche. Entre autres facteurs, les moteurs de recherche tiennent compte des 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 visite un site de bureau ordinaire à partir d'un téléphone mobile, il n'y restera pas longtemps.

En conséquence, les caractéristiques comportementales se détérioreront. Du coup, vous êtes sur les dernières pages inhabitées de Yandex et Google by.

Vous a-t-on déjà convaincu ? Vérifiez ensuite 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 -> Appareils mobiles -> 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 une sonnette d'alarme pour vous - il vous suffit d'optimiser le site pour les appareils mobiles. Voyons donc quels sont les moyens de le faire.

Important. Cette situation n'est pas observée par 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 Web et des boutiques en ligne que vous avez rencontrés utilisent l'une des trois approches suivantes : Disposition adaptative, un site mobile distinct et un affichage dynamique.

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

1. Mise en page réactive

Techniquement, il s'agit d'un seul site, mais la structure des pages 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 ne montrons que le panier, et plaçons les marchandises en 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 d'une telle adaptabilité du site est que les versions mobile et de bureau sont le même site.

Cela signifie qu'il suffit d'effectuer les modifications une seule 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 bouton. Autres avantages de l'adaptatif :

Bon marché et facile - il est développé relativement rapidement et à peu de frais, vous pouvez même implémenter une adaptation dans un site existant ;
Une adresse de 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 pour les développeurs, il y a une recommandation officielle d'utiliser la mise en page adaptative. Il n'y a pas d'arguments spécifiques, mais c'est Google lui-même.

La mise en page adaptative présente également des inconvénients. Bien que comparés à d'autres options, ils sont assez discrets. Mais encore, comme je l'ai dit, ils sont:

Un site avec de grandes fonctionnalités est difficile à adapter aux téléphones mobiles. Cela sera soit gênant, soit certaines fonctionnalités devront être sacrifiées ;
Chargement lent. Vous souvenez-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 ont également besoin demandes supplémentaires au serveur, et donc l'heure ;
Impossible de passer à version complète. L'utilisateur ne pourra pas passer à la version de bureau en cas de problème afin d'utiliser toutes les fonctionnalités, car le site lui-même décide à quelle version l'afficher.

Cependant, le design réactif est la version mobile la plus populaire du Web.

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

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 la version de bureau.

Le plus souvent, c'est la version mobile qui commence dans 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 la commodité utilisateurs mobiles, ne laissez que les fonctions les plus basiques et tenez compte de 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 promène très probablement dans un bus ou regarde un smartphone jusqu'à ce que son patron le voie.

Tous les boutons et interrupteurs peuvent être rendus énormes afin qu'ils soient sûrs d'être touchés avec un doigt.

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, en général, la page est réduite aux éléments de base.

Et il est également possible de basculer vers 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 certains inconvénients :

Différentes adresses de site pour les téléphones mobiles et les ordinateurs de bureau. Cela peut créer des problèmes pour le référencement - les moteurs de recherche voient deux sites différents avec le même contenu.
Et des postes déclassés 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 - 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 se retrouve dans une impasse ;
Coûte plus cher. Bien que la version mobile ait des fonctionnalités limitées, considérez tout de même qu'il s'agit d'un nouveau site qui doit être créé à partir de zéro.
Par conséquent, pour le développement d'une version mobile du site, fixez-vous un budget à l'avance ;
Temps de conduite supplémentaire. Il y a deux sites, vous devez maintenir le travail et vous tenir à jour à la fois là-bas et ici.

Comme vous pouvez le constater, les préoccupations sont nombreuses. Mais de nombreux grands magasins en ligne choisissent cette méthode, car chaque mauvaise action peut dissuader un client de faire un achat.

Si vous avez les mêmes ventes "dangereuses", vous devez 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. Tout d'abord, le site détecte l'appareil des visiteurs et, selon la taille de l'écran, ouvre la version ordinateur, mobile ou tablette.

Autrement dit, seule l'option qui convient à appareil spécifique. Ordinateurs - gros et encombrants, et smartphones - limités, mais légers. L'approche réduit considérablement le temps d'ouverture.

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

Et la technologie n'est pas parfaite. RESS est un outil relativement jeune, il peut donc arriver que l'appareil soit détecté de manière incorrecte ou pas détecté du tout.

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

Il y a aussi une chose telle que l'imposition de caoutchouc. Certains pensent qu'il s'agit d'une variante du site mobile, mais ce n'est pas le cas.

Important. La mise en page en caoutchouc n'existe que lorsque le site est également parfaitement affiché sur le téléphone, ainsi que sur le PC. Et, 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 avec son attention. Qu'il s'agisse de rassemblements sur un smartphone - tâches parallèles, la route, les notifications, les appels, ceux qui l'entourent. Ceci 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 :

Grand texte noir sur fond clair. Tous les textes sont mieux conçus selon les classiques - police noire sur fond blanc.
formes courtes. Laisser une demande, prendre rendez-vous, effectuer un achat - quoi que l'utilisateur va entrer, vous devez demander un minimum de données suffisantes pour le premier contact.
formes longues effrayer en principe, que dire des visiteurs mobiles.
Grands éléments cliquables. Le visiteur ne doit pas viser et attraper les boutons et interrupteurs. Il est préférable de faire en sorte que tous les éléments interactifs soient 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.
Vitesse de chargement du site Web. Il n'y a pas de normes spécifiques, mais vous devez toujours viser l'idéal.
Il existe un tel 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, à leur sujet un peu plus bas.
Le type de formulaire spécifié. Lors de la compilation des termes de référence, assurez-vous d'indiquer que lorsque vous remplissez le téléphone, seuls clavier numérique.
Idem pour les mots de passe E-mail et d'autres domaines. Si vous développez le site vous-même, ne soyez pas trop paresseux pour définir le type approprié pour chaque formulaire.
Contacts cliquables. Comme pour les formulaires, les coordonnées ont également un type de lien spécial.
Cliquez sur le téléphone - la numérotation s'ouvre, sur le courrier - programme de messagerie. Les utilisateurs vont certainement toucher les contacts par habitude.
Informations dans une colonne. Pas de défilements horizontaux et de photos dans plusieurs colonnes sur un seul écran.
Même les produits phares cool ne suffisent pas pour cela grand écran. Le texte sur une colonne est plus facile à lire et les grandes photos montrent tous les détails.

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

Demandez le nom et le numéro à la première étape, et l'adresse et les détails à la suivante. Même si l'utilisateur est trop paresseux et ne remplit pas le formulaire jusqu'au bout, vous aurez toujours des contacts à presser.

Formulaire de capture

CONTRÔLE DE MOBILITÉ

Le meilleur expert qui vous dira si votre site est convivial est un visiteur. Faites des tests de réflexion à haute voix sur votre version mobile.

Choisissez parmi l'environnement celui qui correspond le mieux à la description de votre acheteur potentiel : par âge, profession, centres d'intérêt.

Demandez à un volontaire de passer une commande - laissez-le suivre le parcours complet de l'acheteur. N'intervenez pas et ne le corrigez pas.

Que tout soit aussi réaliste que possible - vous ne vous asseyez pas à côté de chaque visiteur et n'expliquez 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 un cahier. Vous ne pouvez aider qu'en dernier recours, si le volontaire est complètement dans une impasse.

Contrôle technique

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

Faites passer le site par différents services pour recueillir 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.

Google Console de recherche - 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 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érifier les pages mobiles". La chose est également utile - avec des recommandations et des commentaires.

Webmestre Yandex

Vérifiez à partir de la recherche Bing. Oui, il existe aussi un tel moteur de recherche. Laissez très peu de gens l'utiliser, mais maintenant vous n'en avez plus besoin.

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

Vérifiez à partir de la recherche Bing

Vérification visuelle

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

Pour garder une trace de tout le monde, utilisez des 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 androïdes en général), iPhones et iPads.

répondeur.com

iloveadaptive.com - vous pouvez choisir les plates-formes à afficher simultanément sans mélanger différents appareils.

Des goodies supplémentaires : à droite coin supérieur Il existe des indicateurs de base de la vitesse de chargement des pages.

iloveadaptive.com

quirktools.com - affiche 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 la taille de l'écran en pixels et fonctions supplémentaires pour tourner et faire défiler.

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 - un pixel de plus, un pixel de moins.

En général, cela n'affecte pas beaucoup la qualité de la mobilité, mais il vaut mieux garder cela à l'esprit.

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 les principaux

Donc, si vous optez pour la version mobile, sélectionnez d'abord manière appropriée, puis assurez-vous que le développeur ne triche pas.

Mais avant tout cela, faites du bon travail. Après tout, c'est une chose d'avoir tout bien affiché, et c'en est une autre de tout vendre. Et pour cela, seule la partie technique ne suffit pas.

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

Désormais, l'adaptation du site Web pour les smartphones est une fonctionnalité par défaut. Nos conseils d'expert pour vous - mettez de côté vos 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, une version pour téléphones s'ouvre également sur les tablettes et l'étire en largeur, car une tablette est presque un smartphone très, très large 🙂

Extérieurement et stylistiquement, bien sûr, il peut être conçu comme le site principal (de sorte que vous n'ayez pas l'impression d'avoir atterri sur une autre page): 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 par téléphone, ou demande un prêt à 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 distributeurs de billets les plus proches ou l'adresse d'une pizzeria, c'est tout le contraire. Par conséquent, les versions mobiles sont rendues très simplifiées, sans aucune calculatrice compliquée, ni d'énormes tableaux de comparaison de deux ou plusieurs produits similaires. Supprimez tous les accès les plus difficiles et simplifiez les contacts, le mode de fonctionnement, etc.

Avantages

Puisqu'il version supplémentaire site, il est chargé séparément (c'est-à-dire que le site principal n'est pas chargé). Et encore une fois, je le répète: en règle générale, c'est grandement simplifié. Par conséquent, il se charge rapidement par rapport à l'adaptatif.
La prise en charge de la version mobile est assez simple : les modifications et les améliorations n'affectent pas les ordinateurs.

Défauts

En tant que designer, j'exprimerai immédiatement mes «frais» concernant les tablettes: la version pour smartphones étirée sur la largeur leur semble terrible. Non, eh bien, vous pouvez l'utiliser, bien sûr. Mais à cet égard, l'adaptatif est allé assez loin.
Tout cela est extrêmement gênant pour l'optimisation SEO. Deux adresses - le site principal et la version mobile - signifient que le contenu sera dupliqué.

Le coût de la promotion de la recherche et son résultat dépendent de la manière dont nous adaptons le site aux appareils mobiles.

Vers les signets

Dmitry Mrachkovsky, un optimiseur d'Ashmanov and Partners, a expliqué comment choisir entre un site adaptatif et un site mobile et à quels problèmes non évidents vous serez confrontés.

Avantages des sites Web 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 acteurs majeurs Je n'ai pas remarqué d'avantage en faveur d'une solution. M.Video, DNS, Wildberries, Aviasales utilisent une mise en page adaptative et Lamoda, 220 Volt, Ulmart, Yandex.Market utilisent des sites mobiles. Mais regardons quels avantages le premier et le deuxième obtiennent.

Mise en page adaptative du site "M.Vidéo" et version mobile du site "220 Volt"

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.
Pour les versions de bureau et mobiles, une seule URL est utilisée. Par conséquent, le contenu du site n'est pas dupliqué, les pages ne se font pas concurrence et le travail de promotion affecte les classements dans les recherches sur ordinateur et sur mobile.

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

Un site mobile peut être rendu aussi facile et rapide que possible à charger 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 passer à la version principale du site sur un appareil mobile s'il le souhaite.

Je veux mentionner une autre technologie - RESS. Il montre à l'utilisateur un modèle de bureau ou mobile en fonction de l'appareil, mais l'URL de la page ne change pas. RESS combine les avantages des versions adaptative et mobile décrites ci-dessus. Mais il présente également deux inconvénients : une mise en œuvre 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 en termes de promotion de la recherche il comporte plusieurs pièges.

Mauvaise interprétation de l'adaptatif

Certains implémentent la mise en page adaptative de manière incorrecte et affichent deux modèles sur une page dans le code à la fois - ordinateur de bureau et mobile. Selon l'appareil de l'utilisateur, la partie souhaitée du code reste visible, tandis que le reste est masqué à l'aide de display: none . Cela pose trois problèmes :

Tous les éléments de contenu sont chargés deux fois : textes, images, titres H1 et H6, fils d'Ariane, produits associés et vedettes, etc. Et les moteurs de recherche n'aiment vraiment pas les doublons.
Les parties inutilisées du contenu sont masquées avec CSS. L'opinion des moteurs de recherche sur cette question est ambiguë. Google a déclaré qu'il ignore le contenu des blocs cachés, et Yandex - qu'il prend en compte l'intégralité du contenu de la page. La plupart des experts SEO s'accordent à dire qu'un tel schéma crée le risque d'être pénalisé.
Le code est dupliqué et le site se charge plus lentement.

Une telle implémentation est une mauvaise approche de la technologie RESS.

Masquer les éléments inutiles

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

Utilisation incorrecte de JavaScript

Certains utilisent JS pour éviter d'afficher des blocs inutiles sur les appareils mobiles. Mais cette méthode n'est pas meilleure que display: none . 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 les gens utilisent-ils encore le responsive design ?

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

C'est aussi 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 sur 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 les adresses des succursales, pour que le moteur de recherche comprenne dans quelles régions vous travaillez. La mise en page adaptative avec un seul domaine est utilisée avec beaucoup de succès par M.Video. Le magasin occupe des positions élevées dans les résultats mobiles et de bureau pour les requêtes de produits, de catégories et d'informations.

Vous pouvez aller dans l'autre sens - utiliser des géo-sous-domaines pour augmenter la pertinence du texte des pages. Dans ce cas, les sous-domaines tels que spb.site.ru, samara.site.ru, kazan.site.ru se voient attribuer des régions via Yandex.Webmaster, puis les titres et les balises méta sont attribués avec le toponyme. Un autre avantage est qu'il est facile de configurer des analyses distinctes pour les géo-sous-domaines afin de 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 de moins problèmes évidents que vous pouvez rencontrer lors du choix de cette technologie.

Travail de double promotion

Le site mobile est optimisé et promu séparément du site principal, ce qui nécessite plus de ressources que dans le cas de l'adaptatif. Vous devez commencer à optimiser pour que la version mobile soit correctement indexée et ne concurrence pas celle de bureau. Pour ce faire, liez-les dans Yandex.Webmaster et Search Console, définissez les attributs rel="alternate" corrects, configurez l'indexation et la génération de cartes XML.

Chaos dû aux liens absolus dans le contenu

Les modèles de bureau et mobiles chargent le contenu de la même base de données dans 99 % des cas. S'il utilise des références absolues à page intérieure site de bureau indiquant le protocole et le domaine, ils seront également affichés sur la page mobile. Lorsque vous cliquez sur un lien, l'un des deux scénarios se produit :

Si la version de bureau a agent utilisateur, l'utilisateur verra la version mobile de la page.
Dans d'autres cas, l'utilisateur verra une page de 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 de bureau et mobiles peuvent différer. Par conséquent, il est logique d'indexer le contenu des deux dans la recherche afin d'éviter les erreurs. Google 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 pris en compte.

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

Exigences peu claires de l'index mobile-first

Pour préparer la transition vers un index mobile-first, il est logique de choisir la version mobile du site comme page canonique. Certes, il existe certaines ambiguïtés dans les recommandations concernant le mobile-first. Par exemple, les directives de Google stipulent que le contenu des versions mobile et de bureau doit être similaire, mais ne divulgue pas le degré de "similitude".

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

Un extrait du guide de Google sur l'indexation des sites mobiles

Extrait du rapport de Google sur la mise en place du mobile-first index

Utilisation inconsidérée des pages turbo

Certains innovent les moteurs de recherche sans discernement, dans l'espoir d'affecter les classements. Par exemple, les pages turbo Yandex, qui ne remplacent pas les pages complètes pages mobiles dans la recherche, incluent une petite partie de la fonctionnalité de l'utilisateur et sont moins de conversion. Si vous avez un site commercial et que vous êtes confiant dans la qualité de la version mobile, ne vous précipitez pas pour mettre en place le "turbo" - même pour les pages avec des articles et des critiques.

Réduire l'effet des liens externes

Les liens sont toujours importants pour les classements, en particulier dans recherche Google. Lorsque nous avons un sous-domaine mobile, certains utilisateurs commencent à y faire référence 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 sont moins performants dans 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 façons de promouvoir l'adaptatif au niveau régional - en utilisant un domaine unique et des géo-sous-domaines. Considérez 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 définir les régions via Yandex.Directory. Le problème est qu'il est parfois impossible de lier soi-même la version mobile du site à l'agence. Vous devrez contacter le support technique, mais cela ne garantit pas un résultat. Vous ne pouvez pas créer une organisation distincte pour la version mobile du site. Par conséquent, s'il existe de nombreuses branches, la liaison peut prendre beaucoup de temps.

Nous excluons généralement la possibilité d'utiliser des sous-domaines comme m.spb.site.ru ou spb.m.site.ru. Bien que Kholodilnik.ru, par exemple, l'utilise. Mais dans ce cas, vous devez configurer l'adressage entre toutes les régions des versions mobiles et de bureau, les tenir à jour, suivre les modifications et surveiller les services pour les webmasters. Il s'agit d'un énorme travail qui ne sera probablement pas payant.

Soumission pour un contrôle d'adéquation mobile

Si vous ne soumettez pas une version optimisée de votre site à Yandex.Webmaster pour les tests de compatibilité mobile, il se peut qu'il n'apparaisse pas dans les résultats de recherche mobile. Le problème s'applique également à l'adaptation. Cela n'arrive pas toujours, mais je vous recommande de suivre les messages du Webmaster.

Un fragment de communication avec le support technique de 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, bien sûr, la possibilité de créer un modèle séparé et une vitesse de téléchargement élevée. De plus, il est plus facile pour les anciens sites de créer une version mobile distincte que d'implémenter une version adaptative.

En outre, de nombreux spécialistes du référencement ont noté la croissance 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, examinez de plus près la mise en page adaptative. C'est plus économique et décision rapide. Mais il est préférable de planifier la fonctionnalité immédiatement afin de ne pas avoir à masquer une partie du site pour qu'elle ne s'affiche plus sur les appareils mobiles à l'avenir.

Si vous priorisez l'expérience utilisateur, vous devriez opter pour la version mobile. Il peut être modifié sans conséquence pour le bureau. Ceci est important si le site occupe une position de leader dans la problématique desktop de son segment.

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

Un extrait du guide de Google sur 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 SEO