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