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

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

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

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

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

Il existe trois approches :

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

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

Version mobile du site : comment bien faire les choses

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

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

Étape 1. Supprimez les restrictions.

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

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

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

image(

Max-largeur : 100 %

hauteur : automatique ;

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

table (

bloc de visualisation;

Largeur : 100 % ;

débordement-x : défilement ;

débordement-y : masqué ;

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

webkit-overflow-scrolling : toucher ;

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

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

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

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

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

Étape 3. Commodité.

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

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

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

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

Implémentation de Media Queries avec des exemples

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

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

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

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

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

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

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

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

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

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

Navigation (largeur : 100 % ; )

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

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

Nous ajoutons à la même mediaquery :

Bloc(largeur : 35 % ;)

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

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

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

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

Bloquer (

flotteur : aucun ;

Largeur : 85 % ;

Marge : 1em auto ;

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

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

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

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

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

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

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

Version mobile du site: comment faire et quoi chercher

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cordialement, Galiulin Ruslan.

Aujourd'hui, la plupart des gens vont en ligne via des gadgets mobiles - tablettes, téléphones, à cet égard, l'optimisation du site va également à 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. A coche 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 ? En savoir plus dans cet article.

Il existe donc quatre façons principales d'adapter le site à la version mobile.

Première méthode - 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. Les requêtes sont utilisées pour la mise en œuvre. Il ne change pas lui-même.

Les avantages de cette méthode incluent:

• développement pratique, puisque 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 CSS et HTML;
• une Adresse 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 il est plus facile pour un moteur de recherche de 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, inconvénients :

• La conception réactive ne prend pas en charge les mêmes tâches sur mobile que sur ordinateur. 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, il est peu probable que les visiteurs l'aiment.
• Un 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 abondants. En raison du poids important, la page va simplement "ralentir", l'utilisateur va se fâcher et partir, et postes de recherche chantier - chute.
• 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, vous ne pouvez rien faire pour l'ouvrir, contrairement aux sites où vous pouvez le désactiver et passer à un domaine normal.

Néanmoins, 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 difficile et animations. Pour un site complexe, 2 autres méthodes conviennent.

Deuxième méthode - une version distincte 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 ;
• il est facile de changer et d'apporter des modifications, 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 que modèle réactif;
• le plus souvent il est possible d'accéder à la version principale de la page depuis le mobile.

Mais même ici, ce n'était pas sans inconvénients:

• Plusieurs adresses - version desktop et mobile du site. Comment faire en sorte que l'utilisateur se souvienne de deux options ? Les webmasters prescrivent souvent de la version de bureau à la version mobile, mais si cette page n'existe pas dans la version mobile, 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 à partir d'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 recevra des fonctionnalités très limitées. Mais en même temps, s'il manque quelque chose, le visiteur peut aller version complète pages.

En général, un site mobile séparé 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.

La troisième voie - RES-design

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 d'un ciblage des ressources 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 barre d'adresse navigateur.

Bien sûr, il y a aussi des inconvénients ici, tels que la complexité du développement, les coûts de main-d'œuvre élevés pour un grand nombre de programmeurs et la nécessité de faire plusieurs options de mise en page. Parfois, l'appareil mobile n'est pas reconnu par l'application. Habituel soutien technique, correction des carences. 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 compliquées, 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 fabriquer ?

Téléchargez des modèles spéciaux (plugins) pour conception adaptative. 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. Plutôt, il opportunité gratuite est destiné aux petits sites simples, aux blogs, aux flux d'actualités. 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, très probablement, les publicités et les bannières pop-up seront coupées, mais la page se chargera rapidement et sans «décalages».

Principes de création des 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 ?

Nous supprimons 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.

Tout options additionelles, qui serait utile dans la version de bureau et faciliterait la vie de l'utilisateur, n'apportera ici que des difficultés. Ne laissez que les éléments les plus importants. Animation, bannières publicitaires, le multimédia, très probablement, ne fera que ralentir le travail du site ou de l'application et détournera l'attention de l'essentiel.

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, mais pas à gauche ou à droite.

Une association

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 une saisie de données en plusieurs étapes - un nom, puis une adresse, où chaque cellule individuelle contient une maison, une rue, un appartement, etc. lui de remplir seulement 2 - nom et adresse.

Et la déconnexion

Parfois, au contraire, il faut aussi se déconnecter un grand nombre de 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 répertorié.

Fixe 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 du même nom, et chacune 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 saisit requête de recherche"Aiguilles à tricoter en métal", mais dans l'info-bulle, il voit "aiguilles à tricoter 5 mm", "aiguilles à tricoter 4,5 mm", etc.

Saisie automatique

Ce point est particulièrement vrai pour les sites où quelque chose est vendu en ligne, et vous devez remplir formulaires standards paiement, livraison, etc. Si une personne effectue 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 rendu aussi rapide et pratique que possible.

Pour ce faire, 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 économisé.

Tout est lu, tout est visualisé

Lors de la création du design 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 être cliqués sans être redirigés vers une autre page, et les images doivent s'ouvrir séparément, en grand, surtout si nous parlons sur la boutique en ligne.

Quelques statistiques

Parlant de l'adaptation du site aux appareils mobiles, on ne peut s'empêcher de recourir aux statistiques afin de comprendre l'importance de ce processus pour la promotion en ligne.

Les chiffres 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 la croissance commerce ambulant 100 fois 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 le trafic Internet et le marché du commerce électronique ne sont occupés que par un petit cinquième.

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

Où la version mobile est-elle nécessaire ?

L'utilisation de la version mobile est logique pour toute plate-forme 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.

Sans une version mobile ne peut pas exister :

• les portails d'information, car la plupart d'entre eux sont consultés depuis le téléphone sur le chemin du travail ou des études ;
• 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;
• référence, sites avec navigation, etc., où les gens vont quand ils recherchent quelque chose ;
• achats 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 technologies mobiles sont en phase de croissance et de 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 exigences croissantes des utilisateurs, les sites doivent être constamment modernisés et adaptés aux divers appareils. Il est clair que s'il est gênant pour une personne 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 de disposer d'une ressource flexible, pratique, fonctionnelle et intéressante.

La version mobile du site Android ou Ios 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 y accéder en redirigeant, utiliser modèles gratuits ou création application mobile, avec lequel l'utilisateur peut plus facilement entrer et être sur la page.

À monde moderne avoir son propre site Web est parfois aussi important que d'avoir un numéro de téléphone ou une adresse E-mail. Malheureusement, tout le monde ne peut pas créer seul un beau site Web professionnel, et parfois même une courbe ne fonctionne pas. Commander auprès de programmeurs n'est pas non plus une solution idéale, car tout le monde ne peut pas se le permettre.

Des modèles de sites Web HTML gratuits vous aideront à sortir de cette situation. Un modèle de site HTML est un ensemble de pages statiques prêtes à l'emploi pour un site d'un certain sujet. En utilisant ce modèle, vous pouvez créer un site Web simple en quelques heures seulement, avec des connaissances de base Balisage HTML. Dans la section HTML, vous obtiendrez ces connaissances si vous passez quelques heures de plus à étudier, et si vous ne perdez pas de temps dans la section CSS, vous pourrez contrôler complètement la conception des modèles de site HTML et les personnaliser complètement. à vos besoins.

Un autre avantage indiscutable des modèles de sites Web est qu'ils sont rédigés dans la plupart des cas par des professionnels. Un modèle de site professionnel ne signifie pas seulement un beau et Design moderne, mais aussi au fur et à mesure que le code est écrit. Moteurs de recherche ils regardent comment votre site est écrit, si le code est optimisé pour le référencement ou non, et sur la base de cela, ils abaissent ou augmentent vos positions dans les résultats de recherche. Par conséquent, un bon site doit non seulement être beau et moderne, ce qui est important, mais aussi bien écrit en termes de code.

Téléchargez des modèles de sites Web HTML gratuits et créez vos projets en un rien de temps.

Aujourd'hui, de nombreuses entreprises accordent beaucoup plus d'attention à la création de ressources mobiles de haute qualité, car selon les dernières données, 80% des internautes utilisent des appareils portables pour trouver les informations dont vous avez besoin. De plus, les spécialistes du marketing se préparent à un grand changement dans l'algorithme de Google qui est entré en vigueur le 21 avril 2015. Le blog officiel de l'entreprise indique que désormais la qualité optimisation mobile ressource déterminera en grande partie sa position dans les résultats de recherche.

La prochaine mise à jour aura un impact beaucoup plus important sur le système de classement que le même Panda ou , et c'est pourquoi l'amélioration expérience mobile devrait être votre priorité absolue dans un avenir proche. Selon l'article de Search Engine Land sur cette mise à jour, tous les sites seront soumis à une vérification rigoureuse adaptée aux mobiles.

Afin que vous puissiez pleinement préparer votre site à un tel changement majeur, nous avons sélectionné pour vous 15 exemples inspirants de conception de sites Web mobiles.

Shutterfly est un service en ligne qui vous permet de créer des albums photo, des cartes de vœux, des lettres d'invitation, etc. Avec de plus en plus de personnes accédant à leurs photos sur leurs smartphones chaque jour, Shutterfly s'engage à offrir une expérience mobile positive à ses clients.

Le site mobile de l'entreprise reste un succès pour deux raisons principales : il permet aux utilisateurs de trouver plus facilement des informations sur les offres et les vend grâce à de belles images.

Une fois sur le site, vous verrez que les sections de menu ici sont présentées sous forme de gros boutons en bas de l'écran. Grâce à cela, les visiteurs peuvent très rapidement décider du choix de l'option qui les intéresse et obtenir des informations complémentaires.

J'ai adapté ce modèle pour les navigateurs standard de plates-formes telles que IOS (3.1+), Android (2.1+), Blackberry (6.0+), Téléphone Windows 7, ainsi que Opera mobile pour Android, qui gagne en popularité. Je tiens à noter que tous les navigateurs standard (à l'exception de Windows Phone 7 qui a IE9) sont basés sur webkit.

Quelle est la différence entre le développement de sites pour ordinateur et de sites pour appareils mobiles ? Ensuite, je parlerai de quelques astuces qui aideront à contourner de nombreux problèmes.

Quelle résolution choisir, et la balise meta viewport

Il semblerait que nous devrions avoir une question sur quelle autorisation prendre comme base de notre site ? Après tout, les appareils avec à la fois 230x340 (par exemple, HTC Wildfire S), et environ 800x480,960x640 (HTC Incredible S, Iphone 4), et même 1280x720 (HTC One X) sont pertinents maintenant. La balise meta viewport vient à la rescousse, ce qui résoudra le problème de résolution et de mise à l'échelle.

• width=device-width - la valeur est définie par l'appareil lui-même
• initial-scale=1 - l'échelle initiale est définie sur 1 (c'est-à-dire 1:1)
• maximum-scale=1.0, user-scalable=no - la mise à l'échelle est désactivée (je tiens à noter que même avec ces paramètres, HTC évoluera toujours obstinément, et les développeurs ont déclaré qu'il ne s'agissait pas d'un bogue, mais d'une fonctionnalité)

Un peu de graphisme

Même avec cette gamme de résolutions, il convient de noter que la plupart des appareils mobiles, ayant haute résolution ils ne l'utilisent pas pour agrandir leur espace de travail, mais pour augmenter la clarté (plus à ce sujet). En d'autres termes, leur saturation en pixels (DPI) est plusieurs fois supérieure à celle des résolutions plus petites. D'où vient la conclusion que les appareils avec un grand PDI compriment en fait le site de 2 fois afin d'obtenir les mêmes dimensions que dans les appareils avec une résolution inférieure (par exemple, dans Appareils Apple les écrans Retina ont 4 fois plus de points sur la même zone de l'écran, ce qui augmente la clarté). On voit mieux le résultat sur la photo ci-dessous.

Maintenant que nous savons comment fonctionnent les écrans à haute résolution, il convient de réfléchir à l'affichage correct de tous les éléments de notre site Web.
Commençons par des éléments tels que les polices, les bordures et autres éléments similaires. Tous ces éléments sont essentiellement des objets vectoriels que le navigateur peut mettre à l'échelle sans problème, nous ne nous attarderons donc pas là-dessus.
Une autre chose est avec des images et image de fond. Après tout, si nous enregistrons l'image d'arrière-plan sur la base du fait que nous avons 320x480, les appareils avec un DPI plus dense ne pourront pas apparaître dans toute leur splendeur devant nous, et tous les efforts pour transmettre la clarté et le charme du l'image sera réduite à néant, car ils l'augmenteront en fait de 2 fois (et peu importe à quel point le navigateur évolue - la qualité est toujours perdue lorsque le logiciel augmente la taille). C'est là que l'ingéniosité entre en jeu ! Je vais essayer d'expliquer avec un exemple. Nous avons un site, dans l'en-tête duquel il y a un certain arrière-plan qui occupe 320px de largeur.Ainsi, pour que nos écrans super clairs affichent cette image à 100%, l'image d'origine ne doit pas être de 320x50 mais de 640x100 (exactement 2 fois plus grand) , et déjà en utilisant css set background-size: 320px 50px;. Nous faisons un chamanisme similaire avec des images sous forme d'img.

Optimisation des requêtes

Étant donné qu'Android, BlackBerry, IOS et Windows Phone 7 prennent entièrement en charge Data-url, nous pouvons réduire considérablement le nombre de demandes en mettant en œuvre tous images de fond en CSS. En plus de l'optimisation des requêtes, nous avons un gain énorme grâce à la mise en cache CSS.

Problèmes avec les sprites et les images

En raison du fait que notre navigateur compresse le contenu et le met à l'échelle à l'une ou l'autre taille, il peut arrondir incorrectement les tailles lors des calculs, et donc, lorsque les sprites sont collés pixel par pixel, une bande de l'élément suivant sortira. Pour éviter cela, il vaut la peine de faire un espace lors du collage de quelques pixels.

Petit problème avec les formats d'image

J'ai également rencontré un problème désagréable sur certains appareils liés aux formats d'image. Encore une fois, je vais donner un exemple : il y a 2 images enregistrées à l'aide de Enregistrer pour le Web dans Photoshop (dont l'une est un dégradé linéaire qui s'étend le long de l'axe Y, et la seconde est une sorte d'image découpée avec un morceau de le dégradé, et devrait en fait tenir dans un dégradé répété) mais dans des formats différents (png et jpg). Ainsi, sur certains appareils, une image est plus claire et la seconde plus sombre. Donc, pour résoudre ce problème, j'ai dû enregistrer les deux images dans le même format.

Masquer la barre d'URL

Comme nous n'avons pas beaucoup d'espace sur notre appareil, cela ne nous fera pas de mal de gagner quelques dizaines de pixels supplémentaires. Et nous pouvons les trouver en masquant notre barre d'URL. Pour cela, nous avons un script simple :

AddEventListener("load", function() ( setTimeout(hideURLbar, 0); ), false); fonction hideURLbar() ( window.scrollTo(0, 1); )

Mais je note que ce script peut nous interférer si notre lien mène à l'une des ancres nouvelle page(dans ce cas, nous serons défilés jusqu'à notre élément, et après le chargement de la page, il reviendra en haut), mais cela peut facilement être évité en effectuant une vérification supplémentaire de notre URL.

Effet visuel du clic sur un élément

Par exemple, sur IOS, nous pouvons obtenir un effet de clic avec la pseudo-classe :active. Mais cela fonctionnera même si notre élément est au point lors du défilement de la page, ce qui n'est pas très agréable. Par conséquent, j'ai décidé d'écrire un petit script qui émulera un clic et l'annulera lors du défilement de la page.

var scroller=faux ; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function () ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(clickable); scroller=true; )); $("a").live("touchend",function(event)( var elem=$(this); clearTimeout(clickable); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("active");), 50); ) else ( elem.removeClass("active"); ) ));

