Понад 60% трафіку в Україні — мобільний. У деяких нішах (послуги, доставка, локальний бізнес) — усі 80%. А більшість сайтів досі проєктуються так: спочатку «гарний» десктоп на 1920px, потім «якось стиснемо» під телефон.
Результат передбачуваний: на телефоні текст дрібний, кнопки незручні, форми не працюють. Половина потенційних клієнтів йде, навіть не дізнавшись, що ви пропонуєте.
Що таке mobile-first
Mobile-first — підхід, при якому спочатку проєктується мобільна версія, а потім — розширюється для планшетів і десктопу.
Це не просто «адаптивність». Адаптивний сайт лише підлаштовує готовий макет під різні розміри екрана, а mobile-first означає, що структура, контент і ключові дії від самого початку продумуються насамперед для користувача на телефоні.
Різниця:
| Параметр | Desktop-first | Mobile-first |
|---|---|---|
| Початок дизайну | 1920 px | 375 px |
| Контент | «Впихнемо все» | «Тільки найважливіше» |
| Пріоритет | Картинки та анімації | Швидкість та зручність |
| CTA | Десь збоку | Перший елемент на екрані |
| Швидкість | 4–6 секунд | 1–3 секунди |
Чому для Google це важливо
З 2021 року Google використовує mobile-first indexing: пошуковий робот оцінює мобільну версію сайту, а не десктопну. Якщо мобільна версія є неповною, повільною або незручною — позиції падають.
Фактори:
- Core Web Vitals — швидкість, стабільність, чутливість до взаємодії. (Детальний гайд з прикладами та планом дій).
- Mobile usability — немає горизонтальної прокрутки, кнопки не надто дрібні, текст читається без масштабування.
- Контент — мобільна версія містить той самий контент, що й настільна.
Як mobile-first впливає на конверсію
Простий приклад: сайт салону краси. Трафік — 75% мобільний. Основна дія — запис на прийом.
До mobile-first: форма запису — внизу довгої сторінки. На телефоні потрібно прокрутити 8 екранів. Конверсія — 0,8%.
Після mobile-first: кнопка «Записатися» — на першому екрані, фіксована (sticky) на мобільному. Форма — 2 поля. Конверсія — 3,2%.
Зростання в 4 рази. Контент той самий. Змінився лише пріоритет елементів.
Принципи mobile-first
1. Пріоритет контенту
На маленькому екрані немає місця для зайвого. Запитайте себе: «Якби у мене був лише один екран — що на ньому найважливіше?»
Зазвичай це:
- Заголовок з пропозицією.
- Одна кнопка дії.
- Один доказ (відгук, цифра, кейс).
2. Touch-friendly
- Кнопки — щонайменше 44×44 пікселів (рекомендація Apple та Google).
- Відстань між інтерактивними елементами — щонайменше 8 пікселів.
- Жодних ефектів при наведенні курсору як єдиного способу взаємодії.
3. Швидкість
Мобільний інтернет працює повільніше. Тому:
- Зображення у форматі WebP/AVIF із відкладеним завантаженням.
- Мінімум JavaScript.
- Шрифти — максимум 2.
- Критичний CSS — вбудований.
4. Навігація
- Бургер-меню — нормально, якщо в ньому 5–7 пунктів.
- Найважливіші функції — поза меню (телефон, запис, месенджер).
- Пошук — легкодоступний.
5. Форми
- Максимум 2–3 поля.
- Правильні типи полів (
type="tel",type="email") для правильної клавіатури. - Автозаповнення увімкнено.
- Кнопка відправлення — велика та контрастна.
Як перевірити свій сайт
Швидка перевірка (2 хвилини)
- Відкрийте сайт на телефоні.
- Спробуйте заповнити форму заявки.
- Спробуйте знайти ціни.
- Спробуйте зателефонувати (натиснувши на номер).
Якщо хоча б один крок викликав труднощі — потрібно доопрацювати сайт.
Інструменти
- Google Mobile-Friendly Test — базова перевірка.
- PageSpeed Insights — швидкість і Core Web Vitals.
- Chrome DevTools → Device Mode — емуляція пристроїв.
Чек-ліст
| # | Вимога | ✅ / ❌ |
|---|---|---|
| 1 | Кнопки ≥ 44×44 px | |
| 2 | Текст читається без масштабування | |
| 3 | Немає горизонтальної прокрутки | |
| 4 | CTA видно на першому екрані | |
| 5 | Форма — 2–3 поля | |
| 6 | Телефон клікабельний | |
| 7 | Картинки оптимізовані (WebP, lazy load) | |
| 8 | Завантаження < 3 секунд на 4G | |
| 9 | Навігація зручна | |
| 10 | Контент мобільної = десктопної |
Часті запитання
Чи потрібна окрема мобільна версія?
Ні. Один responsive сайт, спроєктований mobile-first. Окремий m.site — застаріла архітектура.
Mobile-first дорожчий?
Ні. Якщо розробляти з нуля — вартість така сама. Переробка існуючого сайту, орієнтованого на настільні комп’ютери, залежить від масштабу, але зазвичай коштує дешевше, ніж створення нового сайту.
Як щодо складних таблиць?
Використовуйте горизонтальний скрол у контейнері таблиці або перетворіть таблицю на картки на мобільному пристрої.
Який відсоток мобільного трафіку вважається «великим»?
Більше 50% — mobile-first обов’язковий. Перевірте в GA4.
Пов’язані матеріали
Потрібен mobile-first сайт?
Ми проєктуємо всі сайти mobile-first: від wireframes до запуску. Швидке завантаження, зручні форми, конверсія на кожному екрані.
Пов’язані матеріали
