Мобильная вёрстка прелендинга: чек-лист проверки

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

Чек-лист: что проверить в мобильной вёрстке

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

Ширина экрана и viewport

Без мета-тега viewport телефон рисует страницу как «уменьшенный десктоп», и всё становится мелким. Тег должен стоять в <head> и задавать ширину устройства. Блокам не задают фиксированную ширину в пикселях: лучше использовать проценты, max-width и гибкие сетки. Страницу открывают на самом узком доступном экране: если там всё в порядке, на широких обычно тоже.

Размер кнопки и зона нажатия

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

Шрифт и читаемость

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

• базовый размер шрифта не мельче привычного для мобильных сайтов;
• контраст текста и фона достаточен даже на ярком солнце;
• строки не слишком длинные, абзацы короткие;
• межстрочный интервал даёт тексту «воздух».

Первый экран без прокрутки

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

Формы и нужная клавиатура

Тип поля определяет клавиатуру: для телефона type="tel", для почты type="email", для чисел inputmode="numeric". Если вместо цифровой клавиатуры открывается обычная, человек раздражается и уходит. Полей оставляют минимум, включают автозаполнение и подписывают так, чтобы подпись не исчезала при вводе. Метки не прячут в плейсхолдер.

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

Боковая прокрутка выдаёт сырую вёрстку. Обычные причины:

• широкие картинки без ограничения по ширине контейнера;
• таблицы, которые не помещаются в экран;
• блоки с фиксированной шириной;
• баннеры, ролики и виджеты, вынесенные за контейнер.

Быстрый способ найти виновника: поочерёдно скрывать блоки и смотреть, когда прокрутка исчезнет.

Как посмотреть прелендинг на телефоне без эмулятора

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

Открыть по прямой ссылке или QR-коду

Страницу выкладывают на тестовый домен или поддомен и открывают ссылку на телефоне. Для локальной разработки телефон подключают к той же Wi-Fi-сети и заходят по адресу компьютера. Чтобы не набирать адрес руками, из ссылки делают QR-код и сканируют камерой.

Проверить на разных устройствах и браузерах

Проверяйте хотя бы на одном Android-устройстве и одном iPhone. Отдельно открывайте страницу во встроенных браузерах приложений, куда часто попадает трафик из соцсетей и мессенджеров: они ведут себя иначе, чем обычный мобильный браузер. Смотрят шрифты, кнопки, клавиатуру и положение фиксированных элементов.

Медленная сеть и экономия трафика

Мобильный интернет бывает нестабильным, а тяжёлая страница теряет людей ещё до первого экрана. В инструментах разработчика включают ограничение скорости или выходят из Wi-Fi на слабый мобильный сигнал. Смотрят, что появляется первым и не «прыгает» ли вёрстка при подгрузке картинок. Ускорению загрузки посвящён раздел о сборке прелендингов.

Типичные промахи

Вёрстка «с десктопа» и поздняя адаптация

Самая частая причина проблем: сначала рисуют широкую версию, а мобильную «подгоняют» в конце. Сложные блоки приходится ужимать, и часть из них ломается. Проще начинать с мобильного экрана: сначала один столбец, затем расширение для больших экранов. Другие типовые просчёты собраны в разделе ошибок, а общие рекомендации по сборке и проверке есть в разделе советов.

Вопрос–ответ

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

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

Как проверить, что клавиатура в форме правильная? Откройте форму на телефоне и нажмите на каждое поле. Для номера должна появиться цифровая клавиатура, для почты клавиатура со знаком «@». Если это не так, поменяйте атрибуты type и inputmode у поля.

Как быстро найти причину горизонтальной прокрутки? Скрывайте блоки по одному и смотрите, когда страница перестаёт двигаться вбок. Чаще всего виноваты широкая картинка, таблица или элемент с фиксированной шириной. После правки проверьте на самом узком экране.

Нужно ли проверять прелендинг на iPhone и Android отдельно? Да, браузеры на этих платформах по-разному обрабатывают высоту экрана, фиксированные элементы и поля ввода. Держите под рукой хотя бы по одному устройству каждой платформы и проверяйте оба.

С чего начинать вёрстку, чтобы не переделывать под мобильные? С мобильного экрана: один столбец, крупные элементы, короткие абзацы. Затем добавьте правила для широких экранов. Так мобильная версия не превращается в урезанную копию десктопной.