9257 Знания

Чек-лист: 14 правил мобилопригодного сайта

Как оптимизировать сайт под мобильные устройства и проверить мобилопригодность ресурса.

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


Больше половины пользователей покупает с мобильного


Исследователи из «PayPal» и агентства «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">

   

Пример мобильной версии сайта
Мобильная и полная версия на смартфоне


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

Минусы: придется оптимизировать и администрировать версии отдельно, тратить больше ресурсов, настраивать редиректы. Разработка мобильной версии стоит дороже адаптива.

Адаптивная верстка

Интерфейс сайта подстраивается под разрешение экрана гаджета, для всех устройств один URL.

Область просмотра контента устанавливают тегом Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">.

Если не установить тег, вся десктопная область просмотра уменьшится в масштабе и уместится на экране.

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


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

Минусы: нельзя сделать разный контент для пользователей с мобильного и десктопа, нет возможности посмотреть десктопную версию со смартфона, сложно внедрить уже существующим сайтам.

RESS

Технология адаптирования сайта для мобильного на стороне сервера. В зависимости от типа устройства сервер отправляет пользователю один из вариантов кода HTML и CSS.

мобилопригодный сайт пример
Отображение сайта со смартфона


Плюсы: возможность облегчить код для мобильного, настройка разных предложений для разных устройств, к примеру, пользователям на Android можно предложить установить приложение из Google Play.

Минусы: проблемы с непопулярными моделями гаджетов, реализация дороже и сложнее. Веб-мастера часто выводят и мобильный, и десктопный шаблоны в коде и закрывают ненужную версию «display: none». Это ошибка, из-за которой загрузка станет медленнее, а бот может некорректно отображать сайт.

Выбор версии адаптива зависит от возможностей компании: мы бы рекомендовали адаптивную верстку как самый простой вариант, но если вам важен разный контент для мобильных и десктопных пользователей, рассмотрите вариант с мобильной версией.

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


