Адаптивная вёрстка сайта: зачем нужна и как сделать

Наверняка случалось такое, что вы со смартфона заходили на какой-нибудь сайт и видели, что пользоваться им очень неудобно:

Что вы в большинстве случаев сделаете, попав на такой сайт? Закроете его: зачем страдать, когда можно попытать счастья на другом, более удобном ресурсе. 

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

Обидно? Еще как! 

Сегодня более 60% трафика приходится на мобильные устройства, и поисковые системы учитывают адаптивность при ранжировании сайтов. Если ваш ресурс не подстраивается под разные экраны, вы теряете аудиторию, продажи и доверие.

Виды вёрстки 

Решить проблему отображения на мобильных устройствах пытались разными способами. С развитием технологий методы совершенствовались. 

Фиксированная (статичная) вёрстка

Первоначальный вариант, которым пользовались первопроходцы интернета. Ни о каких мобильных устройствах речи не шло, поэтому сайт верстался под конкретный размер экрана пользователя (как правило, под монитор компьютера шириной 960–1200 px). Если такой веб-ресурс открыть на мобильном устройстве, то либо появится горизонтальная прокрутка (текст не умещается на экране), либо вся страница уменьшится, чтобы влезть в размер. 

Плюс:

Минусы:

Фиксированная вёрстка с отдельной мобильной версией

Более продвинутый вариант. Сайт создаётся со статичным дизайном под ПК, а для мобильных устройств разрабатывается отдельный ресурс (как правило, на поддомене) тоже со статичным дизайном, но под конкретное мобильное устройство: смартфон или планшет. По сути, тут та же самая фиксированная вёрстка, только нужно делать больше сайтов, а потом проверять устройства пользователей, чтобы перенаправлять людей на нужный поддомен. 

Плюсы:

Минусы:

Резиновая (отзывчивая) вёрстка

Резиновая (отзывчивая) вёрстка сайта — это подход, при котором элементы страницы меняют свои размеры пропорционально ширине окна браузера. В отличие от фиксированной, где размеры задаются в пикселях, здесь используются относительные единицы измерения: проценты, vw, vh.

Плюсы:

Минусы:

Адаптивная вёрстка

Адаптивная вёрстка — это подход к созданию веб-страниц, при котором сайт автоматически подстраивается под размер экрана компьютера, планшета или смартфона.

Обратите внимание! Резиновая и адаптивная вёрстка — не одно и то же. 

Часто адаптивную путают с резиновой, но тут есть три отличия. 

1. В адаптивной используют контрольные точки (breakpoint), которые задают границы использования стилей с помощью медиа-запросов. В зависимости от того, в какой диапазон между контрольными точками попадает ширина экрана, будет использован свой набор стилей отображения элементов. При этом размеры могут быть заданы как процентами или другими относительными единицами, так и фиксированным значением. 
2. В резиновой вёрстке вид сайта изменяется плавно, в адаптиве — прерывисто при переходе контрольной точки. 
3. Возможно изменение положения блоков — в отличие от резиновой, где элементы могут только растягиваться/сжиматься, в адаптиве элементы меняют порядок и место расположения на странице в зависимости от ширины экрана. 

Для современных проектов оптимально использовать оба подхода вместе: резиновую основу и адаптивные приёмы.

 Сравнительная таблица основных типов вёрстки

Критерий	Фиксированная	Резиновая	Адаптивная
Основной принцип	Жёсткие размеры в px	Гибкие размеры в % и vw/vh	Комбинация подходов + медиазапросы
Поведение при изменении ширины	Появляется скролл или пустые поля	Плавное масштабирование	Дискретные изменения в точках перехода
Единицы измерения	px	%, vw, vh	px, %, em/rem + медиазапросы
Мобильная адаптация	Отсутствует	Частичная	Полноценная
Сложность реализации	Низкая	Средняя	Высокая
Контроль над дизайном	Максимальный	Средний	Гибкий
Использование пространства	Неэффективное	Умеренное	Оптимальное
Типичное применение	Устаревшие сайты	Простые современные сайты	Коммерческие сайты, веб-приложения
SEO-оптимизация	Плохая	Средняя	Отличная
Поддержка мобильных устройств	Не поддерживается	Базовое масштабирование	Полноценная оптимизация
Графические элементы	Могут обрезаться	Масштабируются	Адаптируются и оптимизируются
Типовая структура	Жёсткие блоки	Гибкие блоки	Динамически изменяемые блоки
Современные технологии	Устарела	Используется как основа	Стандарт современного веба

