Как правильно создать адаптивный сайт - от верстки до проверки

Больше 65% пользователей заходят в интернет с мобильных устройств - смартфонов, планшетов, небольших ноутбуков с сенсорными экранами. Когда я начинал работу в маркетинге, картина была другой: люди сидели за десктопами, и о мобильном трафике всерьёз никто не думал. Теперь всё изменилось. Если веб-страница некорректно отображается на телефоне - текст слишком мелкий, кнопки не нажимаются, горизонтальный скролл тянется вбок - пользователь закрывает браузер и уходит. А сайт при этом теряет позиции в поисковой выдаче: Google это видит и учитывает.

Адаптивность стала обязательным требованием при создании современного сайта. Уже не нужно поддерживать отдельную мобильную версию - адаптивный сайт сам перестраивает структуру блоков под ширину экрана устройств пользователя и корректно отображается в любом браузере без лишних действий.

Адаптивный сайт автоматически подстраивается под ширину экрана любого устройства - от смартфона до широкоформатного монитора.

Start-Luck.ru

В этой статье я разберу, как это работает на уровне HTML и CSS: виды верстки, два подхода к построению макета, конкретные инструменты и типичные ошибки. Границы сразу: статья про техническую сторону веб-разработки, не про конструкторы сайтов и готовые темы CMS.

Что такое адаптивный сайт: виды и отличия от похожих понятий

Адаптивный сайт - это сайт, который корректно выглядит и работает на экранах разных размеров: смартфонах, планшетах, ноутбуках и широких мониторах. Но само слово «адаптивный» часто используют неточно, смешивая несколько разных подходов к вёрстке. Чтобы не путаться, вот четыре основных вида макета и их принципиальные различия на практике.

Фиксированная верстка: ширина страницы задана в пикселях и не меняется. Если экран уже макета - появляется горизонтальная прокрутка. Контент и блоки стоят жёстко, структуру не меняют ни при каких условиях. Такой подход использовался в начале 2000-х и сейчас практически не встречается в новых проектах.

Резиновая верстка использует процентные значения ширины вместо фиксированных пикселей - блоки тянутся вместе с окном браузера. Это шаг вперёд по сравнению с фиксированной версткой, но не полное решение: на очень широком мониторе текст расплывается в длинные строки, а на узком экране блоки сжимаются до нечитаемого состояния. Без дополнительных инструментов правильного отображения на всех устройствах не добиться.

Отзывчивая верстка сочетает принципы резиновой и адаптивной верстки: гибкая сетка тянется вместе с окном, а медиазапросы перестраивают структуру и контент блоков в нужных точках. Именно эта схема сегодня считается стандартом, и когда в студии мы говорим «адаптивный сайт», имеем в виду именно её.

Важно разграничить два термина, которые путают даже разработчики. Адаптивная верстка сайта (adaptive) - технически несколько фиксированных версий: отдельный макет для мобильной версии, планшета и десктопа под конкретные разрешения экранов. Отзывчивая верстка (responsive) строит один гибкий макет, который подстраивает блоки и контент под любые разрешения без жёстких фиксированных точек. В коде разница ощутимая, хотя оба понятия попадают под общее определение «адаптивный дизайн».

Зачем делать сайт адаптивным: SEO, конверсии и пользовательский опыт

Google учитывает адаптивность при ранжировании сайтов в поисковой выдаче. С 2019 года поисковик перешёл на Mobile First индексацию: робот сначала сканирует мобильную версию страницы, и именно она определяет позиции в поиске. Если сайт не прошёл проверку Google Mobile Friendly - он проигрывает конкурентам с адаптивными версиями ещё до того, как пользователь видит результаты выдачи. Адаптивность сайта из дополнительного преимущества превратилась в базовый входной билет для борьбы за топ среди популярных запросов.

На конверсиях это тоже сказывается - и у меня есть конкретные цифры. В практике с клиентами студии «Мельница» я видел один и тот же сценарий: компания вкладывает деньги в рекламу, трафик идёт, а заявок нет. Смотрим аналитику - 70% посетителей с мобильных, а сайт не адаптирован. Людям неудобно пользоваться им с телефона: кнопки мелкие, форма не помещается на экране, тексты нужно приближать. Они уходят без действия. После того как мы делали адаптивную верстку на одном из таких проектов, конверсия выросла вдвое - без изменений в рекламе и контенте.

