Адаптивність і мобільна версія: чому без них сайт не продає

Уперше ваш сайт людина побачить, найімовірніше, з телефона. У дорозі, в черзі до каси, однією рукою, при поганому світлі, на хитких трьох поділках мережі. У багатьох нішах мобільний трафік давно перевалив за дві третини, а десь доходить до 80–90%. Десктопна версія перестала бути головною. Головна тепер та, що в кишені.

І саме звідси ростуть проблеми. Коли кажуть «у нас же адаптивний сайт», часто мають на увазі лише одне: макет не розсипається і текст не лізе за край екрана. Це мінімум, нижче якого падати нікуди, але до справжньої адаптивності тут ще далеко. Розберемо, що таке мобільна версія по-справжньому, де її зазвичай ламають і чому це б’є по виручці.

Що таке адаптивність насправді

Адаптивність – це не той самий сайт, тільки вужчий. Це інше уявлення про те, як контент поводиться на малому екрані, де замість курсора палець, а замість офісного Wi-Fi – мобільний інтернет десь у підвалі торгового центру.

Жива адаптивна верстка тримає в голові кілька речей одночасно. Розкладку: те, що на десктопі стоїть у три колонки, на телефоні має скластися в одну, причому в осмисленому порядку, а не як випало. Дотик замість кліку: кнопки й посилання достатньо великі, щоб у них влучити пальцем, і з відступами, щоб не натиснути сусідню. Тут легко помилитися, бо наведення курсора (hover) на телефоні взагалі не існує – меню й підказки, які тримаються на ньому, для мобільного просто зникають.

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

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

Типові помилки, які коштують заявок

Більшість мобільних провалів – не екзотика. Це ті самі граблі, на які наступають рік за роком:

1. Дрібний текст і кнопки впритул. Доводиться розводити пальці, щоб збільшити, і цілитися в потрібне посилання. Кожен зайвий рух втрачає частину людей.
2. Поп-ап на пів екрана, який не закрити. Хрестик заїхав за межі екрана, і відвідувач у пастці. Майже гарантований вихід – а Google за такі агресивні перекриття ще й опускає сайт у видачі.
3. Форми, у які боляче вводити дані: для номера телефона вискакує літерна клавіатура замість цифрової, автозаповнення немає, обов’язкових полів десяток. Заявку просто кидають на півдорозі.
4. Горизонтальний скрол. Якщо сторінку доводиться возити вбік пальцем, верстка зламана. Виглядає неохайно і миттєво підриває довіру.
5. Важкі неоптимізовані картинки. Сайт вантажиться п’ять секунд на 4G, людина встигає передумати й закрити вкладку ще до того, як побачить вашу пропозицію.
6. Кнопка дії, захована в «бургер». Якщо «Замовити» лежить у меню разом з усім іншим, до неї половина відвідувачів просто не докопається.

Поодинці жодна з цих помилок не виглядає катастрофою. Але разом вони тихо зливають трафік, за який ви вже заплатили рекламою.

Як мобільний UX впливає на конверсію та позиції

Тут два окремі ефекти, і обидва прямо про гроші.

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

Другий ефект – позиції в Google. Пошук давно живе за принципом mobile-first: оцінює він насамперед мобільну версію вашого сайту, а не десктопну. Повільний, незручний сайт з агресивними поп-апами на телефоні просідає в ранжуванні для всіх відвідувачів одразу. Швидкість завантаження теж іде в сигнали якості напряму. Технічний бік цього ми розбираємо окремо – у матеріалі про швидкість сайту і Core Web Vitals.

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

Адаптивність ≠ окрема мобільна версія

Два підходи нерідко плутають. Колись під телефони робили окремий сайт на піддомені m.: свій код, свій контент, своє життя. Сьогодні це майже завжди погана ідея.

Підхід	Що це	Чому так / не так
Адаптивний (responsive)	Один код, що підлаштовується під будь-який екран	Стандарт. Один сайт підтримувати, контент єдиний, дружній до SEO
Окрема мобільна (m.)	Другий сайт лише під телефони	Подвійна підтримка, контент розповзається, проблеми з SEO
«Десктоп, втиснутий у телефон»	Формально адаптив, але без продумування	Технічно відкривається, та користуватися незручно – і конверсія це показує

Розумний шлях – один адаптивний сайт, спроєктований так, щоб однаково триматися і на 13-дюймовому ноутбуці, і на старенькому Android з тріснутим екраном. У підтримці він не дорожчий, а дешевший: усе живе в одному місці, правити доводиться раз.

Як це робимо ми

Без магії, по пунктах.

Спершу мобільний екран. Сторінку ми проєктуємо від того, як вона виглядає й поводиться на телефоні, і вже потім розгортаємо на ширші екрани. Перевіряємо на справжніх розмірах – від маленьких смартфонів до планшетів, а не в одному зручному вікні браузера. Стискаємо все, що вантажиться: картинки в сучасних форматах, мінімум зайвих скриптів, аби на 4G сторінка відкривалася швидко. І окремо проходимося по дотику: розміри кнопок, відступи між ними, правильні клавіатури у формах, жодних hover-пасток.

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

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