При адаптации лендинга под мобильные устройства мелочей не бывает. Любая ошибка может стоить лояльности клиентов и вылиться в неприятную потерю денег.
Эффективность лендинга складывается из трёх главных составляющих: контента, дизайна и быстродействия. Сегодня мы рассмотрим, как дизайн мобильной версии лендинга влияет на конверсию и на что следует обращать внимание при адаптации существующего одностраничника для мобильных устройств.
Для создания крутого и продающего мобильного лендинга нужно помнить семь главных правил дизайна адаптированных посадочных страниц. Рассмотрим их по порядку.
- Текст. Контент обязательно сокращаем и адаптируем: никто не будет читать простыни со смартфона. Выделяем главное — предложение, выгоду, цену, контакты, CTA, акцентируем это в дизайне, от остального безжалостно избавляемся. Помните, что размер важного текста в мобильной версии лендинга не может быть меньше 16 пикселей, иначе он не будет читаться с маленьких устройств. Также позаботьтесь о хороших, читабельных межстрочных интервалах и не забудьте сделать отступы от краёв экрана.
- Длина лендинга. Десять-двенадцать экранов, в которые часто схлопываются десктопные лендинги на мобильных устройствах — страшно неэффективны. На пятом-шестом экране потенциальный клиент закапризничает, прекратит скроллить и уйдёт искать что-нибудь покороче. Смело убирайте лишнее!
- Крупные иконки и ссылки под размер пальца. Больше всего раздражает в плохих мобильных сайтах невозможность попасть пальцем в нужную кнопку или ссылку. Не искушайте судьбу, сделайте все кликабельные элементы побольше.
- Кнопки действия на первом экране. Мобильный клиент гораздо беспокойнее десктопного, он хочет получить всё и сразу и не любит ждать. Сразу подсуньте ему CTA: вместе с правильно сокращённым и адаптированным контентом клиент вовлечётся в действие на первом же экране, ну а дальше — дело техники.
- Минимум полей. Со смартфона всё ещё очень неудобно много печатать. Оставьте только самые нужные поля — имя, e-mail и ещё что-нибудь страшно необходимое — и не забудьте правильно настроить их типы. Телефоны, кстати, нужно всегда и вводить, и показывать в международном формате, иначе будут проблемы обратной связи как у клиентов, так и у компании.
- Отдельные баннеры. Многие баннеры на «больших» сайтах в мобильной версии выглядят неубедительно — мелко, нечитабельно и не помещаются целиком на экран. Если у вас на лендинге предусмотрены баннеры, не поленитесь их отдельно перерисовать для мобильных.
- Адаптированные и чёткие изображения. В этой части дизайн мобильной версии лендинга пересекается с её работоспособностью. От качества адаптации изображений зависит скорость загрузки лендинга — важнейший показатель, о котором мы недавно подробно писали. При этом картинки должны быть эффектными и чёткими на всех видах экранов, от retina-дисплеев до дешёвых китайских смартфонов за 50 долларов. Обязательно проследите за этим.
Чтобы не наделать ошибок в дизайне мобильной версии лендинга, воспользуйтесь уже готовыми профессиональными решениями. Конструктор мобильных сайтов MoAction — это свыше сотни оптимизированных шаблонов с уникальным дизайном для любого вида бизнеса и лучшие цены на рынке. Попробуйте сами!
