Мобільна версія сайту: чому вона важливіша за комп’ютерну

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

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

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

Звідки насправді відкривають ваш сайт

Відкрийте статистику свого сайту в Google Analytics і знайдіть звіт за категоріями пристроїв. Для салонів краси, ремонтних бригад, кав’ярень чи стоматологій частка мобільних відвідувачів зазвичай перевищує половину, а нерідко сягає 70–80%. Точну цифру покаже лише ваша аналітика, але тенденція майже завжди однакова.

Подивіться не лише на відвідування, а й на те, які сторінки найчастіше відкривають із телефонів. Зазвичай це головна, ціни, контакти й одна-дві найпопулярніші послуги. Саме їх варто перевіряти на смартфоні першими: виправлення там дають найбільшу віддачу.

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

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

Мобільна версія сайту і Google: що змінює mobile-first

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

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

Тому, вкладаючись у тексти чи просування, спершу переконайтеся, що сайт коректно працює на телефоні. Інакше частина зусиль піде в порожнечу, а терміни виходу на перші позиції розтягнуться — про те, від чого вони залежать, ми писали в статті скільки часу триває просування в Google.

Окремо варто згадати про «згорнуті» блоки. Акордеони й вкладки на телефоні — нормальна практика, Google їх читає. Проблема виникає тоді, коли розробник для мобільних просто вимикає частину контенту, щоб сторінка здавалася коротшою. Тоді на телефоні зникають ціни, відгуки чи опис послуги, і пошукова система бачить збіднілу сторінку.

Адаптив, окрема версія чи нічого: як визначити свій варіант

Колись для телефонів робили окремий сайт на піддомені на кшталт m.example.com. Сьогодні стандарт — адаптивний дизайн: один сайт, який перебудовується під ширину екрана.

Підхід	Як працює	Для малого бізнесу
Адаптивний дизайн	Один сайт, блоки перебудовуються під екран	Оптимальний варіант: одна адреса, один контент, простіше підтримувати
Окрема мобільна версія	Інший сайт або піддомен для телефонів	Застарілий підхід, контент легко розходиться, складніше з SEO
Без адаптації	Комп’ютерна версія, зменшена до розміру екрана	Втрачає клієнтів і позиції, потребує переробки

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

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

Що уточнити в розробника, якщо сайт ще тільки замовляєте

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

Скільки звернень може забирати незручна мобільна версія сайту

Втрати від поганої мобільної зручності не видно в жодному рахунку, тому їх легко недооцінити. Спробуйте прикинути їх на своїх цифрах. Нижче — суто умовний приклад, щоб показати логіку, а не реальні показники чийогось бізнесу.

• За місяць на сайт заходить 600 людей, із них 420 — з телефонів.
• З комп’ютерів заявку залишає умовно 4% відвідувачів, тобто близько 7 людей із 180.
• З телефонів — лише 1%, тобто близько 4 людей із 420.
• Якби на телефонах конверсія була хоча б як на комп’ютерах, з тих самих 420 відвідувачів могло б прийти близько 17 звернень замість 4.

Різниця в такому прикладі — понад десяток звернень щомісяця без жодної додаткової реклами. Ваші цифри будуть іншими, але сам спосіб розрахунку той самий: порівняйте частку заявок із мобільних і з комп’ютерів у своїй аналітиці. Якщо на телефонах вона помітно нижча, саме мобільна версія сайту — перший кандидат на виправлення, і вкладення в неї часто окупаються швидше, ніж будь-яка нова реклама.

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

Тест з телефона за 10 хвилин

Візьміть свій смартфон, вимкніть Wi-Fi і відкрийте сайт через мобільний інтернет — так, як це робить більшість клієнтів. Пройдіться списком і на кожне питання чесно дайте відповідь «так» чи «ні».

1. Головна сторінка завантажилася швидше ніж за 3 секунди?
2. З першого екрана видно, що ви робите, де працюєте і як із вами зв’язатися?
3. Можна зателефонувати одним дотиком, а не копіювати номер вручну?
4. Текст читається без збільшення? Комфортний розмір — від 16 пікселів.
5. У кнопки та пункти меню легко влучити пальцем, сусідні не натискаються випадково?
6. Сторінка не «їде» вбік, немає горизонтальної прокрутки?
7. Форму запису вдається заповнити: правильна клавіатура, небагато полів?
8. Екран не перекриває спливаюче вікно, яке важко закрити?
9. Фото галереї відкриваються, а таблиці цін не обрізаються?

Як читати результат

Кількість «ні»	Що це означає	Що робити
0–1	Мобільна зручність у порядку	Перевіряти раз на квартал і після змін
2–3	Клієнти частково губляться	Точкові правки за кілька днів роботи розробника
4 і більше	Мобільні відвідувачі масово йдуть	Аудит і рішення: глибока переробка чи новий сайт

Повторіть тест на іншому телефоні: якщо у вас iPhone, попросіть когось з Android, і навпаки. Те, що ідеально працює в одному браузері, інколи ламається в іншому.

Безкоштовні інструменти, які підтвердять враження

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

