Больше половины трафика на лендинги приходит с телефонов, а на вечерних кампаниях доля доходит до семидесяти процентов. При этом проверяют макет чаще всего на большом мониторе. Ниже — восемь мест, где адаптив рассыпается чаще всего.
Восемь типовых поломок
- Заголовок в четыре строки. На 360 пикселях длинная фраза выталкивает кнопку за экран. Лечится сокращением текста, а не уменьшением шрифта.
- Таблица цен. Четыре колонки не помещаются никогда. Либо горизонтальная прокрутка внутри блока, либо перестроение в карточки.
- Фиксированная шапка на пол-экрана. Оставляйте не больше 64 пикселей высоты.
- Автозум на iOS. Возникает, если шрифт в поле меньше 16 пикселей.
- Кнопки меньше 44 пикселей. В такие не попадают пальцем, особенно в списке ссылок подряд.
- Наведение вместо нажатия. Подсказка, которая появляется только при наведении, на телефоне недоступна.
- Горизонтальная прокрутка всей страницы. Обычно её вызывает один блок с фиксированной шириной.
- Тяжёлые фоновые изображения. На мобильном соединении первый экран должен весить меньше 300 килобайт.
Проверяйте не «на мобильном», а на четырёх ширинах: 360, 900, 1280 и 1440. Большинство поломок живёт ровно на границах между ними.
Порядок блоков может отличаться
На десктопе фотография и текст стоят рядом, на телефоне — друг под другом, и порядок решает. Мы почти всегда поднимаем цену и форму выше на мобильной версии: человек с телефона реже прокручивает длинную страницу до конца, и ключевую информацию нужно показать раньше.
Быстрый чек-лист перед сдачей
- Страница открывается одной рукой, кнопка заявки достижима большим пальцем.
- Телефон в шапке — рабочая ссылка, нажатие сразу открывает звонок.
- Формы заполняются с правильной клавиатурой: цифровой для телефона, почтовой для e-mail.
- Ни один блок не вызывает боковую прокрутку.
- Текст читается без увеличения: основной кегль не меньше 15 пикселей.
Самый честный тест — открыть страницу на своём телефоне в мобильной сети, а не по вайфаю рядом с роутером. Именно так её видит человек, пришедший из рекламы.
Материал студии Veles, Самара. Вопросы по теме — на hello@veles-web.ru или по телефону +7 (846) 212-84-30.
