Мобильная версия яндекса. Мобильная версия яндекса стала персональной

Честно говоря, Яндекс всегда имел мобильную версию, которая, правда, состояла только из поиска, который повторял «аскетичный поиск» по адресу http://ya.ru . Новая персональная страница русского поисковика — это персонализированная стартовая страница для всех тех, кто не представляет интернет без Яндекса, и даже в дороге не расстается с ним. Вот только для пользования мобильным Яндексом обзаводитесь мобильником с шириной экрана не менее 240 точек, а лучше современным смартфоном с адекватным браузером.

Вот официальное сообщение из блога Яндекса о выпуске новой «маленькой морды»:

С радостью сообщаем о выходе новой версии главной мобильной страницы Яндекса — http://m.yandex.ru . Основное отличие «маленькой морды» от предыдущего варианта — предоставление персональной информации. Если вы активно пользуетесь такими сервисами Яндекса как Почта, Лента, Календарь, Деньги, то, залогинившись на http://m.yandex.ru , вы сразу узнаете о количестве непрочитанных писем и новых сообщений в Ленте, об остатке Денег и запланированных делах. Прогноз погоды, курсы валют, пробки (пока только для москвичей) — всё это тоже есть в новой версии мобильного Яндекса.

Приятной новостью для пользователей мобильного интернета (иногда все еще не дешёвого) станет то, что выйти за пределы мобильной страницы очень непросто — все, что вас может интересовать и правда может быть найдено силами самого Яндекса. Только веб-поиск может перекинуть вас на «тяжёлые» страницы.

Возвращаясь к главной странице, кажется, что сделать ее лучше просто нельзя было. Судите сами: погода, письма, записи Ленты, деньги, главные новости, популярные темы в блогах, телепрограмма, ссылки на карты, метро, маркет, каталог… Все это доступно с главной страницы и это не считая графы поиска, которая еще и поможет вам найти на карте нужный адрес, перевести слово или узнать его значение в толковом словаре, найти товары в маркете или поискать по блогам, которые попали в поле зрения Яндекса.

Как для человека мобильного, вам может понравится мобильная Афиша на мобильном Яндексе, которая по выбранному городу покажет какие фильмы идут в настоящий момент, что можно посмотреть в театрах, а также, какие идут концерты и что есть интересного в городе для детей. Есть поиск событий по временным интервалам — датам и часам. Можно задать ваши любимые места и всегда видеть что происходит в них.

В заключение хочется сказать, что сервис хоть и не представляет ничего принципиально нового и революционного, но настолько органично «вписался» в формат мобильного сервиса, настолько природно работал на моем Symbian телефоне на встроенном браузере, что сделать более юзабельно, кажется, просто невозможно. Браво! Лидер снова доказал, что он таковым пока и является.

Поисковые системы улучшают выдачу результатов поиска для пользователей мобильных устройств (смартфонов, планшетов). Таким пользователям вероятнее всего будет показан сайт с адаптивным дизайном, динамической версткой страниц, мобильная версия сайта или Турбо-страница .

Сайт с адаптивным дизайном

Сайт подстраивается под разрешение и размер экрана; доступен по одному URL для всех типов устройств.

Динамическая верстка страниц

Для просмотра с разных мобильных устройств сервер отправляет в ответ на запрос одного URL различные варианты кода HTML и CSS.

Мобильная версия сайта (отдельный домен или поддомен)

Для просмотра с мобильных устройств используется отдельный URL (специальный поддомен: m.example.com , mob.example.com и пр.). Чтобы в мобильном поиске участвовал мобильный поддомен, его структура должна полностью соответствовать структуре основного домена.

Турбо-страница

На основе страниц сайта формируются Турбо-страницы , содержимое которых хранится на сервере Яндекса. Это позволяет загружать эти страницы в несколько раз быстрее мобильной версии сайта.