Мобильная версия сайта влияет на скорость загрузки и поведенческие факторы. Когда правильного отображения нет - пользователь уходит в первые секунды, время на сайте минимальное, показатель отказов растёт. Это сигнал для поисковика, что страница не решает задачу посетителя. Адаптивная верстка, построенная по принципу Mobile First, помогает держать скорость загрузки в норме: лёгкий мобильный макет работает быстрее громоздкого десктопного, особенно на слабом мобильном интернете.

Люди привыкли, что сайт работает одинаково хорошо на всех устройствах. Неадаптированный сайт сразу считывается как несерьёзный. Для бизнеса это прямые потери: человек не оставит заявку, если кликабельных кнопок нет на нужных местах, если текст едва читается, если форма ведёт себя непредсказуемо. Удобный сайт работает на результат.

Два подхода к адаптивной верстке: Mobile First и Desktop First

Когда начинаешь создавать адаптивные сайты, первый вопрос - с чего стартовать верстку: с мобильной версии или с десктопной? Это не вопрос вкуса, а вопрос стратегии. Существуют два основных метода, и выбор между ними влияет на то, как прописывается код, насколько удобно его потом поддерживать и как хорошо сайт будет ранжироваться в поиске.

Подход Mobile First предполагает написание базовых стилей сначала для мобильных, а потом расширение для больших экранов. То есть сначала пишешь CSS без медиазапросов: просто базовые стили для маленького экрана, а затем через @media (min-width: ...) добавляешь правила для планшетов и desktop. Google официально рекомендует именно этот подход: большинство пользователей приходит с телефонов, и логично в первую очередь отработать именно этот сценарий. Desktop First работает наоборот: ты пишешь полную версию для большого экрана, а потом через @media (max-width: ...) прописываешь упрощения для меньших устройств. Этот метод интуитивно понятен разработчикам с опытом в «классической» верстке - ты видишь полную картину и постепенно убираешь лишнее.

Вот как выглядит синтаксис Mobile First на практике:

/* Mobile First: базовые стили для мобильных */
.container { width: 100%; padding: 0 16px; }

/* Расширяем для планшетов */
@media (min-width: 768px) {
 .container { max-width: 960px; }
}

/* Расширяем для десктопа */
@media (min-width: 1280px) {
 .container { max-width: 1200px; }
}

Сравним оба подхода, чтобы было понятно, когда какой применять:

Мой совет: если только осваиваешь адаптивную верстку сайта - стартуй с Mobile First. Поначалу непривычно, потому что мышление разработчика заточено под большие экраны, но итоговый код получается чище и лучше поддерживается. Для редизайна уже готового desktop-проекта Desktop First может быть практичнее - это вопрос конкретного контекста реализации. Главное понимать, что оба метода ведут к одному результату: пользователь получает удобный сайт на любом устройстве.

Основные принципы адаптивной верстки: от viewport до брейкпоинтов

За годы работы я выделил несколько ключевых правил, на которых держится адаптивная верстка. Проверяю их при аудите каждого проекта - без этих вещей всё остальное рассыпается. Шесть принципов, каждый из которых напрямую влияет на то, как сайт выглядит и работает на разных устройствах.

Мета-тег viewport. Мета-тег viewport задает начальный масштаб и ширину области просмотра. Без него браузер на мобильном рендерит страницу как desktop-версию и масштабирует её вниз - получается нечитаемый мелкий текст. Это первая строчка, которую я ставлю в head любого адаптивного проекта:

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

Медиазапросы CSS применяют разные стили в зависимости от ширины экрана - именно они управляют расположением элементов и их размерами под каждый формат. Контрольные точки, или брейкпоинты, определяют, при какой ширине переключается раскладка. Рабочий набор: 360px, 768px, 1024px и 1280px - покрывают большинство реальных устройств. Под каждую контрольную точку прописываются отдельные правила CSS: меняются размеры элементов, их расположение, отступы, шрифты.

Относительные единицы em, rem и % дают гибкое масштабирование шрифтов и отступов. Если задать шрифт в пикселях - он будет одинаковым на всех экранах, что плохо для читаемости. Rem привязан к корневому размеру шрифта html-элемента, em - к родительскому. В зависимости от ширины экрана размер основного шрифта меняется через одно правило на :root - и всё остальное перестраивается автоматически. Процент хорошо работает для width и отступов, делая блоки по-настоящему гибкими.