Исходя из вышесказанного, можно выделить преимущества адаптивной вёрстки:

Вы уже поняли, да? 

Адаптивная вёрстка — мастхэв для успешного сайта. 

Но прежде чем бросаться разрабатывать адаптивный сайт, нужно еще немного теории.

Максим
Тарасенко

Основатель ReMarketing

Разработка сайтов с учётом особенностей ниши и поведенческих привычек ваших клиентов.

Узнать подробнее

Принципы адаптивной вёрстки

При адаптивной вёрстке важно соблюдать несколько правил:

1. Единое содержание. Весь контент, доступный в десктопной версии, должен присутствовать и в мобильной. Если пользователь не найдет нужную информацию на телефоне, ему придется искать компьютер, заходить на сайт и снова открывать нужный раздел. Будет ли он это делать? Вряд ли.
2. Единый дизайн. Оформление должно быть узнаваемым на всех устройствах. Если на компьютере сайт выполнен в зелёных тонах, а на телефоне вдруг становится красным, пользователь решит, что попал на другой ресурс. Шрифты, цветовая гамма, логотипы и другие элементы должны оставаться одинаковыми.
3. Полноценный функционал. Если на компьютере есть фильтры, сортировка или разные режимы отображения контента, они должны сохраняться в мобильной версии. 
4. Логическая структура. Расположение элементов: заголовков, текста, изображений, кнопок должно соответствовать целям сайта. Например, если главная задача — продажа товаров, то порядок блоков должен вести пользователя к покупке: сначала информация о продукте, затем ответы на возможные вопросы и только потом кнопка заказа. Менять эту последовательность при адаптации под мобильные устройства не стоит — это сбивает пользователя с пути.
5. Удобные для касания элементы. На мобильных устройствах навигация происходит с помощью пальцев, а не мыши. Поэтому все кликабельные элементы: кнопки, ссылки, иконки должны быть крупными. Иначе пользователям будет сложно попасть по ним.
6. Удобство чтения информации. Тут не только о размере шрифта, но и расположении строк и колонок. Не забывайте, что на мониторе человек читает слева направо, а на смартфоне — сверху вниз. 

Хорошим тоном считается использовать принцип Mobile First (сначала мобильные) при разработке. Суть его в том, что сначала верстается мобильная версия, а затем стили редактируются под более широкие экраны. За этот подход ратуют поисковые системы (Google в особенности), потому что, повторюсь, более половины трафика идет именно с мобильных устройств. 

Размеры экранов для адаптивной вёрстки

Для различных типов устройств принято ориентироваться на следующие базовые размеры:

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

Теперь перейдем от теории к практическому руководству.

Как сделать адаптивную вёрстку: пошаговая инструкция

Прототипирование

Оговорюсь, что здесь подразумевается, что вы уже продумали структуру сайта, определили его цели и задачи. 

Прототипирование — создание макета будущего сайта, «костяка» страниц. На основе прототипов создается дизайн. Да, можно сразу нарисовать красивый дизайн и не тратить время на серые квадратики. Но это может быть чревато последствиями, ведь прототип позволяет:

Исправление ошибок на этапе прототипа гораздо проще и дешевле, чем в готовом дизайне или на сайте. Поэтому не стоит пренебрегать данным пунктом. 

Хорошим инструментом для создания прототипов можно назвать Axure RP.

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

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

Если неудобно устанавливать ПО на компьютер, можно воспользоваться онлайн-сервисами. Например, Moqups (Мокапс). Здесь также можно создавать прототипы страниц сайта в довольно простом визуальном редакторе. 

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

Отрисовка дизайна

Если на этапе прототипов выверяется логика интерфейса, и устраняются ошибки, то здесь задача дизайнера — придать сайту фирменный стиль. Хороший специалист отрисует минимум два варианта — для десктопной и мобильной версий. В идеале — вообще три, чтобы еще и планшеты спроектировать.

