Мобільна верстка — це підготовка HTML і CSS сторінки так, щоб вона зручно виглядала й працювала на екранах смартфонів: читабельний шрифт без зуму, кнопки під палець, відсутність горизонтального скролу. Це основа коректного відображення сайту на телефоні, від якого залежить і зручність, і позиції в пошуку.
Простими словами: це «пошити костюм» під маленький екран так, щоб нічого не тиснуло й не вилазило за краї.
Що таке мобільна верстка і навіщо вона потрібна
Понад половина трафіку в більшості ніш приходить із мобільних. А з 2019 року Google оцінює сайти за принципом mobile-first: спочатку дивиться саме мобільну версію сторінки. Тому «розповзання» на телефоні б’є по позиціях напряму, а не колись потім. Мобільна верстка — це той рівень, нижче якого сайту просто не варто виходити в люди.
Є важливий нюанс термінології. Мобільна верстка — це загальне поняття «як сторінка зверстана під телефон». Реалізувати її можна по-різному: через адаптивний дизайн (один код, що «тече» під ширину), через окремий мобільний піддомен (m.site) або через динамічну подачу. Сьогодні стандарт де-факто — адаптивний підхід.
Як працює
- Meta viewport — тег, який каже браузеру рендерити сторінку в реальну ширину пристрою, а не «стискати» десктоп.
- Гнучкі розміри — відсотки, rem, а не жорсткі пікселі під один екран.
- Тап-цілі — кнопки й посилання достатнього розміру, щоб не промахуватися пальцем.
- Media queries — CSS-правила, що вмикають окремий стиль на вузьких екранах.
Чим відрізняється від адаптивної верстки
Терміни часто вживають як синоніми, але акцент різний. «Мобільна верстка» — про кінцевий результат на телефоні. «Адаптивна верстка» — про конкретний спосіб цього досягти: одна сторінка з одним URL, що підлаштовується під будь-який екран. Можна мати мобільну версію без адаптиву (окремий m.-піддомен), але адаптив автоматично дає й коректну мобільну верстку.
Приклад
На десктопі меню розкладене горизонтально, товари — по чотири в ряд. На смартфоні те саме меню ховається під іконку-«бургер», товари стають в один стовпчик на всю ширину, а шрифт лишається читабельним без зуму. Це коректна мобільна верстка в дії.
Часто плутають з…
- Адаптивний дизайн — це спосіб верстки (один код під усі екрани); мобільна верстка — ширше поняття про результат на телефоні.
- Окрема мобільна версія (m.site) — це інший піддомен з окремим кодом, а не «мобільна верстка взагалі».
Питання та відповіді
Чим мобільна верстка відрізняється від адаптивної?
Мобільна верстка — це про те, як сторінка виглядає на телефоні. Адаптивна — конкретний метод: один код і URL, що підлаштовується під будь-який екран. Адаптив автоматично забезпечує мобільну верстку.
Чи впливає мобільна верстка на SEO?
Так, напряму. Через mobile-first indexing Google оцінює насамперед мобільну версію, а зручність на телефоні — частина сигналів Page Experience.
Що таке mobile-first?
Це підхід, за якого сайт спершу проєктують під смартфон, а потім розширюють до десктопа. Google же mobile-first indexing застосовує до оцінки сайтів із 2019 року.
Сайт незручний на телефонах? Зробимо коректну адаптивну верстку та наведемо лад у мобільній версії. Напишіть у Telegram, Viber або WhatsApp.
Схожі терміни: Адаптивний дизайн, PageSpeed, HTML, URL.