Ресурсы должны быть доступны для индексирующего робота Яндекса: Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 (compatible; YandexBot/3.0; +http://yandex.com/bots) . Разрешите в файле robots.txt сканирование CSS, JavaScript, от которых зависит отображение сайта на мобильных устройствах. Иначе страницы сайта могут некорректно отображаться в результатах поиска.
Страницы сайта должны отправлять серверу ответ с HTTP-кодом 200 OK. Вы можете проверить ответ сервера в Яндекс.Вебмастере.

Не используйте технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей - эти технологии могут не поддерживаться на мобильных устройствах.

Размещайте контент вашего сайта таким образом, чтобы он был максимально виден на экране мобильного устройства.
Содержимое страниц не должно выходить за рамки экрана по горизонтали.
Размер текста в пикселях должен быть таким, чтобы весь текст удобно читался на экране мобильного устройства.

Как проверить мобильные страницы сайта

Чтобы проверить:

Отдельные страницы сайта
Весь сайт

Выберите из списка сайт, страницу которого хотите проверить.

Проверка завершится в течение двух недель.

Примечание. Строка Сайт не оптимизирован для мобильных устройств не отображается при проверке неглавного зеркала.

После проверки на странице Диагностика → Диагностика сайта появятся рекомендации по оптимизации. Яндекс.Вебмастер регулярно проверяет сайт. Вы можете настроить уведомления о результатах проверки.

Вопросы и ответы про мобильные сайты

Может ли отличаться контент мобильной и основной версии сайта?

Вы можете оптимизировать содержание страниц сайта для мобильного поиска. Например, оставить только тот контент, который будет полезен пользователям мобильных устройств. При этом содержание страниц мобильной версии сайта не должно кардинально отличаться от контента основной версии сайта.

Как избежать дублирования контента?

Основная версия сайта и мобильная воспринимаются роботом Яндекса как отдельные сайты и индексируются отдельно друг от друга.

Чтобы помочь роботу правильно определить мобильную версию сайта, укажите на страницах основного сайта соответствующие URL мобильной версии. Например, с помощью элемента link:

Надо ли устанавливать перенаправление на мобильную версию сайта?

Вы можете перенаправлять пользователя с основного сайта на мобильную версию, учитывая user-agent устройства, с которого пользователь просматривает сайт.

Надо ли добавлять мобильную версию сайта (домен или поддомен) в Яндекс.Вебмастер?

Вы можете добавить мобильную версию сайта в Яндекс.Вебмастер, чтобы отслеживать статистику индексирования страниц.

Можно ли создать мобильную версию сайта в подкаталоге (папке)?

Если мобильная версия сайта находится в директории основного сайта, индексирующий робот Яндекса не сможет корректно проиндексировать данные и признать сайт мобилопригодным. Используйте адаптивный дизайн или динамическую верстку.

Мобильная версия на поддомене стала зеркалом основной версии

Такое может произойти, если содержимое мобильной и основной версии идентично. На признание сайта мобилопригодным и показ мобильной версии в мобильном поиске это не влияет.

Шрифт текста

Шрифт на баннере не должен превышать высоту и ширину заглавной буквы «Ф» шрифта «Arial Bold» 36 pt для одной строки (т. е. высоту и ширину квадрата со сторонами 26 px); шрифт не более 25 pt (квадрат со сторонами 20 px) - для двух строк; шрифт не более 20 pt (квадрат со сторонами 15 px) - для трех строк.

Минимальный размер шрифта - 11 pt (в логотипах, сообщении, иллюстрациях, дисклеймерах). Исключение - фото упаковок, фото товаров и снимки экранов.

Расположение текста

Расстояние от края баннера до текста должно быть не меньше 10 px.

Примечание.

Требование не относится к расположению возрастной метки.

Размер логотипа

Логотип или значок бренда, продукта, технологии должен занимать не больше 10% площади баннера.

Цвет фона

Сложный дробный фон (мелкие элементы по всей плоскости) под текстом или фон, близкий по оттенку к шрифту. Текст должен быть контрастным по отношению к фону и легко читаемым.

Желтый фон на баннере, так как этот цвет используется в стандартных элементах дизайна страниц Яндекса. Допустимый желтый цвет - #f0e5ad и светлее.

Рамка

Рамка может быть только по горизонтальным границам баннера.

Если нет белых элементов, которые пересекают край баннера, или цвет фона отличается от белого, то допускается отсутствие рамки.

Если есть белые элементы, которые пересекают край баннера, или цвет фона баннера белый, то необходимо добавить контрастную рамку 1 px по горизонтали (сверху и снизу). Наиболее подходящий цвет рамки - #dadada.

Длительность анимации

Баннер или его отдельные элементы не должны мигать, отвлекая пользователя от взаимодействия со страницей.

Допустимая частота смены элементов на баннере - не чаще одного раза в две секунды .

Читаемость обязательной информации

Пример хорошего баннера в увеличенном виде:

Элементы интерфейса на баннере

Баннер не должен маскироваться под элементы пользовательского интерфейса - например, под системное окно Windows.

Не следует использовать желтый в элементах интерфейса, так как этот цвет используется в стандартных элементах дизайна страниц Яндекса. Допустимый желтый цвет - #f0e5ad и светлее.

Возрастная метка

Если на баннере необходима возрастная метка, то:

Возрастную метку нужно ставить в верхнем правом углу баннера.

Шрифт метки - «Arial regular» 12 pt.

Цвет метки - #dadada.

Примечание.

Если метка серого цвета не читается, например, из-за дробного фона (мелкие элементы по всей плоскости), под нее следует поставить белую подложку.

Кнопка/бейдж магазина приложений

Максимальные размеры кнопки/бейджа: высота - 50px, ширина - 150 px.

К бейджу магазина приложений предъявляются такие же требования, как к логотипам.

Читаемость шрифта

90% отказов при прохождении модерации случаются из-за плохой читаемости шрифта.

Не используйте эффекты и украшательства

Украшательство шрифтов и плашек (тень, обводка, объем) может усложнить восприятие сообщения.

Уменьшите количество шрифтов

Используйте не больше двух шрифтов и начертаний.

Используйте не больше трех цветов в шрифтах.

Эти два требования не относятся к:

логотипу бренда, продукта или технологии;
дисклеймеру или обязательной правовой информации;
шрифту возрастной метки;
шрифту, который является частью иллюстрации.

Не используйте изображения/фото низкого качества

Выберите главное

Разделение на кадры

Обязательная информация размещается отдельно на разных кадрах:

сроки акции - на первых кадрах;
остальная информация (обязательная для клиента) - размещается под плашкой «юридическая информация» и доступна по наведению курсора.

Внимание.

При показе кадр с обязательной информацией должен отображаться не менее трех секунд .

Фиксация на несколько секунд и управление паузой

Кадр с обязательной информацией (указаны названия банков в ОПФ) отображается не менее трех секунд . У пользователя должна быть возможность нажать на паузу и ознакомиться с остальной информацией. Если пользователь не нажал на паузу, анимация в баннере продолжается.

Шрифт текста

Расположение текста

Расстояние от края баннера до текста должно быть не меньше 10 px.

Примечание.

Требование не относится к расположению возрастной метки.

Размер логотипа

Логотип или значок бренда, продукта, технологии должен занимать не больше 10% площади баннера.

Цвет фона

Обязательная рамка

По всему контуру баннера должна быть рамка, контрастная фону баннера в любом месте соприкосновения. Толщина рамки - 1px. Наиболее подходящий цвет - #dadada.

Длительность анимации

Баннер или его отдельные элементы не должны мигать, отвлекая пользователя от взаимодействия со страницей.

Допустимая частота смены элементов на баннере - не чаще одного раза в две секунды .

Анимация в баннере может быть реализована только циклично. Длительность одного цикла анимации - не больше 18 секунд , перерыв между циклами - не меньше 60 секунд . В HTML5-баннере может быть добавлена управляющая кнопка Посмотреть еще раз , нажатие на которую приводит к повторному запуску сценария. Сам HTML5-баннер может быть интерактивным и может реагировать на движение курсора мыши и/или клик по баннеру, изменяя изображение на баннере в зависимости от произведенного действия.

Читаемость обязательной информации

Элементы интерфейса на баннере

Возрастная метка

Если на баннере необходима возрастная метка, то:

Возрастную метку нужно ставить в верхнем правом углу баннера.

Шрифт метки - «Arial regular» 12 pt.

Цвет метки - #dadada.

Примечание.

Кнопка/бейдж магазина приложений

Максимальные размеры кнопки/бейджа: высота - 40px, ширина - 140 px.

К бейджу магазина приложений предъявляются такие же требования, как к логотипам.

Читаемость шрифта

90% отказов при прохождении модерации случаются из-за плохой читаемости шрифта.

Не используйте эффекты и украшательства

Украшательство шрифтов и плашек (тень, обводка, объем) может усложнить восприятие сообщения.

Уменьшите количество шрифтов

Используйте не больше двух шрифтов и начертаний.

Используйте не больше трех цветов в шрифтах.

Эти два требования не относятся к:

логотипу бренда, продукта или технологии;
дисклеймеру или обязательной правовой информации;
шрифту возрастной метки;
шрифту, который является частью иллюстрации.