Конечно, можно обойтись только какой-то одной, а остальные «сами как-нибудь». Но это означает, что разработчику, который будет переносить дизайн с картинки на сайт, придется самому додумывать недостающие детали. А это не всегда будет соответствовать ожиданиям. 

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

Для этих целей подойдет графический редактор Figma. 

Figma — облачный редактор для дизайна интерфейсов и прототипирования. Позволяет создавать макеты сайтов и мобильных приложений, работать над проектами в команде в реальном времени.

Да-да, в Figma тоже можно создавать прототипы. Но я считаю Axure RP более функциональным инструментом в данном области. Конечно, выбор между Figma и Axure зависит от потребностей и задач проекта, а также предпочтений исполнителя. 

В чем Figma действительно хороша, так это в удобстве создания дизайнов. С ней приятно работать как дизайнеру, так и разработчику. 

Определение контрольных точек

Разработчику (или верстальщику) важно заранее определить количество breakpoints, чтобы не упустить какой-либо диапазон. Повторюсь, количество точек может быть любым. Это зависит от сложности структуры и дизайна. Также мастеру надо решить, с какого конца он начнет работу — Mobile First или вначале десктоп-вариант. 

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

Самые популярные фреймворки для вёрстки CSS:

Базовая HTML-разметка

Когда все распланировано и определено, можно приступать непосредственно к разработке сайта.

Адаптивная вёрстка возможна на любой CMS, главное, чтобы была поддержка HTML, CSS, JavaScript и доступ к редактированию.

Разработка начинается с формирования основной HTML-структуры сайта. На этом этапе проектируются и реализуются фундаментальные компоненты веб-страницы: основные блоки, система навигации, контентные секции и прочие ключевые элементы. Особое внимание уделяется применению семантических тегов HTML5, что обеспечивает не только правильную визуальную организацию контента, но и улучшает доступность, SEO-оптимизацию и общее качество кода. Грамотно построенная разметка служит надежным фундаментом для последующего оформления стилей и добавления интерактивности.

Пример HTML-разметки базовой структуры:

<header class="header">
        <div class="container">
            <a href="/" class="logo">Логотип</a>
            <nav class="nav">
                <ul>
                    <li><a href="/">Главная</a></li>
                    <li><a href="/about">О нас</a></li>
                    <li><a href="/services">Услуги</a></li>
                    <li><a href="/contacts">Контакты</a></li>
                </ul>
            </nav>
           </div>
    </header>

   <main class="main">
        <section class="banner">
            <div class="container">
                <h1>Заголовок страницы</h1>
                <p>Вводный текст или описание</p>
                <a href="#" class="button">Кнопка действия</a>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <article class="feature">
                    <h2>Преимущество 1</h2>
                    <p>Описание преимущества</p>
                </article>
                <article class="feature">
                    <h2>Преимущество 2</h2>
                    <p>Описание преимущества</p>
                </article>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="copyright">© 2025 Remarketing</div>
            <div class="phone">
                <a href="tel:+71234567899">+7 (123) 456-78-99</a>           
            </div>
        </div>
    </footer>

Применение базовых стилей

Сюда входит как установка фреймворков, так и написание стилей основного дизайна. По сути данный этап — создание полноценной версии сайта для одного экрана (мобильного или десктопа). 

Пример:

body {
  font-size: 16px;
  line-height: 1.5;
}

.header {
  padding: 20px;
}

Медиазапросы для контрольных точек

После вёрстки первой версии можно приступать к созданию адаптивности с помощью медиазапросов.

Медиазапросы — это CSS-правила, которые позволяют применять разные стили в зависимости от характеристик устройства:

Пример кода:

/* Основной стиль */

h1 {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Для экранов шириной ≥ 768px */

@media screen and (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
    line-height: 1.5;
  }
}

/* Основной стиль - блоки в колонку */

.card {
  flex-direction: column;
}

/* Для экранов шириной ≥ 768px - блоки в строку */