Suppression des bordures et des surbrillances des liens et des boutons

Probablement chaque utilisateur a remarqué que lorsque vous cliquez sur un lien, il est encadré et mis en évidence. Un tel effet peut grandement gâcher l'idée du concepteur. Ici une sorte de reset des styles vient à la rescousse (testé dans tous les navigateurs webkit, et ce sont les navigateurs natifs IOS, Android, BlackBerry)

*( -webkit-text-size-adjust : aucun ; /*correction d'un bogue dans IOS avec mise à l'échelle en paysage*/ contour : aucun ; /*supprime la bordure autour des liens et des boutons*/ -webkit-touch-callout : aucun ; /* si nécessaire, désactivez la surbrillance du texte*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*supprimez la surbrillance en arrière-plan des liens et des boutons*/ )

support fixe

Étant donné que les technologies mobiles évoluent désormais très rapidement et qu'au moment d'écrire ces lignes, le pourcentage de navigateurs qui ne prennent pas en charge le fixe tend vers zéro, je ne vais pas trop approfondir la description. Je dirai simplement que pour ces navigateurs, nous devrions utiliser iscroll . Je décrirai également une petite astuce concernant la connexion dynamique des scripts (elle sera nécessaire pour ne pas connecter un fichier supplémentaire pour les navigateurs normaux)

