partager utilisateurs mobiles croît à un rythme soutenu : fin 2014, leur nombre sur le Web a dépassé pour la première fois le nombre d'utilisateurs desktop. Plus de 10 millions de personnes se connectent UNIQUEMENT avec appareils mobiles. Et tout cela se passe en Russie en ce moment.

Avez-vous encore des doutes quant à savoir si vous avez besoin d'un site mobile ? Passons ensuite aux affaires.

Le but de cet article est de vous présenter la terminologie de base dans le domaine du développement de sites Web et d'applications mobiles réactifs et de vous aider à déterminer les méthodes qui vous conviennent.

Ainsi, nous listons les principaux moyens de rendre vos services plus accessibles aux audience mobile.

Conception adaptative (réactive) (Eng. Adaptive / Responsive)

Sur le sujet des différences entre les concepts « adaptatif » et « réactif », de nombreuses copies Internet ont été cassées, et vous pouvez écrire plus d'un article à ce sujet, mais toute une collection d'essais. En général, l'essentiel est le suivant : les deux concepts impliquent la capacité du site s'adapter aux écrans de divers appareils et s'affichent aussi bien sur des écrans larges que sur des tablettes ou des téléphones portables. Cependant le concept de "responsive design" est un peu plus large et inclut la "conception réactive". Par conséquent, dans ce qui suit, nous ferons référence à des sites tels que adaptatif.

L'adaptabilité est obtenue à l'aide des outils suivants :

Un exemple d'adaptabilité peut être trouvé sur notre site web. Commencez à rétrécir la fenêtre du navigateur et vous verrez comment le menu supérieur se rétrécit d'abord, s'ajustant à la taille de la fenêtre, puis se cache complètement dans l'icône dite du hamburger. Vous verrez un affichage similaire si vous accédez à notre site Web à partir d'un appareil mobile.

Ainsi, en utilisant la conception adaptative, nous obtenons un site Web qui est tout aussi confortable à utiliser depuis n'importe quel appareil. Bien sûr, c'est l'idéal, car si le site a des fonctionnalités complexes, il est difficile de le faire rentrer dans le cadre d'un petit écran mobile.

Malgré le fait qu'un utilisateur d'un appareil mobile peut voir une version tronquée du site principal, le navigateur chargera complètement la page : tous les textes, images et scripts, donc le temps de chargement peut être assez long, ce qui est un inconvénient de sites adaptatifs.

Site mobile séparé

Au lieu de rendre votre site réactif, vous pouvez créer une version distincte conçue pour les appareils mobiles. Vous avez vu des exemples de cette méthode des dizaines de fois. Cela ressemble à ceci - sur le site principal, il y a un lien "Aller à version mobile placer".

Ce lien ouvre un site séparé avec une URL différente, par exemple, m.vk.com pour Vkontakte. Il est également courant que le site principal soit configuré pour rediriger automatiquement tous les utilisateurs mobiles vers le site mobile.

La particularité d'un tel site est qu'il est adapté au maximum pour la commodité de travailler sur des appareils mobiles : le poids des pages est compressé, tous les éléments inutiles sont supprimés. Il sera beaucoup plus pratique pour vos utilisateurs mobiles d'obtenir les informations nécessaires sur vous et de passer une commande.

Sachez que vous n'avez pas besoin d'apprendre la programmation pendant plusieurs mois pour réaliser vous-même un site web mobile. Désormais, de nombreux services permettent de créer une version mobile du site en une demi-heure. Si, par exemple, vous souhaitez que votre site Web de carte de visite soit adapté aux mobiles, il est fort probable qu'un tel constructeur de site Web mobile soit tout ce dont vous avez besoin. Aussi, le service du concepteur de la version mobile du site est assuré par de nombreux hébergeurs, par des informations détaillées vous pouvez contacter votre support d'hébergement.

L'inconvénient d'un site mobile peut être que vous devez en fait gérer deux sites et effectuer toutes les modifications importantes deux fois. Cependant, vous pouvez vous assurer que les deux sites sont connectés à partir de la même base de données, et que toutes les transformations du principal sont effectuées dans le mobile, donc lors du développement d'une version mobile ou de l'achat d'un constructeur, il est préférable de clarifier ce point.

Application mobile

Une application mobile n'est pas un site Web, mais un programme installé sur l'appareil mobile de l'utilisateur. Ceci explique les principaux avantages et inconvénients de cette approche.

Le programme est installé directement sur le téléphone / la tablette de votre utilisateur, ce qui signifie qu'il pourra accéder à l'application même sans accès à Internet, ainsi qu'utiliser l'interface familière et toutes les fonctions de son appareil.

