UKRU

Бізнес-публікації

11 травня 2016

ІТ для бізнесу. Що треба знати про оптимізацію сайту для мобільних пристроїв.


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

В Україні, як і в усьому світі, зростає кількість людей, які користуються смартфонами і планшетами для веб-серфінгу і онлайн-шопінгу. «2016 рік пройде під знаком «Мобілізуйся або йди з ринку», – вважає директор з маркетингу інтернет-магазину одягу і взуття LeBoutique Юлія Шилова. За її даними, за 2015 рік трафік зі смартфонів зріс на 50%, з планшетів – на 60%. При цьому конверсія з трафіку в покупки зі смартфонів зросла в 1,9 разів, наздогнавши показники конверсії в комп’ютерній версії.

Зріс до 40% і мобільний трафік одного з найбільш швидкозростаючих українських маркетплейсів одягу shafa.ua. «З жовтня по лютий частка відвідувачів з мобільних пристроїв зросла з 38 до 42% і продовжує зростати далі. Якщо у вас немає адаптивної верстки, то приблизно таку частку користувачів ви втрачаєте», – каже Антон Єрмоленко, СЕО маркетплейса shafa.ua.

У пошукових систем і в арсеналі фахівців кілька років тому з’явилися характеристика і тести mobile-friendly. Що це означає, пояснює Анастасія Овчаренко, керівник веб-студії TessLab:
- На сайті практично не використовуються технології, не підтримувані мобільними пристроями, наприклад, Flash.
- Текст можна прочитати без зміни масштабу.
- Оформлення сторінки адаптується до розмірів екрану, тому користувачеві не треба витрачати час на зміну масштабу і використовувати горизонтальну прокрутку, що додатково підвищує зручність роботи на мобільному пристрої з сенсорним екраном.
- Посилання розташовані на достатній відстані одне від одного, їх зручно натискати.

Кожен власник може протестувати свій сайт самостійно і зрозуміти, наскільки він зручний і що робити далі.

За даними LeBoutique, з мобільних пристроїв краще за все купують сумки, взуття (чоботи – лідер мобільної версії, черевики – Android-додатка), постільну білизну та верхній одяг (пальто і шкіряні куртки). Це сильно відрізняється від уподобань покупців десктопної версії сайту, де лідирують сукні та светри.


Мобільна версія чи адаптивний дизайн?

Експерти не радять робити окрему мобільну версію сайту на піддомені. Краще зробити адаптивну верстку, щоб не підтримувати потім окремо дві версії сайту.

«Мобільна версія сайту відживає своє. Фактично мобільна версія – це дублікат сайту з обмеженими функціями і можливостями. І його, як копію, необхідно наповнювати контентом, обслуговувати і просувати», – пояснює Овчаренко. Отже, витрати на підтримку сайту за наявності мобільної версії зростають.

Як пояснює експерт, сайт з адаптивним дизайном – це один і той самий ресурс, але зручний для перегляду як на десктопах, так і на мобільних пристроях. У цьому відмінність адаптивного дизайну, який є частиною верстки сайту, від окремого мобільного сайту. Сучасний сайт – це все ж site.ua, а не m.site.ua. Та і користувачам зручніше ділитися вашим контентом, якщо для нього використовується єдиний URL. Тому адаптивний дизайн – тренд 2015-2016 років. «Веб-студія не є професійною, якщо вона сьогодні не робить адаптив за умовчанням. Це також може свідчити про бажання студії заробити на одному замовленні двічі», – підкреслює Овчаренко.

Іноді представники e-commerce хочуть зробити свій мобільний додаток і тому відмовляються від адаптивної верстки. «Ваш додаток може виявитися нікому не потрібним, а ось через Google у мобільному вашу товарну сторінку цілком можуть знайти», – ділиться Антон Єрмоленко.

Серед користувачів Android-додатків набагато більше чоловіків, у порівнянні з iOS, мобільною версією сайту і комп’ютерами.


Типові помилки

«На даний момент сама по собі наявність мобільної версії часто є помилкою. Надто малому сегменту бізнесу вона дійсно потрібна. Іноді потрібні мобільний додаток та адаптивний сайт», – вважає Анастасія Овчаренко. Типові помилки в адаптивній верстці, за її спостереженнями, – це занадто великі (важкі) картинки, неклікабельні телефони, нелогічне меню. «При розробці дизайну має проводитися юзабіліті-тестування, яке допомагає краще зрозуміти користувачів і на початковому етапі розробки виявити погрішності та оптимізувати дизайн», – ділиться досвідом Олексій Кириченко, CЕO платформи для проведення вебінарів etutorium.com.

Щоб уникнути помилок при створенні мобільної версії, експерт радить:

1) Проводити тестування на різних типах пристроїв. Щоб простіше було підходити до вибору розрізнення мобільної версії сайту, краще орієнтуватися на топові пристрої. Одна справа – тестувати на різних емуляторах, щоб бачити картину загалом, а інша – тестувати і переглядати на «живих» пристроях, де завжди знайдуться погрішності і будуть видні недоліки. У дизайні часто не враховують різні панелі та області навігації операційної системи (Android, iOS). Поширеною помилкою також є смуга прокрутки. У розробці дизайну одразу треба враховувати такі елементи.

2) Скоротити контент сторінки – як тексти, так і відео, зображення, щоб він краще завантажувався і виглядав на мобільній версії. Текст і розмір шрифту мають читатися і не навантажувати сторінку великою кількістю символів. Розмір шрифту не повинен бути менший за 10 pt або більший за 14 pt.

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

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

Відмінності мобільного магазину

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

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

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

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

З чого почати перебудову

Бувають верстки, які не можна зробити адаптивними, наприклад, табличні, і тоді доводиться робити повний редизайн. Проте у більшості випадків кожен сайт можна зробити адаптивним, як свідчить досвід веб-студії TessLab. «Якщо сайту більше 2-3 років, то нерідко є сенс змінювати дизайн повністю, щоб мати сучасний вигляд. І тоді одночасно з розробкою нового дизайну робиться адаптив, – каже Овчаренко. – Іноді є сенс у зміні системи управління контентом». При цьому потрібно залишити загальний стиль, впізнанність, щоб люди, заходячи на сторінку, розуміли, що це оновлений, але «рідний» сайт. «Є нюанси роботи з сайтами, створеними іншими розробниками. Але це не завжди означає «все знести і зробити наново». Якщо сайт збудований на самописній CMS, тоді однозначно треба переробляти, і, мабуть, це єдиний категоричний випадок. Чи якщо сама CMS перестала задовольняти зрослі потреби замовника», – пояснює Овчаренко.

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

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