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

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

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

Адаптивність — це один сайт, а не два

Найголовніше непорозуміння в темі. Адаптивний дизайн — це один сайт, який перебудовується під ширину екрана. Той самий контент, та сама адреса, той самий код — змінюється лише розкладка:

• на широкому моніторі товари стоять у чотири колонки, збоку — фільтри;
• на планшеті — дві колонки, фільтри згортаються в кнопку;
• на телефоні — одна колонка, меню ховається під іконку, шрифт лишається читабельним.

А ось окрема мобільна версія на кшталт m.site.com — це підхід із минулого десятиліття. Він означає буквально два сайти: два набори сторінок, два набори контенту, дві точки, де щось може зламатись. На практиці це завжди закінчується однаково — правку вносять на «великий» сайт і забувають на мобільний, і за пів року версії живуть окремим життям. Плюс SEO-головний біль: дублювання контенту за різними адресами, потреба в правильних canonical і редиректах, ризик, що пошуковик побачить дві різні картини одного бізнесу.

Тому сьогодні правильна відповідь на питання «нам потрібна мобільна версія?» звучить так: вам потрібен адаптивний сайт. Мобільна версія — це не окремий продукт, це те, як ваш єдиний сайт виглядає на вузькому екрані.

Чому це вже не опція

Дві причини, і обидві грошові.

Перша — це просто там, де ваші клієнти. Для послуг, доставки їжі, салонів, автосервісів, медичних центрів — тобто всього, що люди шукають «на ходу», — телефон дає основну частку візитів. Людина не приходить додому, щоб з ноутбука знайти стоматолога: вона гуглить «стоматолог поруч» просто на вулиці й дзвонить за першим адекватним результатом. Це тісно повʼязано з локальним SEO та Google Картами — там мобільний трафік домінує ще сильніше.

Друга — Google дивиться на ваш сайт очима телефона. Це називається mobile-first indexing: пошуковик оцінює й індексує сайт за його мобільною версією. Наслідок неочевидний, але дуже болючий. Якщо хтось колись вирішив «на мобільному сховаємо описи послуг, відгуки й нижній блок тексту, щоб не заважали» — то Google бачить сайт без них. Не «бачить, але менше цінує», а просто не бачить. Ви думаєте, що у вас на сторінці розгорнутий опис послуги, а в індексі — заголовок і кнопка.

Тому правило залізне: на мобільному має бути той самий контент, що й на десктопі. Не той самий вигляд — той самий зміст. Якщо сайту чомусь немає в пошуку, урізана мобільна версія — один з підозрюваних; інші причини ми розбирали в матеріалі чому сайту немає в Google.

Mobile-first у дизайні: спочатку вузький екран

Є адаптивність як результат, а є mobile-first як спосіб проєктування. Різниця принципова.

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

Mobile-first — навпаки: спочатку проєктують під вузький екран, де місця мало й доводиться чесно відповісти на питання «що тут найголовніше?». Що лишилось після цього відбору — те й справді потрібне. А далі макет розширюють під планшет і десктоп, додаючи повітря й другорядне. Такий порядок дає два бонуси: мобільна версія виходить не обрізком, а повноцінним рішенням, і сама структура сайту стає чіткішою — бо десктоп будується на вже перевіреному ядрі.

Це варто закладати ще на етапі технічного завдання на сайт: якщо в ТЗ написано «адаптивна верстка», а макети є тільки для десктопа — мобільну версію хтось домалює на око, і вгадайте, як вона виглядатиме.

Типові гріхи на мобільному

Ось що реально відлякує людей з телефона. Пройдіться цим списком по своєму сайту — щось точно впізнаєте:

