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