En même temps, c'est un inconvénient, car tous les utilisateurs ne voudront pas installer une application pour effectuer une action minute. Ou, immédiatement après avoir reçu les informations nécessaires, le client peut les supprimer.

Le développement d'une application mobile est un processus très chronophage et coûteux financièrement. Les sites Web sont multiplateformes et les applications mobiles devront être créées séparément pour chaque plateforme (iOS, Android, Windows Phone).

Bien sûr, il existe des outils spéciaux qui simplifient la création d'applications et vous permettent de les porter sur toutes les principales plates-formes à la fois, par exemple, Phonegap, Ionic, jQuery Mobile. Mais dans tous les cas, vous devrez contacter des spécialistes pour le développement et la mise à jour de l'application.

Quand avez-vous besoin d'une application mobile ? Très probablement, lorsque vous pouvez offrir à l'utilisateur quelque chose qui lui sera utile et l'intéressera pendant longtemps. Par exemple, si vous êtes psychologue, vous pourriez très bien créer une application appelée "Votre psychologue de poche" qui contiendra des articles, des tests, des réponses à des questions, et dans laquelle l'utilisateur passera un temps productif.

La question est de savoir quel résultat voulez-vous obtenir de l'application. Dans le cas d'un psychologue, il s'agira plutôt d'une fidélisation de la clientèle et d'un transfert plus facile des acheteurs potentiels vers les vrais ; s'ils aiment l'application, ils sont susceptibles de faire davantage confiance au psychologue et de venir le voir pour une consultation.

Si le projet implique une communication en direct des utilisateurs, alors une version mobile et une application mobile seraient une bonne option, mais ce sera un projet difficile et financièrement coûteux.

Si le projet est informatif, par exemple un blog ou un portail d'actualités, la mise en page adaptative habituelle lui convient mieux.

Pour prendre une décision éclairée quant à savoir si votre site a besoin de mobilité et quelle option choisir, vous devez au moins étudier les données d'analyse Web et savoir quel pourcentage de vos utilisateurs accèdent généralement à votre site à l'aide d'appareils mobiles.

Dans 95% des cas, l'adaptabilité suffit ou version mobile placer. Lors de la création d'un nouveau site, il vaut la peine de choisir l'adaptabilité ; lors de la mobilisation d'un site existant, il est souvent plus rapide et plus facile de développer une option mobile alternative.

Un sujet aussi sérieux ne peut pas être couvert dans un seul article, mais nous avons essayé de donner les informations de base. N'hésitez pas à poser des questions dans les commentaires, nous y répondrons en détail.

Si vous avez déjà décidé que votre site doit être "mobilisé", écrivez à notre service d'assistance et nous vous dirons quelle option vous convient le mieux, et combien cela coûtera.

PS Ceux qui s'intéressent au sujet du travail avec les utilisateurs mobiles, le 16 juillet, nous vous invitons à une master class "

L'ère de la mobilisation mondiale. Les smartphones ont permis d'accéder à Internet à tout moment et en tout lieu. Parfois, il est encore plus pratique de parcourir des sites Web, des réseaux sociaux, de rechercher une information ou un lieu sur une carte depuis un téléphone que depuis un ordinateur. L'ordinateur Systèmes d'exploitation essayant de se rapprocher de l'interface mobile. La frontière entre les plates-formes informatiques et mobiles s'amincit : les appareils mobiles sont rendus puissants et pratiquement fonctionnels ordinateur à part entière, et les interfaces informatiques sont rapprochées des interfaces mobiles en utilisant, par exemple, des icônes communes, une disposition similaire des éléments, des gestes similaires.

Cette tendance ne peut qu'affecter la création de sites. Les gestionnaires recommandent des sites "mobiles", les clients veulent, les concepteurs dessinent, les maquettistes, curieusement, composent et les programmeurs proposent des solutions.

Il est bien sûr plus facile, dès la création d'un site, de déterminer comment il va se comporter sur un appareil mobile, mais il existe d'anciens clients et leurs anciens et pas très sites pour lesquels une telle solution n'a pas été prévue. Bien que quelqu'un pense que les sites "mobiles" n'ont pas besoin d'être créés.

Comprendre que la quantité trafic mobile se développe à pas de géant, conduit à la nécessité de trouver des solutions pour un affichage correct et une utilisation facile du site sur les smartphones et les tablettes. j'en vois deux de vraies solutions, indiqué, en fait, dans le titre de l'article. Il existe une troisième option - une application mobile, mais nous rejetons cette option. Pourquoi? Bon, par exemple, si j'ai besoin de faire un achat ponctuel ou peu fréquent, je n'installerai pas d'application sur mon smartphone, c'est plus facile de trouver un autre site. La création d'une application a du sens pour un gros projet, ou pour un projet fréquemment utilisé par les clients, qu'il sera plus pratique d'ouvrir via demande distincte qu'à travers navigateur mobile. Maintenant, qui que vous preniez, chacun a sa propre application, mais, en fait, la plupart d'entre eux n'en ont tout simplement pas besoin.

