Version mobile du site: comment faire? Conception adaptative

Aujourd'hui, la plupart des gens vont en lignegadgets mobiles - tablettes, téléphones, en lien avec cela, l'optimisation du site vient également à un nouveau niveau. Si un utilisateur vient et voit que le site est pas optimisé pour les appareils mobiles: Vous ne pouvez pas voir l'image, arraché un bouton, les petites et les polices de caractères illisibles, la conception biaisée - 99 des 100% qu'il sortira et commencera à chercher un autre plus pratique. Un robot de recherche cochera pour indiquer que la ressource n'est pas pertinente, c'est-à-dire qu'elle ne correspond pas à la requête de recherche. Par conséquent, la conception de la page doit nécessairement être adaptée à divers appareils mobiles. Qu'est-ce qu'une version mobile du site, comment le faire et quelle est la meilleure façon de l'appliquer? Lire la suite dans cet article.

Ainsi, il existe quatre façons principales d'adapter le site à une version mobile.

La première voie - la conception adaptative

Les modèles adaptatifs suggèrent un changementdes photos du site en fonction de la taille de l'écran. En règle générale, ils sont réglés sur 1600, 1500, 1280, 1100, 1024 et 980 pixels. Pour l'implémentation, utilisez CSS3 Media Queries. La conception du site ne change pas en même temps.

Les avantages de cette méthode sont:

• conception pratique, car la structure elle-même s'adapte aux paramètres de l'écran, et toute mise à jour ne nécessite pas le développement de la conception à partir de zéro, juste correct CSS et HTML;
• une URL - l'utilisateur n'a pas besoin de se souvenirplusieurs noms, il n'y a pas besoin redirect (redirection d'une adresse à une autre), ce qui peut compliquer le webmaster de fonctionnement, et le moteur de recherche est plus facile de trier et de classer la ressource avec un seul endroit.

Bien sûr, les modèles adaptatifs ont leur propreinconvénients, qui, soit dit en passant, sont plus que des mérites. Néanmoins, de nombreux développeurs adhèrent à ce concept, par exemple, la société Google, dont la version mobile du site a un design adaptatif. Donc, les inconvénients sont:

• La conception adaptative ne supporte pas les mêmes tâches pourappareil mobile, comme sur le PC. S'il s'agit, par exemple, d'une version mobile du site Web de la banque, où l'utilisateur est plus susceptible d'avoir des informations sur le taux de change ou les guichets automatiques les plus proches, cette conception est suffisante. Mais s'il s'agit d'une ressource structurée complexe avec de nombreuses sections et sous-sections, la mise en page adaptative est peu susceptible de plaire aux visiteurs.
• Un téléchargement lent transforme votre site favori en undétesté. Ceci est particulièrement vrai des ressources, où l'animation, les clips vidéo, les pop-ups et autres éléments actifs sont abondants. En raison du poids important, la page ralentira simplement, l'utilisateur se fâchera et partira, et les positions de recherche du site tomberont.
• Incapacité de désactiver la version mobile - plusun inconvénient important. Si un élément est masqué par une telle disposition, vous ne pouvez rien faire pour l'ouvrir, contrairement aux sites où il peut être désactivé et accéder à un domaine normal.

Néanmoins, une telle version mobile du site est rapide,sans compétences et coûts spéciaux vous permet d'adapter la ressource à n'importe quel gadget. Mais il convient, compte tenu des insuffisances répertoriées, à des ressources petites et simples avec un minimum d'informations et de multimédia, sans navigation et animation compliquées. Pour un site complexe, deux autres méthodes conviennent.

La deuxième méthode est une version séparée du site

Cette méthode est très courante et souvent réussierend le site sur l'appareil mobile plus pratique pour la perception. Son essence est de créer une version distincte de la page, dessinée pour l'application et située sur une URL ou un sous-domaine distinct, par exemple, m.vk.com. Dans le même temps, la fonctionnalité principale est préservée, la conception du site semble simplement différente. Les avantages de cette méthode sont évidents:

• interface conviviale;
• il est facile de modifier et d'apporter des modifications, car la version existe séparément de la ressource principale;
• en raison du faible poids d'une version séparée du site est beaucoup plus rapide que le modèle adaptatif;
• le plus souvent, il est possible d'accéder à la version principale de la page avec un mobile.

Mais ici aussi, il y avait des lacunes:

• Plusieurs adresses - version bureau et mobilesite. Comment faire en sorte que l'utilisateur se souvienne de deux options? webmestres souvent prescrits redirect (redirection) vers dekstopnoy version pour mobile, mais si cette page dans la version mobile n'existe pas, l'utilisateur recevra une erreur. Ici, il y a des difficultés avec les moteurs de recherche, ce qui est difficile à classer 2 des mêmes ressources, et cela a un impact direct sur la promotion.
• La version mobile du site de l'ordinateur, si l'utilisateur y va par erreur, aura l'air ridicule, ce qui peut également affecter la fréquentation.
• Cette version est souvent fortement réduite, bureau, de sorte que l'utilisateur aura des fonctionnalités très limitées. Mais en même temps, si quelque chose manque, le visiteur peut aller à la version complète de la page.

En général, un site mobile distinct se justifieet est le moyen le plus commun d'adapter la ressource aux appareils mobiles. Il est populaire auprès des grands magasins en ligne, par exemple, Amazon.

La troisième voie est RESS-design

Le moteur de recherche Google prend en charge activement cettedirection de la conception mobile. C'est la méthode la plus complexe, la plus coûteuse mais la plus efficace pour adapter le site à un téléphone ou une tablette. Il s'appelle RESS. Il s'agit d'un ciblage de ressources dans une application mobile, qui peut être téléchargé séparément pour chaque périphérique. Pour l'android - avec GooglePlay, et pour Apple - avec iTunes.

De telles applications sont rapides, gratuites, pratiques,avoir la capacité d'accueillir différents types d'informations, alors que la mémoire du téléphone et le trafic Internet ne sont pas mangés comme lors d'une visite d'un site via le navigateur. Ils sont faciles à entrer, car le lien sera toujours sur l'écran et il n'est pas nécessaire d'entrer un nom complexe dans la barre d'adresse du navigateur.

Il y a, bien sûr, ici et leurs lacunes, telles quela complexité dans le développement, le coût élevé du travail d'un grand nombre de programmeurs, la nécessité de faire plusieurs variantes de mise en page. Parfois, un appareil mobile n'est pas reconnu par l'application. Un soutien technique régulier, la correction des déficiences est nécessaire. Néanmoins, cette option est considérée comme la meilleure des trois offertes en raison de son fonctionnement productif et sans heurt.

Le moyen le moins cher de créer un site mobile

Toutes les méthodes ci-dessus supposentet pas toujours un travail long et complexe, mais toujours payé du webmaster. Si vous ne voyez pas le besoin urgent d'un tel développement, vous pouvez utiliser une version mobile simple et gratuite du site. Comment le rendre plus facile?

Télécharger des modèles spéciaux (plugins) pourconception adaptative. Par exemple, WP Mobile Détecteur, WordPress Mobile Pack, WPSmart Mobile et autres. Ils vous aideront à afficher correctement le site dans votre téléphone, et vous obtenez quelques conseils qui devraient être corrigées afin de mieux adapter à la version mobile d'une page.

Bien sûr, cette méthode ne convient guère àressources sérieuses. Au contraire, cette opportunité gratuite est destinée à des sites petits et simples, des blogs, des fils de nouvelles. Ne pas oublier que le moteur de recherche Google, comme Yandex, fait aujourd'hui des demandes sérieuses sur les versions mobiles, il y a donc une grande chance de réduire vos positions en utilisant cette méthode.