Контейнер с max-width ограничивает максимальную ширину контента на широких экранах - без него текст на большом мониторе растянется во всю ширину и станет неудобным для чтения. Вот базовый контейнер, который я использую в большинстве проектов:

.container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px;
}

Здесь width: 100% дает гибкость на маленьких экранах, max-width задает максимальное значение для широких мониторов. Минимальную ширину я отдельно почти никогда не прописываю - достаточно padding и резинового width.

О поточности часто забывают, а зря. Блоки в адаптивной верстке должны перестраиваться в потоке, а не перекрывать друг друга. Если элемент не помещается в ширину контейнера - он уходит на следующую строку, не выходя за пределы экрана. Flexbox или CSS Grid в сочетании с правильными значениями width решают это без лишнего кода.

Оптимизация изображений замыкает список. Картинка с max-width: 100% автоматически сжимается до ширины блока. Для мобильных я рекомендую подключать изображения меньшего разрешения через атрибут srcset - это экономит трафик пользователя и ускоряет загрузку, что напрямую влияет на поведенческие факторы и позиции в поиске.

Создание адаптивного сайта с нуля: пошаговый план

Создание адаптивного сайта с нуля обходится в 1,5-2 раза дешевле переделки готового десктопного - я вижу это на практике постоянно. Поэтому, когда ко мне приходит заказчик с вопросом «как сделать сайт адаптивным», первый мой вопрос - на каком этапе находится проект. Если стартуем с нуля - отлично, разберем пошагово. Если уже есть готовый макет сайта без адаптивности - придется повозиться.

Семь шагов создания адаптивного - от первой строчки разметки до финальной кнопки.

1. HTML-структура и мета-тег viewport. Без тега viewport мобильные браузеры рендерят страницы как десктоп, просто уменьшая масштаб - и никакие медиазапросы не спасут. Семантическая разметка страницы помогает адаптировать сайт блок за блоком, не путаясь в структуре.

   <!DOCTYPE html>
   <html lang="ru">
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
   </head>
   <body>
    <header class="header">...</header>
    <main class="main">...</main>
    <footer class="footer">...</footer>
   </body>
   </html>

2. Базовые CSS-стили. Первым делом прописываю box-sizing: border-box для всех элементов сайта - это снимает большинство проблем с расчетами ширины колонок. Размеры шрифта - в rem, отступы - в em, ширина контейнера - max-width в пикселях плюс width: 100%.

3. Медиазапросы под брейкпоинты. Пишем стили от мобильного к десктопному - принцип Mobile First. Каждый медиазапрос переопределяет только то, что меняется на конкретном брейкпоинте, а не переписывает весь блок целиком. Это сильно упрощает поддержку кода.

4. Адаптивная шапка: логотип и навигацию. Шапка - самое заметное место, с нее и начнем. На мобильных горизонтальную навигацию прячем, логотип оставляем компактным, добавляем бургер-меню. Через Flexbox выстраиваем шапку так: на десктопе - логотип слева, меню справа в строку; на мобильном - логотип и бургер в одну строку, меню раскрывается по клику.

5. Гибкие изображения. Изображения масштабируются корректно через свойство max-width: 100% и height: auto - это три строчки CSS, которые должны быть в базовом сбросе каждого проекта.

   img {
    max-width: 100%;
    height: auto;
    display: block;
   }

6. CSS Grid и Flexbox для сетки колонок. Сетка - скелет макета сайта. На десктопе - три-четыре колонки, на планшете - две, на мобильном - одна. Это решается несколькими строчками CSS без дублирования HTML-разметки. Выбор между Grid и Flexbox зависит от задачи - подробнее в следующем блоке.

7. Адаптация кнопок. Кликабельные элементы должны иметь минимальный размер 40-44 пикселя для удобства нажатия пальцем - это требование Apple и Google, а не пожелание. На мобильных кнопки растягиваю на всю ширину - статистика по нашим проектам показывает рост кликабельности на 15-25%.

   .btn {
    min-height: 44px;
    padding: 12px 24px;
    font-size: 1rem;
   }
   
   @media (max-width: 768px) {
    .btn { width: 100%; }
   }

