sushiandbox.ru Mastering PC - Internet. Skype. Réseaux sociaux. Cours sur Windows.
Temps de lecture: 18 minutes
Nous vous enverrons le matériel :
Si votre site n'a pas été adapté aux appareils mobiles, il n'y a rien à craindre, cependant, Yandex classe les sites qui ont une telle adaptation plus haut dans la recherche.
De cet article, vous apprendrez:
- Quelle est l'adaptation du site pour les appareils mobiles
- Comment le vérifier
- Adaptation du site pour Google
- Auto-adaptation du site
- Le meilleur plugin gratuit pour Wordpress
- 6 meilleurs services d'adaptation de site Web pour les appareils mobiles en ligne
Pourquoi l'adaptation mobile est nécessaire
Ils sont conditionnellement divisés en externe et interne. Autrement dit, les PF externes sont par exemple un clic sur un lien vers un site depuis les résultats Résultats de recherche, tandis que le nombre de pages vues, le temps total passé sur le site, sont internes.
Notez que Google utilise un système similaire. Mais ce moteur de recherche est allé encore plus loin, déclarant que les ressources qui ont réussi l'adaptation du site pour les appareils mobiles apparaîtront plus haut dans les résultats de recherche.
Ensuite, nous parlerons des PF internes. Pensez par vous-même, s'il est pratique pour un visiteur de travailler avec le site, de trouver et de commander des produits dessus, la probabilité qu'il passe à la catégorie des clients est plus élevée.
Le même principe fonctionne pour moteurs de recherche: plus les invités quittent la ressource dans les premières secondes d'être dessus, plus l'indicateur de sa conformité aux exigences des personnes est faible. Le rapport entre les sessions utilisateur de moins de 10 secondes et le nombre total de visites sur le site est appelé taux de rebond.
A titre d'exemple, prenons cet indicateur de l'un des sites russes :
Regardez, si le site n'a pas été adapté aux appareils mobiles, c'est-à-dire que le site ne s'affiche pas correctement sur eux, le taux de rebond des smartphones et des tablettes est 2 à 2,5 fois plus élevé que celui d'un PC.
Non seulement ces chiffres affectent négativement le niveau de PF, mais ils indiquent la perte de clients potentiels qui pourraient réellement payer pour des services ou des biens.
D'accord, une augmentation de la fréquence d'application Internet mobile vraiment impressionnant. Découvrez facilement le pourcentage d'invités sur n'importe quelle ressource utilisant des appareils mobiles, permettra Google Analytics. Pour afficher cet indicateur, vous devez suivre les étapes suivantes :
Ce n'est un secret pour personne que les moteurs de recherche se soucient toujours de la commodité des utilisateurs de tablettes et d'autres appareils, ce qui signifie que vous risquez de vous retrouver sans trafic si vous refusez d'adapter le site aux appareils mobiles.
N'oubliez pas qu'à cause de cette erreur, beaucoup d'utilisateurs vous quitteront pour toujours, comme en témoigne une étude d'Equation Research. Ses experts ont découvert que 46% des personnes ne visitent plus le site où elles n'étaient pas satisfaites du niveau de travail avec les gadgets mobiles.
Comme vous le comprenez, de tristes conséquences vous attendent: le niveau de productivité de la ressource elle-même diminuera continuellement, car l'audience déjà accumulée, accédant à partir d'un smartphone ou d'une tablette, ne pourra pas communiquer, passer des commandes, recevoir des newsletters , etc.
Si vous n'êtes pas satisfait de ce développement d'événements, nous vous conseillons d'adapter le site aux appareils mobiles.
Quel est le meilleur - design réactif ou version mobile
Commençons par comprendre la différence entre ces deux concepts.
La conception réactive est utilisée uniquement pour donner au site une apparence qui sera correctement affichée à partir de l'appareil requis par l'utilisateur.
Alors que la version mobile est fondamentalement nouvelle version, conçu spécifiquement pour répondre aux besoins des utilisateurs du site l'utilisant avec des appareils portables. Parlons maintenant plus des deux types.
Conception adaptative
Cette option permet, en investissant une petite somme d'argent, de rendre le site convivial pour l'invité qui l'utilise depuis le gadget.
En fait, lors de l'adaptation d'un site pour les appareils mobiles, il existe une simple combinaison de tailles de page, d'éléments de site avec des tailles appareil spécifique. En conséquence, ces sites sont faciles à utiliser, bien que vous deviez être conscient de leurs lacunes.
Tout d'abord, c'est la taille de la page chargée. Bien qu'il soit affiché sur un appareil mobile, son poids restera le même. De ce fait, la page mettra beaucoup de temps à se charger, car la vitesse de l'Internet mobile est inférieure à celle de l'Internet filaire, et l'utilisateur se fatiguera d'attendre et fermera l'onglet.
version mobile
La version mobile est généralement située sur un sous-domaine du principal : m.site.ru, mobile.site.ru. Cette fonctionnalité est difficile à attribuer au positif, si l'on parle du point de vue du référencement, car dans ce cas, de nombreuses redirections conditionnelles de la version principale vers la version mobile sont utilisées. Après tout, site.ru/page et m.site.ru/page du point de vue des moteurs de recherche restent des pages différentes.
Il convient de dire que la version mobile pèse moins, se charge plus rapidement par rapport à la mise en page adaptative, car les fonctions inutiles sont supprimées ici et la conception individuelle facilite l'interaction avec le site.
Bien sûr, cette version coûtera plus cher que la précédente. Pour vous faciliter le choix des options à privilégier, nous mettons en avant leurs caractéristiques :
- Cela n'a aucun sens d'adapter un petit site pour les appareils mobiles, si, par exemple, nous parlons d'un site pour un salon de beauté, une adaptation normale suffit.
- Une version mobile aura besoin d'un site puissant avec beaucoup de pages chargeables. Cette option sera pertinente pour les médias en ligne ayant une audience de plusieurs milliers de personnes par jour.
En d'autres termes, le choix doit tenir compte des possibilités et des besoins. Nous soulignons également que ces deux options, quel que soit le prix, s'avèrent être beaucoup plus rentables pour la conversion que leur absence totale.
Que va vous apporter l'adaptation du site pour les appareils mobiles ?
, du fait de l'absence de photos "lourdes", de flash, éléments supplémentaires conception. 
Soumettez votre candidature
Comment vérifier la réactivité du site Web pour les appareils mobiles
Vérifier l'adaptation du site pour les appareils mobiles, qui consiste dans le fait que vous le verrez sur différents appareils, peut se faire comme suit :
- Quirktools.
Ici, vous pouvez voir à quoi ressemblera le site sur les écrans de différents gadgets. Pour commencer à utiliser le portail, entrez simplement l'URL du portail dans la barre d'adresse, sélectionnez l'appareil requis dans le menu horizontal.
- ipadpeek.
Vous permet de vérifier l'apparence du site sur l'iPad, l'iPhone.
- F12.
L'option la plus simple consiste toujours à utiliser l'astuce standard : appuyez sur F12, puis cliquez sur l'icône du téléphone.
Adaptation du site Web pour les appareils mobiles pour Google
Si vous souhaitez adapter votre site pour les appareils mobiles sur Google, vous aurez besoin d'un outil gratuit développeurs.Google:
Ici, vous devez entrer l'adresse de la ressource et cliquer sur le bouton "Analyser". Dans notre exemple, le score d'utilisabilité mobile est de 49 % sur 100 %.
Il fournit également des conseils sur ce qui doit être changé pour adapter le site à un appareil mobile, des liens utiles en la matière. Grâce à ces recommandations, vous pouvez facilement marquer 90%, ce qui est le minimum pour Google.
Ce que vous pouvez faire pour rendre votre site adapté aux mobiles
Définir les attributs de champ de formulaire corrects
Si votre site utilise des champs de saisie pour le nom d'utilisateur/l'adresse, désélectionnez la correction automatique, activez la mise en majuscule automatique :
Votre nom:
Grâce à cette technique, lors de l'adaptation d'un site pour les appareils mobiles, vous empêcherez le système de saisie automatisé T9 de remplacer les noms, par exemple, " Erwan" sur " Erevan».
En paramétrant l'utilisation automatique des premières majuscules dans les types de mots, vous éviterez aux invités de la ressource d'avoir à activer constamment la capitalisation des lettres, autrement dit, une majuscule sera placée au début de chaque mot (par exemple, " Ken brûle" se transformera en Ken Burns"):
Utilisez le champ e-mail si votre site demande à l'utilisateur e-mail afin qu'il n'entre pas le symbole @ depuis le clavier d'un appareil mobile :
Votre e-mail :
Définir une largeur appropriée pour les appareils mobiles
Pour ce faire, ouvrez le site dans le navigateur de votre ordinateur, réduisez la largeur de la fenêtre du programme jusqu'à ce que le texte ne soit plus lisible. Cela vous donnera la largeur minimale autorisée. Définissez cette valeur actuelle sur la propriété @viewport en définissant la balise meta dans l'en-tête de la page :
Si vous entrez à nouveau sur le site à partir d'un appareil mobile, la largeur que vous avez spécifiée sera sélectionnée automatiquement, c'est-à-dire que l'invité de la ressource ne sera pas obligé d'utiliser le zoom.
Dans l'illustration ci-dessous, un espace supplémentaire est laissé sur le bord droit :
Et ici, la valeur de la largeur est choisie correctement :
Votre tâche devient beaucoup plus facile si le site est construit sur la mise en page fluide et est compatible avec toutes les tailles d'écran. Nous vous conseillons d'expérimenter avec la largeur tout en adaptant le site aux appareils mobiles, afin que votre ressource soit belle et reste lisible. Valeur sélectionnée et définie dans la balise meta.
Définir la largeur de l'image sur 100 %
Gardez à l'esprit que certaines des images seront trop larges après avoir ajusté votre site à la largeur sélectionnée. Auparavant, je n'avais pas à faire face à un tel problème, car les moniteurs de bureau ont une résolution assez large, de nombreuses images tiennent en largeur:
Vous pouvez éviter ce problème en définissant une largeur maximale de 100 % pour vos images. Grâce à cela, si les images sont trop grandes pour l'écran du gadget, elles seront automatiquement redimensionnées. N'oubliez pas d'inclure le code ci-dessous dans le CSS de votre site :
img ( largeur max : 100% )
Si vous définissez votre image d'arrière-plan sur une image autre qu'une balise img, il vous suffit de définir la propriété CSS background-size pour contenir . Ainsi, la taille de l'arrière-plan changera si la résolution de l'écran n'est pas suffisante pour un rendu à 100 % :
.header ( background: url(header.png) 50% no-repeat; background-size: contains )
Ne craignez pas que l'image perde de sa clarté - les appareils mobiles modernes ne le permettront pas. Le fait est que lorsqu'un visiteur du site utilise le zoom, le navigateur augmente la clarté de l'image. Cependant, vous devez vous assurer que votre portail n'a pas la propriété user-scalable=no dans la balise meta, car elle n'autorise pas le zoom :
Définissez la largeur des champs de saisie sur 100 %
Une fois que vous avez défini la largeur de l'image avec la propriété max-width, faites de même pour les champs de saisie. Pour cela, il suffit d'ajouter au fichier CSS - le fichier de votre site :
entrée, zone de texte ( max-width:100% )
Désormais, les champs de saisie ne disparaîtront pas de l'écran lors de l'utilisation du site à partir d'un appareil mobile.
Soyez prudent lorsque vous utilisez la désactivation des boutons de confirmation de soumission de formulaire
Si la soumission cesse d'être active après le premier clic sur le bouton, il n'y aura pas de clics multiples sur le bouton de soumission du formulaire.
Mais rappelez-vous que par rapport aux ordinateurs de bureau, les appareils mobiles perdent souvent leur connexion à Internet.
Ainsi, lorsque vous rendez un bouton inactif, vous empêchez l'utilisateur de cliquer à nouveau dessus, et le problème n'est peut-être pas simplement une perte de réseau. Ainsi, le navigateur d'un tel appareil se fermera en cas d'appel entrant et le problème d'un bouton bloqué apparaîtra, car il ne vous permettra pas de soumettre le formulaire après l'avoir rempli.
Si vous décidez de désactiver le bouton d'envoi, faites-le pendant quelques secondes lors de l'adaptation du site aux appareils mobiles.
Pour les longues lignes, utilisez le retour à la ligne
Parfois, vous devez utiliser de longues lignes : cela inclut des exemples de code, des liens, des numéros de compte bancaire. Si le portail n'est pas assez large pour toute la ligne, il peut se retrouver en dehors de l'écran du gadget :
Gérez ce retour à la ligne, avec lequel la ligne s'enroulera lorsqu'elle atteindra le bord de l'écran. Ainsi, l'invité du site pourra voir toutes les informations à la fois sans recourir au défilement :
Ici, vous aurez besoin d'un mot de passe :
435143a1b5fc8bb70a3aa9b10f6673a8
Attention aux espaces
Nous sommes tous habitués au fait que tous les cinq caractères sont séparés par des espaces s'ils forment une longue chaîne. Après tout, il sera plus facile pour une personne de s'en souvenir pour une entrée ultérieure dans une autre application.
Mais nous notons qu'il est peu probable qu'un utilisateur intelligent accepte de saisir lui-même des caractères - il connaît le presse-papiers. Certes, les espaces placés par vous, il devra supprimer manuellement. Demandez-vous s'il est pratique de les nettoyer sur un mobile ou une tablette ?
Pour faciliter la vie des utilisateurs, lors de l'adaptation du site aux appareils mobiles, remplacez les espaces par des tirets :
Toncode:
Comme vous pouvez le constater, des espaces subsistent entre les caractères, mais ils n'ont pas besoin d'être traités lors de la copie. Et ça fait gagner du temps !
Avantages des requêtes média
Vous pouvez créer des styles personnalisés pour un site lorsqu'il est affiché sur des appareils mobiles (ou dans une petite fenêtre de navigateur), tandis que sur un ordinateur de bureau, l'aspect familier d'une page Web reste. Cela nécessite des styles cibles dans les media queries, voici un exemple :
Éviter le positionnement fixe
Si l'en-tête ou la barre latérale est positionnée de manière fixe et que la propriété CSS position est définie sur fixe, nous vous conseillons d'être prudent.
Dans ce cas, lors de la création du balisage, la taille de votre titre grandira proportionnellement à la page, c'est-à-dire qu'il pourra même occuper tout l'écran :
Le moyen le plus simple d'adapter le site aux appareils mobiles consiste à refuser les positions fixes lorsqu'elles sont affichées sur des gadgets mobiles.
Un exemple montre comment cela fonctionne en pratique :
Utiliser des polices standards
Grâce aux polices personnalisées, le site a l'air cher et professionnel. Mais en même temps, les invités doivent télécharger des fichiers avec des polices - cette opération est effectuée avant que l'utilisateur ne puisse voir le site.
En règle générale, ces fichiers se caractérisent par un volume important, c'est-à-dire que sur un appareil mobile, leur téléchargement prendra beaucoup de temps. Et que verra l'invité du portail ? Espace libre:
En adaptant le site pour les appareils mobiles avec Google Font Loader, pendant le chargement de la version personnalisée, le texte avec une police standard sera affiché. Ensuite, vous régénérez la page et l'invité voit la police initialement sélectionnée.
Mais vous devrez écrire deux versions des règles CSS : une pour la police par défaut et une pour celle téléchargée.
Croyez-moi, une telle solution sera optimale: une personne lira tout ce dont elle a besoin pendant le téléchargement des polices, puis pourra voir le dessin. Utilisez le code suivant :
Nous soulignons : le sélecteur de classe .wf-opensans-n4-active est ajouté dynamiquement au code du site par le chargeur de polices, mais uniquement lorsque la police est chargée.
Offrir aux utilisateurs un contenu lisible
Généralement, les utilisateurs d'appareils mobiles utilisent Internet dans un but précis. Par exemple, si vous souhaitez comparer le coût des marchandises dans différents magasins, recherchez les contacts du salon, les instructions d'utilisation du médicament.
Par conséquent, ils apparaîtront sur votre site lorsqu'ils seront attirés par le titre. Ensuite, il est important pour eux de découvrir des contenus préparés pour être lus sur un petit écran.
Pour décrire cette règle en anglais, il existe un mot assez volumineux "snackable" (de l'anglais "snack" - snack). Ainsi, le contenu de ces utilisateurs doit être précisément snackable, c'est-à-dire pratique pour une lecture rapide, en parcourant en déplacement.
Décrivons les principales fonctionnalités que vous devez prendre en compte lors de l'adaptation d'un site pour les appareils mobiles aux lecteurs d'écran :
- Commencez par un titre court, concis et accrocheur. Nous vous conseillons de le rédiger en 10 mots maximum, et d'utiliser une police de grande taille.
- Diviser le texte en blocs, chacun d'eux doit commencer par un sous-titre court et informatif qui se démarque du contexte général.
- Encart numéroté / listes à puces, à ton utilisateurs mobiles Il était facile de trouver rapidement ce dont vous avez besoin.
- Appliquer des inserts visuels structurant en outre l'information et simplifiant la perception.
Adaptez les e-mails à la lecture sur petit écran
Les outils de mailing suivants vous aideront à adapter le courrier électronique à la lecture sur les écrans des appareils mobiles :
- MailChimp.
- Weber.
- Contact constant.
Remplacer les liens par des boutons "tapeables"
Dès que les utilisateurs passent d'appareils mobiles à des sites qui ne leur sont pas adaptés, ils se diagnostiquent le « syndrome du gros doigt ». Il est introuvable dans la terminologie médicale ; c'est l'argot des spécialistes dans ce domaine, décrivant les erreurs en essayant de toucher un élément spécifique avec un doigt.
Quelle taille sera optimale pour un bouton, un élément de navigation, afin qu'une personne n'ait pas de problèmes avec eux ? Voici quelques conseils pour adapter votre site aux appareils mobiles :
- Apple estime que la taille optimale des boutons, des éléments de navigation commence à 44 par 44 pixels.
- Nokia recommande une taille minimale de 48 x 48 pixels ou 0,7 x 0,7 cm lors de la création de ces éléments.
- Microsoft recommande des boutons de 34 x 34 pixels.
N'oubliez pas qu'il sera difficile pour les mobinautes d'utiliser le site si votre texte est saturé de liens proches les uns des autres.
Dans l'exemple que nous montrons, le menu de la version complète du site est réalisé sous forme de liens. Ici, il sera extrêmement difficile d'accéder immédiatement à la section souhaitée sur une tablette de dix pouces.
Pour obtenir les soi-disant boutons adaptés aux mobiles, les éléments de navigation, vous pouvez choisir de deux manières : les commander avec un design individuel ou utiliser des outils de modèle. Si vous avez choisi WordPress, nous vous recommandons d'utiliser les plugins suivants :
- Boîtes et boutons de couleurs remarquables. Avec lui, vous pouvez créer des boutons pratiques de différentes tailles, couleurs et menu contextuel adapté aux utilisateurs mobiles.
- Menu réactif. Ce plugin vous permettra de créer un menu hamburger pratique.
Le meilleur plugin gratuit pour l'adaptation mobile du site pour Wordpress
jet pack
Tout d'abord, parlons de la méthode la plus simple pour adapter un site pour les appareils mobiles sur WordPress lui-même, tout en ayant le plus haut niveau efficacité. La boîte à outils JetPack effectuera cette tâche avec un minimum d'effort de votre part - appuyez simplement sur un bouton.
Et très probablement, il est déjà installé parmi vos plugins de base. Si c'est le cas, cliquez sur le lien "JetPack" dans le menu d'administration du site, rendez-vous sur la page des modules. Ici, il vous suffit d'activer "Mobile Theme".
MobilePress
C'est l'un des plugins les plus courants mais les plus simples. Livré avec deux thèmes et est utile lorsque création ultérieure ces développeurs mobiles.
wptouch
Cette option est considérée comme la suivante dans la liste des outils gratuits d'adaptation de sites Web pour les appareils mobiles en termes d'efficacité. Selon les statistiques, il a été téléchargé plus de 4,3 millions de fois.
Son avantage est qu'en quelques minutes seulement, vous pouvez créer un beau site mobile rapide sans même écrire une ligne de code. Dans la version payante, appelée WPtouch Pro, vous obtiendrez un panneau d'administration séparé, pris en charge dans le système de tickets.
Plugin mobile de l'architecte Wapple
Ce plugin est écrit dans le langage de balisage WAPL, spécialement créé pour la personnalisation, le rendu, la diffusion de contenu Web sur divers appareils et plates-formes.
Il utilise sa propre API pour chaque gadget, et cette option est bien meilleure que la méthode de reniflage, car elle ne touche pas à la structure d'adresse du site de bureau. Il s'avère que ce plugin est facile à utiliser et une solution assez simple.
Détecteur mobile
Cette option d'adaptation du site aux appareils mobiles est équipée d'une reconnaissance automatique des téléphones mobiles conventionnels, des smartphones, grâce à laquelle le site est chargé dans une version compatible avec appareil utilisateur, c'est-à-dire sa résolution d'écran, sa diagonale, etc.
Il existe au total sept options de thème mobile préinstallées. De plus, Mobile Detector modifie indépendamment la taille et la résolution des images en fonction des paramètres d'affichage. Il propose également ses propres widgets, collection de statistiques.
Avantages clés:
- Reconnaissance automatique des gadgets à l'aide d'une base de données de plus de 5 000 gadgets.
- La possibilité de distinguer les téléphones standard des appareils avancés.
- Préparation de statistiques sur les utilisateurs mobiles, qui incluent des indicateurs tels que le nombre de visites uniques, le trafic de recherche, etc.
WP Mobile Edition
En fait, il s'agit d'une copie de la version présentée précédemment - elle a les mêmes avantages, options, mais, entre autres, prend en charge le système de commentaires Disqus, carte mobile XML avec son propre générateur de sites.
Ce dernier peut être utile optimisation du moteur de recherche. Notez que ce plugin, conçu pour adapter le site aux appareils mobiles, génère une version mobile sur un sous-domaine de type m.facebook.com, qui réalise une mise en cache accélérée et la prise en charge des cookies mobiles.
Forfait Mobile WordPress
Cette option d'adaptation du site pour les appareils mobiles prend en charge le mappage de domaine, les agents de recherche qui vous permettent d'identifier les appareils mobiles populaires, ce qui vous permet d'afficher le contenu dans la résolution et la qualité dont ils ont besoin. Des schémas de couleurs personnalisables pour un seul thème sont également fournis.
Adaptation des tableaux de site pour les appareils mobiles
Ce n'est un secret pour personne que la chose la plus difficile lors de l'adaptation d'un site pour les appareils mobiles, à savoir pour différentes résolutions, est de travailler avec des tableaux. De plus, cela est plus pertinent pour les tables contenant une grande quantité d'informations.
Parlons de deux options de mise en page pour un tableau adaptatif.
Tout d'abord, regardons l'apparence de la table :
Disposition de table réactive Bootstrap
Pour être honnête, il est difficile d'appeler une telle table vraiment adaptative. Il a l'air organique sur un appareil mobile et la mise en page du site ne « coule pas ». Cette option convient si vous n'avez pas beaucoup de tables sur le site, donc connecter le plugin, écrire des styles supplémentaires sera une perte de temps. C'est ainsi que Bootstrap l'utilise.
Pour mettre cela en pratique, le tableau est enveloppé dans un div avec une largeur maximale de 100 %, débordement : auto.
De plus, lors de l'adaptation du site aux appareils mobiles, vous pouvez choisir la hauteur maximale, fixer l'en-tête du tableau s'il est long.
Mise en page d'un tableau vraiment responsive
Parlons maintenant de la situation dans laquelle votre site est vraiment plein de tableaux - ici, cela vaut la peine de recourir au plugin Footable.
Tout d'abord, il faut connecter le plugin (télécharger sur GitHub / se connecter depuis CDN), l'initialiser :
Mais il y a une subtilité dans l'adaptation du site aux appareils mobiles : le script considère la largeur du tableau, et non la largeur de la fenêtre d'affichage. Puisqu'il faut corriger cette erreur, il est important de « moderniser » un peu le script :
Pour cela, lors de l'initialisation, nous spécifions la classe table ou simplement la balise table, si nous voulons que toutes les tables du site soient adaptatives.
Que voulons-nous dire ? Sur les tablettes, les colonnes "RAM", "Diagonale", "PPI", "Batterie" seront masquées. Lorsqu'il est utilisé sur un écran de téléphone encore plus petit, "Prix" sera également masqué.
Les points d'arrêt peuvent être définis lors de l'initialisation :
Il s'avère que dans la plage 0-720, le mobile obéit à la règle, 720-1024 - tablette, et au-dessus de 1024 - ordinateur de bureau. Vous pouvez créer plus de règles si nécessaire.
Vous avez également la possibilité de développer une colonne spécifique par défaut. Dans ce cas, spécifiez l'attribut de données data-expanded="true":
Nous n'avons pas parlé de toutes les fonctionnalités du plugin, mais ce bloc suffira à créer des tableaux adaptatifs.
Adaptation de site Web pour les appareils mobiles en ligne : 6 meilleurs services
- mobiSiteGalore
Ce service d'adaptation du site aux appareils mobiles est considéré à juste titre comme l'éditeur de site mobile le plus facile à gérer. Selon ses créateurs, il ne vous faudra que 54 minutes pour développer une version mobile entièrement fonctionnelle du site Web.
Notez que la plupart des services existants sont destinés à fonctionner avec les smartphones, tandis que mobiSiteGalore vous permet de préparer des sites pour les téléphones plus anciens.
- MobStac
Avec MobStac, vous obtenez un site Web mobile préparé avec HTML5. De plus, vous avez la possibilité de modifier les paramètres ou de choisir un modèle spécifique pour modifier le design, ce qui ne sera pas difficile.
Nous soulignons que MobStac est le seul service existant qui offre un plan de monétisation de site Web mobile intégré. Son inconvénient réside dans le fait que le service est toujours en version bêta, mais vous pouvez obtenir une invitation, puis vous inscrire.
- Fusible
Ici, il sera possible de développer une version mobile du site Web en utilisant deux approches : tout faire soi-même à l'aide de mofuse ou adapter le site pour les appareils mobiles en le commandant à une équipe de spécialistes.
Dans le premier cas, vous obtenez plus d'opportunités dans le domaine de la conception, alors que vous ne devez payer mensuellement que pour le fonctionnement du service. Si vous embauchez des spécialistes, tout le travail leur incombera.
- Application mobile Amérique
Cette option fournit un aspect SEO amélioré à votre site Web. Grâce à ses capacités, vous serez en avance sur les concurrents dont les portails n'ont même pas encore de version mobile. Pendant la préparation de ce texte, l'application a pris en charge Appareils iPhone, Blackberry, Androïd.
- bMobilisé
Il vous permettra de préparer une version mobile du site Web en peu de temps. L'application se caractérise par une conversion rapide avec des paramètres avancés, qui permettent, entre autres, de modifier la conception.
Selon les développeurs, la base de données bMobilized prend en charge plus de 13 000 modèles d'appareils mobiles, y compris les marques actuellement populaires.
Mais si vous êtes préoccupé par le coût d'adaptation d'un site pour les appareils mobiles, ce service est fait pour vous, car plus vous hébergez de sites Web, plus vous bénéficiez de réductions. En d'autres termes, bMobilized sera presque idéal pour les propriétaires d'un réseau de sites qui doivent être adaptés aux appareils mobiles.
- Mobiliser
Mobify reconnu le meilleur service pour ceux qui sont liés au commerce électronique. Il offre la fonctionnalité HTML5 aux propriétaires, et son équipe de développement, en fonction de vos souhaits, crée votre site Web mobile.
Comme le montre la pratique, il ne faut pas plus de trois semaines pour créer un magasin électronique entièrement fonctionnel à partir du stade de l'idée. De plus, vous avez la possibilité de vous immerger dans son développement.
Si vous avez réussi à essayer toutes les méthodes décrites ci-dessus, mais que vous n'êtes toujours pas satisfait du résultat, il est temps de recourir à l'aide de professionnels.
Array ( => 21 [~ID] => 21 => 28/09/2019 13:01:03 [~TIMESTAMP_X] => 28/09/2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 21/09/2019 10:35:17 [~DATE_CREATE] => 21/09/2019 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Oui [~ACTIVE] => Oui => Oui [~GLOBAL_ACTIVE] => Oui => 500 [~SORT] => 500 => Articles par Dmitry Svistunov [~NAME] => Articles par Dmitry Svistunov => 11076 [~PICTURE] => 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Dmitry Svistunov [~DESCRIPTION] => Dmitry Svistunov => text [~DESCRIPTION_TYPE ] => text => Articles de Dmitry Svistunov Dmitry Svistunov [~SEARCHABLE_CONTENT] => Articles de Dmitry Svistunov Dmitry Svistunov => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya -svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~IBLOCK_TYPE_ID] => blog => blog [~IBLOCK_CODE] => blog => [~IBLOCK_EXTERNAL_ID] => => [ ~ID_EXTERNE] =>)
La page de contact est d'une grande importance, sa conception doit donc être donnée Attention particulière. Plus la page de contact est pratique, plus les opportunités s'ouvrent pour le propriétaire du site. Une page de contact, si elle est bien conçue, peut avoir un impact significatif sur les taux de conversion : si un utilisateur peut facilement contacter un gestionnaire ou un administrateur de site, il aura une expérience utilisateur positive. Plus le processus est simple, moins l'utilisateur a besoin de remplir des champs ou des formulaires, mieux c'est pour la conversion.
Une bonne page de contact peut améliorer un site car elle crée les conditions d'une bonne relation entre les visiteurs et le propriétaire du site. Peu importe le type de site, il peut s'agir d'une boutique en ligne, portail de nouvelles ou un service Web - les commentaires sont extrêmement importants.
Malgré cela, de nombreux designers sous-estiment la valeur d'une page de contact bien conçue en se concentrant sur la conception des principales pages de contenu.
Il arrive que l'utilisateur ait besoin de contacter rapidement le propriétaire du site ou de contacter le support client. Cependant, rien ne se passe, même si vous utilisez la recherche sur le site. Parfois, les informations nécessaires sont présentes sur le site, mais elles sont "cachées", car le concepteur n'a pas veillé à la bonne navigation et l'utilisateur ne voit tout simplement pas le lien souhaité. L'utilisateur désespéré est déjà prêt à passer un appel téléphonique, mais il ne le trouve pas non plus.
Les entreprises et les services web qui accordent beaucoup d'importance au design des pages de contact sont très prudents. Tout simplement parce que cette page ne contient pas que des informations de contact : elle contient des informations dont l'utilisateur a besoin et est interactive. Et, plus important encore, une bonne page de contact encourage l'utilisateur à interagir encore et encore avec le site.
La page de contact est une sorte de plateforme de communication. Si le propriétaire du site permet aux clients d'exprimer leur opinion, c'est déjà une invitation au dialogue. Les développeurs et les utilisateurs Web peuvent bénéficier de cette collaboration et c'est pour cette raison qu'elle doit être conçue correctement.
Comme vous le savez, la fonctionnalité dans la conception est l'un des facteurs clés. La page de contact contient des informations importantes, mais il n'y en a pas trop, ce qui peut parfois conduire à une évaluation erronée de la fonctionnalité. Le propriétaire du site pense que s'il a placé une adresse e-mail et un numéro de téléphone sur la page, cela suffit amplement. Parfois, il a raison.
Cependant, une double vérification de la fonctionnalité peut faire plus de bien que de mal. Les liens brisés ou les pages surchargées d'informations nuisent à l'engagement. Le propriétaire du site peut ne pas recevoir un message important, mais le pire arrivera s'il fournit des informations périmées ou inexactes. Lors de la conception d'une page de contact, vous devez avant tout penser aux utilisateurs, car après tout, cette page est créée spécifiquement pour eux.
Emplacement
Il est impératif de s'assurer que la page de contact est toujours disponible pour les utilisateurs. Apparence un site, même au design exclusif, ne signifie rien si les utilisateurs ne trouvent pas la page de contact. Parfois, vous devez concevoir des formulaires de contact assez complexes, vous devez donc prendre soin des instructions à l'avance. Il sera plus facile pour les utilisateurs de contacter le propriétaire du site s'ils disposent d'un guide étape par étape.
Pour un designer concevant un site web, il est important de retenir deux points :
- La navigation principale doit toujours inclure une page de contact
- Les utilisateurs doivent trouver la page de contact dès la première visite sur le site, quelle que soit pages internes ils n'ont pas frappé
Sur la base de l'expérience des concepteurs, les utilisateurs ont tendance à rechercher les informations de contact sur le côté droit de la page, il est donc logique d'y mettre le lien "Contactez-nous". Dans le même temps, vous devez vous rappeler que ces informations sont d'une importance secondaire pour l'utilisateur, vous ne devez donc pas rendre cette section du site trop visible ou intrusive. Le lien vers la page de contact, situé dans le coin supérieur droit de la page, fonctionne mieux. Et le pire de tout, le lien dans le menu déroulant, car les utilisateurs peuvent tout simplement ne pas le remarquer.
Formulaires de contact simples
Pour les sites marchands, la page de contact est très importante, comme mentionné plus haut. Bien qu'elle ne soit pas aussi jolie que les autres pages du site, elle doit être simple, conviviale et compréhensible. Si l'information n'est pas structurée correctement, fonctionne mal ou est trompeuse, il est peu probable que le propriétaire du site soit en mesure d'établir des relations à long terme avec ses clients.
Il arrive souvent qu'un utilisateur qui souhaite laisser un message quitte le site car il ne peut pas remplir le formulaire de contact. Ou ne veut pas si c'est trop long ou compliqué. Aujourd'hui, les utilisateurs ne veulent pas passer du temps à remplir des formulaires détaillés, il vaut donc la peine d'envisager de les simplifier. Plus le formulaire est simple, mieux c'est, y compris pour l'expérience utilisateur, vous devez donc vous concentrer sur la collecte d'informations de base.
Libellé exact
Si nous parlons de sites officiels, alors sur toutes les pages, y compris la page de contact, vous devez respecter des déclarations claires et précises sur les avantages que l'utilisateur recevra en devenant client de l'entreprise. Pourquoi est-ce? Débarrassé de toutes les informations inutiles est le plus de manière efficace pour attirer et retenir l'attention. Des données bien résumées doivent être concises afin que les gens puissent facilement trouver ce dont ils ont besoin.
N'oubliez pas non plus la composante visuelle. ET nous parlons pas seulement sur le design attrayant des formulaires de contact. Si l'entreprise a une adresse physique, vous pouvez aider les utilisateurs en plaçant une carte sur la page de contact. Pour les entreprises situées dans les grandes villes, il est très important d'expliquer aux utilisateurs comment il leur sera plus pratique de se rendre à leur bureau, magasin ou entrepôt.
Réactivité des pages de contact
Pour toute entreprise en ligne, la réactivité est primordiale. C'est une règle stricte et rapide, sans exception. Étant donné qu'Internet se développe à un rythme rapide et que de plus en plus de nouveaux appareils apparaissent sur le marché, cela signifie que Coordonnées doit être accessible quel que soit le navigateur ou l'appareil utilisé par la personne. Aujourd'hui, il est très facile de perdre dans la concurrence - il suffit de ne pas optimiser la page de contact pour l'afficher sur les appareils mobiles.
Composants intégrés
Qu'est-ce qui est mieux : une adresse e-mail ou un formulaire de contact ? Les utilisateurs ont besoin des moyens simples relations avec les fournisseurs des services dont ils ont besoin, vous devez donc les rencontrer à mi-chemin. Vous pouvez vous concentrer sur la communication par e-mail ou poster un formulaire de contact - chaque méthode a ses avantages et ses inconvénients.
Formulaires de contact
- Le formulaire de contact ne doit pas forcer les utilisateurs à aller sur une autre page
- Le formulaire de contact n'est pas destiné à être créé compte ou connectez-vous par e-mail
- Le formulaire doit avoir une fonction de saisie semi-automatique, si possible.
- Le formulaire de contact doit avoir une fonctionnalité pour envoyer des messages et des notifications
- La communication par e-mail doit être sécurisée pour l'utilisateur
- Toutes les données soumises doivent être sauvegardées pour une utilisation future.
- Le travail avec les messages reçus doit être effectué systématiquement, vous devez également prendre soin de sauvegarde données
Formulaire de validation
Les formulaires de vérification sont grande importance lorsque vous avez besoin d'en savoir plus sur les utilisateurs du site. De plus, le processus de validation oriente d'une certaine manière l'utilisateur vers la bonne direction, car cela peut attirer leur attention sur des données saisies par erreur ou sur des champs vides. Ainsi, le formulaire de vérification fait gagner du temps aux clients, puisqu'à la fin du processus de remplissage, la personne sera fermement convaincue que son message ira à la bonne adresse.
Les numéros de téléphone
De nombreuses entreprises n'indiquent pas sur la page de contact les numéros de téléphone, car ils craignent que des appels constants n'interfèrent avec le processus de travail. Cependant, comme dans le cas de la carte, les numéros de téléphone sur la page de contact augmentent la confiance de l'utilisateur dans la marque, les clients se sentent en sécurité, estimant que dans une situation difficile, ils pourront contacter un employé de l'entreprise et discuter du problème. Le numéro de téléphone raccourcit la distance entre le propriétaire du site et l'utilisateur, cela s'applique aussi bien aux entreprises traditionnelles qu'aux services en ligne qui n'ont pas d'adresse physique.
Profils de médias sociaux
Boutons réseaux sociaux se retrouvent de plus en plus sur les pages de contact. Cette approche peut considérablement améliorer les capacités du site, en particulier si le support client est fourni 24h/24 et 7j/7. Il est plus pratique pour beaucoup d'entrer en contact avec l'entreprise via un réseau social, il vaut donc la peine d'envisager cette façon d'interagir avec l'utilisateur.
Conception de la page de contact
Vraiment bonnes pages les contacts témoignent de la haute qualification des designers qui les ont conçus. Et la partie la plus importante de la conception est le style visuel de la page de contact. Dans le cas des formulaires de contact, cela signifie de grands champs qui facilitent la soumission des données. Si le formulaire est beau, il fonctionne mieux.
Avant de procéder à la conception, le concepteur doit procéder à une étude détaillée de toutes les coordonnées fournies par le client. Tous les éléments doivent être bien organisés, en plus, ils doivent être harmonieusement combinés. Vous devez également vous rappeler que la page de contact doit correspondre à la palette de couleurs du site afin que l'utilisateur identifie de manière unique à la fois le site et la marque.
Conclusion
La page de contact doit toujours être visible. Cela s'applique non seulement page d'accueil, mais aussi toutes les autres pages du site. Lors de la conception de la page de contact, gardez à l'esprit que les utilisateurs ne pourront contacter le propriétaire du site ou l'équipe d'assistance que de la manière qu'ils voient dans l'onglet "Contact". Dans ce cas, la clé du succès est la commodité et la simplicité. Vous devez donner aux utilisateurs ce qu'ils veulent. Si l'utilisateur doit saisir ses données personnelles sur le site, il est préférable de poser des questions basiques : prénom, nom, adresse email. Le formulaire de contact ne doit pas contenir de champs supplémentaires. Vous devez également veiller à l'adaptabilité de la page de contact - elles doivent être affichées dans n'importe quel navigateur et sur n'importe quel appareil. Si la page de contact est bien conçue, les chances de succès du site auprès des utilisateurs sont fortement augmentées.
De nos jours, avoir un design responsive est un devoir sacré de tout site, surtout si votre site est commercial. Parce que l'audience mobile croît à un rythme impressionnant. Oui, vous me direz que l'audience mobile est en croissance depuis longtemps, depuis de nombreuses années, mais maintenant c'est une nouvelle tendance et la croissance est quasi exponentielle. Les smartphones sont omniprésents. Si vous vendez quelque chose, le design réactif est vital pour vous.
Selon les statistiques des rapports Yandex, malgré la mobilisation générale, les utilisateurs achètent davantage sur les ordinateurs que sur les smartphones, mais en même temps, ils choisissent davantage les biens et services via les appareils mobiles. Google affirme que près de la moitié de ses utilisateurs recherchent des produits sur leurs smartphones.
Selon MediaScope, l'audience mobile croît plus vite que les autres, avec une augmentation de 15% en 2017. L'audience mobile totale est de 66 millions de personnes, soit 54% de la population totale (2017). Dans le même temps, le nombre d'utilisateurs de bureau diminue.
Selon le journal Kommersant, l'audience de Runet sur le segment mobile est passée en 2017 de 47% à 56%. De plus, la croissance se fait au détriment de l'ancienne génération, car chez les jeunes, le niveau d'utilisation d'Internet a depuis longtemps atteint sa limite maximale.
Le plus grand fournisseur de services liés à technologies de réseau Cisco teste les réseaux 5G, qui devraient apparaître en 2020. Cisco a prédit en 2016 que d'ici 2021 trafic mobile augmentera septuple.
Selon les recherches de la boutique en ligne Rechi, qui vend des chaussures et des accessoires, il a été remarqué que les acheteurs mobiles sont devenus plus déterminés. Les utilisateurs de smartphones ont commencé à acheter même lorsqu'ils font la queue, au déjeuner ou avant de se coucher.
Qu'est-ce que la conception réactive ?
La conception Web réactive est apparue depuis 2011, mais malgré cela, une grande partie des sites de RuNet sont toujours affichés de travers sur les appareils mobiles. Par exemple, le menu peut encombrer tout l'écran, ou inversement, la mise en page du site dépasse l'écran et vous devez utiliser un défilement horizontal terriblement inconfortable, même retourner l'écran ne vous aidera pas ici. Aussi, sans la version adaptative, le texte du smartphone sera très petit, il est généralement impossible de le lire.
Le Responsive Web Design est la conception des pages du site Web, construite de manière à ce que tous les éléments s'adaptent dynamiquement à l'écran, en fonction de sa taille, afin de n'afficher que les éléments les plus importants à l'écran dans des conditions limitées. Plus l'écran est petit, moins il y a d'objets dessus, seuls les plus importants restent. Sur les grands écrans, nous sommes habitués à voir un tas de barres latérales, de menus, de widgets et d'autres éléments similaires sur un site Web, qui, en fait, sont très rarement utilisés. Par conséquent, dans la version adaptative, il ne reste que ce qui est vraiment important et fonctionnel. Par exemple, pour une boutique en ligne, il s'agit d'un en-tête avec un téléphone, un menu transformateur et des marchandises, le reste est superflu, mais cela suffit pour un achat.
Il est généralement admis que la conception adaptative pour les appareils mobiles doit être conçue à l'avance, avant même la création du site, par conséquent, le vaillant webmaster sera peut-être déçu. Mais c'est une grande idée fausse, il n'est donc pas du tout nécessaire de changer complètement l'ensemble du modèle de site juste pour des raisons d'adaptabilité ou de changer complètement l'ensemble du CMS. Vous pouvez adapter votre site actuel très rapidement sans modifications majeures ni complications.
Y a-t-il une différence entre la conception de sites Web réactifs et réactifs ?
En fait, les concepts de réactif et d'adaptatif ont une différence. Il était une fois, alors que les smartphones ne songeaient même pas à conquérir la planète, maquettistes et programmeurs se disputaient. Quelle méthode d'optimisation pour les appareils mobiles est la meilleure: la méthode (RWD - réactive) ou la méthode (AWD - adaptative). La différence entre eux est que la méthode responsive modifie la taille des éléments en pourcentage : images, vidéos, blocs, etc. Mais le responsive design ne repose pas sur la taille du navigateur, mais se concentre sur l'utilisateur et possède trois mises en page prédéfinies : pour un smartphone, une tablette, un ordinateur portable.
Désormais, les deux options sont utilisées dans la mise en page adaptative, elles se complètent. La mise en page (grille) de la page peut être radicalement reconstruite à des points de contrôle qui correspondent aux tailles des trois principaux types d'écrans : moniteurs, tablettes, smartphones. Dans les points d'arrêt, la mise en page s'étire pour remplir l'espace vide avec des éléments. Ainsi, le site Web aura un aspect optimal, quelle que soit la taille de l'écran.
Pourquoi un site web doit-il être responsive ?
Les moteurs de recherche accordent chaque année de plus en plus d'attention à l'adaptation mobile des sites. Déjà apparu recherche séparée pour les appareils mobiles. Par exemple, Yandex utilise l'algorithme de Vladivostok, qui tient compte de l'adéquation du site aux appareils mobiles, donc si votre site n'est pas adapté aux appareils mobiles, alors un visiteur saisissant une demande via un smartphone ne verra pas votre site dans la recherche résultats. Et si le site est toujours dans les résultats de recherche, alors tout en bas
Sans une version mobile responsive, les visiteurs rencontreront des difficultés sur votre site, ce qui aura un effet néfaste sur les facteurs comportementaux de l'ensemble du site. Lorsqu'un visiteur ouvre la version complète encombrante sur un smartphone, il fermera probablement immédiatement votre site sans même essayer, et chacun de ces visiteurs gâchera les facteurs comportementaux. Facteurs comportementaux influent grandement sur les positions en référencement, elles incluent le temps passé sur le site, le nombre de pages vues. L'introduction de la version adaptative résout tous ces problèmes, sans aucun effet secondaire. Dans certains projets, le trafic du site peut augmenter jusqu'à 40 %.
Système d'analyse pratique dans Google Analytics et Yandex.Metrics. Les systèmes déterminent automatiquement la mobilité de votre site et génèrent des rapports prêts à l'emploi avec des statistiques de trafic et des conversions effectuées via des appareils mobiles. C'est très pratique pour déterminer la mobilité de votre public.
Il n'y a pas d'inconvénients à la mise en page adaptative. Il n'y a qu'un seul inconvénient: l'ancienne génération n'aime pas les éléments trop simplifiés et volumineux, elle est habituée aux grands écrans et à un grand nombre de petits éléments de menu.
Quelle est la meilleure : version mobile ou adaptative ?
Une façon d'optimiser pour les smartphones consiste à créer une version mobile distincte du site Web qui ne peut être ouverte qu'à partir de smartphones. La détection du type de périphérique se produit côté serveur. Ces derniers temps, elle est de moins en moins utilisée, car elle est beaucoup plus chère que la mise en page adaptative, plus difficile à développer et à maintenir. La version mobile ne convient que pour les services Web très complexes et non standard.
De grandes agences peu scrupuleuses en profitent pour escroquer les clients. Après tout, le coût de mise en œuvre d'une version mobile distincte est plusieurs fois plus élevé que la mise en œuvre d'une mise en page adaptative, il est donc plus rentable pour eux de vous dissuader d'une version adaptative.
Pourquoi un site web responsive est-il meilleur qu'une version mobile ?
- Dans la mise en page adaptative, les modifications du code seront affichées immédiatement pour tous les appareils. Par exemple, si vous devez modifier ou ajouter un nouveau fonctionnalité importante. Dans le cas où le site dispose d'une version mobile, vous devrez apporter des modifications dans les deux versions. Et donc à chaque fois, ce qui double les dépenses en programmeurs et maquettistes.
- Dans un site adaptatif, le contenu n'est pas dupliqué, contrairement à la méthode lors de la création d'une version mobile du site.
- L'adresse sur la page pour ordinateur de bureau et smartphone dans la version adaptative reste la même, vous n'avez donc pas besoin de définir des redirections à chaque fois.
- Il n'est pas nécessaire de générer du contenu à chaque fois sur des pages distinctes pour les appareils mobiles et standard.
- De plus, Google a déclaré lors d'une des conférences Digital October en décembre 2016 ce qu'il fallait faire version adaptative, et la version mobile est un non-sens total.
Hack de la vie ! Saviez-vous que l'adaptation d'un site Web pour mobile peut être beaucoup moins chère que vous ne le pensez ? Car, en effet, cela ne demande pas de gros efforts et le travail se fait en peu de temps sans aucune conséquence pour votre site. En règle générale, les studios web proposent des prix audacieux : de 10 000 ₽ à 20 000 ₽, et en fait, l'adaptation peut être commandée pour seulement 500 ₽ à distance sur l'échange indépendant Kwork.
Comment faire une version mobile du site ?
Avant d'implémenter une mise en page responsive dans votre site, vous devez planifier la mise en page, pour cela vous devez déterminer quels éléments laisser et lesquels supprimer. Et faites-le séparément pour un smartphone et pour une tablette. L'espace sur les smartphones et les tablettes est limité, il faudra donc sacrifier des blocs pas trop importants et ne laisser que des éléments fonctionnels et uniquement ce qui aide le visiteur.
D'ailleurs, sur WordPress, la plupart des nouveaux thèmes premium supportent la version mobile, ainsi que les pages amp. Nous avons guide complet««, lisez et créez des sites WordPress réactifs.
Par exemple, les barres latérales remplissent généralement une fonction informative, les curseurs, etc. Le menu est trop long, et dans la version abondante, il se transforme en une fête sans fin, il est donc supprimé dans un bouton séparé. Même chose avec le long champ de recherche. Les éléments ne doivent pas être proches les uns des autres pour éviter d'appuyer sur deux éléments en même temps.
Disposition adaptative permet aux pages Web de s'adapter automatiquement aux écrans des tablettes et des smartphones. Le trafic Internet mobile augmente chaque année, et pour traiter efficacement ce trafic, il est nécessaire de proposer aux utilisateurs des sites adaptatifs avec une interface conviviale.
Les moteurs de recherche utilisent un certain nombre de critères pour évaluer la réactivité d'un site lorsqu'il est affiché sur des appareils mobiles. Google essaie de simplifier l'utilisation d'Internet pour les propriétaires de smartphones et de tablettes, en marquant les sites adaptés aux appareils mobiles dans les résultats de recherche mobiles avec une marque spéciale. adapté aux mobiles. Yandex dispose également d'un algorithme qui donne la préférence aux sites avec une version mobile/adaptative pour les utilisateurs en recherche mobile.
Vous pouvez vérifier l'affichage de la page sur les appareils mobiles sur les services et.
Riz. 1. Émission mobile de Yandex et Google avec une note sur la convivialité du site pour les appareils mobiles Qu'est-ce que la mise en page adaptative ?
La mise en page réactive implique l'absence d'une barre de défilement horizontale et de zones évolutives lorsqu'elles sont affichées sur n'importe quel appareil, un texte lisible et de grandes zones pour les éléments cliquables. À l'aide des requêtes multimédias, vous pouvez contrôler la disposition et la position des blocs sur la page, en reconstruisant le modèle afin qu'il s'adapte aux différentes tailles d'écran de l'appareil.
Les principales techniques de création d'un site adaptatif sont données dans l'article. Pour conception réactive la largeur du conteneur principal du site est définie en % , alors qu'elle peut être égale ou inférieure à 100 % de la largeur de la fenêtre du navigateur. La largeur des colonnes de la grille est également définie en %. DANS conception réactive la largeur des colonnes du conteneur principal et de la grille est fixée à l'aide de valeurs en px .
La technique de mise en page fluide réactive décrite dans ce didacticiel fonctionnera parfaitement sur un modèle à deux colonnes, ce qui rendra le site réactif et facile à consulter sur les appareils mobiles. Le modèle suppose une mise en page différente du contenu principal des pages, dans cette leçon la mise en page de la page principale sera analysée.
Mise en page principale
La page se compose de trois blocs principaux : un en-tête (en-tête), un conteneur d'emballage pour le contenu principal et une barre latérale, et un pied de page (pied de page). Prenons 768px et 480px comme points d'arrêt de conception.
Au premier point, nous allons masquer le menu du haut et déplacer la barre latérale sous le conteneur avec les publications. Au deuxième point, nous allons modifier l'emplacement des éléments d'en-tête, annuler le positionnement des boutons de réseaux sociaux dans les publications et annuler l'habillage des colonnes de pied de page.
Riz. 2. Un exemple de mise en page adaptative 1. Balises méta et section
1) Ajouter à la rubrique
fichiers nécessaires - un lien vers les polices utilisées, bibliothèque jQuery, ainsi que le plugin prefixfree (afin de ne pas écrire de préfixes de navigateur pour les propriétés) :
2. En-tête de page
Dans l'en-tête de la page
logo ;
bouton pour afficher/masquer le menu principal
