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

Зазвичай ні. Адаптивна верстка з одним URL і одним набором контенту простіша в підтримці й надійніша для SEO.

Які мінімальні розміри кнопок для телефона?

Орієнтовно 44–48 пікселів у висоту та достатні відступи між елементами, щоб пальцем було легко влучити.

Адаптивна верстка і mobile-first: основні принципи

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

Що таке mobile-first

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

Базові принципи

1. Правильний viewport

Без мета-тега viewport мобільний браузер масштабує сторінку як десктопну.

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. Гнучкі сітки й відносні одиниці

Замість фіксованих пікселів використовуйте відсотки, rem, fr у CSS Grid, clamp() для розмірів шрифтів і відступів. Тоді розмітка плавно змінюється, а не ламається на «неправильній» ширині.

3. Медіа-запити за контентом

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

4. Зображення, що адаптуються

Використовуйте srcset і sizes, щоб телефон не завантажував картинку для 4K-екрана. Задавайте розміри, щоб уникнути зсувів CLS.

5. Зручність для пальця

Кнопки й посилання не менші за 44–48 px.
Достатні відступи між клікабельними елементами.
Поля форм із правильним типом (email, tel) викликають відповідну клавіатуру.
Основні дії розміщені в досяжній для великого пальця зоні.

6. Читабельна типографіка

Розмір основного тексту — від 16 px, довжина рядка близько 45–75 символів, достатній міжрядковий інтервал. Про вибір шрифтів: шрифти для сайту з кирилицею.

Типові помилки

Горизонтальна прокрутка на телефоні.
Приховування важливого контенту на мобільній версії, бо пошук індексуватиме саме її.
Меню, у яке складно влучити.
Вікна, що перекривають весь екран одразу при відкритті.
Тестування лише на емуляторі.

Як перевірити

Відкрийте режим пристроїв у DevTools і пройдіть ключові сценарії на різних ширинах.
Перевірте сайт на реальному телефоні.
Подивіться звіт про зручність у Search Console й показники Core Web Vitals.
Спробуйте виконати цільову дію (заявка, покупка) однією рукою.

Підсумок

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