Чому мобільна версія — не зменшена копія
На комп’ютері людина бачить сторінку цілком, має мишку і велику клавіатуру. На телефоні — вузька смуга екрана, палець замість курсора, часто одна вільна рука і нестабільний інтернет. Через це те, що добре працює на великому екрані, на маленькому стає перешкодою.
Типовий приклад: таблиця порівняння тарифів. На комп’ютері вона зручна, а на телефоні або виїжджає за край, або стає нечитабельною. У мобільному дизайні таку таблицю перетворюють на картки чи вкладки. Таких рішень на кожному сайті десятки, і саме їх ми продумуємо заздалегідь, а не залишаємо на розсуд верстальника.
Кому це потрібно в першу чергу
- Інтернет-магазинам, де велика частина покупок починається з телефона, а кожна зайва дія в кошику — це втрачене замовлення.
- Сервісним компаніям, яким дзвонять або пишуть просто з сайту: кнопка дзвінка і месенджера має бути під рукою.
- Ресторанам, салонам, клінікам, де людина шукає адресу, графік і запис на ходу.
- Сайтам із рекламою в соцмережах, бо більша частина такого трафіку приходить з телефонів.
Якщо ваші клієнти — переважно офісні працівники, які обирають складне обладнання за комп’ютером, мобільна версія все одно потрібна, але акценти будуть іншими. Ми дивимося на ваші дані, а не на загальну статистику.
Адаптивний дизайн, окрема мобільна версія чи веб-застосунок
Адаптивний дизайн — один сайт, який перебудовується під ширину екрана. Це стандарт для більшості проєктів: одна адреса, один контент, простіше підтримувати і зрозуміліше для пошукових систем. Мінус — дизайн треба продумати для всіх розмірів одразу, тому роботи більше, ніж з одним десктопним макетом.
Окрема мобільна версія на іншій адресі колись була поширеною, але зараз її обирають рідко: доводиться підтримувати два сайти, а контент на них часто розходиться.
Веб-застосунок потрібен, коли сайтом користуються регулярно, як програмою: замовлення, кабінет, бронювання. Його можна встановити на головний екран і отримувати сповіщення. Про це детальніше на сторінці прогресивних веб-додатків.
Що ми опрацьовуємо в макетах
- першу видиму частину кожної сторінки: заголовок, головна дія і нічого зайвого;
- меню, пошук і фільтри, які відкриваються поверх контенту і легко закриваються;
- розмір кнопок і посилань, щоб у них влучав палець, а не сусідній елемент;
- форми з правильними типами полів, підказками й зрозумілими повідомленнями про помилки;
- зображення, які не важать зайвого і не сповільнюють завантаження на мобільному інтернеті;
- закріплені елементи, як-от кнопка «Купити» чи «Зателефонувати», що не перекривають контент.
Швидкість теж частина дизайну
На телефоні люди часто відкривають сайт через мобільний інтернет, і кожна зайва секунда завантаження відсіює частину відвідувачів. Багато причин повільності закладаються саме на етапі дизайну: величезні фонові відео, слайдери з десятком фотографій, декоративні шрифти в кількох накресленнях, анімації на кожному блоці.
Тому ми одразу думаємо, що на маленькому екрані можна показати простіше: замінити відео статичним зображенням, скоротити слайдер, обійтися одним-двома шрифтами. Сайт від цього не стає біднішим, а сторінка з’являється на екрані помітно швидше.
Що підготувати перед стартом
Якщо сайт уже працює, дайте доступ до Google Analytics: там видно, з яких пристроїв приходять люди і де вони йдуть. Корисні також десктопні макети чи живий сайт, матеріали бренду і список сторінок, які для вас найважливіші.
Для нового сайту мобільний дизайн ми робимо разом з основним, у межах послуги дизайну сайтів. Тоді немає потреби адаптувати готовий десктоп — обидві версії народжуються разом.
Як перевіряємо результат
Макет на великому моніторі і той самий екран у руці сприймаються зовсім по-різному. Тому кожен ключовий екран ми переглядаємо на телефоні ще на етапі прототипу. Після верстки перевіряємо сайт на кількох реальних пристроях з різною шириною екрана, у різних браузерах і з вертикальною та горизонтальною орієнтацією.
Після запуску дивимося на дані: як змінилася частка мобільних відвідувачів, що доходять до заявки чи покупки, і чи покращилися показники Core Web Vitals для мобільних. Висновки робимо за достатній обсяг даних, а не за перші години.
Помилки, які часто бачимо на мобільних версіях
- спливаюче вікно з підпискою або чатом закриває половину екрана і не має помітного хрестика;
- телефон компанії написаний текстом, а не посиланням, і його доводиться копіювати вручну;
- фільтри каталогу займають кілька екранів, а товарів під ними не видно;
- дрібний сірий текст, який неможливо прочитати на сонці;
- форма просить ввести номер, а відкривається звичайна клавіатура з літерами.
Що впливає на вартість
- Кількість типів сторінок, які потрібно опрацювати: лендинг чи магазин з каталогом, кошиком і кабінетом.
- Складні елементи: таблиці, фільтри, калькулятори, карти, конструктори товарів.
- Вихідна точка: є готовий десктопний дизайн з системою елементів чи все треба створювати.
- Глибина перевірки: чи потрібне тестування прототипу на реальних користувачах.
Точну оцінку робимо після перегляду сайту чи макетів і розмови про задачі.
Часті запитання
Чи можна переробити тільки мобільну версію, не чіпаючи десктоп? Так, якщо сайт адаптивний і верстка це дозволяє. Спершу перевіряємо код, бо іноді зміни в мобільній версії зачіпають і великі екрани.
Чи впливає мобільна версія на пошук? Так. Google оцінює сайти переважно за мобільною версією, тому якщо там бракує контенту чи вона повільна, це позначається на видимості.
Ви тільки малюєте чи й верстаєте? Можемо зробити обидва етапи. Якщо верстку робить ваша команда, передаємо макети з описом поведінки блоків і перевіряємо результат.
Чим це відрізняється від дизайну застосунку? Застосунок встановлюється з магазину і має власні правила iOS та Android. Мобільний дизайн сайту працює в браузері і має бути зручним без встановлення.
Чому Promodex
Від 2015 року ми запустили 750+ проєктів, і для нових сайтів мобільна версія в нас — обов’язкова частина роботи, а не додаткова опція. Дизайнери у нас працюють поруч із розробниками, тому мобільні макети одразу продумуються з урахуванням того, як їх зверстати, а не лише як вони виглядатимуть на картинці. Після запуску можемо підтримувати сайт і доопрацьовувати мобільну версію за даними аналітики.