Il reste deux options : mise en page adaptative ou version mobile. Définissons tout d'abord la différence entre ces deux méthodes.

Mise en page adaptative.

Le site ne modifie pas le contenu. Il s'adapte à la largeur et à la hauteur de l'écran. Des parties séparées du contenu peuvent être étirées ou rétrécies, alignées différemment (il y avait 3 colonnes - elles sont devenues une), mises à l'échelle, cachées (mais pas disparues) sous le bouton (la chose la plus courante qui est cachée sous le bouton est le menu ).

Version mobile.

Fait sur un sous-domaine. Les options les plus courantes sont m..website, pda..ru/mobile/.

Il est déterminé que l'utilisateur est venu d'un appareil mobile et est redirigé vers la version mobile avec la possibilité de basculer vers version complète. Cependant, le contenu du site apparence et les fonctionnalités peuvent être radicalement différentes. En règle générale, cette différence consiste à simplifier, à réduire le site, tout d'abord, pour un chargement rapide sur les appareils mobiles.

Quelle est la meilleure version mobile ou mise en page adaptative ?

Pour comprendre ce problème, considérez les avantages et les inconvénients de chaque option.

Il y a des avantages généraux :

affichage correct sur les appareils mobiles ;

adapté aux appareils mobiles.

Version mobile:

la possibilité de "supprimer" les fonctionnalités inutiles

Refonte du site pour que la mère natale du créateur ne se reconnaisse pas. Ceci est essentiel si les éléments se trouvent à des endroits complètement différents sur la version mobile et sur la version complète.

Côté serveur, utilisez une logique différente ou légèrement modifiée, qui vous permet de gérer de manière flexible les fonctionnalités de la version mobile et d'augmenter sa vitesse de téléchargement

Un domaine à part, à cause duquel les référenceurs vont pleurer, car pour les moteurs de recherche ce seront deux sites différents.

La nécessité dans ce cas de passer à la version complète. Par exemple, pour obtenir toutes les fonctionnalités. De plus, si, par exemple, il existe un lien vers la version mobile sur un autre site, alors ceux qui se sont connectés depuis un ordinateur devront faire une action supplémentaire (cliquer sur "version complète") ou utiliser une version qui ne convient pas à un l'ordinateur.

Mise en page adaptative :

Le site s'adapte toujours à la résolution actuelle. Lorsque la fenêtre du navigateur est réduite sur un ordinateur ou lorsque l'orientation est modifiée sur un appareil mobile.

En règle générale, avec cette méthode, tous les éléments sont aux mêmes endroits que dans la version complète, et pour un utilisateur connaissant la version complète, il ne sera pas difficile de gérer la version mobile.

Même domaine, mêmes adresses. Pas de redirections, pas de problèmes avec les sitemaps et les robots. Les référenceurs sourient.

Un projet complexe et à forte charge prendra beaucoup de temps à s'ouvrir sur un appareil mobile. Au moins 4G, au moins 24G, Internet mobile est l'internet mobile.

Manque de flexibilité dans le choix des fonctionnalités. Tout ce qui était sur l'ordinateur sera sur le téléphone mobile. Tous les éléments sont aux mêmes (ou presque) endroits, ce qui n'est pas toujours bon. Pour supprimer quelque chose, vous devez le masquer dans css, ce qui supprime les fonctionnalités inutiles, mais n'augmente pas la vitesse de chargement. Et si, au contraire, quelque chose ne doit être que sur un téléphone portable, il sera également toujours chargé et masqué uniquement à des résolutions élevées.

La petite résolution n'est pas toujours les appareils mobiles. C'est peut-être juste une fenêtre de navigateur qui n'est pas en plein écran. A première vue, « et alors ? ». Mais il y a des choses qui doivent être affichées uniquement sur les appareils mobiles, auquel cas elles apparaîtront sur l'ordinateur.

Que choisir mise en page adaptative ou version mobile ?

Comme on peut le voir, malgré le fait qu'il s'agisse de concepts assez proches, il existe des différences.

En faveur de quoi faire un choix.

S'il s'agit d'une boutique en ligne très chargée ou d'une sorte de grand projet, alors, évidemment, pour des performances élevées, vous devez créer une version mobile.

Si le site n'est pas très "lourd" ou même simple, alors la mise en page adaptative sera la meilleure solution, élégante et belle.

Je vote pour la troisième option. Il s'agit toujours d'une mise en page adaptative, mais initialement optimisée, c'est-à-dire initialement à chargement rapide. C'est bon non seulement pour les utilisateurs connectés à partir d'appareils mobiles, mais aussi pour les utilisateurs à partir d'un ordinateur.