//ancienne version d'IOS détectant var OSName="OS inconnu" ; if (navigator.appVersion.indexOf("Mac") !=-1) OSName="MacOS" ; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

À cet exemple J'ai vérifié que s'il s'agit d'un Iphone et que la version du navigateur est inférieure à 534 (il ne prend pas en charge le fixe). J'inclus dynamiquement le script de fixation.js

CSS3

De plus, n'oubliez pas que nous pouvons déjà utiliser certaines propriétés css3 au maximum (n'oubliez pas les préfixes moz-, webkit-, o-). Pour WP7, n'hésitez pas à inclure pie.htc.

Lien bureau IOS

Probablement pour les utilisateurs d'IOS, ce ne sera pas un secret que dans Safari, vous pouvez placer un lien vers le site sur le bureau.
Voici un exemple d'un tel lien vers Forismatic.

Dessous Exemple HTML code pour l'icône (IOS lui-même le mettra à l'échelle, ajoutera l'arrondi des coins), une annonce indiquant que ce lien doit être ouvert en tant qu'application (fonctionne en plein écran), ainsi qu'un code qui masque la barre d'URL. Si vous le souhaitez, vous pouvez même afficher une fenêtre de démarrage.

- annonce ce qui s'ouvrirait en plein écran, masque la barre d'URL - changer la couleur de la barre d'état en noir (les valeurs disponibles sont par défaut, noir, noir-translucide). défaut - lien vers l'icône qui s'affiche sur le bureau.

Nous pouvons voir un exemple vivant de tout ce qui précède.