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