Un site rapide est un bon site.

Il est nécessaire de déterminer à quoi ressemblera le site sur de petits écrans, même au stade de l'élaboration des termes de référence et de la conception. Et soyez même prêt à renoncer à certaines fonctionnalités inutiles pour des raisons de rapidité et de polyvalence. Et les développeurs qui créent le site doivent se poser la question de l'optimisation des requêtes de la base de données et, en conséquence, de la réduction de leur nombre, de l'optimisation du code sur les parties serveur et client.

La mise en page réactive est la meilleure option. Et il vaut mieux y penser au stade de la formation des termes de référence. Reporté à plus tard ce genre de problème peut revenir hanter:

• Optimiseurs de référencement avec une diminution des résultats de recherche mobile et, par conséquent, une diminution du nombre de visites à partir d'appareils mobiles (et il s'agit d'un nombre énorme de personnes en constante augmentation) ;
• les programmeurs ont passé du temps à faire en sorte que le site apparaisse "au moins d'une manière ou d'une autre" sur les smartphones, et plus tard à refaire la mise en page adaptative ou à créer une version mobile
• propriétaires de sites clients perdus, qui ira aux concurrents dont le site Web sur le téléphone remplit ses fonctions et semble correct.

Avec l'avènement du boom des appareils mobiles, les développeurs ont été confrontés à un choix : doivent-ils conserver les versions mobiles de leurs sites avec les versions "à part entière", ou les sites doivent-ils devenir réactifs et s'adapter aux différentes tailles d'écran ?

À l'heure actuelle, lors de la création de versions mobiles de sites, il existe 3 manières principales de les créer :

• Conception adaptative ;
• Version mobile distincte du site ;
• RESS (Responsive Design + Côté Serveur).

Chacune des méthodes a ses avantages et ses inconvénients, que je vais essayer de décrire en détail.

Conception adaptative

Les requêtes média CSS3 sont couramment utilisées pour mettre en œuvre une conception réactive. Selon la taille de l'écran, l'utilisateur verra une image différente :

