Адаптивная верстка сайта: что это такое

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

Адаптивный веб-дизайн (RWD) — подход к веб-дизайну и разработке, реализованный Итаном Маркоттом. Он направлен на создание сайтов, которые обеспечивают оптимальный просмотр и взаимодействие с широким спектром устройств и размеров экранов. 

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

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

Эластичная верстка означает способность элементов сайта менять размеры в зависимости от размера окна браузера, растягиваться от заданного минимума до заданного максимума. Это было достигнуто путем использования относительных значений max-width / min-width (максимальная/минимальная ширина), max-height / min-height (максимальная/минимальная высота).

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

Adaptive Layout и href="/glossary/responsive-layout/">Responsive Layout — это два подхода к разработке веб-сайтов и приложений для различных устройств. Responsive Layout состоит из одного макета, содержимое которого настраивается в соответствии с экраном пользователя. Adaptive Layout — различные фиксированные макеты, которые адаптируются к размеру экрана.

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

• макеты с плавной сеткой — используются сетки CSS, где для определения ширины столбцов и интервалов между применяются относительные единицы (проценты);
• адаптивные изображения — их можно настраивать в зависимости от размеров экрана. Это поможет пользователю получить полный доступ к изображениям без ущерба для удобства работы с ними;
• CSS Media Queries — медиазапросы позволяют создавать макет, основанный на особенностях устройства (ширина, ориентация, разрешение);
• контрольные точки — определенные значения ширины экрана, при которых макет изменяется в соответствии с размерами. Эти точки определяются с помощью медиазапросов и используются для реорганизации контента и настройки стиля для удобочитаемости и юзабилити;
• mobile friendly — сначала разрабатывается дизайн для мобильных устройств, а затем постепенно улучшается для больших экранов. Это гарантирует, что основное содержимое и функциональность будут доступны на экранах меньшего размера, а дополнительные функции будут добавляться по мере увеличения их размера.

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

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

Повышение рейтинга в SEO. Поисковые системы лучше продвигают те платформы, которые обеспечивают удобство работы на всех устройствах. Так сайт может привлечь больше трафика и повысить его видимость в интернете.

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

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

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

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

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

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

Как сделать адаптивную верстку: CSS, HTML и медиазапросы

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

<img src="image.gif" alt="image" class=”full-width-img”>

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

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

Например, можно отредактировать ширину всех HTML-изображений на уровне элементов:

img {

width: 100%;

}

Адаптивная верстка включает три основных компонента: гибкие макеты (Flexible layout), медиазапросы (Media queries) и гибкие изображения (Flexible media). Гибкие макеты могут динамически менять размер до любой ширины. Есть еще гибкие сетки — они создаются с использованием относительных единиц длины, чаще всего в процентах или единицах em. Эти относительные длины затем используются для определения общих значений свойств сетки — ширина, отступы или отступы для заполнения.

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

target ÷ context = result

Рассмотрим пример, как эта формула работает в макете с двумя столбцами. Ниже у нас есть родительский раздел с классом container, который объединяет элементы section и aside. Цель состоит в том, чтобы раздел располагался слева, а элемент aside — справа, с равными полями между ними. Обычно разметка и стили для этого макета выглядят примерно так для HTML:

<div class="container">

  <section>...</section>

  <aside>...</aside>

</div>

CSS:

.container {

  width: 538px;

}

section,

aside {

  margin: 10px;

}

section {

  float: left;

  width: 340px;

}

aside {

  float: right;

  width: 158px;

}

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

Один из быстрых способов сделать носитель масштабируемым — использовать свойство max-width со значением 100%. Это гарантирует, что при уменьшении области просмотра любой носитель будет уменьшаться в соответствии с шириной:

img, video, canvas {

  max-width: 100%;

}

Свойство max-width работает не для всех медиафайлов.Чтобы встроенные мультимедийные файлы были полностью адаптивными, элемент должен быть полностью расположен внутри родительского элемента. Последнему нужно иметь ширину 100%, чтобы его можно было масштабировать в зависимости от ширины области просмотра, и высоту 0, чтобы запустить механизм hasLayout .

Затем в нижней части родительского элемента добавляется отступ, значение которого устанавливается в том же соотношении сторон, что и в видео. Это позволяет сделать высоту элемента пропорциональной ширине. Если видео имеет соотношение сторон 16:9, то 9, разделенное на 16, равно 0,5625, что требует отступа снизу в размере 56,25%. 

HTML:

<figure>

  <iframe src="https://www.youtube.com/embed/Sv3xVOs7_No"></iframe>

</figure>

CSS:

figure {

  height: 0;

  padding-bottom: 56.25%; /* 16:9 */

  position: relative;

  width: 100%;

}

iframe {

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%;

}

Есть несколько различных способов использования медиазапросов: использование правила @media внутри существующей таблицы стилей, импорт новой таблицы стилей с помощью правила @import или создание ссылки на отдельную таблицу из HTML-документа. Рекомендуется применять правило @media внутри существующей таблицы стилей, чтобы избежать дополнительных HTTP-запросов.

HTML:

<!-- Separate CSS File -->

<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

CSS:

/* @media Rule */

@media all and (max-width: 1024px) {...}

/* @import Rule */

@import url(styles.css) all and (max-width: 1024px) {...}

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

Логические операторы в медиазапросах помогают создавать эффективные выражения. Использование оператора and в позволяет добавить дополнительное условие, гарантирующее, что браузер или устройства будут выполнять как a, так и b, c. Несколько отдельных медиазапросов могут быть разделены запятой (невысказанный оператор or). В приведенном примере выбираются все типы носителей шириной от 800 до 1024 пикселей:

@media all and (min-width: 800px) and (max-width: 1024px) {...}

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

@media all and (min-width: 320px) and (max-width: 780px) {...}

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

Приведем пример поэтапного создания адаптивного сайта.

1. Выберите контрольные точки.

Установите диапазоны медиазапросов в соответствии с потребностями дизайна. Например:

• 576 пикселей — для телефонов с портретной ориентацией;
• 768 пикселей — для планшетов;
• 992 пикселя — для ноутбуков;
• 1200 пикселей — для больших устройств.

1. Увеличьте размер элементов макета в процентах или создайте CSS-сетку.

Важный шаг — настройка размеров для разных элементов макета в зависимости от медиазапроса или контрольной точки.

Количество деталей для макета будет зависеть от дизайна, но большинство веб-сайтов ориентированы на следующие элементы:

• контейнер;
• заголовок;
• содержание;
• боковая панель;
• нижний колонтитул.

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

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

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

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

1. Создайте адаптивные изображения.

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

img {

width: 100%;

}

1. Добавьте специальную типографику для оформления текста.

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

Самый простой способ сделать это —  установить статическое значение размера шрифта и адаптировать его в каждом медиазапросе:

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

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

Для выбора разрешения экранов нужно:

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

Распространенные разрешения экранов для мобильных устройств:

•  360×800;
•  390×844;
•  414×896;
• 393×873;
• 412×915.

Для компьютеров и планшетов:

• 1920×1080;
• 1366×768;
• 1440×900;
• 1280×720;
• 1280×1024.

Основные ошибки при разработке адаптивной верстки

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

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

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