Кейс: адаптация лендинга под мобильные устройства
Недавно в нашу компанию обратился клиент с уже готовым красивым и функциональным лендингом, который, к сожалению был сделан только для ПК (широкоэкранной) версии.
Как известно, в современном мире все больше людей пользуется смартфоном и совершают покупки с его помощью. Очевидно, что неудобное отображение страницы на маленьких экранах приводило к тому, что многие посетители отказывались от просмотра сайта и покидали его. Прямое следствие этого – потерянные продажи, ухудшение позиций в поисковых системах и снижение доходности компании в целом.
Закономерно, что клиенту потребовалась адаптация лендинга под мобильные устройства – доработка адаптивности landing page для удобного отображения на смартфонах и планшетах. С этим заказом он и обратился за нашими услугами.
Аудит адаптивности лендинга
Для начала был проведен аудит лендинга на предмет удобства отображения на мобильных устройствах (Google Mobile friendly test). Результат проверки Вы можете видеть на скриншоте:
После этого сайт был проверен в валидаторе HTML на предмет ошибок. Результатом стал внушительный список замечаний, ошибок и предупреждений, которые также требовали исправления.
Важно отметить, что в наше время адаптации сайта под мобильные устройства уделяют большое внимание и поисковые системы. В конечном итоге адаптивность влияет на позиции в выдаче Google / Яндекс. Об этом мы уже писали в нашей
статье об адаптивном веб-дизайне.Адаптивность лендинга шаг за шагом
Главный экран
Главный экран на лендинге – это лицо компании, которое может сразу зацепить или оттолкнуть пользователя. Тут должно быть все не просто хорошо – идеально!
Сравните, как выглядела страница в разрешении в 476 пикселей до начала работ и после. Обратите внимание на большой заголовок, хорошо заметный на экране смартфона, адаптированную картинку, проработанный функционал мобильного меню, увеличенные и более заметные контакты. Также на маленьких разрешения скрыт необязательный и ненужный в данном случае текст.
До
После
Экран покупки товаров
Экран покупки – очень важный раздел, ведь от него в значительной степени и зависит удобство покупки. В старой версии на мобильном телефоне этот экран был мелкий и неинформативный, что значительно снижало конверсию пользователей смартфонов и планшетов.
Сравните вид этой части сайта до доработки мобильной версии сайта и после неё.
До
После
Экран контактов
Далее следует не менее важный блок с контактами и картой расположение магазина. В первоначальном варианте карта была просто картинкой, с отмеченным там адресом. Было принято решение вставить туда полнофункциональную интерактивную карту Google, с которой посетитель может взаимодействовать. Посмотрите вид этого экрана до адаптации и после неё.
До
После
Юзабилити
Далее следует не менее важный блок с контактами и картой расположение магазина. В первоначальном варианте карта была просто картинкой, с отмеченным там адресом. Было принято решение вставить туда полнофункциональную интерактивную карту Google, с которой посетитель может взаимодействовать. Посмотрите вид этого экрана до адаптации и после неё.
Подведем итоги
После всей проделанной работы по оптимизации лендинга под мобильные устройства проходим Mobile friendly test и проверку валидности кода:
Изначально к нам попал красивый, функциональный и продающий лендинг, который, к сожалению, не был адаптирован под мобильные устройства. Практически все работы с сайтом велись без изменения html-структуры и без изменения функционала. Теперь сайт гармонично смотрится на любом разрешении и демонстрирует высокую конверсию не только в отношении пользователей ПК, но и покупателей, которые привыкли заказывать со смартфонов и планшетов.
Комментарии