@media  screen and (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

Для корректной работы адаптивных стилей важно наличие метатега viewport на странице. Он располагается в разделе <head> HTML-документа и указывает браузеру, в каком масштабе отображать видимую пользователю область страницы сайта. 

Пример метатега:

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

Если сайт многостраничный, то метатег должен находиться на каждой странице. 

В зависимости от выбранного направления проработки адаптивности (мобильная — десктоп или наоборот), нужно двигаться постепенно, расширяя или сужая экран. 

Пример структуры:

/* Базовые стили (mobile first) */

.element { ... }

/* Планшеты */

@media (min-width: 768px) { ... }

/* Десктопы */

@media (min-width: 1024px) { ... }

/* Большие экраны */

@media (min-width: 1440px) { ... }

Оптимизация медиаконтента

Для обеспечения эффективной работы сайта на различных устройствах необходимо грамотно организовать загрузку графических и видеофайлов. Лучше использовать технологии responsive images — «гибкие изображения» (picture, srcset, sizes) и современные форматы изображений: WebP и AVIF, обеспечивающие высокое качество при минимальном размере.

Пример гибкого изображения:

<img src="image-small.jpg"

     srcset="image-small.jpg 480w,
             image-medium.jpg 768w,
             image-large.jpg 1200w"

     sizes="(max-width: 600px) 480px,
            (max-width: 1024px) 768px,
            1200px"

     alt="Адаптивное изображение">

Для ускорения загрузки страниц следует также использовать «ленивую загрузку» (Lazy Load) изображений. Она обеспечивает подгрузку картинки только тогда, когда пользователь дошел до места её размещения на странице. 

Тестирование

Тестирование сайта после окончания вёрстки проходит по нескольким направлениям. А именно проверяется:

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

Существует ряд сервисов, которые помогут протестировать ресурс без установки множества программ. Например, https://www.browserling.com/, https://www.browserstack.com/, http://browsershots.org/. Но в большинстве своем это зарубежные сервисы, поэтому стабильность доступа к ним не гарантирована. 

Ошибки в коде HTML можно найти с помощью бесплатного сервиса https://validator.w3.org/, а в CSS — https://jigsaw.w3.org/css-validator/.

Проверку адаптивности также можно проводить вручную на различных устройствах. Но вряд ли у вас под рукой будет такое количество гаджетов. Поэтому тут можно воспользоваться встроенными в браузер инструментами разработчика — DevTools. 

Чтобы это сделать:

1. откройте сайт в браузере;
2. воспользуйтесь «горячими клавишами»:
   1. Cmd+Alt+I — macOS;
   2. F12 — Windows;
   3. Ctrl+Alt+I — Linux;
3. в открывшейся панели включите режим адаптивного дизайна.

Как правило, в DevTools есть предустановленные макеты некоторых устройств, но вы можете добавлять свои или же использовать свободный режим для более гибкой настройки. 

Кроме инструментов разработчика, существуют онлайн-сервисы, готовые помочь с проверкой адаптивности. Например, http://www.responsinator.com/.

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

Тестирование и отладку следует проводить до тех пор, пока не исчезнут ошибки или хотя бы не сократятся до приемлемого уровня. 

Разработаем сайт с учётом маркетинговой стратегии проекта

Узнать подробнее

Адаптивная вёрстка и конструкторы сайтов

Вышеописанная инструкция подойдет для сайтов на собственной CMS (Bitrix, WordPress, MODX и т.п.). Для проектов, созданных на базе конструктора (Tilda, WIX и т.п.), она также актуальна, только идет в более сокращенном формате, так как не требуется писать столько HTML- и CSS-кода. Как правило, на таких сервисах уже внедрены свои фреймворки для работы с адаптивной вёрсткой. Вам остаётся лишь перенести дизайн и настроить отображение на экранах в режиме блоков.

Вся соль

Адаптивная вёрстка — это не просто тренд, а необходимый стандарт современного веба. Она делает сайты удобными для всех пользователей, независимо от того, смартфон у них в руках или широкоформатный монитор.

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

Если у вас есть вопросы по разработке и продвижению ресурса, обратитесь к нашим специалистам, которые проведут комплексный аудит и дадут развернутые рекомендации по устранению ошибок.