Page d'accueil de la version mobile de Yandex. La version mobile de Yandex est devenue personnelle

Police du texte

La police sur la bannière ne doit pas dépasser la hauteur et la largeur lettre majuscule Police « F » « Arial Bold » 36 pt pour une ligne (soit la hauteur et la largeur d'un carré de 26 px de côté) ; police pas plus de 25 pt (carré de 20 px de côté) - pour deux lignes ; police pas plus de 20 pts (carré de 15 px de côté) - pour trois lignes.

La taille minimale de la police est de 11 pt (dans les logos, messages, illustrations, clauses de non-responsabilité). L'exception concerne les photos d'emballage, les photos de produits et les captures d'écran.

Position du texte

La distance entre le bord de la bannière et le texte doit être d'au moins 10 px.

Note.

Cette exigence ne s’applique pas à l’emplacement de l’étiquette d’âge.

Taille du logo

Le logo ou l'icône d'une marque, d'un produit ou d'une technologie ne doit pas occuper plus de 10 % de la surface de la bannière.

Couleur de fond

Un fond fractionnaire complexe (petits éléments sur tout le plan) sous le texte ou un fond similaire en teinte à la police. Le texte doit contraster avec le fond et être facile à lire.

Fond jaune sur la bannière, puisque cette couleur est utilisée dans éléments standards Conception de pages Yandex. Acceptable jaune- #f0e5ad et plus léger.

Cadre obligatoire

Il doit y avoir un cadre sur tout le contour de la bannière, contrastant avec l'arrière-plan de la bannière à tout point de contact. Épaisseur du cadre - 1px. La couleur la plus appropriée est #dadada.

Durée de l'animation

Bannière ou la sienne éléments individuels ne doit pas cligner des yeux, ce qui empêcherait l'utilisateur d'interagir avec la page.

Fréquence acceptable de changement d'éléments sur la bannière - pas plus d'une fois toutes les deux secondes.

L'animation dans une bannière ne peut être mise en œuvre que de manière cyclique. Durée d'un cycle d'animation - pas plus de 18 secondes, pause entre les cycles - pas moins de 60 secondes. Peut être ajouté à une bannière HTML5 bouton de commande Revoir, en cliquant sur ce qui mène à relancer scénario. La bannière HTML5 elle-même peut être interactive et peut répondre au mouvement du curseur de la souris et/ou cliquer sur la bannière, changeant l'image sur la bannière en fonction de l'action effectuée.

Lisibilité des informations obligatoires

Éléments d'interface sur une bannière

La bannière ne doit pas être déguisée en éléments interface utilisateur- par exemple, sous fenêtre système Fenêtres.

Vous ne devez pas utiliser de jaune dans les éléments d'interface, car cette couleur est utilisée dans les éléments de conception de page Yandex standard. La couleur jaune acceptable est #f0e5ad et plus claire.

Étiquette d'âge

Si une marque d'âge est requise sur la bannière, alors :

La marque d'âge doit être placée dans le coin supérieur droit de la bannière.

Police d'étiquette - "Arial Regular" 12 pt.

La couleur du tag est #dadada.

Note.

Si l'étiquette gris n'est pas lisible, par exemple, en raison d'un fond fractionné (petits éléments sur tout le plan), un support blanc doit être placé en dessous.

Bouton/badge de l'App Store

Dimensions maximales bouton/badge : hauteur - 40px, largeur - 140 px.

Le badge de l'App Store a les mêmes exigences que les logos.

Lisibilité des polices

90% des refus lors de la modération surviennent en raison d'une mauvaise lisibilité de la police.

N'utilisez pas d'effets ou de décorations

La décoration des polices et des aplats (ombre, trait, volume) peut compliquer la perception du message.

Réduisez le nombre de polices

N'utilisez pas plus de deux polices et styles.

N'utilisez pas plus de trois couleurs dans les polices.

Ces deux exigences ne s’appliquent pas :

• logo d'une marque, d'un produit ou d'une technologie ;
• clause de non-responsabilité ou informations légales obligatoires ;
• police d'étiquette d'âge ;
• police qui fait partie de l’illustration.

Les moteurs de recherche améliorent les résultats de recherche pour les utilisateurs appareils mobiles(smartphones, tablettes). Ces utilisateurs verront très probablement un site avec un design réactif, une mise en page dynamique, une version mobile du site ou une page Turbo.

Site Web au design réactif

Le site s'adapte à la résolution et à la taille de l'écran ; disponible via une seule URL pour tous les types d’appareils.

Mise en page dynamique

Pour visualiser depuis différents appareils mobiles, le serveur envoie une seule URL en réponse à une requête diverses options Code HTML et CSS.

Version mobile site ( domaine séparé ou sous-domaine)

Pour l'affichage à partir d'appareils mobiles, une URL distincte est utilisée (sous-domaine spécial : m.example.com, mob.example.com, etc.). À recherche mobile il s'agit d'un sous-domaine mobile, sa structure doit correspondre entièrement à la structure du domaine principal.

Page turbo

Sur la base des pages du site, des pages Turbo sont formées, dont le contenu est stocké sur le serveur Yandex. Cela permet à ces pages de se charger plusieurs fois plus rapidement que la version mobile du site.

• Des ressources doivent être disponibles pour le robot d'indexation Yandex : Mozilla/5.0 (iPhone ; CPU iPhone OS 8_1 comme Mac OS X) AppleWebKit/600.1.4 (KHTML, comme Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 (compatible ; YandexBot/3.0 ; +http://yandex .com/bots). Dans le fichier robots.txt, autorisez l'analyse des CSS et JavaScript, qui affectent l'affichage du site sur les appareils mobiles. Sinon, les pages du site risquent de ne pas apparaître correctement dans les résultats de recherche.
• Les pages du site doivent envoyer une réponse au serveur avec le code HTTP 200 OK. Vous pouvez vérifier la réponse du serveur dans Yandex.Webmaster.

N'utilisez pas les technologies Flash, Silverlight ou Applet sur des pages destinées à utilisateurs mobiles- Ces technologies peuvent ne pas être prises en charge sur les appareils mobiles.

• Placez le contenu de votre site Web de manière à ce qu'il soit aussi visible que possible sur l'écran d'un appareil mobile.
• Le contenu de la page ne doit pas s'étendre horizontalement au-delà de l'écran.
• La taille du texte en pixels doit être telle que tout le texte soit facilement lisible sur l'écran d'un appareil mobile.

Comment vérifier les pages du site mobile

Pour vérifier :

• Pages individuelles du site
• Site entier

Sélectionnez le site dont vous souhaitez vérifier la page dans la liste.

L'examen sera terminé dans un délai de deux semaines.

Note. Doubler Le site n'est pas optimisé pour les appareils mobiles ne s'affiche pas lors de la vérification d'un miroir non principal.

Après avoir vérifié la page Diagnostic → Diagnostic des chantiers Des recommandations d’optimisation apparaîtront. Yandex.Webmaster vérifie régulièrement le site. Vous pouvez configurer des notifications sur les résultats de l'analyse.

Questions et réponses sur les sites mobiles

Le contenu des versions mobile et principale du site peut-il différer ?

Vous pouvez optimiser le contenu des pages de votre site Web pour la recherche mobile. Par exemple, ne laissez que le contenu qui sera utile aux utilisateurs d'appareils mobiles. Parallèlement, le contenu des pages de la version mobile du site ne doit pas différer radicalement du contenu de la version principale du site.

Comment éviter le contenu dupliqué ?

La version principale du site et la version mobile sont perçues par le robot Yandex comme des sites distincts et sont indexées séparément les unes des autres.

Pour aider le robot à identifier correctement la version mobile du site, indiquez les URL correspondantes de la version mobile sur les pages du site principal. Par exemple, en utilisant l'élément link :

Dois-je définir une redirection vers la version mobile du site ?

Vous pouvez rediriger l'utilisateur du site principal vers la version mobile, en tenant compte du user-agent de l'appareil à partir duquel l'utilisateur consulte le site.

Dois-je ajouter une version mobile du site (domaine ou sous-domaine) à Yandex.Webmaster ?

Vous pouvez ajouter une version mobile de votre site à Yandex.Webmaster pour suivre les statistiques d'indexation des pages.

Est-il possible de créer une version mobile d'un site dans un sous-répertoire (dossier) ?

Si la version mobile du site se trouve dans le répertoire du site principal, le robot d'indexation Yandex ne pourra pas indexer correctement les données et reconnaître le site comme adapté aux mobiles. Utiliser conception réactive ou mise en page dynamique.

La version mobile sur le sous-domaine est devenue un miroir de la version principale

Cela peut arriver si le contenu des versions mobile et principale est identique. Cela n'affecte pas la reconnaissance du site comme mobile-friendly et l'affichage de la version mobile dans la recherche mobile.

Pour être honnête, Yandex a toujours eu une version mobile, qui consistait cependant uniquement en une recherche répétant la « recherche ascétique » sur http://ya.ru. Nouveau page personnelle Le moteur de recherche russe est un moteur de recherche personnalisé page d'accueil pour tous ceux qui ne peuvent pas imaginer Internet sans Yandex, et même sur la route, ne s'en séparent pas. Mais pour utiliser Yandex mobile, procurez-vous un téléphone mobile avec une largeur d'écran d'au moins 240 pixels, ou mieux smartphone moderne avec un navigateur adéquat.

Voici le message officiel du blog Yandex concernant la sortie du nouveau « petit visage » :

Nous sommes heureux d'annoncer la sortie nouvelle version principal page mobile Yandex - http://m.yandex.ru. La principale différence entre la « petite muselière » et la version précédente est la disposition informations personnelles. Si vous utilisez activement les services Yandex tels que Mail, Feed, Calendar, Money, alors en vous connectant à http://m.yandex.ru, vous découvrirez immédiatement la quantité emails non lus et de nouveaux messages dans le fil, sur le solde de l'argent et les activités planifiées. Prévisions météorologiques, taux de change, embouteillages (pour l'instant uniquement pour les Moscovites) - tout cela est également dans la nouvelle version de Yandex mobile.

Bonne nouvelle pour les utilisateurs Internet mobile(parfois toujours pas bon marché) sera qu'il est très difficile d'aller au-delà de la page mobile - tout ce qui peut vous intéresser peut en fait être trouvé par Yandex lui-même. Seule une recherche sur le Web peut vous diriger vers des pages « lourdes ».

En revenant à la page principale, il semble qu’elle n’aurait tout simplement pas pu être améliorée. Jugez par vous-même : météo, lettres, cassettes, argent, principales nouvelles, sujets populaires dans les blogs, programme TV, liens vers plans, métro, marché, catalogue... Tout cela est disponible sur page d'accueil et c'est sans compter la colonne de recherche, qui vous aidera également à trouver sur la carte adresse requise, traduire un mot ou découvrir sa signification dans dictionnaire explicatif, recherchez des produits sur le marché ou effectuez une recherche sur les blogs qui ont attiré l'attention de Yandex.

En tant que personne mobile, vous aimerez peut-être l'affiche mobile sur mobile Yandex, qui, pour la ville sélectionnée, indiquera quels films sont projetés dans moment présent, ce que vous pouvez voir dans les théâtres, ainsi que les concerts et ce qui est intéressant dans la ville pour les enfants. Il existe une recherche d'événements par intervalles de temps - dates et heures. Vous pouvez définir vos endroits préférés et toujours voir ce qui s'y passe.

En conclusion, je voudrais dire que même si le service ne représente rien de fondamentalement nouveau et révolutionnaire, il « s'intègre » de manière si organique dans le format service mobile, a fonctionné si naturellement sur le mien téléphone Symbian sur le navigateur intégré, il semble tout simplement impossible de le rendre plus utilisable. Bravo! Le leader a encore une fois prouvé qu’il l’était toujours.

Police du texte

La police de la bannière ne doit pas dépasser la hauteur et la largeur de la lettre majuscule « F » de la police « Arial Bold » 36 pt pour une ligne (soit la hauteur et la largeur d'un carré de 26 px de côté) ; police pas plus de 25 pt (carré de 20 px de côté) - pour deux lignes ; police pas plus de 20 pts (carré de 15 px de côté) - pour trois lignes.

La taille minimale de la police est de 11 pt (dans les logos, messages, illustrations, clauses de non-responsabilité). L'exception concerne les photos d'emballage, les photos de produits et les captures d'écran.

Position du texte

La distance entre le bord de la bannière et le texte doit être d'au moins 10 px.

Note.

Cette exigence ne s’applique pas à l’emplacement de l’étiquette d’âge.

Taille du logo

Le logo ou l'icône d'une marque, d'un produit ou d'une technologie ne doit pas occuper plus de 10 % de la surface de la bannière.

Couleur de fond

Un fond fractionnaire complexe (petits éléments sur tout le plan) sous le texte ou un fond similaire en teinte à la police. Le texte doit contraster avec le fond et être facile à lire.

Fond jaune sur la bannière, car cette couleur est utilisée dans les éléments de conception de page Yandex standard. La couleur jaune acceptable est #f0e5ad et plus claire.

Cadre

Le cadre ne peut se trouver que le long des bordures horizontales de la bannière.

S’il n’y a aucun élément blanc qui traverse le bord de la bannière, ou si la couleur d’arrière-plan est autre que le blanc, alors aucune bordure n’est acceptable.

S'il y a des éléments blancs qui traversent le bord de la bannière ou si la couleur d'arrière-plan de la bannière est blanche, vous devez alors ajouter une bordure contrastée de 1 px horizontalement (haut et bas). La couleur de cadre la plus appropriée est #dadada.

Durée de l'animation

La bannière ou ses éléments individuels ne doivent pas clignoter, ce qui empêcherait l'utilisateur d'interagir avec la page.

Fréquence acceptable de changement d'éléments sur la bannière - pas plus d'une fois toutes les deux secondes.

Lisibilité des informations obligatoires

Exemple bonne bannière agrandi :

Éléments d'interface sur une bannière

La bannière ne doit pas être déguisée en éléments d'interface utilisateur - par exemple, en tant qu'élément système Fenêtre Windows.

Vous ne devez pas utiliser de jaune dans les éléments d'interface, car cette couleur est utilisée dans les éléments de conception de page Yandex standard. La couleur jaune acceptable est #f0e5ad et plus claire.

Étiquette d'âge

Si une marque d'âge est requise sur la bannière, alors :

La marque d'âge doit être placée dans le coin supérieur droit de la bannière.

Police d'étiquette - "Arial Regular" 12 pt.

La couleur du tag est #dadada.

Note.

Si une marque grise n'est pas lisible, par exemple en raison d'un fond fractionné (petits éléments sur tout le plan), un support blanc doit être placé en dessous.

Bouton/badge de l'App Store

Dimensions maximales du bouton/badge : hauteur – 50 px, largeur – 150 px.

Le badge de l'App Store a les mêmes exigences que les logos.

Lisibilité des polices

90% des refus lors de la modération surviennent en raison d'une mauvaise lisibilité de la police.

N'utilisez pas d'effets ou de décorations

La décoration des polices et des aplats (ombre, trait, volume) peut compliquer la perception du message.

Réduisez le nombre de polices

N'utilisez pas plus de deux polices et styles.

N'utilisez pas plus de trois couleurs dans les polices.

Ces deux exigences ne s’appliquent pas :

• logo d'une marque, d'un produit ou d'une technologie ;
• clause de non-responsabilité ou informations légales obligatoires ;
• police d'étiquette d'âge ;
• police qui fait partie de l’illustration.

N'utilisez pas d'images/photos de mauvaise qualité

Sélectionnez l'essentiel

Les informations obligatoires sont placées séparément sur différents cadres :

• timing de l'action - dans les premières images ;
• le reste des informations (obligatoires pour le client) est placé sous la plaque "informations légales" et est disponible en survolant le curseur.

Attention.

Lors de l'affichage d'un cadre avec informations obligatoires devrait être affiché au moins trois secondes.

Fixation pendant quelques secondes et contrôle de pause

Un cadre avec les informations obligatoires (les noms des banques sont indiqués dans l'OPF) s'affiche au moins trois secondes. L'utilisateur doit pouvoir appuyer sur pause et lire le reste des informations. Si l'utilisateur n'appuie pas sur pause, l'animation dans la bannière continue.