Мобильная вёрстка

Мобильная вёрстка — это подготовка 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.