Avec cette méthode, très probablement, les bannières publicitaires et pop-up seront coupées, mais la page se chargera rapidement et sans "décalages".

Principes de création de versions mobiles

Peu importe, une version mobile du site est créée gratuitementou avec l'aide du personnel du webmaster, cela se fait sur le système RESS ou en utilisant un template adaptatif. La chose la plus importante est que pour son travail efficace, il est nécessaire d'adhérer à plusieurs principes très importants. Alors, quelle devrait être la version mobile du site? Comment le rendre productif, efficace et productif?

Nous enlevons tout inutile

Le minimalisme est quelque chose qui devrait viserdéveloppeur de la version mobile du site. Imaginez à quel point il est difficile de percevoir des informations qui sont pleines de couleurs, de boutons, de bannières, et que vous devez faire défiler sans cesse à la recherche du bon matériel. Le design mobile devrait être simple et propre. Sélectionnez 2-3 couleurs pour séparer l'espace (par exemple, marqué). Il vaut mieux que l'un d'eux soit blanc. Divisez l'espace d'un petit écran en zones claires et lisibles. Les clés virtuelles doivent être visibles afin que l'utilisateur sache clairement où cliquer, et vu - c'est la marchandise, voici le formulaire pour remplir les données, voici les informations sur la livraison et le paiement.

Toutes les options supplémentaires qui seraient utilesdans la version de bureau et rendrait la vie plus facile pour l'utilisateur, ils n'apporteront que des complications. Ne laissez que les éléments les plus importants. Animation, bannières publicitaires, multimédia, le plus probable, ne fera que ralentir le site ou l'application et détourner l'attention de l'essentiel.

Alignement

La question de la péréquation n'est pas moins aiguë,puisque si vous le faites incorrectement, l'utilisateur ne recevra que des fins de mots importants. L'alignement à gauche et à la verticale est considéré comme commun. Imaginez comment vous parcourez la ligne de nouvelles dans votre téléphone. Vous faites cela de haut en bas, mais pas à gauche ou à droite.

Unification

Quand il n'y a pas de possibilité d'une longue chaîne de transitions,Essayez de combiner plusieurs étapes en une seule. Par exemple, un site nécessite la saisie de données en plusieurs étapes - un nom, puis une adresse où chaque maison contient une maison, une rue, un appartement, etc. Afin de ne pas forcer l'utilisateur à entrer dans plusieurs petites cellules, nom et adresse.

Et désengagement

Parfois, au contraire, vous devez également déconnecterbeaucoup d'informations. Par exemple, dans le menu déroulant, vous avez une liste de plus de 80 villes où la livraison a lieu. Regroupez-les par région afin que l'utilisateur n'ait pas à faire défiler cette énorme liste. Quand il pointe vers le centre régional ou la région, une autre liste de villes va abandonner.

Listes de contrôle

Au fait, à propos des listes. Les deux sont fixés dans l'ordre alphabétique ou autre et avec substitution. Le choix d'entre eux dépend de ce qui sera listé.

Fixe est pratique dans le cas oùl'utilisateur sait exactement ce qu'il cherche. Par exemple, une ville, un numéro ou une date. La deuxième option convient aux noms longs complexes ou aux cas où il existe plusieurs variantes du même nom, et chaque liste déroulante rapproche l'utilisateur du but. Une variante avec auto-substitution est plus souvent utilisée lorsqu'un visiteur a besoin d'aide. Par exemple, un site de tricot propose d'acheter des aiguilles à tricoter. L'utilisateur entre la requête de recherche "aiguilles à tricoter en métal", et dans l'info-bulle voit "Rayons 5 mm", "Rayons 4,5 mm", etc.

Remplissage automatique

Ce paragraphe est particulièrement pertinent pour les sites où quelque choseSi une personne fait un achat à partir d'un téléphone, elle n'a probablement pas le temps d'accéder à l'ordinateur, ce qui signifie que le processus d'achat doit être aussi rapide et pratique que possible.

