Налаштування дизайну мобільної версії сайту на Хорошоп

Мобільна версія стає важливішою за десктоп. Про це свідчить статистика, поведінка покупців і наші спостереження. Тому чи буде ваш інтернет-магазин зручним для клієнтів і генерувати продажі багато в чому залежить від дизайну мобільної версії. З редактором дизайну від Хорошоп ви зможете забезпечити найкращий користувацький досвід для відвідувачів сайту з мобільних пристроїв.

Mobile-first принцип вже кілька років домінує в e-commerce та розробці загалом. Згідно нього першочерговий пріоритет при створенні дизайну сайту віддається мобільній версії. Дизайн має бути максимально зручним і продуманим для смартфонів та планшетів, враховувати особливості їх екранів і коректно відображати всі елементи сайту.

З цієї статті ви дізнайтесь як налаштувати мобільну версію сайту за допомогою редактору дизайну від Хорошоп. Ми розкажемо про особливості мобільної версії сайту та покажемо на які налаштування варто звертати увагу під час роботи з нею у редакторі дизайну.

Чому мобільна версія настільки важлива

За нашими спостереженнями, клієнти Хорошопу дедалі частіше починають налаштування дизайну свого інтернет-магазину з мобільної версії. Так само роблять наші спеціалісти, які працюють з дизайнами. Чому такий пріоритет віддається мобільній версії? Вагомих причин відразу кілька:

• статистика свідчить, що основну частку інтернет-трафіку генерують мобільні пристрої – більше 60%;

• Google вже кілька років використовує mobile-first індексацію, ранжуючи вище сайти з якісною мобільною версією;

• зручна мобільна версія здатна збільшити продажі магазину, адже у відвідувачів не буде проблем з переглядом контенту чи роботою сайту.  

Переваги мобільної версії сайту на Хорошоп

Клієнтські сайти Хорошопу мають окрему мобільну версію сайту. Ви можете налаштовувати мобільну версію незалежно від десктопної, змінюючи налаштування саме для неї. Наприклад, використовувати інші банери, кольори, фони тощо. Переваги окремої мобільної версії очевидні:

• краще юзабіліті – ви можете налаштувати сайт так, щоб він якнайкраще відповідав потребам користувачів смартфонів, і це не позначалося на клієнтах, які користуються інтернет-магазином на десктопі;

• зручні зміни – легко вносьте зміни у дизайн мобільної версії, не думаючи про те як вони будуть адаптовані на десктопній версії;

• швидке завантаження сайту – дизайн окремої мобільної не містить зайвий HTML і CSS код з основної версії сайту, як це реалізовано в адаптивному дизайні, що значно пришвидшує швидкість інтернет-магазину.

Мобільна версія в редакторі дизайну Хорошоп

Мобільній версії в редакторі дизайну присвячений окремий розділ, де зібрані налаштування для різних елементів та сторінок сайту. Розглянемо всі доступні можливості.

Шапка і футер

Шапка сайту мобільної версії більш мінімалістична, ніж ви звикли бачити на десктопній версії. Пов’язано це з її невеликим розміром, який не дозволяє розташувати там багато елементів. Для налаштування шапки мобільної версії в редакторі дизайну вам потрібно просто перетягувати елементи між її секціями. Також за допомогою чекбоксів ви можете визначити, що саме буде відображатися у шапці. Наприклад, можна прибрати кнопку порівняння, якщо це неактуально для ваших товарів, або контактну інформацію, якщо вона і так є в меню сайту. Комбінуйте різні варіанти структури шапки і знайдіть кращий для себе варіант.

В розділі Футер ви можете налаштувати фон цієї частини сайту та колір елементів розміщених там. За замовчуванням ці налаштування переносяться з десктопної версії сайту, але ви можете кастомізувати їх.

Меню

Меню для мобільної версії – це один з основних навігаційних інструментів сайту. З меню користувачі можуть переходити на всі важливі сторінки сайту, отримувати контактні дані та іншу необхідну інформацію. В редакторі дизайну ви можете налаштувати відображення кнопки «Каталог» в меню. В залежності від налаштувань, користувачі будуть відразу бачити категорії товарів або ж відкривати наступні рівні категорій у підменю. Як саме налаштувати навігацію залежить від вашої структури каталогу.

Зазначимо, що ви можете налаштовувати відображення інших елементів меню та змінювати порядок їх розташування. Наразі цього налаштування немає в редакторі дизайну, але це можна здійснити через звернення у службу технічної підтримки. Розкажіть у запиті, які елементи ви хотіли б прибрати з меню та як поміняти їх місцями. Наприклад, ви захочете прибрати інформаційні сторінки з меню або щось інше.

Головна сторінка

Працювати з дизайном головної сторінки мобільної версії так само просто, як і на десктопі. Все, що вам потрібно – це перетягувати елементи, змінюючи їх розташування на сторінці, та натискати чекбокси для їх показу чи приховування. Також кожен елемент має додаткові налаштування, які варто переглянути, щоб розуміти можливості редактору дизайну.

