Рассылка
SEOЧек-листыУдобство просмотра с мобильных устройств

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

2021-05-12
(11)
Удобство просмотра с мобильных устройств

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

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

Корректно указан мета-тег viewport
Пункт №1 - Корректно указан мета-тег viewport.

Мета-тег viewport указан на странице со значением width=device-width. Именно благодаря этому мобильный браузер поймет что сайт нужно отрисовывать под ширину экрана устройства пользователя.

Контент умещается по ширине
Пункт №2 - Контент умещается по ширине.

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

Проблема возникает чаще всего из-за того что изображениям не указана в CSS максимальная ширина (свойство max-width: 100%) или блоки на странице имеют дополнительные отступы/рамки при ширине в 100% (исправляем это свойством box-sizing: border-box или max-width: calc(100% - 30px)).

Отсутствие неподдерживаемых элементов
Пункт №3 - Отсутствие неподдерживаемых элементов.

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

Шрифт легко читается
Пункт №4 - Шрифт легко читается.

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

Доступные навигационные элементы
Пункт №5 - Доступные навигационные элементы .

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

Высокая скорость загрузки
Пункт №6 - Высокая скорость загрузки.

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

Чек-лист по скорости загрузки - тут.

Визуальная стабильность макета
Пункт №7 - Визуальная стабильность макета.

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

Полям форм указаны корректные типы
Пункт №8 - Полям форм указаны корректные типы.

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

Список возможных типов:

Скрытые блоки
Пункт №9 - Скрытые блоки.

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

Скрытые страницы
Пункт №10 - Скрытые страницы.

Проверяем удобство использования скрытых страниц, на которые может попасть пользователь (но не может поисковый робот):

Поисковые подсказки
Пункт №11 - Поисковые подсказки.

Выводите подсказки в поиске по сайту (как по категориям, так и по товарам). Выделяйте вхождение искомого текста в результатах жирным шрифтом или цветом.

Используйте HTTPS
Пункт №12 - Используйте HTTPS.

Даже если у вас на сайте нет форм, используйте только HTTPS, давно пора уже забыть про HTTP.

При использовании HTTP мобильные операторы подменяют контент сайта добавляя свою рекламу!

Обсуждение на Хабре - https://habr.com/ru/post/506218/

Изображения под устройства
Пункт №13 - Изображения под устройства.

Атрибут srcset у тега img позволяет отдавать разные изображения в зависимости от экрана или плотности пикселей устройства, с которого зашел пользователь. Зачем пользователю открывающему сайт со смартфона загружать большое изображение для компьютера?

Быстрая навигация по контенту
Пункт №14 - Быстрая навигация по контенту.

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

Простые формы
Пункт №15 - Простые формы.

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

Отсутствует бесконечный скролл
Пункт №16 - Отсутствует бесконечный скролл.

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

Почему он плох:

Вместо него лучше разместить ссылки на страницы пагинации и/или кнопка "показать ещё".

Отсутствует перекрытие блоков
Пункт №17 - Отсутствует перекрытие блоков.

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

Минимум фиксированных блоков
Пункт №18 - Минимум фиксированных блоков.

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

Сохранение введенных данных
Пункт №19 - Сохранение введенных данных.

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

Листинг в 2 колонки
Пункт №20 - Листинг в 2 колонки.

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

Липкие кнопки действия
Пункт №21 - Липкие кнопки действия.

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

Оцени чек-лист
Илья Горбачев - автор SEO Rocket
Автор чек-листа
Илья Горбачев
Head of SEO Rocket. Продвигал основные сайты крупнейших банков, заправочных сетей, автодилеров и интернет-магазинов. Спикер конференций Optimization, SEO без воды и SEOClubSpb.