Что такое адаптивная верстка сайта

Алексей Штарев

CEO PromoPult

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

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

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

Оглавление

• Что такое адаптивная верстка — определение и суть
• Ключевые аспекты адаптивной верстки сайта
• Как работает адаптивная верстка: основные технологии и принципы
• Какие технологии используются
• Гибкая (резиновая) сетка/макет (Flexible Grid Layout)
• Медиа-запросы (CSS media queries)
• Гибкие изображения и медиа (Flexible Images/Media)
• Принцип Mobile First (Mobile First)
• Оптимизированные элементы навигации
• Преимущества адаптивной верстки
• Преимущества адаптивной верстки для пользователей
• Преимущества для бизнеса и SEO
• Преимущества для разработки
• Когда адаптивная верстка особенно важна: типичные кейсы
• Возможные недостатки адаптивной верстки
• Сложность разработки
• Ограниченность кастомизации
• Более низкая производительность
• Потребность в тщательном тестировании
• Разные задачи пользователей
• Как проверить, что верстка действительно адаптивная
• Как вручную проверить сайт на адаптивность
• Какие онлайн-сервисы и инструменты можно использовать для проверки адаптивной верстки
• Рекомендации при разработке: на что обратить внимание
• Заключение

Содержание

Toggle

Что такое адаптивная верстка — определение и суть

Адаптивная верстка (adaptive / responsive web design) — это подход, при котором макет, его элементы и стили автоматически подстраиваются под размер экрана и устройство пользователя.

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

Ключевые аспекты адаптивной верстки сайта

• Гибкость. Контент остается неизменным. При этом его дизайн не статичен, а динамически меняется в зависимости от разрешения. То есть структура, расположение, размер и поведение элементов адаптируются под размер экрана пользователя.
• Единый URL. Создается один сайт с одним HTML/CSS-кодом без необходимости создавать отдельную «мобильную версию». У сайта один и тот же URL-адрес для всех устройств.
• Одинаковый контент и функционал. Весь контент и функционал, который доступен на десктопной версии, доступен и на мобильных устройствах, просто по-другому расположен. Например, на десктопе используется многоколоночный макет, а на смартфоне — одноколоночный.

Как работает адаптивная верстка: основные технологии и принципы

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

Какие технологии используются

Гибкая (резиновая) сетка/макет (Flexible Grid Layout)

Принципы работы гибкой сетки:

• Вместо фиксированных пикселей для ширины и расположения элементов используются относительные единицы измерения (%, em, rem), которые позволяют блокам менять размер.
• Для создания адаптивных и гибких макетов веб-страниц используются специальные CSS-инструменты (CSS Grid и Flexbox). Flexbox используется для одномерных макетов (строка или колонка) и выравнивания содержимого, а CSS Grid — инструмент для одновременного управления строками и колонками, который подходит для каркаса страниц и сложных сеток. Часто эти инструменты используются одновременно.

Медиа-запросы (CSS media queries)

Принципы работы:

• Позволяют применять разные CSS-правила в зависимости от ширины экрана, высоты, ориентации и разрешения.
• Для настройки макета в CSS определяются с помощью @media (min-width: …) или @media (max-width: …).

Гибкие изображения и медиа (Flexible Images/Media)

Изображения и видео масштабируются с использованием параметров типа max-width: 100% ; и height: auto. Это позволяет не «ломать» верстку на экранах смартфонов, делать так, чтобы изображения не выходили за пределы контейнера и корректно меняли размер.

Принцип Mobile First (Mobile First)

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

Оптимизированные элементы навигации

Для экономии места на экранах смартфонов используются различные приемы оптимизации, в том числе «бургер-меню», выпадающие списки, скрываемые блоки (под кнопками размещаются скрываемые описания товаров или комментариев).

Преимущества адаптивной верстки

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

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

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

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

• Удобство пользования. Ресурс корректно отображается и остается функциональным на любом устройстве — от смартфона до десктопа.
• Улучшение пользовательского опыта (UX) — удобная навигация на всех устройствах, поэтому нет необходимости в горизонтальной прокрутке и масштабировании. Также обеспечивается читаемость и корректная работа элементов — кнопок, форм, меню, изображений.
• Быстрая загрузка. Оптимизация изображений и элементов ускоряет загрузку на мобильных устройствах.