На мобільній версії ви знайдете всі ті ж елементи, що доступні для основної версії. Єдина відмінність – наявність кнопки «Каталог товарів» для мобільних пристроїв. Це важливий елемент навігації, який краще розміщувати якомога вище на сторінці. Натиснувши на неї користувач почне переглядати доступні категорії товарів.

Окрему увагу звертайте на банери головної сторінки. В налаштуванні банерних ліній ви побачите для якої версії сайту вони застосовуються – обох сайтів чи лише мобільної версії. Коли банер з десктопу коректно відображається на екрані смартфону, то застосовуйте його ж на мобільній версії. Однак бувають випадки, коли текст на банері з десктопу є нечитабельним і тоді краще завантажити окремий варіант для мобільної версії.

Для цього створіть нову банерну лінію. Вкажіть для неї назву і оберіть доступний розмір  Після чого завантажте зображення відповідного розміру в розділі «Банери» для банерної лінії з потрібною назвою. При виборі розміру відштовхуйтесь від своїх товарів. Якщо ви продаєте товари, де ставка робиться на їх вигляд, то можете зробити банери великими, щоб вони займали більшу частину екрану.

Сторінка категорій

В цьому розділі редактора є кілька важливих налаштувань для навігації сайтом. Перш за все – меню підкатегорій. Від нього залежить чи будуть клієнти бачити підкатегорії на сторінці в каталозі товарів і, якщо так, то скільки з них. За потреби ви можете взагалі сховати підкатегорії під кнопку, щоб клієнти самі вирішували чи хочуть їх бачити. Більше про ці налаштування ми розповідали в статті про неочевидні функції редактору дизайну.

За бажанням ви можете відобразити підкатегорії в іншому вигляді. Якщо цей стиль більше підходить до вашого дизайну, використовуйте його.

Інше важливе налаштування — налаштування фільтрів для підбору товарів. З його допомогою ви можете керувати кількістю розгорних груп. Наприклад, якщо у вас багато фільтрів, ви можете сховати їх всі, обравши в редакторі «Сторінка категорії» → «Фільтр» → «Кількість розгорнутих груп» та встановити значення 0. Втім це необов’язково робити та часто магазини показують принаймні найпопулярніші фільтри, обравши інше доступне значення.

Мінікартка товару

В цьому розділі ви можете до дрібниць кастомізувати вигляд мінікартки товарів. Ви можете налаштовувати розмір елементів мінікартки, контролювати видиму довжину назви та вмикати різні додаткові компоненти. Наприклад, на мінікартку можна додати рейтинг товару, його модифікації, артикул та інше. Визначіться які компоненти принесуть користь вашим клієнтам і увімкніть їх.

Корисний лайфхак щодо відображення товарів в каталозі. Якщо у вас небагато товарів та/або ви хочете зробити на фото основний акцент під час перегляду каталогу, то увімкніть відображення плиткою. Відкрийте «Налаштування» → «Загальні налаштування» → «Товари» і поставте чекбокс «Відображати великою плиткою за замовчуванням». Тоді фото товарів в каталозі стануть максимально помітними.

Сторінка товару

Сторінка товару для мобільної версії поділена на чотири секції між якими переміщуються її елементи. Секції йдуть послідовно одна за одною, щоб вам було легко розуміти логіку розташування компонентів. Зауважимо, що для планшетів логіка дещо інша та сторінка поділена на чотири секції, як це видно на графіці.

Додавати всі можливі компоненти не обов’язково, адже це може заважати користувачам. У багатьох випадках головним елементом сторінки є фото товару, тому впевніться, що воно відображається коректно. Інколи доводиться змінювати висоту фото, щоб воно стало помітнішим. Більше про налаштування сторінки товару в редакторі дизайну читайте в нашій статті.

Принципи гарного дизайну мобільної версії

Мобільна версія потребує тонкого підходу до налаштування, щоб забезпечити найкращий користувацький досвід. Ми зібрали кілька важливих принципів, яких варто дотримуватися, щоб створити якісний дизайн мобільної версії.

1. Зберігайте відповідність кольорів і стилю між версіями сайту. Десктопна та мобільна версія – це продовження один одного, тому вони мають створювати цілісну картину в очах користувача. Навіть якісь дрібні відмінності на кшталт різного шрифту порушать ідентичність вашого магазину. Тому розробіть єдиний стиль, який буде застосовуватися на кожній версії сайту.

2. Перевіряйте дизайн на смартфоні. Google Chrome на десктопі дозволяє переглядати сайт з точки зору різних пристроїв. Однак для точності краще перевіряти дизайн саме з телефону. Подивіться як передаються кольори, наскільки зручно користуватися сайтом на тачскріні тощо. Паралельно з кожною зміною мобільного дизайну дивіться на нього на смартфоні та тоді ви отримаєте гарний результат.

3. Приділяйте увагу контрастам. Якщо ви використовуєте яскравий дизайн на основній версії сайту, то запевніться, що він гарно виглядає на мобільній версії. Справа у кольоропередачі, яка на смартфонах інша. Повністю змінювати кольори не потрібно – достатньо підкоригувати певні відтінки.

Потрібна допомога з дизайном? Звертайтесь до наших спеціалістів. Наші дизайнери радо допоможуть вам з налаштуванням мобільної версії та ви отримаєте дійсно якісний дизайн.