• PageSpeed Insights. Вставте адресу сторінки — сервіс покаже оцінку швидкості окремо для мобільних і комп’ютерів та перелік того, що гальмує.
• Звіт «Основні веб-показники» в Google Search Console. Показує, які сторінки повільні за даними реальних відвідувачів, а не лабораторного тесту.
• Режим пристрою в браузері Chrome. На комп’ютері натисніть F12 і перемкніться на перегляд як на телефоні — зручно для швидкої перевірки різних розмірів екрана.
• Ваша аналітика. Порівняйте частку заявок із мобільних і з комп’ютерів: якщо телефонів 70% відвідувань, а заявок із них 30%, на мобільних щось заважає.

Зберігайте результати перевірок: скриншот оцінки PageSpeed Insights і звіту Search Console до правок і після. Так ви бачите, чи дали зміни ефект, і маєте предметну розмову з розробником замість суперечки про відчуття «стало краще» чи «стало гірше».

Детальніше про те, як читати показники швидкості й що виправляти першочергово, — у статті про швидкість сайту.

Перший екран на смартфоні: що має вміститися

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

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

Умовний приклад для салону краси: «Манікюр, педикюр і брови на Позняках. Запис онлайн або в Telegram» — і під цим велика кнопка «Записатися». Більше нічого не треба: слайдер із п’ятьма банерами, анімований логотип і довге привітання на телефоні лише відсувають головне вниз.

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

Що найчастіше ламається на телефоні і як це лікувати

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

Захований телефон і запис

Контакти лише в підвалі сайту або на окремій сторінці, і до них треба гортати кілька екранів. Рішення — закріплена кнопка дзвінка чи месенджера, видима на кожній сторінці, і клікабельний номер у шапці.

Важкі фото

Фото робіт із телефона чи фотоапарата вагою 5–8 МБ кожне. На комп’ютері зі швидким інтернетом це майже непомітно, а в мобільній мережі галерея вантажиться хвилину. Рішення — стиснути зображення й завантажувати їх лише тоді, коли людина догортає до галереї.

Таблиці цін і довгі списки

Широка таблиця з п’ятьма колонками на вузькому екрані або обрізається, або стає нечитабельною. На телефоні краще працюють картки послуг чи таблиці з двома колонками: назва й ціна.

Нав’язливі вікна

Банер «Підпишіться», який закриває весь екран, а хрестик дрібний і в кутку, дратує і людей, і Google. Якщо без спливаючого вікна не обійтися, показуйте його не одразу й робіть легким для закриття.

Онлайн-запис, який не працює на дотик

Віджет запису, вбудований зі стороннього сервісу, на комп’ютері може виглядати охайно, а на смартфоні — вилазити за край екрана або не реагувати на дотик. Пройдіть весь шлях запису до кінця, аж до повідомлення про успішне бронювання, на Android та iPhone.

Меню, у якому можна заблукати

На комп’ютері розлоге меню з підрозділами виглядає охайно, а на телефоні перетворюється на довгий список, де потрібна послуга захована на третьому рівні. Рішення — 5–7 головних пунктів, а решту переходів розмістити всередині сторінок: «Схожі послуги», посилання з тексту, кнопка «Усі ціни».

Блідий текст і низький контраст

Світло-сірий текст на білому тлі може виглядати стильно на моніторі, але на вулиці під сонцем його майже не видно. Перевірте сайт з телефона надворі вдень: якщо доводиться примружуватися, збільште контраст тексту й кнопок.

Тексти, фото й кнопки під маленький екран

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

Тексти

Корисна вправа: прочитайте сторінку послуги з телефона й позначте місця, де вам самим захотілося гортати швидше. Найчастіше це вступ без конкретики і довгі абзаци про історію компанії. Скоротіть їх або перенесіть нижче, а ціну, терміни й кнопку зв’язку підніміть вище.

• абзаци по 2–4 речення, щоб на екрані не було суцільного полотна;
• підзаголовки кожні кілька абзаців — людина гортає й шукає очима;
• ціни й терміни — у тексті чи коротких списках, а не лише на картинці;
• найважливіше на початку сторінки, подробиці — нижче.

Фото

Для сайту зазвичай достатньо 150–300 КБ на зображення замість кількох мегабайтів, а сучасні формати на кшталт WebP дають ще меншу вагу без помітної втрати якості. Портфоліо краще показувати добіркою з 6–12 найкращих робіт, ніж сотнею фото, які телефон вантажитиме вічність.

Кнопки й форми

Кнопки мають бути достатньо великими, щоб у них влучав палець, а не кінчик нігтя, з проміжками між ними. Поле телефону має відкривати цифрову клавіатуру, а форма для першого звернення — обмежуватися ім’ям, телефоном і, можливо, послугою. Усе інше можна уточнити під час розмови.

Мобільна версія сайту в різних нішах: на чому зробити акцент

Принципи однакові, але кожна ніша має свої пріоритети на маленькому екрані.