Типовой лендинг по этому плану мы верстаем за 3-4 дня. Первый раз займет больше - но это вложение в понимание процесса. Потом сделать адаптивный следующий сайт выйдет вдвое быстрее.

CSS-инструменты для адаптивности: медиазапросы, Flexbox и CSS Grid

Flexbox управляет расположением элементов внутри контейнера - это первый из трех инструментов адаптивного дизайна, которыми я пользуюсь каждый день. Второй - медиазапросы, третий - CSS Grid. У каждого своя роль, и понимание этой роли сокращает количество лишнего кода вдвое.

Медиазапросы можно комбинировать через and: @media (min-width: 768px) and (max-width: 1024px) задаёт правила только для планшетов. Через них меняем размеры элементов, скрываем целые блоки, перестраиваем сетку колонок. Применяется к любым CSS-свойствам - от отступов и шрифтов до display и grid-template.

Главное правило: не плодить брейкпоинты без нужды. Я работаю с четырьмя - 360, 768, 1024 и 1280 пикселей. Этого хватает для корректного отображения контента на 95% реальных устройств.

Flexbox решает задачи в одном измерении: строки или колонки. Ключевое свойство для адаптивности - flex-wrap: wrap. Блоки переносятся на новую строку, когда перестает хватать ширину контейнера. В сочетании с flex-basis задает минимальный размер каждого блока - в пикселях или процентах.

.card-row {
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
}
.card {
 flex: 1 1 280px; /* растягиваются/сжимаются, но не уже 280px */
}

С помощью justify-content управляем расположением гибких блоков по главной оси: center, space-between, flex-start. Это удобно для шапок, навигаций, строк с карточками - всего, что живет в одном направлении.

CSS Grid с repeat(auto-fit, minmax()) создает адаптивную сетку без единого медиазапроса - браузер сам считает, сколько колонок поместится при текущей ширине экрана.

.grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 24px;
}

Этот фрагмент кода заменяет три медиазапроса. Контейнер перестраивает колонки автоматически: четыре на широком мониторе, две на планшете, одна на телефоне. Grid задает структуру сразу по строкам и колонкам - в этом его принципиальное отличие от Flexbox. Применяется для карточных каталогов, портфолио, раскладок с боковой колонкой.

Свойство object-fit: cover сохраняет пропорции изображения при изменении размеров контейнера - незаменимо для карточек с фото, где высота фиксирована, а ширина зависит от сетки.

Когда что использовать - коротко:

• Медиазапросы - когда нужно полностью изменить отображение контента или макет на конкретном брейкпоинте
• Flexbox - для шапок, навигаций, кнопок, строк с карточками - всего линейного
• CSS Grid - для двумерных раскладок: каталоги, галереи, страницы с боковой панелью

Bootstrap и Tailwind CSS - готовые CSS-фреймворки для адаптивной верстки - оба дают сетку, брейкпоинты и утилитарные классы из коробки. Для быстрого прототипа или типового корпоратива - разумный выбор. Для нестандартного проекта или когда важен вес CSS - пишем с нуля по схеме выше.

Типичные ошибки при создании адаптивного сайта и как их исправить

Когда я провожу аудит чужих проектов, одни и те же частые ошибки встречаются снова и снова. Разработчик верстает на широком мониторе, всё выглядит нормально - и сдаёт проект. Клиент открывает на смартфоне: горизонтальный скролл, мелкие кнопки, съехавшие изображения. Адаптивность сайта рассыпается именно в таких деталях, которые легко упустить, если не следить за правильным отображением на разных экранах с самого начала. Знать эти ошибки заранее - значит не потерять потом несколько дней на переделки после запуска.

Самые болезненные симптомы - нечитабельные шрифты, слишком мелкие кнопки и изображения, которые вылезают за границы экрана и ломают верстку. Каждая из этих проблем имеет конкретную техническую причину и конкретное решение. Вот что встречается чаще всего.

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

Как проверить адаптивность сайта: инструменты и методы

Сверстать адаптивный макет - это полдела. Важно убедиться, что всё работает так, как задумано, на разных устройствах и браузерах. Я проверяю адаптивность сайта на каждом этапе, а не только в конце - так проще поймать проблему, пока она не обросла зависимостями. Есть несколько способов, и грамотнее использовать их в связке.