Преимущества для бизнеса и SEO

• При прочих равных лучшее ранжирование в выдаче. Google и Яндекс отдают предпочтение адаптивным сайтам, поскольку поисковые системы оценивают пользовательский опыт и юзабилити. Страницы с адаптивной версткой лучше ранжируются в мобильной выдаче.
• Экономия времени и денег. Не нужно тратить средства на разработку и поддержку отдельно мобильной и десктопной версий.
• Единый URL. Упрощает индексацию поисковыми системами, нет дублирования контента, что важно для SEO.
• Повышение конверсии. Улучшение пользовательского опыта приводит к снижению процента отказов и повышению вовлеченности аудитории, а следовательно растет и конверсия.
• Удобство аналитики. Легче отслеживать общие показатели трафика и поведения пользователей, поскольку сайт представлен в единой версии.

Преимущества для разработки

• Меньше трудозатрат в процессе поддержки. Дешевле и проще заниматься обновлением контента для одной версии.
• Гибкость. Использование адаптивной верстки CSS и медиа-запросов позволяет легко адаптировать стили под разные разрешения.

Когда адаптивная верстка особенно важна: типичные кейсы

Адаптивная верстка становится приоритетной, если целевая аудитория заходит на сайт с разных устройств — со смартфонов, планшетов, десктопов. В противном случае сайт будет некорректно отображаться на экранах разного размера. Узнать о том, откуда и по каким запросам приходят посетители, можно из отчетов Яндекс Метрики и Google Analytics. Гайд по настройке Яндекс Метрики и основным отчетам — здесь.

В каких случаях адаптивная верстка критически важна:

• Интернет-магазины, каталоги, сайты с товарами. Покупатели часто совершают покупки с разных устройств. Иногда «путь покупателя» с момента формирования потребности в товаре до его приобретения занимает месяцы, и за это время пользователь может заходить на сайт с разных устройств. Например, сначала он может мониторить предложения интернет-магазинов с мобильного телефона, затем зайти на страницу с десктопа, чтобы лучше изучить предложения, и завершить покупку через несколько недель с планшета. Поэтому важно, чтобы ресурс имел высокое юзабилити на всех устройствах.
• Новостные порталы, блоги, информационные сайты. Читатели нередко используют мобильные устройства для посещения таких ресурсов. Поэтому важно обеспечить читабельность текста как на маленьких, так и на широкоформатных экранах. Также для новостных ресурсов критически важна быстрая загрузка, чему способствует адаптивный дизайн веб сайта.
• Лендинги/посадочные страницы под рекламу. Трафик чаще всего идет с мобильных устройств. Поэтому важно, чтобы форма заказа, CTA-кнопка, контент смотрелись корректно.
• Корпоративные сайты, сайты услуг. Для таких ресурсов важно, чтобы клиент мог быстро ознакомиться с контентом с любого устройства.

Возможные недостатки адаптивной верстки

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

Сложность разработки

Адаптивная веб верстка сложнее в реализации, чем «фиксированная». В процессе ее разработки нужно учитывать множество сценариев, постоянно тестировать отображение контента на разных разрешениях. Сложно добиться того, чтобы различные элементы страницы корректно отображались на всех устройствах и при этом с ними было удобно взаимодействовать. Например, кнопки и значки должны быть удобны для клика. Поэтому их минимальных размер должен быть не менее 44 x 44 pх. Также сложно реализовать на сенсорных экранах элементы с наведением курсора (hover) — для этого должны использоваться медиазапросы (pointer: coarse).

Ограниченность кастомизации

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

Более низкая производительность

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

Потребность в тщательном тестировании

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

Разные задачи пользователей

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

Как проверить, что верстка действительно адаптивная

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

Как вручную проверить сайт на адаптивность

1. Зайти на ресурс с разных устройств — со смартфона, планшета, ноутбука или десктопа и посмотреть, удобно ли пользоваться им, насколько корректно отображаются страницы и работает ли функционал.

