Удобен ли ваш сайт на телефоне? Практическая проверка

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

Почему «на моём ноутбуке всё нормально» недостаточно

Адаптивный сайт сжимается под узкий экран, но «помещается» не значит «удобен». Страница может формально адаптироваться и при этом иметь мелкий текст, слишком близкие кнопки, меню, которое прячет номер телефона, и форму, которую заполняют три минуты. К тому же Google сначала индексирует мобильную версию страниц, поэтому поисковик оценивает именно вид на телефоне, а не на компьютере.

1. Проверьте сайт так, как это сделает клиент

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

• Понять, что вы предлагаете и где работаете, не увеличивая экран
• Позвонить или написать вам за одно-два касания
• Отправить заявку через форму

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

2. Сделайте текст читаемым без увеличения

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

3. Делайте кнопки и ссылки под палец

Палец гораздо менее точен, чем мышь. Кнопки, пункты меню и телефонные ссылки должны быть не меньше примерно 44 на 44 px, с промежутками, чтобы не нажимать не туда. Главное действие должно быть очевидным: заметная кнопка «Позвонить» или «Получить расчёт» в верхней части и номер телефона в виде ссылки, по которой звонок начинается одним касанием.

4. Заставьте работать первый экран

На телефоне первый экран — это всё, что посетитель видит, прежде чем решить, прокручивать ли дальше. Он должен говорить, чем вы занимаетесь, для кого и где, и показывать один понятный следующий шаг. Большие декоративные картинки, медленные слайдеры и длинные вступления сдвигают это сообщение вниз. Подробнее — в статье про первый экран сайта.

5. Делайте формы короткими

Печатать на телефоне медленно, и там легко ошибиться. Спрашивайте только то, что нужно для ответа: имя, телефон или email и короткое сообщение. Подключите нужную клавиатуру для каждого поля (цифровую для телефона, почтовую для email), разрешите автозаполнение и сделайте кнопку отправки широкой. Кнопка WhatsApp или звонка рядом с формой даёт ещё один путь тем, кто не любит печатать. Больше идей — в материале про форму заявки.

6. Проверьте скорость на мобильном соединении

У телефонов часто слабее связь и процессор, чем у компьютера, на котором делали сайт. Тяжелее всего им приходится с огромными фото, лишними скриптами и множеством шрифтов. Сжимайте изображения, используйте современные форматы вроде WebP, подключайте только нужные шрифты и удалите плагины, которыми никто не пользуется. Бесплатный инструмент Google PageSpeed Insights показывает мобильный отчёт с конкретными рекомендациями, а в статье про скорость сайта мы объясняем, что исправлять в первую очередь.

7. Обойдите типичные мобильные ловушки

• Горизонтальная прокрутка из-за таблицы, картинки или вставки шире экрана
• Меню, которое открывается, но не закрывается, или меню, работающее только по наведению мыши
• Телефон и адрес в виде картинки: их нельзя нажать или скопировать
• Встроенные карты, которые перехватывают прокрутку и «запирают» посетителя на странице
• Прайс в PDF, который приходится увеличивать пальцами
• Полноэкранные всплывающие окна сразу после загрузки страницы

Быстрый чек-лист для телефона

• Проверено на настоящем телефоне через мобильный интернет, а не только в браузере на компьютере
• Текст читается в обычном размере, контраст достаточный
• Кнопки и ссылки достаточно крупные и не прижаты друг к другу
• Номер телефона нажимается и виден в верхней части
• Первый экран объясняет, чем вы занимаетесь и что делать дальше
• Форма короткая, использует нужные клавиатуры и автозаполнение
• Страницы быстро грузятся на обычном мобильном соединении
• Нет прокрутки вбок и окон, закрывающих содержимое

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

Как мы это делаем

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