• Салон краси: кнопка онлайн-запису на першому екрані, прайс за категоріями, портфоліо, яке зручно гортати пальцем; більше ідей — у статті про сайт для салону краси.
• Ремонт: телефон і месенджер одним дотиком, фото «до і після», калькулятор вартості, що працює на маленькому екрані; приклади можна подивитися серед готових сайтів для ремонтних бригад.
• Юрист чи адвокат: короткі блоки про напрями практики, зрозуміла кнопка «Отримати консультацію», відомості про досвід — про довіру до таких сайтів детально в статті сайт для юриста.
• Інтернет-магазин: кошик і фільтри, якими зручно користуватися однією рукою, швидке оформлення без реєстрації; покроково — у плані як запустити інтернет-магазин.

Для психологів, лікарів та інших фахівців, до яких звертаються з делікатними питаннями, на телефоні особливо важливі спокійний вигляд і можливість написати, а не лише зателефонувати. Багатьом людям простіше надіслати коротке повідомлення в месенджер увечері, ніж говорити вголос у транспорті чи на роботі. Тож кнопка месенджера тут не менш важлива, ніж номер телефону.

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

Сім швидких правок на найближчі дні

Не обов’язково чекати на велику переробку. Частину покращень можна внести швидко — самостійно в адмінці або за годину-дві роботи розробника.

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

Почніть із перших трьох пунктів: вони найпростіші й зазвичай дають найпомітніший ефект. Решту можна розподілити на кілька днів, перевіряючи результат після кожної зміни.

Виправляти чи переробляти: як ухвалити рішення

Найдорожче — роками латати сайт, який уже не можна врятувати, або, навпаки, викидати робочий сайт через дві-три дрібниці. Таблиця нижче допоможе зорієнтуватися; оцінки часу й витрат — орієнтовні.

Ситуація	Розумний крок	Орієнтовні витрати
Сайт адаптивний, проблеми точкові: фото, шрифт, форма	Виправити	Кілька годин або днів роботи розробника
Адаптивний, але повільний і з застарілою структурою	Аудит, потім план правок	Від вартості аудиту плюс доопрацювання
Окрема застаріла мобільна версія	Перехід на адаптивний дизайн	Часто порівнянно з новим сайтом
Адаптації немає взагалі	Новий сайт	Залежить від обсягу; готове рішення зазвичай дешевше

Щоб нічого не пропустити, корисно замовити SEO-аудит сайту: у ньому перевіряють і мобільну зручність, і швидкість, і те, як сторінки бачить Google. Після нього зрозуміло, які правки дадуть найбільший ефект і чи взагалі варто вкладатися в поточний сайт.

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

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

Як не зламати мобільну версію сайту під час оновлень

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

• після кожного оновлення відкривайте змінену сторінку з телефона;
• раз на квартал повторюйте десятихвилинний тест;
• перевіряйте нові фото перед завантаженням: вага, розмір, обрізання на вузькому екрані;
• не додавайте одночасно кілька віджетів — чат, кешбек, підписку: на телефоні вони б’ються за той самий кут екрана;
• раз на місяць переглядайте звіт про швидкість у Search Console.

Якщо сайтом займаються кілька людей, домовтеся про просте правило: ніхто не вважає зміну завершеною, доки не перевірив її на смартфоні. Це займає хвилину, а економить тижні втрачених звернень.

Корисно також мати короткий документ із правилами для сайту: максимальна вага фото, які віджети вже стоять, де розташована кнопка зв’язку. Його можна передати новому адміністратору чи підряднику, і мобільна зручність не залежатиме від того, хто саме вносить зміни.

Часті запитання

Як перевірити, чи є в сайту мобільна версія?

Найпростіше — відкрити сайт на своєму телефоні. Якщо текст читається без збільшення, меню згортається в кнопку, а сторінка не прокручується вбік, сайт адаптивний. Додатково можна відкрити сайт на комп’ютері й поступово звужувати вікно браузера: адаптивні блоки перебудовуються, а неадаптивні просто обрізаються. Звіт «Основні веб-показники» в Search Console покаже, чи достатньо швидко сторінки працюють на телефонах.

Чи впливає мобільна версія на позиції в Google?

Так. Google індексує сайти передусім у мобільному вигляді, тож саме мобільна версія визначає, який контент пошукова система побачить і як оцінить зручність. Повільний чи незручний на телефоні сайт зазвичай програє конкурентам навіть у видачі для комп’ютерів, хоча позиції залежать і від багатьох інших факторів: змісту, структури, відгуків.

Скільки коштує зробити мобільну версію сайту?

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

Чи потрібен окремий мобільний застосунок замість сайту?

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

Який розмір шрифту потрібен для мобільної версії?

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

Чому на телефоні сайт виглядає інакше, ніж на комп’ютері?

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

Як часто перевіряти мобільну версію сайту?

Повний десятихвилинний тест достатньо проходити раз на квартал, а коротку перевірку змінених сторінок — після кожного оновлення: нового банера, тексту, віджета чи фото. Раз на місяць варто заглядати у звіт про швидкість у Search Console. Такий ритм забирає мало часу, але не дає проблемам накопичуватися місяцями непоміченими.