Полезно знать · Сайты

Мобильная версия сайта: что проверить перед запуском

Чек-лист проверки сайта на телефоне: вёрстка, кнопки, формы, таблицы, скорость и типичные ошибки, из-за которых теряются заявки.

Мобильная версия сайта: что проверить перед запуском Чек-лист проверки сайта на телефоне: вёрстка, кнопки, формы, таблицы, скорость и типичные ошибки, из-за которых теряются заявки. Больше половины посетителей приходят на сайт с телефона, а проверяют сайт почти всегда на большом мониторе. Отсюда и разрыв: владелец видит аккуратную страницу, а клиент — прайс, уезжающий за край экрана, и кнопку «Отправить», которую невозможно нажать пальцем. Разберём практический чек-лист: что проверить самому за двадцать минут и какие ошибки встречаются чаще всего. Адаптивная вёрстка или отдельная мобильная версия Два подхода. Адаптивная вёрстка — один сайт, который перестраивается под ширину экрана. Один адрес, один контент, одни правки. Это стандарт, и в большинстве случаев правильный выбор. Отдельная мобильная версия — второй сайт на поддомене. Использовалась раньше, сейчас почти не нужна: требует двойной поддержки, порождает расхождения в контенте и путаницу с адресами страниц. Исключение — очень тяжёлые сервисы, где мобильный интерфейс принципиально другой. Для сайта компании это не тот случай. Чек-лист проверки на телефоне Пройдите по пунктам со своего телефона, отключив Wi-Fi и открыв сайт в режиме инкогнито. Горизонтальная прокрутка Страница не должна двигаться в сторону. Если двигается — что-то шире экрана: таблица, изображение, длинное слово или блок с фиксированной шириной.Размер шрифта Основной текст — не меньше 16 пикселей. Мелкий текст, который приходится увеличивать пальцами, посетители просто не читают.Кнопки под палец Минимум 44×44 пикселя, с промежутками между соседними кнопками. Две ссылки рядом, в которые невозможно попасть точно, — источник случайных нажатий и раздражения.Таблицы и прайсы Таблица на восемь колонок на телефоне не читается. Варианты: горизонтальная прокрутка внутри таблицы, перестройка в карточки по строкам, скрытие второстепенных колонок.Меню Открывается, закрывается, все разделы доступны. Проверьте вложенные пункты: часто подменю на телефоне не раскрывается вовсе.Кнопка звонка Нажатие по номеру телефона должно сразу открывать набор. Номер, вставленный картинкой, — потерянные звонки.Формы Отдельный пункт, самый важный.Изображения Не растянуты, не обрезаны по важной части, не весят по 3 МБ. Про вес подробно — в материале скорость загрузки сайта.Всплывающие окна Закрываются одним касанием, крестик виден и попадает под палец. Окно, которое невозможно закрыть на телефоне, гарантированно теряет посетителя.Липкие элементы Панель с кнопкой заявки не должна перекрывать половину экрана и текст. Формы: где теряются заявки На телефоне заполнение формы — заметное усилие, поэтому мелочи здесь дороже. Тип поля. Для телефона должна открываться цифровая клавиатура, для почты — клавиатура с символом @. Если в поле «Телефон» открывается обычная клавиатура, часть посетителей бросит заполнение. Автозаполнение. Браузер должен уметь подставить имя, телефон и почту. Это экономит посетителю полминуты. Количество полей. На телефоне два поля вместо пяти — не мелочь, а разница в конверсии. Клавиатура не должна закрывать кнопку. Классическая ошибка: посетитель ввёл данные, а кнопка «Отправить» осталась под клавиатурой без возможности прокрутки. Понятные ошибки. Сообщение «Ошибка» без указания поля на маленьком экране означает, что человек не найдёт проблему и уйдёт. Подтверждение отправки. Заметное, а не мелкая надпись, которая появилась выше области видимости. Альтернатива форме. Кнопки Telegram и WhatsApp на телефоне часто работают лучше формы: одно касание, привычный интерфейс. Подробнее о формах — в статье формы заявок: почему их не заполняют. Как проверить, если нет разных телефонов Три способа: Свой телефон на мобильном интернете — обязательный минимум.Режим устройства в браузере на компьютере: можно быстро посмотреть разные размеры экранов. Ограничение — не покажет реальную скорость и особенности клавиатуры.Инструменты проверки мобильной пригодности от поисковых систем: сообщат о мелком тексте, слишком близких элементах и горизонтальной прокрутке. Отдельно попросите проверить сайт двух-трёх человек с разными телефонами — старым Android и новым iPhone. Разница в отображении иногда неприятно удивляет. Влияние на позиции и на конверсию Обе поисковые системы ориентируются на мобильную версию как на основную: если на телефоне часть контента недоступна, для поиска её фактически нет. Это прямой риск для видимости, особенно по коммерческим запросам, где значительная часть спроса — мобильная. Второй эффект сильнее и заметнее в деньгах. Посчитаем: 1 000 посетителей в месяц, 60% с телефонов. При конверсии 3% на компьютере и 1% на телефоне из-за неудобной формы получаем 12 + 6 = 18 заявок. Если довести мобильную конверсию до тех же 3%, будет 12 + 18 = 30 заявок. Плюс 12 обращений в месяц без единого рубля дополнительных расходов на рекламу. Именно поэтому проверка мобильной версии входит в тестирование до запуска, а не в список «доработаем потом». Что ещё проверяется на этом этапе, описано в разделе разработки сайтов и в материале базовое SEO для сайта бизнеса. Типичные ошибки Прайс в виде широкой таблицы или картинки, которую невозможно прочитать.PDF-каталог как основной способ показать продукцию: на телефоне он открывается плохо и не находится поиском.Текст в две колонки, который на узком экране превращается в мешанину.Карта на весь экран, из которой невозможно «выскроллить»: палец постоянно попадает в карту вместо страницы.Слишком длинный первый экран: посетитель прокручивает три экрана, прежде чем увидеть суть.Кнопка «Наверх», перекрывающая кнопку заявки.Разное содержание на компьютере и телефоне: часть блоков скрыта «для компактности», а вместе с ними скрыты цены и условия. Последний пункт особенно вреден: он одновременно ухудшает и конверсию, и видимость в поиске. Частые вопросы Нужно ли делать приложение вместо мобильной версии? Для сайта компании — нет. Приложение имеет смысл для сервисов с регулярным использованием, а не для витрины, куда заходят один-два раза перед покупкой. Что важнее: дизайн на компьютере или на телефоне? Проектировать удобнее сразу от мобильного экрана: если информация уместилась и читается на телефоне, на большом экране проблем не будет. Обратный порядок обычно даёт «сжатую» мобильную версию. Как быть с большими таблицами характеристик? Показывать 3–5 главных параметров, остальные — по нажатию «все характеристики». Так и читается, и данные доступны. Сайт старый, мобильной версии нет. Что делать? Сначала оценить, можно ли добавить адаптивность к текущей вёрстке. Иногда это дешевле переделки, иногда дороже — зависит от состояния кода. Честный ответ даётся после осмотра. Сколько стоит адаптация? Если вёрстка сделана нормально, но не адаптивна — обычно несколько дней работы. Если сайт собран на устаревшей основе, разумнее считать вариант новой сборки. Вывод Мобильная версия проверяется не в теории, а с телефона за двадцать минут: горизонтальная прокрутка, размер шрифта, кнопки под палец, таблицы, меню и работа формы. Эти шесть пунктов закрывают большинство потерь. Мы проверяем мобильное отображение до запуска на реальных устройствах: посмотреть, что входит в разработку или написать нам о задаче — если сайт уже есть, посмотрим, что можно исправить без полной переделки.