Aujourd'hui, la plupart des gens se connectent via des gadgets mobiles - tablettes, téléphones, à cet égard, l'optimisation des sites Web atteint également un nouveau niveau. Si un utilisateur entre et voit que le site n'est pas optimisé pour les appareils mobiles: l'image ne peut pas être visualisée, les boutons ont été déplacés, les polices sont petites et illisibles, le design est biaisé - 99 sur 100 % qu'il quittera et commencez à chercher un autre plus pratique. Et le robot de recherche cochera la case indiquant que la ressource n'est pas pertinente, c'est-à-dire qu'elle ne correspond pas à la requête de recherche. Par conséquent, le design de la page doit être adapté aux différents appareils mobiles. Qu'est-ce qu'une version mobile du site, comment la créer et quelle est la meilleure façon de l'appliquer ? Lisez cet article pour en savoir plus.
Il existe donc quatre façons principales de rendre votre site adapté aux mobiles.
Méthode 1 - Conception réactive
Les modèles réactifs modifient l'image du site en fonction de la taille de l'écran. En règle générale, ils sont définis sur la norme 1600, 1500, 1280, 1100, 1024 et 980 pixels. Pour la mise en œuvre, des requêtes média CSS3 sont utilisées. La conception du site lui-même ne change pas.
Les avantages de cette méthode incluent:
- développement pratique,étant donné que la structure elle-même s'adapte aux paramètres de l'écran et que toute mise à jour ne nécessite pas de développement de conception à partir de zéro, il suffit de modifier le CSS et le HTML;
- une URL – l'utilisateur n'a pas besoin de retenir plusieurs noms, il n'y a pas besoin de redirection (redirection d'une adresse à une autre), ce qui peut compliquer le travail d'un webmaster, et c'est plus facile pour une recherche moteur pour trier et classer une ressource avec une seule adresse.
Bien sûr, les modèles adaptatifs ont leurs inconvénients, qui, soit dit en passant, sont plus que des avantages. Néanmoins, de nombreux développeurs adhèrent à ce concept, par exemple Google Corporation, dont la version mobile du site a un design adaptatif. Donc, les inconvénients:
- Le design réactif ne prend pas en charge les mêmes tâches sur mobile que sur PC. S'il s'agit, par exemple, d'une version mobile du site Web d'une banque, où les informations sur le taux de change ou les guichets automatiques les plus proches sont plus susceptibles d'être importantes pour l'utilisateur, cette conception est tout à fait suffisante. Mais s'il s'agit d'une ressource structurée complexe avec de nombreuses sections et sous-sections, les visiteurs n'apprécieront guère la mise en page adaptative.
- Le chargement lent transforme un site favori en un site haineux. Cela est particulièrement vrai pour les ressources où les animations, vidéos, pop-ups et autres éléments actifs sont en abondance. En raison du poids élevé, la page "ralentira" simplement, l'utilisateur se fâchera et partira, et les positions de recherche du site tomberont.
- L'impossibilité de désactiver la version mobile est un autre inconvénient important. Si un élément est caché par une telle mise en page, vousvous ne pouvez rien faire pour l'ouvrir, contrairement aux sites où vous pouvez le désactiver et passer à un domaine normal.
Cependant, une telle version mobile du site rapidement, sans compétences ni coûts particuliers, vous permet d'adapter la ressource à tous les gadgets. Mais, compte tenu des lacunes énumérées, il conviendra à de petites ressources simples avec un minimum d'informations et de multimédia, sans navigation ni animation complexes. Pour un chantier complexe, 2 autres méthodes conviennent.
Deuxième méthode - une version séparée du site
Cette méthode est très courante et réussit souvent à rendre le site plus lisible sur un appareil mobile. 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 est simplement différente. Les avantages de cette méthode sont évidents:
- interface conviviale;
- facile à changer et à éditer car la version existe séparément de la ressource principale;
- en raison du faible poids, une version distincte du site fonctionne beaucoup plus rapidement qu'un modèle adaptatif;
- le plus souvent il est possible d'accéder à la version principale de la page depuis le mobile.
Mais il y avait aussi quelques inconvénients ici:
- Plusieurs adresses - version bureau et mobile du site. Comment faire en sorte que l'utilisateur se souvienne de deux options ? Les webmasters prescrivent souvent une redirection (redirection) de la version desktop vers la version mobile, mais en même temps, si cette page est dans la version mobileversion n'existe pas, l'utilisateur recevra une erreur. Ici, des difficultés surviennent avec les moteurs de recherche, qui ont du mal à classer 2 ressources identiques, et cela affecte directement la promotion.
- La version mobile du site depuis un ordinateur, si l'utilisateur le visite par erreur, aura l'air ridicule, ce qui peut également affecter le trafic.
- Cette version est souvent fortement réduite, de bureau, de sorte que l'utilisateur obtiendra des fonctionnalités très limitées. Mais en même temps, s'il manque quelque chose, le visiteur peut accéder à la version complète de la page.
En général, un site mobile distinct se justifie et constitue le moyen le plus courant d'adapter une ressource aux appareils mobiles. Il est populaire auprès des grands magasins en ligne comme Amazon.
Troisième voie - conception RESS
Le moteur de recherche Google soutient activement cette direction du design 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. Ça s'appelle RESS. Il s'agit de cibler une ressource dans une application mobile qui peut être téléchargée séparément pour chaque appareil. Pour Android - avec GooglePlay, et pour Apple - avec iTunes.
Ces applications sont rapides, gratuites, pratiques, ont la capacité d'accueillir différents types d'informations, tandis que la mémoire du téléphone et le trafic Internet ne sont pas consommés comme lors de la visite d'un site via un navigateur. Ils sont faciles d'accès, car le lien sera toujours sur l'écran à portée de main, et il n'est pas nécessaire de saisir un nom complexe dans la barre d'adresse du navigateur.
Il y a, bien sûr, ici etses lacunes, telles que la complexité du développement, le coût élevé de la main-d'œuvre d'un grand nombre de programmeurs, la nécessité de faire plusieurs options de mise en page. Parfois, l'appareil mobile n'est pas reconnu par l'application. Un support technique régulier, la correction des lacunes est nécessaire. Néanmoins, cette option est considérée comme la meilleure des trois proposées en raison de son fonctionnement productif et ininterrompu.
Le moyen le moins cher de créer un site Web mobile
Toutes les méthodes ci-dessus impliquent, bien que pas toujours longues et difficiles, mais toujours le travail rémunéré d'un webmaster. Si vous ne voyez pas un besoin urgent d'un tel développement, une version mobile simple et gratuite du site vous conviendra. Quelle est la façon la plus simple de le faire ?
Téléchargez des modèles spéciaux (plugins) pour un design réactif. Par exemple, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile et autres. Ils aideront à afficher le site plus correctement sur le téléphone, tandis que vous recevrez quelques conseils sur ce qui doit être corrigé pour mieux adapter la page à la version mobile.
Bien sûr, cette méthode ne convient guère aux ressources sérieuses. Cette fonctionnalité gratuite est plutôt destinée aux sites, blogs, flux d'actualités petits et simples. N'oubliez pas que le moteur de recherche Google, ainsi que Yandex, impose aujourd'hui de sérieuses exigences aux versions mobiles, il y a donc une énorme chance de réduire vos positions en utilisant cette méthode.
Avec cette méthode, les publicités et les pop-ups seront très probablement coupésbannières, mais la page se chargera rapidement et sans "décalages".
Principes de création de versions mobiles
Peu importe si la version mobile du site a été créée gratuitement ou avec l'aide d'une équipe de webmasters, elle a été réalisée sur le système RESS ou à l'aide d'un modèle adaptatif. Plus important encore, pour son fonctionnement efficace, il est nécessaire de respecter plusieurs principes extrêmement importants. Alors, quelle devrait être la version mobile du site ? Comment le rendre productif, efficace et productif ?
Supprimer tout ce qui est inutile
Le minimalisme est ce que le développeur de la version mobile du site doit rechercher. Imaginez à quel point il est difficile de percevoir des informations remplies de couleurs, de boutons, de bannières et que vous devez parcourir sans cesse à la recherche du bon matériel. La conception mobile doit être simple et propre. Choisissez 2-3 couleurs pour diviser l'espace (par exemple, de marque). Mieux si l'un d'eux est blanc. Divisez l'espace d'un petit écran en zones compréhensibles et lisibles. Les clés virtuelles doivent être visibles pour que l'utilisateur sache clairement où appuyer et voit - voici le produit, voici le formulaire pour remplir les données, voici les informations sur la livraison et le paiement.
Toutes les options supplémentaires qui seraient utiles dans la version de bureau et faciliteraient la vie de l'utilisateur n'apporteront ici que des difficultés. Ne laissez que les éléments les plus importants. L'animation, les bannières publicitaires, le multimédia, très probablement, ne feront que ralentir le travail du site ou de l'application et détourner l'attention demain.
Alignement
Le problème de l'alignement n'est pas moins aigu, car s'il est mal fait, l'utilisateur n'obtiendra que les terminaisons des mots importants. L'alignement à gauche et vertical est généralement accepté. Imaginez-vous en train de faire défiler le fil d'actualités sur votre téléphone. Vous le faites de haut en bas, pas à gauche ou à droite.
Unification
Lorsqu'il n'y a aucune possibilité d'une longue chaîne de transitions, essayez de combiner plusieurs étapes en une seule. Par exemple, le site nécessite la saisie de données en plusieurs étapes - un nom, puis une adresse, où dans chaque cellule individuelle se trouve une maison, une rue, un appartement, etc. séparés. Afin de ne pas forcer l'utilisateur à essayer de toucher de nombreuses petites cellules, demandez-lui de ne remplir que 2 - nom et adresse.
Et la déconnexion
Parfois, au contraire, il faut séparer trop d'informations. Par exemple, dans le menu déroulant vous avez une liste de plus de 80 villes où la livraison est effectuée. Regroupez-les par région afin que l'utilisateur n'ait pas à faire défiler cette énorme liste. Lorsqu'il survole le centre régional ou la région, une autre liste de villes disparaîtra.
Listes
Au fait, à propos des listes. Il y en a deux - fixés par ordre alphabétique ou autre et avec substitution. Leur choix dépend de ce qui sera listé.
Fixed est utile si l'utilisateur sait exactement ce qu'il recherche. Par exemple, ville, numéro ou date. La deuxième option convient aux noms complexes longs ou aux cas où il existe de nombreuses variantes d'un seul et mêmele même nom, et chaque liste déroulante rapproche l'utilisateur de l'objectif. L'option de substitution automatique 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, il voit "Aiguilles à tricoter 5 mm", "Aiguilles à tricoter 4,5 mm", etc.
Remplissage automatique
Cet article est particulièrement pertinent pour les sites qui vendent quelque chose en ligne, et vous devez remplir des formulaires standard pour le paiement, la livraison, etc. Si une personne effectue un achat à partir d'un téléphone, il est fort probable qu'elle n'ait pas le temps pour accéder à un ordinateur, ce qui signifie que le processus d'achat doit être aussi rapide et pratique que possible.
Pour cela, les formulaires peuvent contenir des données déjà remplies, vous pouvez recourir aux réponses les plus populaires. Par exemple, insérez la date d'aujourd'hui, le mode de paiement en espèces, la ville si vous travaillez dans la même région. Ils peuvent être modifiés, mais si vous atteignez la cible, le temps de l'utilisateur sera enregistré.
Tout est lu, tout est visualisé
Lors de la conception de la version mobile du site, n'oubliez pas que les téléphones de chacun sont différents, tout comme leur vue. Peut-être que votre site sera visualisé à partir d'un petit écran, donc les polices doivent être simples et lisibles, les boutons doivent être suffisamment grands pour pouvoir être cliqués sans être redirigés vers une autre page, et les images doivent s'ouvrir séparément, en grand, surtout lorsque il s'agit de l'Internet.store.
Quelques statistiques
En parlant d'adaptation du site aux appareils mobiles, on ne peut s'empêcher de recourir aux statistiques pour comprendre l'importance de ce processus pourpromotion en ligne.
Les nombres sont les suivants. Aujourd'hui, les gadgets sont utilisés par 87% de la population, apparemment, à l'exception des plus jeunes enfants et de certaines personnes âgées. Les économistes prédisent que le commerce mobile sera multiplié par 100 au cours des 5 prochaines années. Dans le même temps, seuls 21 % des sites sont adaptés pour fonctionner avec des appareils mobiles. Cela signifie que seule une petite cinquième partie du trafic Internet et du marché du commerce électronique est occupée.
Pensez à ces chiffres. Est-il judicieux d'adapter votre ressource? Bien sûr que oui. De plus, bien qu'il y ait tellement d'espace sur ce marché, vous pouvez vous y tailler votre propre segment.
Où vous avez besoin d'une version mobile
L'utilisation de la version mobile est logique pour toute plateforme qui vise à obtenir un classement élevé. Après tout, cela a un impact direct sur l'utilisateur, créant des conditions confortables pour qu'il reste sur votre site.
Ne peut exister sans la version mobile:
- portails d'actualités, car la plupart d'entre eux sont consultés depuis le téléphone sur le chemin du travail ou de l'école;
- réseaux sociaux - pour la même raison, il existe en plus un facteur de communication en ligne, ce qui signifie qu'un chat pratique et compréhensible doit être créé pour cela;
- sites de référence, de navigation, etc., où les gens vont quand ils recherchent quelque chose;
- magasins en ligne - une opportunité d'attirer des clients qui ne perdent pas de temps à faire leurs achats, mais achètent tout via l'Internet mobile.
Au lieu d'une conclusion
Aujourd'hui, les technologies mobiles sont dans lecroissance et développement actifs, par conséquent, en quête de leadership sur le marché, toute entreprise doit s'assurer que sa ressource Internet répond aux exigences. En raison des demandes croissantes des utilisateurs, les sites doivent être constamment mis à jour et adaptés aux différents appareils. Il est clair que si une personne est gênée d'être sur une ressource particulière, elle ne peut pas s'informer sur un produit ou un prix là-bas, passer une commande, s'informer sur la livraison, alors elle trouvera le site où tout cela deviendra possible. Par conséquent, pour gagner le concours, il est important d'avoir une ressource flexible, pratique, fonctionnelle et intéressante.
La version mobile du site Web Android ou Ios vous aidera à le faire. Pour ce faire, vous devez choisir l'une des méthodes de refonte ci-dessus - un modèle adaptatif, créer un nouveau site sur un sous-domaine et le rediriger, utiliser des modèles gratuits ou créer une application mobile qui facilitera l'entrée de l'utilisateur et être sur la page.
Cette approche contribuera non seulement à fidéliser les clients existants, mais également à attirer de nouveaux visiteurs.