• Дрібний текст і постійний зум. Якщо щоб прочитати опис, треба розводити пальці — людина просто закриє вкладку.
• Кнопки, у які не влучити пальцем. Палець — не курсор, він «товстий». Дрібні кнопки впритул одна до одної = випадкові натискання й роздратування.
• Номер телефона не клікабельний. Класика. На телефоні номер має бути посиланням tel: — тап і дзвінок. Якщо номер треба виділяти й копіювати, частина людей просто не подзвонить. Те саме стосується адреси (тап → відкрити карту).
• Форми з ручним введенням там, де потрібен вибір. Змушувати вбивати дату руками замість календаря, місто — замість списку, а телефон — у полі без цифрової клавіатури. Кожне зайве поле на мобільному коштує заявок — детальніше в матеріалі про конверсію інтернет-магазину.
• Спливні вікна на пів екрана. Ще й з хрестиком у два пікселі, у який неможливо влучити. Найшвидший спосіб втратити відвідувача.
• Горизонтальний скрол. Сторінка їздить убік — ознака, що якийсь блок ширший за екран. Виглядає як зламане.
• Таблиці й прайси, що вилазять за екран. Довгий прайс, зверстаний таблицею «як в Excel», на телефоні перетворюється на нечитабельну кашу. Або обгортається в горизонтальний скрол усередині блоку, або перебудовується в картки.
• Важкі фони й автовідтворення відео. Величезне фонове відео на мобільному інтернеті — це і довге очікування, і зʼїдений трафік. Ця тема ширша й ми розібрали її окремо: як пришвидшити сайт.
• «Наведіть курсор» на пристрої без курсора. Меню, що розкривається на hover, або підказка, яка зʼявляється при наведенні, на тачскріні або не працюють, або працюють криво.
• Липкі панелі, що зʼїдають пів екрана. Закріплена шапка + банер про куки + плашка «Замовити дзвінок» знизу — і на контент лишається смужка посередині.

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

Як перевірити самому: чек-лист

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

1. Головна відкривається й одразу зрозуміло, що ви робите? Без зуму, з першого екрана.
2. Текст читається без збільшення? Уся сторінка, а не тільки заголовки.
3. Сторінка не їздить убік? Проведіть пальцем горизонтально — нічого не має рухатись.
4. Меню відкривається й закривається нормально? Пункти не зливаються, у них влучає палець.
5. Номер телефона натискається й одразу дзвонить? Адреса відкриває карту?
6. Кнопка головної дії видима без прокрутки? «Замовити», «Записатись», «У кошик».
7. Ціни/прайс читаються? Таблиця не обрізана, нічого не ховається за краєм.
8. Форма заповнюється однією рукою? Правильні клавіатури (цифри для телефона, @ для пошти), дата — календарем, місто — списком.
9. Заявка реально відправляється? Відправте тестову. Ви здивуєтесь, як часто саме тут все й ламається.
10. Спливашки закриваються з першої спроби?
11. Усе це — на мобільному інтернеті, не на Wi-Fi. Так ви побачите сайт таким, яким його бачить людина на вулиці.

Додатково: у браузері на компʼютері натисніть F12 і ввімкніть режим пристрою — там можна швидко перебрати різні ширини екрана. А в Google Search Console і PageSpeed Insights є звіти про зручність на мобільних. Але правило таке: живий палець на реальному екрані важливіший за будь-який зелений звіт. Автоматика не помітить, що ваша кнопка «Замовити» знаходиться під плашкою про куки.

Адаптив — це не тільки телефон і не застосунок

Дві уточнюючі речі, які часто плутають.

По-перше, адаптивність — ширша за мобільний. Між телефоном і монітором є планшет (де сайт часто виглядає найгірше — бо про нього просто забули) і великі екрани, де сайт із фіксованою вузькою шириною виглядає як марка посеред конверта. Адаптивність — це про весь діапазон, а не про два стани «десктоп/мобілка».

По-друге, адаптивний сайт ≠ мобільний застосунок. Це різні продукти з різними задачами. Адаптивний сайт відкривається за посиланням з пошуку, його не треба встановлювати, він потрібен усім бізнесам. Застосунок треба завантажити зі стора, він живе на екрані телефона й має сенс там, де людина повертається регулярно — програми лояльності, часті замовлення, персональний кабінет. Застосунок не замінює адаптивний сайт: спершу нормальний сайт на телефоні, і лише потім, за потреби, застосунок. Коли він виправданий — розібрали в матеріалі коли бізнесу потрібен мобільний застосунок.

І ще: адаптивність — це не окрема послуга «за додаткові гроші». Це базова частина нормальної розробки, як фундамент у будинку. Якщо в комерційній пропозиції адаптивність винесена окремим рядком «+30% до вартості» — це привід уточнити, а що ж тоді входить у базу (орієнтири по цінах — у матеріалі скільки коштує розробка сайту).

Головне

Адаптивний сайт — це один сайт, який перебудовується під ширину екрана, а не окрема версія на m.site.com: той підхід плодить два сайти, розʼїжджений контент і проблеми з SEO. Телефон сьогодні — головний екран: для локального бізнесу звідти приходить переважна частка візитів, а Google індексує сайт саме за мобільною версією, тому все, що ви на ній сховали, для пошуковика не існує. Mobile-first означає проєктувати спочатку під вузький екран і розширювати далі — так головне не ріжеться в останній момент. А перевірити все можна безкоштовно: візьміть телефон, пройдіть шлях клієнта до заявки й чесно відзначте кожне місце, де ви завагались.

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