@media screen and (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen and (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media screen and (max-width: 1024px) ( div.for-example (width: 980px;) )

Avantages de la conception réactive

• Facilité de développement - avec la mise en page adaptative, toute la structure du site s'adapte automatiquement aux différentes largeurs d'écran. Afin d'obtenir un produit fonctionnel, vous n'avez pas besoin de tout écrire à partir de zéro - il suffit de modifier le CSS et le HTML ... Compte tenu de la disponibilité de frameworks comme Bootstrap, un tel développement n'est pas très difficile avec une implémentation standard. De plus, soutenir un tel produit serait une tâche relativement simple.
• Une URL - nous évite des redirections inutiles, et la nécessité pour l'utilisateur de se souvenir de l'adresse de la version mobile (même s'il ne s'agit que du préfixe m.). De plus, la présence d'une adresse unique aura un effet positif sur la promotion du site, car il sera "plus pratique" pour les moteurs de recherche de fonctionner.

Inconvénients de la conception réactive

• Tâches diverses - les tâches typiques des utilisateurs "mobiles" de grands sites diffèrent généralement de celles des utilisateurs de PC. Si vous êtes un client bancaire, alors, très probablement, dans la version mobile du site, vous serez intéressé par une gamme très limitée d'informations - adresses des succursales les plus proches, distributeurs automatiques de billets, etc.
  En général, avec la mise en page adaptative, l'approche la plus courante consiste à faire une copie d'un site normal, à mettre en œuvre les besoins de tous les groupes dans la mise en page pour les téléphones public cible. Mais alors vous pouvez oublier la convivialité. Les sections secondaires nécessaires à cinq pour cent des visiteurs créeront des désagréments pour le gros des clients.
Le "poids" des sites reste un obstacle sérieux pour les utilisateurs téléphones portables. Cela signifie que certains des éléments actifs typiques des sites de bureau, y compris les cartes intégrées, les vidéos, les calculatrices de prêt et les menus animés sur les sites mobiles, doivent être remplacés par des alternatives plus légères. Le design réactif peut-il nous donner cette capacité ? Dans une implémentation courante, un utilisateur avec un petit écran doit charger la page entière pour n'en voir qu'une partie. Par exemple, si la version de bureau de la mise en page principale pèse 200 Ko et que la version mobile pèse encore 50 Ko, vous devrez télécharger 250 Ko pour la visualiser. Bien sûr, vous pouvez utiliser la compression du code de la page, mais les requêtes supplémentaires adressées au serveur continueront d'être envoyées.
• Désespoir - Un des avantages indiscutables de la version mobile : si vous ne l'aimez pas, vous pouvez la désactiver et passer à un domaine classique. Les sites Web de conception réactive ne fournissent pas ce choix simple mais important. Si la mise en page personnalisée est gênante, boguée ou si elle cache un élément de navigation important, laissez-la tranquille : vous ne pouvez rien faire pour la revoir. Vous devrez courir pour rechercher un ordinateur de bureau ou le site Web d'un concurrent. Vous pouvez proposer des "béquilles" pour contourner cette limitation (utiliser des cookies et inclure différentes feuilles de style). Mais cette approche complique le développement.

En général, l'idée de développer une version mobile en conception adaptative est assez populaire, malgré les inconvénients ci-dessus. En particulier, ce concept est pleinement soutenu par des géants tels que, par exemple, Google.

Version mobile distincte du site

Pour rendre le site pratique pour les utilisateurs mobiles, ils créent souvent également des versions distinctes des sites - spécialement orientées vers l'utilisateur avec un smartphone / tablette. La pratique la plus courante consiste à rediriger les utilisateurs mobiles vers un sous-domaine spécial (m.example.com, mobile.example.com, etc.). Probablement, dans 99% des cas, la version mobile est une version principale simplifiée - uniquement avec les fonctionnalités qui, selon les développeurs, seront nécessaires et utiles pour les utilisateurs d'appareils mobiles et de tablettes.

Avantages de la version mobile

• Facilité de changement puisque le site existe, de facto, séparément de la version principale, il est beaucoup plus facile d'y apporter des modifications liées uniquement à la version mobile, car la version mobile ne fournit le plus souvent pas de fonctionnalités redondantes et inutiles.
• Convivialité - la version mobile est généralement grandement simplifiée par rapport à la version de bureau, de sorte que l'utilisateur n'aura pas à aller loin pour obtenir les informations dont il a besoin.
• Vitesse - du fait de la même simplification du site, la version mobile se charge plus rapidement. Ceci est essentiel pour les utilisateurs qui utilisent encore le GPRS ou la 3G faible.
• Choix- le plus souvent, dans la version mobile, il est possible de basculer vers la version principale du site.

Inconvénients de la version mobile

• Adresses multiples -
• Gêne pour l'utilisateur - différentes adresses pour les versions de bureau et mobiles. Pour certains, cela peut s'avérer être un plus, pour d'autres, cela peut être un facteur extrêmement ennuyeux lorsque, pour visualiser facilement le site, vous devez vous souvenir d'une adresse supplémentaire. Il existe également des problèmes avec les moteurs de recherche : afin d'éviter le contenu dupliqué, les référenceurs doivent utiliser les balises méta rel="alternative" et rel="canonical". De plus, lorsqu'un utilisateur mobile recherche Google clique sur le lien dans les résultats, il sera redirigé vers la version desktop ou redirigé vers la version mobile. Mais si la version mobile de cette page n'existe pas, elle obtiendra une erreur.
• Limite - créer un site mobile séparé signifie se débarrasser d'une partie du contenu et des fonctionnalités. De plus, vous pouvez avoir deux ensembles de contenu différents qui peuvent affecter négativement l'image globale des informations.

De manière générale, la création de versions mobiles de sites se justifie assez bien, notamment pour les gros projets. Par exemple, Amazon utilise une version mobile spéciale du site.

RES

Google lui-même, bien qu'il supporte l'utilisation du responsive design par les webmasters, utilise un système différent dans ses produits. Si vous visitez, par exemple, page d'accueil sous différents User-Agents, vous pouvez voir différents HTML pour différents appareils. RESS - Conception réactive + côté serveur. Exemple de mise en œuvre, esquissé "sur le genou":

$DS = DIRECTORY_SEPARATOR ; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "template .php"; ) include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Avantages du SER

En fait, la méthode peut inclure les avantages d'une version mobile et réactive distincte des sites, en fonction de la mise en œuvre. De ce qui sera nouveau :

• Minimisation du trafic - Le JavaScript inutile peut être supprimé du HTML, ce qui libère du processeur, de la mémoire et du cache sur l'appareil mobile. Il peut également être spécialement optimisé en html et css.
• Il est possible d'utiliser le ciblage - par exemple, pour les appareils Android, proposez de télécharger l'application depuis GooglePlay, et pour Apple - depuis iTunes. Pour chaque appareil, vous pouvez faire votre mise en page.

Les inconvénients

• Difficulté de développement une telle méthode nécessitera une configuration de serveur appropriée et le travail de plus de programmeurs. Il faudra aussi faire plusieurs diverses options disposition.
• Mécanisme de détection de périphérique - Malheureusement, même à notre époque, il n'a pas encore été perfectionné. Des histoires sur la façon dont le téléphone rare de quelqu'un n'est pas défini comme un appareil mobile apparaissent assez souvent.

En général, RESS est la meilleure des trois options proposées, cependant, elle nécessite beaucoup plus d'efforts lors du développement.

Sommaire

À mon avis, il n'y a pas d'option idéale que tout le monde devrait utiliser. La meilleure option pour moi c'est RESS. Cependant, c'est l'une des rares options car elle demande beaucoup d'efforts à mettre en œuvre. En général, les 3 options ont leurs avantages et leurs inconvénients, selon l'essence et la direction du site.

Afin de déterminer ce qui est le mieux - une conception adaptative ou une version mobile du site, vous devez d'abord comprendre à quoi tout cela sert.

Selon comscore.com, le pourcentage d'utilisateurs naviguant sur des sites Web sur des appareils mobiles augmente chaque année :

Base d'abonnés actifs transmission mobile données, monde, millions de personnes, 2007-2015

Ainsi, de nouveaux algorithmes ont été développés pour moteurs de recherche, et a également introduit des facteurs de classement supplémentaires : désormais Résultats de recherche il tient compte de la compatibilité du site avec les appareils mobiles (facile à consulter sur les appareils mobiles). Dans Google, l'algorithme Mobile friendly a été lancé le 21 avril 2015 à Yandex - Vladivostok le 2 février 2016.

Version de bureau du site et version adaptée pour les appareils mobiles

Comment les moteurs de recherche déterminent si une page de site Web est adaptée aux mobiles :

• les pages doivent contenir du contenu qui ne nécessite pas de défilement horizontal ou de zoom pour être visualisé ;
• le site ne doit pas contenir d'éléments qui ne fonctionnent pas sur de nombreux appareils mobiles - Flash, applets Java et plugins Silverlight ;
• les textes sur les pages doivent être lisibles sans mise à l'échelle ;
• Les liens doivent être suffisamment éloignés pour être facilement cliquables.

Plus important encore, les moteurs de recherche évaluent les sites Web sans ambiguïté, qu'ils soient adaptés aux mobiles ou non.

À l'aide de l'outil Google PageSpeed ​​​​Insights (https://developers.google.com/speed/pagespeed/), vous pouvez déterminer la vitesse de chargement des pages de votre site, ainsi que leur convivialité. Le score PageSpeed ​​​​peut aller de 0 à 100 pour la vitesse de chargement des pages et l'expérience utilisateur, par exemple :

Les scores de 85 et plus sont considérés comme bons.

Si la page du site ne répond pas aux exigences du service, un rapport est émis sous forme de recommandations de dépannage, par exemple :

Ce service peut être utilisé pour le diagnostic initial et le dépannage du site Web.

Dans quels cas faut-il développer une version mobile ou adaptative des sites ?

Pour comprendre s'il vaut la peine d'adapter un site à un public "mobile", vous devez l'analyser dans des systèmes d'analyse Web (Yandex.Metrica ou Google Analytics) par le trafic dans le contexte des appareils à partir desquels les utilisateurs accèdent au site. Si plus de 15% du public utilise des smartphones ou des tablettes, il est recommandé de développer une mise en page adaptative ou une version mobile. Il est important de prendre en compte le trafic du site. Par exemple, pour les sites avec un grand nombre de visiteurs (à partir de 1 000 000 et plus), cette barre est abaissée, car un segment aussi important du trafic du site ne peut être négligé.

Version mobile du site

version mobile- une version distincte ou un modèle distinct adapté pour l'affichage sur les appareils mobiles. Il se peut qu'il n'affiche pas tous les blocs qui se trouvent sur la version principale du site.

"Signe spécial" de la version mobile : lors du passage à celle-ci dans barre d'adresse navigateur, l'URL change - le préfixe "m." y est ajouté, par exemple : m.example.ru.

Visualisation sur écran d'ordinateur et sur appareil mobile : la version mobile est différente de la principale

Un exemple de site avec une version mobile adaptée : http://www.lamoda.ru/ (m.lamoda.ru).

Les principaux avantages de la version mobile du site

• Poids léger et, par conséquent, vitesse de chargement élevée. Ceci est essentiel pour les utilisateurs qui ont de faibles débits d'accès à Internet (GPRS ou 3G faible).
• Permettre à l'utilisateur de choisir la version à afficher (mobile ou de base).
• Conformité aux exigences des moteurs de recherche pour la commodité de la visualisation du site sur les appareils mobiles.

Inconvénients de la version mobile

• Si vous devez apporter des modifications au site, elles devront être effectuées à la fois sur la version standard du site et sur la version mobile, c'est-à-dire que la quantité de travail augmente de 2 fois.
• Lors de son développement, il est souvent nécessaire d'abandonner une partie du contenu.
• Étant donné que les versions mobile et de bureau du site sont sur des domaines différents, cela ne s'améliore pas facteurs comportementaux le domaine principal, c'est-à-dire que ce sera un moins pour l'optimisation SEO.

Il s'agit d'une conception spéciale de pages Web, dans laquelle les éléments du site changent de taille et de position à différentes résolutions d'affichage. Le site s'adapte automatiquement à la taille de l'appareil sur lequel il est ouvert, qu'il s'agisse d'un écran PC, d'un smartphone ou d'une tablette. Grâce à ce type de mise en page, le site sera affiché de manière pratique et claire sur divers appareils. Avec l'utilisation de technologies de conception adaptative, la fonctionnalité du site ne souffre pas du tout.

Voir sur un écran d'ordinateur et sur un appareil mobile - la version adaptative est différente de la principale

Un exemple de site avec une version adaptative : http://www.mvideo.ru/.

Avantages de la conception réactive mobile

• Une URL pour tout le contenu.
• Interface flexible - vous pouvez configurer un affichage confortable du site pour n'importe quelle largeur d'écran.
• La conception réactive répond aux exigences des moteurs de recherche pour la commodité de la visualisation du site sur les appareils mobiles.
• Si le site a une version adaptative, les facteurs comportementaux s'améliorent sur les appareils mobiles, ce qui améliore les performances globales du site. Pour le classement dans les résultats de recherche, ce sera un gros plus.

Inconvénients de la conception réactive pour les appareils mobiles

• La nécessité de créer des mises en page de site distinctes pour chaque résolution d'affichage.
• La version adaptative, contrairement à la version mobile, ne peut pas être basculée vers mode normal. C'est-à-dire que l'utilisateur n'a pas le choix d'afficher le site. L'inconvénient est pertinent s'il y a des erreurs dans la version adaptative - par exemple, les éléments ne sont pas affichés correctement.
• La complexité d'ajouter un nouveau modèle de page, car ils devront être configurés pour s'afficher correctement sur la version adaptative. Si vous ajoutez des informations à des modèles de page existants, il n'y aura aucun problème d'affichage.

Quoi de mieux : une mise en page adaptative pour les appareils mobiles ou une version mobile du site ?

La meilleure solution pour le site consiste à utiliser une mise en page adaptative pour les appareils mobiles. Malgré un certain nombre de défauts, un site avec une mise en page adaptative est plus fonctionnel. De plus, la présence de modèles de pages implique la facilité d'ajouter du contenu au site, contrairement à la version mobile, dans laquelle le travail d'ajout de contenu est dupliqué, puisqu'il s'agit en fait de deux sites différents. Un gros plus est le fait que la version adaptative améliore les facteurs comportementaux du site principal. Ceci est utile en termes de promotion et de convivialité. Sur cette base, nous vous recommandons de faire votre choix en faveur de la mise en page adaptative.

Là, nous avons analysé pourquoi la conception adaptative est nécessaire, quels en sont les avantages. Comme il ressort de l'article, une conception adaptative est nécessaire, et tout le monde en a besoin. Aujourd'hui, nous examinerons ce qui est le mieux pour le site : une conception adaptative ou une version mobile distincte.

version mobile

La version mobile du site est une version distincte du site conçue pour les smartphones et les tablettes. A généralement un design optimisé pour les appareils mobiles afin que le contenu soit présenté sous une forme lisible par l'homme et que le chargement se produise presque instantanément. Généralement placé sur un sous-domaine sous la forme de m.site.ru ou mobile.site.ru.

Avantages

Commodité

Les utilisateurs n'ont pas besoin de faire défiler d'avant en arrière et en diagonale à la recherche du bon contenu, augmenter-diminuer afin de lire le texte désiré. L'ensemble du site est servi dans une colonne, que vous devez faire défiler de haut en bas. Tout le contenu est généralement structuré et divisé en blocs logiques.

Vitesse de téléchargement

En règle générale, la conception de la version mobile est très simplifiée et le code et les scripts sont minimisés, ce qui se traduit par un chargement très rapide du site sur les appareils mobiles.

Modifications du site

La version mobile est en fait un site séparé, ce qui signifie qu'il n'est pas difficile d'apporter des modifications. Pas besoin de s'inquiéter et de s'inquiéter de la façon de s'assurer que les modifications n'affectent que la version mobile et n'affectent pas la version de bureau.

Passer à la version principale

Dans la plupart des cas, l'utilisateur pourra facilement basculer vers la version principale du site s'il a besoin d'utiliser la fonctionnalité qui n'est pas disponible dans la version mobile.

Défauts

reproduction

Le contenu dupliqué sur différents sous-domaines a un impact négatif sur la promotion des moteurs de recherche. En règle générale, les programmeurs sont engagés dans la création d'une version mobile et les spécialistes du référencement sont engagés dans la promotion. Et même si tous les souhaits des spécialistes du référencement sont pris en compte sur la version de test, il n'est pas certain qu'ils migreront vers la version de combat dans leur forme d'origine. Souvent, pendant le transfert, quelque chose change, quelque chose s'ajoute. En conséquence, nous pouvons avoir des problèmes de classement en raison de doublons dans la version mobile.

Mise à jour

Tout contenu ajouté au site principal devra être dupliqué sur la version mobile. Et si le site, par exemple, est portail de nouvelles et mis à jour quotidiennement, cela peut être un processus assez coûteux.

Limitation fonctionnelle

Dans la version mobile, les décisions de fonctionnalités lourdes ne sont souvent pas transférées. Habituellement, avant de créer un site mobile, les demandes et le comportement des utilisateurs à partir d'appareils mobiles sont analysés et, sur la base de ces données, seul ce qui est vraiment important pour les visiteurs mobiles est donné.

La version mobile a fait ses preuves et est encore souvent utilisée par les webmasters. La même chose peut être attribuée aux applications mobiles. Mais cela coûte déjà très cher, et le site moyen ne peut pas se permettre le développement d'applications mobiles.

Disposition adaptative

Un site Web conçu de manière adaptative est également affiché de manière pratique sur les ordinateurs de bureau et les appareils mobiles.

Avantages

Facilité de mise en œuvre

En règle générale, avec la disposition adaptative, la largeur de l'écran est ajustée à la taille d'affichage souhaitée. Tout cela peut être fait avec HTML et CSS. Et les CMS et frameworks modernes vous permettent de le faire en quelques clics seulement. Oui, et les modèles modernes offrent immédiatement une conception adaptative. Il ne reste plus qu'à l'installer ? et en quelques minutes, vous avez une conception adaptative qui convient à tout public.

référencement

Si dans la version mobile, nous sommes confrontés à une duplication de contenu sur différents sous-domaines, alors il n'y a pas un tel problème ici. La page aura-t-elle une adresse (URL) ? et lors du changement de résolution d'écran ou d'appareil, nous ne casserons pas la conception ou nous ne serons pas redirigés vers la version mobile. Cette option résout mieux le problème du contenu dupliqué que les attributs rel="canonical" ou les interdictions dans robots.txt sur la version mobile.

Défauts

lourdeur

Habituellement, avec l'adaptabilité, toutes les fonctionnalités sont laissées, à la disposition des utilisateurs. Cela signifie que les visiteurs mobiles peuvent être confrontés à une pile de scripts et à de nombreuses informations qu'il sera difficile de couvrir immédiatement sur un petit écran de smartphone. Bien qu'il soit normal que le bureau ait une taille de 200 à 250 Ko, le mobile prend généralement moins de 50 Ko.

But de la visite

Souvent, les utilisateurs se rendent sur le site pour connaître les coordonnées, les directions, la disponibilité des agences, etc. Et sur certains sites, ils devront passer par plusieurs pages lourdes pour arriver à leur but.

Pas le choix

Sur la version mobile, si le programmeur a de travers composé le bloc et caché les téléphones derrière le logo, vous pouvez toujours passer à la version de bureau et au moins avec mise à l'échelle, mais voir les coordonnées. Si le programmeur se trompe avec la mise en page adaptative, vous devrez alors essayer de savoir ce que vous voulez, et tout le monde ne peut pas le faire. Par conséquent, la conception adaptative doit d'abord être très bien et avec compétence, puis testée avec autant de compétence.

Conclusion : mise en page adaptative ou version mobile ?

Il n'y a pas de bonne réponse ici. Pour chaque tâche est sélectionné Meilleure option. Et le design réactif, qui est idéal pour un site, ne causera que des problèmes d'utilisabilité dans un autre cas. Il peut être plus facile pour les grands acteurs et les sites volumineux de créer une application mobile qui n'aura que les fonctionnalités dont les utilisateurs ont besoin.

Notre opinion est que si vous n'avez qu'un site d'information, alors la conception adaptative est parfaite. Étant donné qu'il est beaucoup plus facile de compresser du texte et des images que de décider comment inverser une énorme calculatrice sur un site sans perdre en convivialité.

Mais si vous avez sur le site Espace personnel avec d'énormes fonctionnalités ou son site sera difficile à transférer vers une conception adaptative, il est plus facile de créer une version mobile, où il est pratique de placer tous les outils pour les utilisateurs.

Eh bien, si vous n'avez pas encore de site Web et que vous songez simplement à le créer, il est préférable de mettre immédiatement le design réactif dans le développement.