Сегодня в задачи SEO входит не только техническая и текстовая оптимизацию сайта и наращивание ссылочной массы, но и повышение удобства сайта для пользователей, повышение конверсии страниц. Ведь именно это в конечном счёте повлияет на поведенческие факторы сайта, что имеет весомое значение для ранжирования в Яндексе.
С помощью этого чек-листа вы сможете быстро проверить удобство просмотра сайта и его страниц с мобильных устройств.
Мета-тег viewport указан на странице со значением width=device-width. Именно благодаря этому мобильный браузер поймет что сайт нужно отрисовывать под ширину экрана устройства пользователя.
Контент страницы сайта не должен превышать ширину экрана устройства, то есть не должно быть горизонтального скролла всей страницы (но допускается горизонтальный скролл в рамках таблиц).
Проблема возникает чаще всего из-за того что изображениям не указана в CSS максимальная ширина (свойство max-width: 100%) или блоки на странице имеют дополнительные отступы/рамки при ширине в 100% (исправляем это свойством box-sizing: border-box или max-width: calc(100% - 30px)).
На страницах не должно быть тех элементов, которые не воспроизводятся на мобильных устройствах:
Шрифт должен иметь достаточный размер чтобы любой текст на странице легко читался с мобильных устройств.
По навигационным и интерактивным элементам должно быть легко попасть и сложно промахнуться. Иначе говоря, кнопки и ссылки должны иметь большой размер и находиться на достаточном расстоянии друг от друга.
Загрузка страницы должна быть построена так, чтобы максимально быстро был отрисован первый экран. После него нужно максимально быстро отрисовать основной контент страницы и лишь затем все остальное.
Чек-лист по скорости загрузки - тут.
Во время загрузки сайта блоки на странице должны загружаться последовательно, сверху-вниз. Не должно быть ситуации когда уже отрисован первый экран и вдруг посреди него появляется новый блок, сдвигающий все последующие.
В современных смартфонах реализованы специальные удобные клавиатуры для ввода электронной почты и номера телефона. Но, чтобы смартфон понял какую клавиатуру выводить пользователю, нужно указать соответствующий тип для поля ввода.
Список возможных типов:
Проверяем отображение блоков скрытых за интерактивным взаимодействием (например, меню скрытое до клика по бургеру). Если текст удобно читать, а навигационные элементы удобно нажимать, то всё в порядке.
Проверяем удобство использования скрытых страниц, на которые может попасть пользователь (но не может поисковый робот):
Выводите подсказки в поиске по сайту (как по категориям, так и по товарам). Выделяйте вхождение искомого текста в результатах жирным шрифтом или цветом.
Даже если у вас на сайте нет форм, используйте только HTTPS, давно пора уже забыть про HTTP.
При использовании HTTP мобильные операторы подменяют контент сайта добавляя свою рекламу!
Обсуждение на Хабре - https://habr.com/ru/post/506218/
Атрибут srcset у тега img позволяет отдавать разные изображения в зависимости от экрана или плотности пикселей устройства, с которого зашел пользователь. Зачем пользователю открывающему сайт со смартфона загружать большое изображение для компьютера?
Выводите блок с навигацией по контенту. Это относится не только к блоку с содержанием для статей. На страницах товаров или услуг также можно выводить такой блок, в результате чего пользователь сможет оценить содержимое страницы и быстро перейти к интересующей его части.
Сокращаем формы до минимально нужного количества полей. Обязательно выводим названия полей форм. Причём названия должны отображаться даже у заполненных полей.
На сайте не должно быть бесконечного скролла. Он возникает при бесконечной догрузке элементов листинга после.
Почему он плох:
Вместо него лучше разместить ссылки на страницы пагинации и/или кнопка "показать ещё".
Фиксированные блоки не должны перекрывать друг друга. Чаще всего перекрытие возникает из-за онлайн-консультантов, которые меняют свой вид и положение на смартфоне в сравнении с компьютером.
Фиксированные блоки должны помогать пользователю выполнять свою задачу, а не мешать изучать страницу, закрывая основной контент.
Если пользователь ввел данные в форму (заполнил часть полей), но случайно закрыл страницу - его данные не должны быть утеряны.
Вывод товаров в 2 колонки на мобильных устройствах позволяет быстрее изучать ассортимент и повышает конверсию.
На товарной странице кнопка действия должна быть всегда в видимой области пользователя. Ведь он может решиться купить в любой момент: просмотра фото, изучения характеристик или чтения отзывов.
