Больше половины пользователей покупает с мобильного Как поисковики ранжируют мобилопригодные сайты Выбор адаптивного шаблона сайта Чек-лист оптимизации сайта под мобильные устройства Как проверить мобилопригодность: бесплатные инструменты Мобилопригодным считается сайт, на котором пользователю удобно работать с мобильных устройств. К такому сайту лучше относятся поисковики Яндекс и Google.
Больше половины пользователей покупает с мобильного
Исследователи из агентства «Data Insight» в апреле 2018 году изучили способы, которыми россияне покупают в интернете. В городах-миллионниках и средних городах около половины жителей покупают и ищут информацию о товарах со смартфона.
Процент покупающих со смартфона
Пользователи покупают с мобильного, потому что так удобнее искать и сравнивать товары.
Причины мобильных покупок
Если магазин не отвечает этому условию, он теряет мобильный трафик и покупателей.
Как поисковики ранжируют мобилопригодные сайты
Оптимизированные под смартфоны сайты нравятся поисковикам. Яндекс и Google учитывают мобилопригодность при ранжировании в числе других факторов. По исследованию 2018 года, которое провела Лаборатория поисковой аналитики компании «Ашманов и партнеры», в топ-30 и топ-3 десктопной выдачи Яндекса и Google попало больше мобилопригодных сайтов с адаптивной версткой. По сравнению с 2017 годом показатели выросли.
Процент сайтов с адаптивной версткой в выдаче
Учитывать мобилопригодность страниц в ранжировании Яндекс начал с февраля 2015 года, когда ввел алгоритм «Владивосток».
С марта 2018 Google ввел Mobile first index и постепенно переводит на него сайты. Раньше пользователю на мобильном устройстве показывали результаты из мобильного индекса, а на компьютере показывали из десктопного, сейчас независимо от устройства выдача будет мобильной. Перевод в мобильный индекс еще не завершен, по словам представителей он займет несколько лет.
Выбор адаптивного шаблона сайта
Для придания сайта мобильной адаптивности используют один из вариантов: мобильную версию, адаптивную или динамическую верстку — RESS (Responsive Design + Server Side).
Мобильная версия
Отдельный сайт на поддомене, сервер учитывает user-agent устройства пользователя и перенаправляет его на версию для мобильного просмотра. К URL-адресу обычно добавляется «m.».
Основная и мобильная версии поисковыми роботами воспринимаются и индексируются отдельно. На страницах основного сайта должны быть указаны URL мобильной версии, к примеру, с помощью link:
< link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html">http://m.site.com/page.html">http://m.site.com/page.html">http://m.site.com/page.html"/ >
Мобильная и полная версия на смартфоне
Плюсы: можно сделать ее отличной от десктопной: облегчить или добавить дополнительную функциональность, настроить разный контент, разместить другие акции, при необходимости пользователь может перейти на полную версию.
Минусы: придется оптимизировать и администрировать версии отдельно, тратить больше ресурсов, настраивать редиректы. Разработка мобильной версии стоит дороже адаптива.
Адаптивная верстка
Интерфейс сайта подстраивается под разрешение экрана гаджета, для всех устройств один URL.
Область просмотра контента устанавливают тегом Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">.
Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.
Версия без адаптации и с адаптацией для мобильного
Плюсы: достаточно внести изменения в десктопную версию, не нужно продвигать две версии отдельно, работа над адаптивной версткой дешевле и проще.
Минусы: нельзя сделать разный контент для пользователей с мобильного и десктопа, нет возможности посмотреть десктопную версию со смартфона, сложно внедрить уже существующим сайтам.
RESS
Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.
Отображение сайта со смартфона
Плюсы: возможность облегчить код для мобильного, настройка разных предложений для разных устройств, к примеру, пользователям на Android можно предложить установить приложение из Google Play.
Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.
Выбор версии адаптива зависит от возможностей компании: мы бы рекомендовали адаптивную верстку как самый простой вариант, но если вам важен разный контент для мобильных и десктопных пользователей, рассмотрите вариант с мобильной версией.
Придание сайту мобилопригодности не заканчивается на выборе шаблона отображения. Проверьте по чек-листу, насколько ваш ресурс оптимизирован под мобильные устройства
Чек-лист оптимизации сайта под мобильные устройства
- Адаптив работает корректно
- Сайт доступен для роботов
- Ответ 200 ОК
- Все технологии поддерживаются
- Только вертикальная прокрутка
- Крупные значки
- Крупный шрифт
- Контрастный текст
- Всплывающие окна не закрывают контент
- Быстрая загрузка
- Отдельный фавикон
- Упрощенная регистрация
- Использование геоданных
- Упрощенный звонок в компанию
Об особенностях адаптивных версий мы писали выше. Для мобильной версии указывают URL в коде основных страниц, для адаптивного шаблона устанавливают область просмотра тегом Viewport.
Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt: разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться с мобильных.
Если страница сайта отправляет ответ с HTTP-кодом 200 OK, значит с ней все в порядке: она проиндексирована и корректно отображается в выдаче.
Проверить HTTP-статусы сайта и доменного имени и их значение можно с помощью инструмента проверки заголовков сервера от PR-CY.
Фрагмент проверки инструментом
Почитать по теме:
Что означает код ответа сервера
Технологии Flash, Java-апплеты и плагины Silverlight могут не поддерживаться на мобильных, поэтому рекомендуем отключить их и встраивать контент с помощью HTML5. Тяжелый интерактив нужно облегчить или отказаться от него ради быстрой загрузки.
Горизонтальная прокрутка — маркер устаревшего сайта. На десктопе и мобильном гаджете должна быть только вертикальная прокрутка контента, тогда пользователю не придется двигать страницу в стороны для чтения.
Сложно попасть пальцем в мелкий значок на экране телефона. Средняя ширина подушечки пальца — около 10 мм, поэтому рекомендуем делать кликабельные элементы крупными и размещать их на расстоянии друг от друга, чтобы избежать ложных нажатий. В рекомендациях по интерфейсу приложений на Android для активных элементов советуют ширину не менее 7 мм или 48 пикселей CSS на сайте.
Крупные элементы на сайте
Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.
Текст на странице с рецептами
Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом.
Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.
Фрагмент работы с инструментом
У пользователей кроме баннерной слепоты развивается pop-up-слепота — желание закрыть всплывающее окно, не читая содержимого. На мобильном интерактивные элементы и всплывающие окна мешают читать полезный контент, а на некоторых устройствах их сложно закрыть: неудобно попасть на крестик или он не умещается в интерфейс. Рекомендуем скрыть такие окна и оставить только необходимые для общения с продавцом.
Иконки мессенджеров убраны под панель
Пользователи с мобильных устройств могут подождать на пару секунд дольше, чем с десктопа, но чем быстрее загрузится страница, тем меньше вероятность, что ее закроют. Оптимизируйте страницу для ускорения.
Почитать по теме:
Как увеличить скорость загрузки страницы
Сайты с медленной загрузкой теряют позиции в выдаче Google из-за алгоритма Google Speed Update.
Сколько секунд должен загружаться сайт?
Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.
Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.
Пример результатов проверки
Для мобильных устройств нужен отдельный упрощенный фавикон. Он отображается в избранных ссылках и на рабочем столе смартфона, если пользователь сохраняет сайт для быстрого доступа. В коде фавикон для мобильных прописывают в блоке <head>, как и обычный favicon.ico.
Иконки сайтов на экране смартфона
На экране смартфона неудобно вводить много данных для регистрации. Рекомендуем сократить количество полей и сделать доступной регистрацию через социальные сети.
Быстрая регистрация
Телефоны передают географическое положение владельца, эту информацию можно использовать, чтобы упростить заполнение адреса доставки товара.
Автозаполнение города
Рекомендуем сделать активным номер телефона, чтобы при нажатии на него пользователю оставалось только сделать вызов. Это настраивается с помощью кода:
<a href="tel:+74952235555">Call me</a>
Пользователю не нужно будет копировать номер и вставлять его в журнал вызовов вручную.
Экспорт номера телефона в журнал вызовов
Почитать по теме:
Повышаем юзабилити: звонок в компанию по клику с сайта
Как проверить мобилопригодность: бесплатные инструменты
Проверить оптимизацию можно бесплатно за пару кликов, подходящие инструменты есть у поисковых систем или сторонних разработчиков. Кроме оценки оптимизации инструменты дают советы по улучшению сайта.
Инструмент от Google, проверяющий оптимизацию сайта для мобильных устройств.
Фрагмент результатов проверки
Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.
Проверка в SERP
Вебмастер Яндекса тоже предлагает проверку на мобилопригодность и выводит краткий список необходимых параметров.
Фрагмент результатов проверки
Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.
Фрагмент результатов проверки
Сайты, которые не оптимизированы под мобильные устройства, теряют большую часть трафика. Проверьте свой ресурс с помощью чек-листа и сделайте его мобилопригодным, чтобы нравиться и пользователям, и поисковикам.