Адаптивная верстка — это способ создания веб-страниц, при котором сайт автоматически подстраивается под размер экрана, устройство и условия просмотра. Один и тот же сайт должен быть удобным на компьютере, ноутбуке, планшете и смартфоне: текст читается без масштабирования, кнопки нажимаются пальцем, блоки не выходят за границы экрана, а контент остаётся доступным.
Простыми словами, адаптивная верстка делает сайт гибким. Вместо одной фиксированной ширины страница меняет расположение элементов: колонки становятся одной колонкой, меню превращается в мобильное, изображения уменьшаются, карточки перестраиваются, а формы остаются удобными для заполнения.
Что такое адаптивная верстка простыми словами
Если обычная фиксированная верстка похожа на плакат одного размера, то адаптивная верстка похожа на конструктор, который перестраивается под доступное пространство. На широком экране можно показать три колонки, а на смартфоне те же блоки лучше вывести один под другим.
Пример: на десктопе каталог товаров может выглядеть так:
HTML
[товар] [товар] [товар] [товар]На смартфоне тот же каталог должен стать удобным для узкого экрана:
HTML
[товар]
[товар]
[товар]
[товар]Как работает адаптивная верстка
Адаптивность достигается с помощью HTML, CSS и иногда JavaScript. Основные инструменты — гибкие сетки, относительные размеры, медиа-запросы, адаптивные изображения, CSS Flexbox, CSS Grid и правильная настройка viewport.
| Инструмент | Зачем нужен | Пример |
|---|---|---|
| Viewport | Сообщает браузеру, как масштабировать страницу на мобильном устройстве. | <meta name=»viewport» content=»width=device-width, initial-scale=1″> |
| Media queries | Позволяют менять стили при разной ширине экрана. | @media (max-width: 768px) |
| Flexbox | Управляет гибким расположением элементов в строку или колонку. | Карточки, меню, кнопки. |
| CSS Grid | Создаёт адаптивные сетки и колонки. | Каталоги, портфолио, разделы услуг. |
| Responsive images | Подбирают подходящее изображение под экран и плотность пикселей. | srcset, picture. |
Пример адаптивной верстки через media query
HTML
.catalog {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1024px) {
.catalog {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.catalog {
grid-template-columns: 1fr;
}
}В этом примере на большом экране каталог выводится в четыре колонки, на планшете — в две, на смартфоне — в одну. Это и есть логика адаптивной верстки.
Mobile-first и desktop-first
Есть два распространённых подхода к адаптивной верстке: mobile-first и desktop-first.
| Подход | Суть | Когда подходит |
|---|---|---|
| Mobile-first | Сначала верстается мобильная версия, затем добавляются стили для больших экранов. | Современные сайты с большой долей мобильного трафика. |
| Desktop-first | Сначала делается десктопная версия, затем она адаптируется под планшеты и смартфоны. | Старые проекты, сложные B2B-интерфейсы, редизайн существующего сайта. |
Mobile-first часто считается более устойчивым подходом, потому что заставляет сначала оставить главное: контент, кнопку, форму, навигацию и быстрый доступ к действию. Потом интерфейс можно расширять для больших экранов.
Чем адаптивная верстка отличается от мобильной версии
Адаптивная верстка обычно использует один сайт и один URL, который подстраивается под устройство. Отдельная мобильная версия может жить на другом поддомене или пути, например m.site.ru. Сейчас чаще выбирают адаптивную верстку, потому что она проще для поддержки и SEO.
| Критерий | Адаптивная верстка | Отдельная мобильная версия |
|---|---|---|
| URL | Один URL для всех устройств. | Может быть отдельный URL или поддомен. |
| Поддержка | Обычно проще. | Нужно синхронизировать две версии. |
| SEO | Меньше риска дублей и ошибок. | Нужны корректные alternate/canonical и редиректы. |
Зачем сайту нужна адаптивная верстка
- Мобильные пользователи. Большая часть трафика во многих нишах приходит со смартфонов.
- SEO. Поисковые системы учитывают мобильную доступность и качество пользовательского опыта.
- Конверсия. Пользователь быстрее оставляет заявку, если форма и кнопки удобны.
- Снижение отказов. Если сайт не ломается на смартфоне, пользователь реже уходит сразу.
- Единая поддержка. Один сайт проще обновлять, чем отдельные версии.
- Доступность контента. Основной текст, меню, изображения и формы остаются доступными на всех устройствах.
Адаптивная верстка и SEO
Адаптивная верстка влияет на SEO косвенно и технически. Если мобильная версия неудобна, поисковый робот и пользователь могут видеть проблемы: горизонтальную прокрутку, мелкий текст, слишком близкие кнопки, скрытый контент, медленную загрузку и неработающие формы.
Для SEO важно, чтобы на мобильной версии были доступны:
- основной текст страницы;
- H1-H6 и структура заголовков;
- внутренние ссылки;
- изображения с alt;
- цены, характеристики, условия и коммерческие блоки;
- форма заявки, корзина или другое целевое действие;
- микроразметка и важные технические элементы.
Адаптивная верстка и Core Web Vitals
Качество адаптивной верстки связано с Core Web Vitals. Неправильные размеры изображений, тяжёлые мобильные стили, поздняя загрузка шрифтов и нестабильные блоки могут ухудшать LCP, CLS и INP.
- LCP. Главный элемент первого экрана должен быстро загружаться на мобильных устройствах.
- CLS. Блоки не должны прыгать при загрузке изображений, баннеров и шрифтов.
- INP. Меню, фильтры, формы и кнопки должны быстро реагировать на действия.
Частые ошибки адаптивной верстки
- нет тега viewport;
- страница имеет горизонтальную прокрутку;
- текст слишком мелкий на смартфоне;
- кнопки и ссылки слишком близко друг к другу;
- меню неудобно открывается или закрывается;
- форма заявки плохо работает на мобильном экране;
- таблицы не адаптируются и выходят за экран;
- изображения не масштабируются;
- важный контент скрыт на мобильной версии;
- мобильная версия загружается тяжелее десктопной;
- попапы перекрывают основной контент;
- фильтры и корзина не работают с сенсорным управлением.
Как проверить адаптивную верстку
- открыть сайт на реальных смартфонах и планшетах;
- проверить разные ширины экрана в DevTools;
- проверить отсутствие горизонтальной прокрутки;
- проверить кликабельность кнопок, меню и ссылок;
- протестировать формы, корзину, фильтры и поиск;
- сравнить мобильный и десктопный контент;
- проверить скорость через PageSpeed Insights;
- просканировать сайт краулером с mobile user-agent;
- посмотреть данные в Google Search Console и Яндекс Вебмастере.
Адаптивная верстка и GEO для ИИ-поиска
Для ИИ-поиска адаптивная верстка важна косвенно. Нейросетевые системы оценивают прежде всего содержание, но если страница плохо доступна на мобильных устройствах, скрывает основной контент или ломает структуру, это ухудшает общее качество источника.
Хорошая адаптивная верстка помогает сохранить смысловую структуру: заголовки, таблицы, FAQ, списки, изображения и внутренние ссылки остаются доступными на любом устройстве. Это важно и для пользователей, и для поисковых систем, и для ИИ-агрегаторов.
Чек-лист адаптивной верстки
- Настроен meta viewport.
- Нет горизонтальной прокрутки.
- Текст читается без масштабирования.
- Кнопки удобны для нажатия пальцем.
- Меню понятно работает на смартфоне.
- Формы удобно заполнять.
- Таблицы и карточки адаптируются.
- Изображения масштабируются и не ломают сетку.
- Основной контент не скрыт на мобильной версии.
- Мобильная версия быстро загружается.
- Core Web Vitals проверены отдельно для mobile.
- SEO-элементы доступны на всех устройствах.
Комментарий экспертаАдаптивная верстка — это не просто «чтобы сайт сжимался на телефоне». Хорошая адаптивность сохраняет смысл, конверсию и техническую доступность страницы. При аудите я смотрю не только на внешний вид, но и на то, остались ли на мобильной версии контент, заголовки, ссылки, формы, цены, FAQ и коммерческие элементы. Если мобильная версия урезана или неудобна, это проблема и для SEO, и для продаж.
Вопросы и ответы об адаптивной верстке
Адаптивная верстка — это подход к созданию сайта, при котором страница автоматически подстраивается под размер экрана и устройство пользователя. Сайт должен быть удобным на компьютере, планшете и смартфоне.
Адаптивная верстка обычно использует один URL и один HTML-код, который меняет внешний вид через CSS. Отдельная мобильная версия может располагаться на другом URL или поддомене, например m.site.ru.
Да, косвенно и технически. Если сайт плохо работает на мобильных устройствах, это ухудшает пользовательский опыт, доступность контента, Core Web Vitals и может мешать поисковой видимости.
Mobile-first — это подход, при котором сначала проектируется и верстается мобильная версия, а затем интерфейс расширяется для планшетов и десктопов. Такой подход помогает сфокусироваться на главном контенте и действиях пользователя.
Признаки: горизонтальная прокрутка, мелкий текст, неудобные кнопки, сломанное меню, скрытый контент, неработающие формы, медленная загрузка и отличие мобильной версии от десктопной по важному содержанию.
Связанные термины
- адаптивный дизайн;
- responsive design;
- mobile-first;
- media queries;
- CSS;
- HTML;
- Flexbox;
- CSS Grid;
- viewport;
- Core Web Vitals;
- LCP;
- CLS;
- INP;
- мобильная версия;
- UX;
- технический аудит сайта;
- SEO-аудит;
- GEO;
- ИИ-поиск.