Чек-лист оптимизации сайта под мобильные устройства


  1. Адаптив работает корректно
  2. Об особенностях адаптивных версий мы писали выше. Для мобильной версии указывают URL в коде основных страниц, для адаптивного шаблона устанавливают область просмотра тегом Viewport.

  3. Сайт доступен для роботов
  4. Сделать ресурс доступным для индексирующих роботов нужно в файле robots.txt: разрешите сканирование CSS и JavaScript, от них зависит, будет ли сайт корректно отображаться с мобильных.

  5. Ответ 200 ОК
  6. Если сервер отправляет ответ с HTTP-кодом 200 OK, значит со страницей все в порядке: она доступна для просмотра и корректно отображается в выдаче.

    Проверить HTTP-статусы сайта и доменного имени и их значение можно с помощью инструмента проверки заголовков сервера от PR-CY.

    проверка мобилопригодности сайта онлайн
    Фрагмент проверки инструментом


    Почитать по теме:
    Что означает код ответа сервера
  7. Все технологии поддерживаются
  8. Технологии Flash, Java-апплеты и плагины Silverlight могут не поддерживаться на мобильных, поэтому рекомендуем отключить их и встраивать контент с помощью HTML5. Тяжелый интерактив нужно облегчить или отказаться от него ради быстрой загрузки.

  9. Только вертикальная прокрутка
  10. Горизонтальная прокрутка — маркер устаревшего сайта. На десктопе и мобильном гаджете должна быть только вертикальная прокрутка контента, тогда пользователю не придется двигать страницу в стороны для чтения.

  11. Крупные значки
  12. Сложно попасть пальцем в мелкий значок на экране телефона. Средняя ширина подушечки пальца — около 10 мм, поэтому рекомендуем делать кликабельные элементы крупными и размещать их на расстоянии друг от друга, чтобы избежать ложных нажатий. В рекомендациях по интерфейсу приложений на Android для активных элементов советуют ширину не менее 7 мм или 48 пикселей CSS на сайте.

    каким должен быть мобилопригодный сайт
    Крупные элементы на сайте


  13. Крупный шрифт
  14. Мелкий шрифт читать неудобно — приходится масштабировать страницу, чтобы не напрягать зрение. Сделайте шрифт крупным, увеличьте высоту строки пропорционально размеру шрифта — около 140% от кегля текста. Для просмотра с устройств на iOS для обычного текста рекомендуют размер 17pt, для Android — 13sp. Исследование Baymard Institute показывает, что оптимальная длина строки — 50-60 символов с пробелами. Ориентируйтесь на аудиторию, если ваши пользователи — люди пенсионного возраста, им будет удобно читать текст покрупнее.

    страница адаптивного сайта
    Текст на странице с рецептами



  15. Контрастный текст
  16. Для текста рекомендуем подбирать не строго контрастные цвета: от темного-серого текста на белом фоне глаза устают меньше, чем от черного на белом.

    Инструмент Color Contrast Checker поможет подобрать сочетание цветов текста и фона.

    инструмент подбора шрифта
    Фрагмент работы с инструментом



  17. Всплывающие окна не закрывают контент
  18. У пользователей кроме баннерной слепоты развивается pop-up-слепота — желание закрыть всплывающее окно, не читая содержимого. На мобильном интерактивные элементы и всплывающие окна мешают читать полезный контент, а на некоторых устройствах их сложно закрыть: неудобно попасть на крестик или он не умещается в интерфейс. Рекомендуем скрыть такие окна и оставить только необходимые для общения с продавцом.

    адаптивный дизайн интернет-магазина
    Иконки мессенджеров убраны под панель


  19. Быстрая загрузка
  20. Пользователи с мобильных устройств могут подождать на пару секунд дольше, чем с десктопа, но чем быстрее загрузится страница, тем меньше вероятность, что ее закроют. Оптимизируйте страницу для ускорения.

    Почитать по теме:
    Как увеличить скорость загрузки страницы

    Сайты с медленной загрузкой теряют позиции в выдаче Google из-за алгоритма Google Speed Update.

    Сколько секунд должен загружаться сайт?
    Конкретных лимитов нет, скорость загрузки сайта зависит и от скорости интернета, поэтому у разных пользователей она может несколько различаться. Джон Мюллер из Google в 2016 году называл около 2-3 секунд для ориентира.

    Проверить скорость загрузки можно инструментом «Проверка скорости сайта», он посчитает скорость и даст советы по оптимизации.

    проверка скорости загрузки сайта
    Пример результатов проверки


  21. Отдельный фавикон
  22. Для мобильных устройств нужен отдельный упрощенный фавикон. Он отображается в избранных ссылках и на рабочем столе смартфона, если пользователь сохраняет сайт для быстрого доступа. В коде фавикон для мобильных прописывают в блоке , как и обычный favicon.ico.

    иконки сайта на экране пример
    Иконки сайтов на экране смартфона


  23. Упрощенная регистрация
  24. На экране смартфона неудобно вводить много данных для регистрации. Рекомендуем сократить количество полей и сделать доступной регистрацию через социальные сети.

    Регистрация на сайте с мобильного
    Быстрая регистрация


  25. Использование геоданных
  26. Телефоны передают географическое положение владельца, эту информацию можно использовать, чтобы упростить заполнение адреса доставки товара.

    автозаполнение адреса при покупке на сайте
    Автозаполнение города


  27. Упрощенный звонок в компанию
  28. Рекомендуем сделать активным номер телефона, чтобы при нажатии на него пользователю оставалось только сделать вызов. Это настраивается с помощью кода:

    <a href="tel:+74952235555">Call me</a>

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

    звонок с сайта в мобильной версии
    Экспорт номера телефона в журнал вызовов


    Почитать по теме:
    Повышаем юзабилити: звонок в компанию по клику с сайта


Как проверить мобилопригодность: бесплатные инструменты


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

Инструмент от Google, проверяющий оптимизацию сайта для мобильных устройств.

Проверка мобилопригодности сайта онлайн
Фрагмент результатов проверки


Проверить сайт можно прямо в SERP: если ввести в поисковик «mobile friendly», появится поле для ввода адреса сайта.

проверка мобилопригодности google
Проверка в SERP


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

Проверка мобилопригодности в яндексе
Фрагмент результатов проверки


Анализ сайта от PR-CY проверяет ресурс по более 70 параметрам, включая и мобилопригодность. К каждому пункту проверки дает пояснение и совет. Для проверки оптимизации хватит функциональности бесплатной версии.

проверка мобилопригодности онлайн
Фрагмент результатов проверки




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

Адаптируем сайт для мобильных устройств: подборка постов
Google: не нужно копировать плохие практики других веб-мастеров
«Черная пятница» в PR-CY — 50% на «Анализ сайта»!
Комментарии (1)
Здесь был комментарий, который удалил модератор.

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии, т.к. она очень старая.