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

Чек-лист: 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:

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

Все технологии поддерживаются
Технологии 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, проверяющий оптимизацию сайта для мобильных устройств.

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