Вот, например, мы зашли на сайт PromoPult со смартфона:

А затем зашли с десктопа — главная страница выглядит так же.

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

2. Провести ручную проверку в браузере. Такая проверка считается наиболее надежной и достоверной. Выполняется в любом браузере.

Как провести:

• Открыть страницу в Chrome, Firefox или другом браузере.
• Нажать F12 или кликнуть на правую кнопку мыши. В открывшемся меню выбрать «Посмотреть код».
• Справа появится панель с кодом страницы.
• На панели нужно нажать на иконку «Переключить панель инструментов разработчика» (обычно значок телефона/планшета). Также это действие можно выполнить с помощью комбинации клавиш Ctrl+Shift+M (Windows) / Cmd+Alt+I (macOS).

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

А вот так на мобильном устройстве:

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

Что важно проверить:

• Отсутствие горизонтальной прокрутки (ее наличие считается критической ошибкой).
• Работу бургер-меню и других интерактивных элементов.
• Читаемость текста, его размер и контраст.
• Доступность и видимость всех блоков и кнопок.
• Качество и четкость изображений и т. д.

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

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

Также проверку можно провести с помощью автоматических онлайн-сервисов.

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

Дополнительное преимущество — доступна версия на русском языке.

Как работать:

1. Открыть сайт, перейти в меню «Инструменты разработчика» и открыть Lighthouse.

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

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

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

Далее в отчете отображаются ключевые показатели:

И представление страницы на разных экранах:

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

. Инструмент проверяет адаптированность страницы для мобильных устройств. Оценивает наличие viewport, отсутствие горизонтальной прокрутки и Flash-элементов.

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

В меню представлен широкий выбор моделей устройств:

Рекомендации при разработке: на что обратить внимание

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

Что стоит учесть в процессе разработки:

• Работу над проектом с самого начала лучше вести в русле адаптивной верстки, поскольку это проще и эффективнее, чем «допиливать» потом.
• Применяйте на практике принцип Mobile First — начинайте с адаптивной верстки для мобильной версии и постепенно добавляйте стили для больших экранов. Такой подход упростит адаптацию и повысит производительность сайта.
• Используйте гибкие сетки и медиа-запросы. Во время разработки адаптивного дизайна создается гибкая сетка (например, с помощью flexbox или CSS Grid). Также для планшетов и телефонов важно использовать медиа запросы для применения стилей при определенных «точках перелома».
• Сделайте ставку на адаптивность изображений. Чтобы все элементы страницы масштабировались пропорционально экрану и не выходили за пределы контейнера, используйте проценты для ширины блоков (width: 100%), а не пиксели. Также необходимо использовать векторные форматы (SVG) и оптимизировать растровые изображения для быстрой загрузки.
• Обеспечьте читабельность текста. Для этого минимальных размер шрифта должен быть 12-14px. Размеры шрифта важно задавать в относительных единицах (rem, em) или использовать медиа-запросы для изменения размера на мобильных устройствах.
• Удобство взаимодействия (UX). Здесь нужно обращать внимание на такие моменты при взаимодействии пользователя с сайтом: важно избегать горизонтальной прокрутки страницы; меню должно сворачиваться (бургер-меню); кнопки и ссылки должны иметь большое кликабельное пространство (не менее 44 x 44 px или 48 x 48 px).
• Тестируйте. Сайт нужно протестировать на разных устройствах и браузерах, а не только меняя размер окна браузера во время ручной проверки.

Заключение

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

Продвинуть сайт в Яндексе и Google поможет PromoPult. Здесь большинство технически сложных и дорогостоящих процессов берут на себя AI инструменты, от подбора семантики до рекомендации площадок для ссылочного продвижения. В проектах динамического SEO алгоритм обеспечивает постоянную ротацию ключевых слов, ориентируясь на трафик и конверсии, продвигая сайт по запросам, которые принесут результат. Протестировать SEO в PromoPult можно бесплатно за две недели.

Реклама. ООО «Клик.ру», ИНН:7743771327, ERID: 2VtzqxAi2iN

Алексей Штарев

CEO PromoPult

Источник: blog.promopult.ru