1. Chrome DevTools

Инструменты разработчика Chrome позволяют эмулировать разные разрешения экранов прямо в браузере. Откройте сайт в Chrome, нажав F12 или сочетание Ctrl+Shift+I. Перейдите во вкладку с иконкой телефона - это режим адаптивного просмотра. Можно выбрать готовые пресеты устройств (iPhone, Pixel, Galaxy) или задать ширину вручную. Панель инструментов разработчика позволяет также редактировать CSS в реальном времени: изменил значение - сразу видишь результат. Для быстрой проверки мобильной версии без лишних инструментов это самый удобный вариант.

2. Google Search Console и PageSpeed Insights

Google Search Console позволяет проверить адаптивность через раздел Mobile Usability: там отображаются страницы с конкретными проблемами - слишком мелкий текст, кнопки расположены слишком близко друг к другу, контент выходит за ширину экрана. Зайдите в консоль, перейдите в раздел Experience - Mobile Usability и посмотрите список ошибок по URL. Дополнительно рекомендую PageSpeed Insights (pagespeed.web.dev): сервис анализирует страницу по метрикам Core Web Vitals отдельно для мобильных и десктопа. Показывает конкретные проблемы с производительностью и даёт рекомендации по устранению. Google учитывает эти метрики при ранжировании - проверять их стоит после каждого значительного изменения в верстке.

3. Онлайн-сервисы

Сервисы вроде Responsinator, BrowserStack или Am I Responsive? показывают сайт одновременно в нескольких разрешениях - удобно оценить, как страница выглядит на планшете, смартфоне и в горизонтальном режиме за один взгляд. Часть из них платная, но бесплатных возможностей обычно хватает для проверки отображения сайта на ключевых брейкпоинтах.

4. Реальные устройства

Это самый важный способ проверить адаптивность сайта - и самый недооценённый. Эмулятор в браузере хорошо имитирует разрешение экрана, но не воспроизводит всё: разный рендеринг шрифтов на iOS и Android, поведение сенсорного скролла, реакцию страницы на появление экранной клавиатуры при вводе в форму. По реальному устройству видно то, что никакой эмулятор не покажет. Я всегда прогоняю финальную версию проекта по живому iPhone и одному из Android-аппаратов - это занимает 15 минут, но страхует от неприятных сюрпризов после запуска.

С чего начать прямо сейчас

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

Если вы только знакомитесь с темой - не пытайтесь сразу охватить всё. Начинайте с основ: viewport, относительные единицы, один медиазапрос под мобильные. Этого уже достаточно, чтобы сайт нормально открывался на телефоне. Остальное - flexbox, grid, оптимизация изображений, сложные брейкпоинты - придёт с практикой.

Вот чек-лист, который пригодится прямо сейчас:

1. Проверьте наличие тега viewport в <head> каждой страницы сайта.
2. Замените фиксированные px на гибкие единицы там, где это влияет на ширину блоков.
3. Добавьте медиазапросы для ключевых брейкпоинтов: 360px, 768px, 1024px.
4. Откройте Chrome DevTools и пройдитесь по сайту в режиме мобильного устройства.
5. Проверьте страницы в Google Search Console (раздел Mobile Usability) или запустите PageSpeed Insights на pagespeed.web.dev.

Адаптивная верстка - это не разовая задача, а постоянная часть работы. Каждый новый блок, каждый новый раздел сайта - проверяйте на мобильном. Делайте это в процессе, а не после. Тогда ни одна проблема не накопится до критического момента.

Адаптивность влияет на позиции в поиске, на конверсию и на то, остаётся ли пользователь или уходит через 5 секунд. Начните с малого: viewport, базовые медиазапросы, гибкие изображения. Дальше разберётесь.

Эта статья основана на личном опыте автора и актуальна на момент публикации. Интерфейсы сервисов и алгоритмы поисковых систем регулярно меняются - рекомендую проверять актуальность инструкций на официальных ресурсах. Если у вас остались вопросы - задайте их в комментариях.

Список литературы

1. Google - Mobile-first indexing best practices // Google Search Central // developers.google.com
2. Google - Learn Responsive Design // web.dev
3. Mozilla Developer Network - CSS Grid Layout // MDN Web Docs
4. Mozilla Developer Network - Отзывчивый дизайн // MDN Web Docs