Pour cela, les formulaires peuvent contenir déjà remplidonnées, vous pouvez recourir aux réponses les plus populaires. Par exemple, insérez la date d'aujourd'hui, la méthode de paiement en espèces, la ville, si vous travaillez dans une région. Ils peuvent être modifiés, mais si vous atteignez la cible, l'heure de l'utilisateur sera enregistrée.

Tout est lu, tout est visible

Lorsque vous créez une version mobile d'un site Web, souvenez-vousque tous les téléphones sont différents, et la vue aussi. Peut-être que votre site sera vu à partir d'un petit écran, les polices doivent être simples et lisibles, les boutons suffisamment grands pour pouvoir être cliqués et ne pas accéder à une autre page, et les images doivent être ouvertes séparément, surtout sur Internet. au magasin.

Quelques statistiques

Parlant de l'adaptation du site aux appareils mobiles, vous ne pouvez pas recourir à des statistiques pour comprendre à quel point ce processus est important pour promouvoir le réseau.

Les chiffres sont les suivants. Aujourd'hui, les gadgets sont utilisés par 87% de la population, apparemment, sauf pour les plus jeunes enfants et certaines personnes âgées. Les économistes prédisent la croissance du commerce mobile 100 fois pour les 5 prochaines années. Dans le même temps, seulement 21% des sites sont adaptés pour fonctionner avec des appareils mobiles. Ainsi, le trafic Internet et le marché du commerce électronique ne sont occupés que par une petite 5ème partie.

Pensez à ces chiffres. Est-ce logique d'adapter votre ressource? Bien sûr, oui. De plus, tant qu'il y a tellement d'espace libre sur ce marché, vous pouvez y ajouter votre propre segment.

Où est la version mobile nécessaire?

Utilisez la version mobile est approprié pourtoute plate-forme qui cherche à obtenir une note élevée. Après tout, cela a un impact direct sur l'utilisateur, en créant pour lui des conditions confortables pour rester sur votre site.

Sans une version mobile, il ne peut pas exister:

• les portails d'information, puisque c'est la plupart d'entre eux qui regardent le téléphone sur le chemin du travail ou de l'étude;
• les réseaux sociaux - pour la même raison, plus il y a un facteur de communication en ligne, ce qui signifie qu'une discussion pratique et compréhensible doit être créée pour cela;
• des sites de référence, des sites de navigation, etc., où les gens se tournent lorsqu'ils sont à la recherche de quelque chose;
• magasins en ligne - une occasion d'attirer des acheteurs qui ne passent pas de temps sur les courses, mais achètent tout via Internet mobile.

Au lieu de conclure

Aujourd'hui, les technologies mobiles sont dans lecroissance active et le développement, par conséquent, en quête de leadership sur le marché, toute entreprise devrait s'assurer que sa ressource Internet répond aux exigences. En raison de la demande croissante des utilisateurs, les sites doivent être constamment mis à jour et adaptés à différents appareils. Il est clair que si une personne est mal à l'aise d'être sur une ressource particulière, il ne peut obtenir d'informations sur le produit ou le prix, passer une commande, en apprendre davantage sur la livraison, il trouvera le site où tout cela devient possible. Par conséquent, afin de gagner la compétition, il est important d'avoir une ressource flexible, pratique, fonctionnelle et intéressante.

Faire cette version mobile du siteAndroid ou Ios. Pour ce faire, sélectionnez l'une des façons ci-dessus pour redessiner - modèle d'adaptation, la création d'un nouveau site sur un sous-domaine et la transition vers elle en redirigeant l'utilisation de modèles gratuits ou créer une application mobile à travers laquelle un utilisateur peut facilement entrer et rester sur la page.

Une telle approche aidera non seulement à fidéliser les clients existants, mais permettra également d'attirer de nouveaux visiteurs.