Как проверить мобильную версию сайта: ТОП-9 требований

Как обычно проверяют мобильную версию сайта?

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

Этот подход используют многие, но назвать его правильным нельзя. В 2021-м проверять корректность работы мобильной версии нужно так же тщательно, как и основной. Ведь еще в 2018 доля интернет-серферов со смартфона сравнялась, а затем и превысила долю пользователей интернета с ПК.

О чем это говорит? О том, что количество покупок и сделок, совершенных со смартфона, тоже выросло в арифметической прогрессии.

И исследования это подтверждают.

Согласно результатам исследования «Яндекс.Маркет» и компании GfK Rus , доля покупок, сделанных с мобильных устройств, в 2019 г. составлявшая 36% от общего количества, в 2020 г. сравнялась с долей покупок с десктопных устройств.

Если вам и этих аргументов недостаточно, то вот еще два:

1. Для поисковых систем адаптивность — важный фактор ранжирования. Без нее вам не пробиться в ТОП выдачи.
2. Наличие адаптива увеличивает лояльность посетителей и уменьшает процент отказов. Даже с точки зрения репутации сайт, который нельзя посмотреть на смартфоне, — плохой знак. Как и «кривая» мобильная версия.

Убедились? Тогда давайте разберемся, что же отличает качественную мобильную версию сайта от некачественной.

9 требований к мобильной версии сайта

Крупный читабельный шрифт

Обращайте внимание на шрифт. Крупный шрифт воспринимать легче. Главное, не переборщить: во всем нужна умеренность.

Для просмотра с устройств на iOS для обычного текста используйте размер 17pt, для Android — 13sp.

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

Правильно подобранный цвет текста

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

Если у вас нестандартный фон, то для подбора оттенка шрифта рекомендую воспользоваться инструментом Color Contrast Checker. Он оценит, насколько хорошо цвета сочетаются друг с другом.

Короткие формы

Сложные длинные формы — одна из самых популярных ошибок юзабилити. Формы с большим количеством полей неудобно заполнять даже с компьютера, что уж говорить о смартфоне. Поэтому делайте формы максимально короткими везде. Доказано, что чем меньше полей — тем выше конверсия.

Крупные кликабельные элементы

Компания Apple в iPhone Human Interface Guidelines призывает делать тач-элементы размером минимум 44px на 44px. Microsoft гайдлайн рекомендует размер 34px, а минимально допустимый 26px.

Но как по мне, тут все просто! Кликабельные элементы делайте такими, чтоб в них удобно было попадать (тыкать, да-да!) пальцем!

Заданный тип формы

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

Внесу ясность. Этот тип раскладки действительно встроен в смартфоны, но вот вызывает его короткая директива input type="tel«. Именно она указывает, что это поле для ввода телефонного номера и для этого поля нужно использовать другой тип раскладки.

Кликабельные контакты

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

Звонок или почтовый клиент должны открываться простым нажатием на контакт.

Нет перекрывающих всплывающих окон

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

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

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

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

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

Нет горизонтальной прокрутки

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

Интерактивные элементы

Интерактивные элементы реализуйте при помощи HTML5. В этом случае вы будете уверены в их правильной работе. Не используйте Silverlight-плагины и Applet — это уменьшает скорость загрузки страницы и тормозит работу мобильных устройств.

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

Помимо личной визуальной оценки и юзабилити-тестов, используйте инструмент Google для мобильных устройств ­— введите ссылку на сайт и нажмите «Проверить страницу».

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