Руководство адаптивный дизайн

Уровень сложности
Средний

Время на прочтение
17 мин

Количество просмотров 12K

Сегодня построение отзывчивых макетов уже не основывается на контрольных точках (breakpoints) с фиксированной шириной. Вместо этого современные макеты должны работать на устройствах практически любого размера. Однако, к своему удивлению, я всё ещё встречаю сайты, где используется паттерн отзывчивого дизайна – когда присутствует контейнер, получающий новое значение max-width в соответствии с шириной области просмотра.

Термин «отзывчивый» сегодня отражает уже очень многое. У нас есть медиа-запросы, которые проверяют пользовательские настройки, а также современные возможности CSS, которые помогают создавать отзывчивые макеты вообще без использования медиа-запросов. Отзывчивость нынче изменилась, и мы живём в поистине прекрасное время.

Содержание

• Введение
  • Использование современного CSS
  • Использование медиа-запросов
• Отзывчивый дизайн с течением времени
  • Фреймворк Bootstrap
  • Медиа-запросы
  • Мышление на основе контрольных точек с фиксированной шириной
• Отзывчивый дизайн и скучные сайты
  • Веб-среда отзывчива по умолчанию
• Отзывчивый дизайн в 2023
  • Отзывчивость к содержанию
  • Отзывчивость к области просмотра
  • Отзывчивость к контейнеру
  • Отзывчивость к пользовательским настройкам
• Каким я вижу отзывчивый дизайн сейчас
• Простой пример
• Современные способы построения отзывчивых макетов
  • CSS flexbox
    • Создание макета компонента article
    • Шапка раздела
  • CSS Grid Layout
  • Плавающий размер
    • Динамические разрывы
  • Запросы размера контейнера
    • Компонент article
    • Компонент pagination
  • Единицы измерения размеров контейнера в запросе
  • Запросы стиля контейнера
    • Переключение тем на уровне компонентов
    • Компонент article
  • Медиа-запросы пользовательских настроек
  • Логические свойства
  • Защитный CSS
• Заключение

Введение

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

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

Рассмотрите следующий дизайн. Здесь у нас типичный макет, который нужно сделать отзывчивым.

Обычный алгоритм действий дизайнера будет такой:

• обернуть hero-изображение с переносом на новую строку;
• уменьшить размер шрифта;
• составить карточки столбцом.

Готово! Это отзывчивый дизайн. Хотелось бы мне, чтобы всё было столь просто, но здесь необходимо учитывать многие нюансы. Если я буду рассматривать десктопный дизайн, то у меня возникнет немало вопросов:

• Когда нужно обёртывать hero-элементы (содержание и изображение) с переносом на новую строку?
• Размер шрифта плавающий, или же это просто фиксированное значение, изменяемое вручную?
• Нужно ли нам использовать отзывчивые изображения?
• Нужны ли нам плавающие интервалы между элементами?
• Расстановка карточек:
  • Существуют ли отдельные вариации карточек, которые должны отображаться для десктопных и мобильных устройств?
  • Имеет ли изображение карточки конкретное соотношение сторон?
• Пользовательские настройки: присутствуют ли в UI детали, которые будут изменяться в зависимости от пользователя – темизация/цветовая схема, установки reduced motion и т.д.

Рассматривая этот пример, можно последовать двум разным подходам.

▍ С помощью современного CSS

• Типографика адаптируется под ширину окна просмотра с помощью функции clamp();
• Интервалы адаптируются под ширину окна просмотра с помощью функции clamp();
• Hero-раздел адаптируется под содержание посредством обёртывания флекс-элементов;
• Сетка карточек адаптируется под доступное пространство с помощью minimax() без медиа-запросов;
• Компонент карточки адаптируется под свою обёртку при помощи запросов размера контейнера и стиля контейнера;
• Поля (margins) и отступы (paddings) адаптируются под язык сайтов с помощью логических свойств.

▍ С помощью медиа-запросов

• Навигация по сайту адаптируется под ширину области просмотра;
• Темизация адаптируется под настройки пользователя в его операционной системе;
• Эффект наведения на карточку адаптируется в соответствии с используемым устройством ввода (мышь или сенсор).

В списке выше темизация и навигация выполняются с помощью медиа-запросов. Остальное реализуется посредством возможностей CSS вроде функции сравнения clamp() и запросов к контейнерам.

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

Отзывчивый дизайн больше не опирается на медиа-запросы.

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

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

Отзывчивый дизайн с течением времени

Мой путь в веб-разработке начался с середины 2014 года. В то время отзывчивый дизайн являлся очень актуальной темой, и о нём говорили повсюду.

▍ Фреймворк Bootstrap

Будучи новичком, я познакомился с очень популярным фреймворком Bootstrap. Тогда я думал, что он является лучшим средством создания отзывчивых макетов. Затем однажды я решил удалить Bootstrap CSS и написать собственные медиа-запросы. В итоге я был весьма удивлён, поскольку сделать это оказалось не так уж сложно.

▍ Медиа-запросы

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

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

▍ Мышление на основе контрольных точек с фиксированной шириной

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

Один из моментов, который мне лично не нравится, связан с использованием фиксированной ширины для контейнера, которая изменяется в зависимости от ширины области просмотра.

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Такой вариант всегда будет вести к ограничению доступного для .container пространства.

Взгляните на следующее изображение:

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

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

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Далее я покажу более подробный пример этой проблемы.

Предположим, у нас есть сетка карточек. В первом случае они находятся в .container, который многократно изменяет свою max-width.

В планшетном представлении контейнер будет ограничен собственной max-width, оставляя немало пустого пространства.

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

Если рассматривать этот дизайн на ещё меньшей области просмотра, в нём по-прежнему сохраняются пустые зазоры по сторонам.

Можно ли ситуацию улучшить? Всё же так мы впустую теряем немало пространства. Лично я не могу придумать, ради чего так можно делать в 2023 году.

Удаление max-width для меньших областей просмотра приведёт к тому, что контейнер будет занимать всю ширину области просмотра.

И для ещё меньших размеров:

Отзывчивый дизайн и скучные сайты

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

В интернете стало появляться всё больше похожих сайтов. В начале 2016 года мне попался твит, в котором автор рассуждал о тогдашнем «отзывчивом дизайне». На мой взгляд, всё дело в популярности CSS Bootstrap.

Какой из этих двух макетов сайтов вы сейчас разрабатываете?

Забавно, но правдиво, не так ли?

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

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

Предлагаю взглянуть на отзывчивый дизайн под другим углом.

▍ Веб-среда отзывчива по умолчанию

Начнём с главного. Лично я считаю, что веб-среда отзывчива по умолчанию. Имеется ввиду, что добавление кучи HTML-элементов без какого-либо CSS работает на экране любого размера.

Вот пример добавления заголовка, абзаца и списка.

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

body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1rem;
}

ul {
    grid-column: 2/3;
    padding-left: 1rem;
}

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

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

Отзывчивый дизайн в 2023

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

▍ Отзывчивость к содержанию

Создавая CSS, способный обрабатывать содержание различного объёма, можно обеспечить, чтобы UI стабильно работал и не ломался просто от того, что пользователь вдруг добавил другой контент.

▍ Отзывчивость к области просмотра

Должен ли компонент работать, отталкиваясь только от области просмотра? Это может касаться шапки сайта, футера и полноразмерных разделов. Они должны подстраиваться под размер области просмотра.

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

@media (min-height: 700px) {
  .site-header {
    /* position: fixed или position: sticky */
  }
}

▍ Отзывчивость к контейнеру

Запросы к контейнерам эффективны, когда компонент должен менять свой стиль на основе расположения в документе.

▍ Отзывчивость к пользовательским настройкам

Должен ли компонент меняться на основе конкретных установок пользователя? Например, при изменении темы, размера шрифта, контраста и прочих параметров.

Каким я вижу отзывчивый дизайн сейчас

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

• запросы к контейнерам;
• обёртывание;
• размеры элементов;
• размеры шрифтов;
• интервалы;
• доступное пространство;
• логические свойства.

С помощью функционала CSS вроде flexbox, сетки и функции сравнения clamp() можно проинструктировать браузер о том, что и в каких ситуациях делать. Нам не нужно вручную прорабатывать в дизайне каждую деталь.

Создавая компонент, я предпочитаю ориентироваться на подвижность. Разберём пример.

Простой пример

Современный CSS даёт возможность писать отзывчивые стили, не опираясь исключительно на медиа-запросы. К примеру, свойство flex-wrap при наличии достаточного пространства позволяет обёртывать вместе родственные элементы.

.reaction-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

Здесь есть три приятных детали:

1. Оно производит обёртывание на основе условия. Не хватает пространства? Хорошо, помещаем элементы в обёртку.
2. Сохраняет центрированность как в горизонтальных, так и в вертикальных стилях.
3. В свою очередь, свойство gap (разрыв) работает по ситуации. Если элементы расположены горизонтально, оно действует только для строк. В случае же расположения элементов столбиком разрывы делаются вертикально.

Интересно, что всё это достигается без использования медиа-запросов. Давайте применим этот же подход к более крупному компоненту.

Современные способы создания отзывчивых макетов

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

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

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

▍ CSS Flexbox

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

Это мощная возможность, которая помогает при создании основы отзывчивых компонентов.

▍ Создание макета компонента article

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

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

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

.c-card {
  display: flex;
}

Круто, теперь изображение и текст оказались рядом. Далее нужно разрешить обёртывание и сбросить предустановленное выравнивание.

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Мы вернулись к изначальному результату. Ничего, сейчас исправим.

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

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

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}

Идея в том, что при помощи flex можно позволить элементам увеличиваться или уменьшаться на основе доступного пространства.

ishadeed.com/assets/responsive-design/rwd-card-resize-1.mp4

Прим. пер.: Для просмотра видео скачайте его через контекстное меню.
Да, в оригинале медиаэлемент также недоступен.

Видите? Отзывчивый дизайн больше не опирается на медиа-запросы.

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}

Также можно использовать wrap-reverse для обращения порядка размещения изображения и содержания.

.c-card {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
}

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

▍ Шапка раздела

Крис Куайе назвал это в своей прекрасной статье «выравниванием смещающейся обёртки».

Взгляните на следующий пример, вдохновлённый статьёй Криса.

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

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

.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header__title {
  flex: 1 1 400px;
}

Значение 400px для заголовка является кастомной контрольной точкой, которая обусловит выполнение обёртывания. В случае, когда заголовок имеет размер 400px или меньше, он будет обёртываться с переносом на новую строку.

С помощью медиа-запроса это можно было бы реализовать так:

@media (min-width: 650px) {
  .section-header {
    display: flex;
    /* Обёртывание не требуется */
  }
}

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

В случае же flex-wrap шапка раздела будет работать, даже при использовании в небольших контейнерах вроде сносок.

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

В случае же медиа-запросов для размещения шапки раздела в элементе сноски нам придётся использовать отдельный класс.

@media (min-width: 800px) {
  .section-header--aside {
    display: flex;
    /* Обёртывание не требуется */
  }
}

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

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

▍ CSS Grid Layout

Сегодня мы можем создавать широко настраиваемые Grid layout. Я не буду раскрывать тему CSS Grid подробно, так как она потянет на целую книгу, но всё же расскажу о некоторых вещах, которые поддерживаются всеми современными браузерами.

Рассмотрим следующий пример.

Он взят из моей статьи, посвящённой областям сетки. Сама статья основана на проекте, над которым я работал несколько лет назад. Тогда нашей команде нужно было использовать два варианта макета, и для этого мы не могли придумать ничего лучше CSS Grid.

<div class="c-newspaper">
  <article class="c-article c-article--1"></article>
  <article class="c-article c-article--2"></article>
  <article class="c-article c-article--featured"></article>
  <article class="c-article c-article--3"></article>
  <article class="c-article c-article--4"></article>
  <article class="c-article c-article--5"></article>
  <article class="c-article c-article--6"></article>
  <article class="c-article c-article--7"></article>
</div>

.c-newspaper {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr 0.2fr;
  grid-template-areas:
    "item-1 featured item-2"
    "item-3 featured item-4"
    "item-5 item-6 item-7";
  grid-gap: 1rem;
}

.c-article--1 {
  grid-area: item-1;
}

.c-article--2 {
  grid-area: item-2;
}

/*..И так далее для других элементов.. у каждого есть своя область сетки..*/

.c-article--7 {
  grid-area: item-7;
}

.c-article--featured {
  grid-area: featured;
}

Во второй версии достаточно изменить области шаблона.

.c-newspaper.variation-1 {
  grid-template-areas:
    "featured featured item-3"
    "item-1 item-2 item-4"
    "item-5 item-6 item-7";
}

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

Ещё одной полезной возможностью CSS Grid является функция minimax(). Если коротко, то она позволяет создавать сетку, которая динамически изменяет ширину столбцов без использования медиа-запросов.

Рассмотрим следующий код CSS.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-gap: 1rem;
}

Здесь у нас сетка, состоящая из трёх столбцов. Нам нужно, чтобы они изменяли размер, когда уменьшается область просмотра. Для этого идеально подойдёт функция minimax(), совмещённая с auto-fill.

ishadeed.com/assets/responsive-design/minmax-resizing.mp4
Для просмотра видео скачайте его через контекстное меню.

Без minimax() у нас не останется вариантов, кроме как изменять столбцы в соответствии с шириной области просмотра при помощи медиа-запросов.

Простой пример:

@media (min-width: 992px)
    .wrapper__item {
        width: 33%;
    }
}

Более подробно почитать о minimax() можете в моей статье «A deep dive into CSS Grid minimax()».

▍ Плавающий размер

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

h2 {
  font-size: calc(1rem + 5vw);
}

/* Если ширина области просмотра составляет 2000px или больше, ограничить
* размер шрифта до 4rem.
*/
@media (min-width: 2000px) {
  font-size: 4rem;
}

Около трёх лет назад в CSS появилась поддержка функций сравнения. Эта возможность оказалась переломной в построении подвижных макетов без использования медиа-запросов.

Рассмотрим такой пример.

h2 {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 3rem);
}

Размер шрифта будет изменяться согласно ширине области просмотра. Если представить это наглядно, то можно получить следующий результат:

Если же мы захотим реализовать такое с помощью медиа-запросов, то будем вынуждены создать 9 подобных запросов. Совсем не практично. А представьте, что вам нужно проделать это в нескольких местах сайта. Просто кошмар.

Когда-то давно я делал, например, так:

h2 {
  font-size: 1rem;
}

@media (min-width: 800px) {
  h2 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1400px) {
  h2 {
    font-size: 5rem;
  }
}

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

Разберём пару примеров, где плавающий размер показывает себя во всей красе.

▍ Динамические разрывы

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 24px);
}

Для hero-раздела нам может потребоваться изменять вертикальные отступы, исходя из размера области просмотра. Тут прекрасно подойдёт функция clamp() с единицами измерения этой области.

.hero {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

▍ Запросы размера контейнера

CSS-запросы к контейнеру сейчас поддерживаются всеми браузерами. В Chrome они получили стабильную поддержку в августе 2022 года. Называются эти запросы «Size», поскольку в работе опираются на ширину контейнера, а также в связи с тем, что теперь нам доступны ещё и запросы стиля контейнера.

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

Взгляните на следующее изображение.

Заметьте, что слева карточки изменяются на основе ширины области просмотра, а справа на основе ширины контейнера.

Разберём несколько примеров.

▍ Компонент article

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

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

Посмотрите демо.

▍ Компонент pagination

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

.wrapper {
  container-type: inline-size;
}

@container (min-width: 250px) {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination li:not(:last-child) {
    margin-bottom: 0;
  }
}

@container (min-width: 500px) {
  /* Стили при ширине контейнера >= 500px */
}

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

▍ Единицы измерения размеров контейнера в запросе

Что произойдёт, если мне потребуется динамическое изменение размера на основе контейнера, а не области просмотра? Сейчас это можно реализовать с помощью запросов.

Для этого нужно будет просто заменить vw на cqw.

.c-article__title {
  font-size: clamp(1.25rem, 2.5cqw + 1rem, 2.5rem);
}

.c-article__content > * + * {
  margin-top: clamp(0.8rem, 1cqw + 0.8rem, 1.5rem);
}

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

Очень полезная возможность.

▍ Запросы стиля контейнера

Этот функционал ещё не получил стабильной поддержки в браузерах, но вскоре он появится в Chrome. Если коротко, то он позволит проверять, имеет ли элемент конкретную переменную CSS, и стилизовать его дочерний элемент исходя из этого.

▍ Переключение тем на уровне компонентов

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

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

Реализовать это можно так:

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Добавление тёмных стилей. */
  }
}

Подробнее о запросах стилей читайте в моей статье «CSS Style Queries».

▍ Компонент article

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

Для этого нужно добавить логическую переменную CSS и проверять, установлена ли она. Если да – активировать конкретный нужный нам стиль.

.o-grid__item {
  container-type: inline-size;
  --horizontal: true;
}

@container (min-width: 400px) and style(--horizontal: true) {
  /* Горизонтальный стиль. */
}

В итоге статья будет изменяться в соответствии с шириной своего контейнера, только если переменная --horizontal будет установлена как true.

▍ Медиа-запросы пользовательских настроек

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

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

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  /* стили тёмного режима. */
}

Более того, добавление color-scheme приведёт к переключению предустановленной темы элементов управления со светлой на тёмную (поддерживается только в Safari).

▍ Логические свойства

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

Разберём следующий пример.

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

• отступы (слева и справа);
• границу слева;
• поля для иконки.

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

.card {
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
  border-inline-start: 6px solid blue;
}

.card__icon {
  margin-inline-end: 1rem;
}

Подробнее о логических свойствах я рассказывал в статье «Digging into CSS logical properties», а также в обширном руководстве по написанию CSS для сайтов RTL.

▍ Защитный CSS

Создаваемый нами CSS-код также должен быть отзывчив к добавляемому пользователем содержанию. Если оно слишком велико, что должно происходить? Подобные вопросы нужно прояснять на ранних стадиях разработки.

Как раз этой теме посвящён мой проект Defensive CSS. Очень рекомендую с ним ознакомиться.

Заключение

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

Telegram-канал с розыгрышами призов, новостями IT и постами о ретроиграх

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

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

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

У адаптивного дизайна длинная история. В ней можно выделить три этапа.

Этап 1: мобильные версии сайтов. Началось всё с появления интернета на мобильных устройствах в начале 2000-х годов. Как только появилась возможность выходить в интернет с телефона, крупные компании начали делать мобильные версии сайтов.

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

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

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

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

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

Кроме того, что адаптивная вёрстка сайта помогает компаниям удерживать клиентов, у неё есть ещё несколько преимуществ:

● Сайт выглядит аккуратно.
Сайты с адаптивным дизайном корректно отображаются на экранах с любым разрешением. При адаптивной вёрстке элементы не наползают друг на друга, не получаются слишком мелкими или крупными.

● Сайт удобен для разной аудитории.
В 2019 году пользователи одинаково часто заходили в интернет с телефонов и компьютеров. В 2022 году с телефонов заходит уже более 65% пользователей, с компьютеров и ноутбуков — около 30%, а с планшетов — 2%.

Принципы адаптивного дизайна сайта

В адаптивной вёрстке выделяют следующие принципы:

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

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

2. Дизайн не меняется. Шрифты, цвета, логотипы должны быть одинаковыми в десктопной и мобильной версиях. Например, если в десктопной версии сайта использован голубой цвет, не стоит делать главным цветом мобильной версии зелёный. Если пользователь уже заходил на сайт с компьютера, то не узнает его в телефоне и подумает, что неправильно ввёл запрос или попал не на тот сайт.

3. Сохраняется иерархия элементов. Иерархия заголовков, подзаголовков, текстовых блоков, иллюстраций и кнопок выстраивается на основе цели сайта.

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

Если десктопная версия свёрстана по логике «товар — возражение — заказ», при оптимизации под мобильные устройства нет смысла переносить блок с заказом на первое место. Это изменит путь пользователя и не подтолкнёт его к целевому действию.

4. Высота и ширина кликабельных элементов — не менее 44 пикселей. По десктопной версии сайта пользователь перемещается с помощью мыши. По мобильной версии можно перемещаться только с помощью пальца. Область нажатия — 44–48 пикселей. Если кнопка или знак подсказки меньше этих значений, пользователю будет сложно попасть по ним.

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

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

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

Когда дизайнер начинает адаптировать сайт под разные разрешения, ему стоит помнить про две вещи: компактность и наведение.

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

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

Основных разрешений для адаптивной вёрстки три:

1600 пикселей — для компьютеров;
960 пикселей — для планшетов;
375 пикселей — для телефонов.

Это усреднённые значения. Ширина может меняться в зависимости от сайта, идеи и технических особенностей. Ещё эти значения называют брейкпоинтами (от англ. breakpoint) — то есть разрешениями, при которых сайт меняет отображение на экране.

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

Инструменты для адаптивной вёрстки

Основной инструмент — это графический редактор Figma. Дальше название этого онлайн-сервиса будем писать кириллицей.

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

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

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

Метод, когда мобильная версия создаётся раньше десктопной, называется Mobile First.

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

❌ Сжатые изображения. При адаптивной вёрстке с фотографиями и иллюстрациями можно поступать двумя способами: кадрировать или пропорционально уменьшать.

При кадрировании изображение не сжимается. Пользователь начинает видеть часть изображения, а не всё целиком.

With an internet increasingly accessed from mobile devices, it’s no longer enough to have a static website design that only looks good on a computer screen.

Not to mention, you also have to consider tablets, 2-in-1 laptops, and different smartphone models with different screen dimensions when coming up with a design.

So slapping your content into a single column and calling it quits isn’t going to cut it.

With responsive web design, you can make sure your website looks its best on cell phones, tablets, laptops, and desktop screens.

And that improvement in user experience means higher conversions and business growth.

This guide will give you everything you need to know about responsive website design, including definitions, a step-by-step walkthrough, examples, and more.

Check out our video guide to Responsive Web Design:

What Is Responsive Web Design?

Responsive design is an approach to web design that makes your web content adapt to the different screen and window sizes of a variety of devices.

For example, your content might be separated into different columns on desktop screens, because they are wide enough to accommodate that design.

If you separate your content into multiple columns on a mobile device, it will be hard for users to read and interact with.

Responsive design makes it possible to deliver multiple, separate layouts of your content and design to different devices depending on screen size.

It’s not enough for your website to look good on a computer screen. 🖥 Tablets, 2-in-1 laptops, and smartphones are all part of the equation… and this guide covers everything you need to know about responsive design 🤳Click to Tweet

Responsive Web Design vs Adaptive Design

The difference between responsive design and adaptive design is that responsive design adapts the rendering of a single page version. In contrast, adaptive design delivers multiple completely different versions of the same page.

They are both crucial web design trends that help webmasters control how their site looks on different screens, but the approach is different.

With responsive design, users will access the same basic file through their browser, regardless of device, but CSS code will control the layout and render it differently based on screen size. With adaptive design, there is a script that checks for the screen size, and then accesses the template designed for that device.

Why Responsive Design Matters

If you’re new to web design, development, or blogging, you might wonder why responsive design matters in the first place.

The answer is simple. It’s no longer enough to design for a single device. Mobile web traffic has overtaken desktop and now makes up the majority of website traffic, accounting for more than 51%.

When over half of your potential visitors are using a mobile device to browse the internet, you can’t just serve them a page designed for desktop. It would be hard to read and use, and lead to bad user experience.

But that’s not all. Users on mobile devices also make up the majority of search engine visits.

Finally, over the last few years, mobile has become one of the most important advertising channels. Even in a post-pandemic market, mobile ad spending is growing 4.8% to $91.52 billion.

Whether you choose to advertise on social media or use an organic approach like YouTube SEO, the vast majority of your traffic will come from mobile users.

If your landing pages aren’t optimized for mobile and easy to use, you won’t be able to maximize the ROI of your marketing efforts. Bad conversion rates will lead to fewer leads and wasted ad spend.

Are WordPress Sites Responsive?

Whether or not WordPress sites are responsive depends on the theme of your WP site. A WordPress theme is the equivalent of a template for a static website and controls the design and layout of your content.

If you use a default WordPress theme, like Twenty Twenty, the design is responsive, but since it’s a single-column design, you might not realize it when looking at it on different screens.

If you use another WordPress theme, you can test if it’s responsive or not by comparing how it looks on different devices or using Chrome Developer Tools.

The Building Blocks of Responsive Web Design

In this section, we’ll cover the underlying foundation for responsive website design and its different building blocks.

CSS and HTML

The foundation of responsive design is the combination of HTML and CSS, two languages that control the content and layout of a page in any given web browser.

HTML mainly controls the structure, elements, and content of a webpage. For example, to add an image to a website, you have to use HTML code like this:

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

You can set a “class” or “id” that you can later target with CSS code.

You could also control primary attributes such as height and width within your HTML, but this is no longer considered best practice.

Instead, CSS is used to edit the design and layout of the elements you include on a page with HTML. CSS code can be included in a <style> section of a HTML document, or as a separate stylesheet file.

For example, we could edit the width of all HTML images at the element level like this:

img {
width: 100%;
}

Or we could target the specific class “full-width-img” by adding a period in front.

.full-width-img {
width: 100%;
}

You can also control the design beyond just height, width, and color. Using CSS like this is how you make a design responsive when you combine it with a technique called media query.

Media Queries

A media query is a fundamental part of CSS3 that lets you render content to adapt to different factors like screen size or resolution.

It works in a similar way to an “if clause” in some programming languages, basically checking if a screen’s viewport is wide enough or too wide before executing the appropriate code.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

If the screen is at least 780 pixels wide, “full-width-img” class images will take up 90% of the screen and be automatically centered by equally wide margins.

Fluid Layouts

A fluid layout is an essential part of modern responsive design. In the good old days, you would set a static value for every HTML element, like 600 pixels.

A fluid layout relies instead on dynamic values like a percentage of the viewport width.

This approach will dynamically increase or decrease the different container element sizes based on the size of the screen.

Flexbox Layout

While a percentage-based layout is fluid, many designers and web developers felt it was not dynamic or flexible enough. Flexbox is a CSS module designed as a more efficient way to lay out multiple elements, even when the size of the contents inside the container is unknown.

A flex container expands items to fill available free space or shrinks them to prevent overflow. These flex containers have a number of unique properties, like justify-content, that you can’t edit with a regular HTML element.

It’s a complicated topic, so if you want to use it in your design, you should read CSS Tricks’ flexbox guide.

Responsive Images

The most basic iteration of responsive images follows the same concept as a fluid layout, using a dynamic unit to control the width or height. The sample CSS code we covered earlier already accomplishes this:

img {
width: 100%;
}

The % unit approximates to a single percentage of the width or height of the viewport and makes sure the image remains in proportion to the screen.

The problem with this approach is that every user has to download the full-sized image, even on mobile.

To serve different versions scaled for different devices, you need to use the HTML srcset attribute in your img tags, to specify more than one image size to choose from.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"
/>

WordPress automatically uses this functionality for images included in posts or pages.

Speed

When you’re attempting to create a responsive design for your website, the loading speed should be a top priority.

Pages that load in 2 seconds have an average 9% bounce rate, while pages that take 5 seconds lead to a 38% bounce rate.

Your approach to responsiveness must not block or delay your page’s first render any more than it needs to.

There are several ways you could make your pages faster. Optimizing your images, implementing caching, minification, using a more efficient CSS layout, avoiding render-blocking JS, and improving your critical rendering path are all great ideas you should consider.

Kinsta customers have access to a quick and easy way to accomplish this by using the code minification feature that is built right into the MyKinsta dashboard, allowing customers to enable automatic CSS and JavaScript minification with a simple click.

You could also try to implement Google AMP for your mobile pages, but in our Google AMP case study, our mobile leads dropped by a whopping 59%.

Common Responsive Breakpoints

To work with media queries, you need to decide on the “responsive breakpoints” or screen size breakpoints. A breakpoint is the width of the screen where you use a media query to implement new CSS styles.

Common screen sizes

• Mobile: 360 x 640
• Mobile: 375 x 667
• Mobile: 360 x 720
• iPhone X: 375 x 812
• Pixel 2: 411 x 731
• Tablet: 768 x 1024
• Laptop: 1366 x 768
• High-res laptop or desktop: 1920 x 1080

If you choose a mobile-first approach to design, with a single column and smaller font sizes as the basis, you don’t need to include mobile breakpoints — unless you want to optimize the design for specific models.

So you can create a basic responsive design with just two breakpoints, one for tablets and one for laptops and desktop computers.

Bootstrap’s Responsive Breakpoints

As one of the first, and most popular, responsive frameworks, Bootstrap led the assault on static web design and helped establish mobile-first design as an industry standard.

As a result, many designers to this day still follow Bootstrap’s screen-width breakpoints.

They use media queries to target landscape phones (576px), tablets (768px), laptops (992px) and extra large desktop screens (1200px).

How to Make Your Website Responsive

Now that you’re familiar with the building blocks, it’s time to make your website responsive.

Set Your Media Query Ranges (Responsive Breakpoints)

Set your media query ranges based on the unique needs of your design. For example, if we wanted to follow the Bootstrap standards for our design, we would use the following media queries:

• 576px for portrait phones
• 768px for tablets
• 992px for laptops
• 1200px for large devices

Size Layout Elements with Percentages or Create a CSS Grid Layout

The first and most important step is to set up different sizes for different layout elements depending on the media query or screen breakpoint.

The number of layout containers you have will depend on the design, but most websites focus on the elements listed below:

• Wrapper or Container
• Header
• Content
• Sidebar
• Footer

Using a mobile-first approach, you can style the main layout elements like this (with no media query for the basic styles for mobile phones):

#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; }

}

In a percentage-based approach, the “float” attribute controls which side of the screen an element will appear on, left, or right.

If you want to go beyond the basics and create a cutting-edge responsive design, you need to familiarize yourself with the CSS flexbox layout and its attributes like box-sizing and flex.

Implement Responsive Images

One way to make sure that your images don’t break is merely using a dynamic value for all pictures, as we covered earlier.

img {
width: 100%;
}

But that won’t reduce the load placed on your mobile visitors when they access your website.

Make sure you always include a srcset that with different sizes of your photo when you add images to your pages.

Doing this manually can be quite time-consuming, but with a CMS like WordPress, it automatically happens when you upload media files.

Responsive Typography For Your Website Text

The main focus of responsive web design is on the responsiveness of the layout blocks, elements, and media. Text is often treated as an afterthought.

But for a truly responsive design, you should also adjust your font-sizes appropriately to match screen size.

The easiest way to do so is to set a static value for font-size, like 22 px, and adapt it in each media query.

You can target multiple text elements at the same time by using a comma to separate each one.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

Test Responsiveness

First, you want to test whether your site is mobile-friendly with Google’s mobile-friendly test. Simply enter the URL of your website and click the “test URL” button to get the results.

Don’t worry if it takes a while to fetch your site. That doesn’t reflect your page loading speed.

If you followed the steps outlined in this article, it should say that you have a mobile-friendly website.

Then you want to test your site on multiple screen sizes with a tool like Chrome developer tools.

Press CTRL + Shift + I on Windows computers, or Command + Option + I on Macs to open the relevant device view. From here, you can select the mobile device or tablet of your choice to test the responsiveness of your design.

There are a couple of questions you want to answer when going through this process.

• Does the layout adjust to the correct amount of columns?
• Does the content fit well inside the layout elements and containers on different screens?
• Do the font sizes fit each screen?

CSS Units and Values for Responsive Design

CSS has both absolute and relative units of measurement. An example of an absolute unit of length is a cm or a px. Relative units or dynamic values depend on the size and resolution of the screen or the font sizes of the root element.

PX vs EM vs REM vs Viewport Units for responsive design

• PX – a single pixel
• EM – relative unit based on the font-size of the element.
• REM – relative unit based on the font-size of the element.
• VH, VW – % of the viewport’s height or width.
• % – the percentage of the parent element.

A new web designer or developer should probably stick with pixels for text because they are the most straight-forward unit of length in CSS.

But when setting the width and max-width of images and other elements, using % is the best solution. This approach will make sure the components adjust to the screen size of every device.

Responsive Design Examples

Below we will cover a few examples of responsive web design from different industries — and learn from what they do right and wrong.

1. Online Newspaper: New York Times

On desktop, the NYT layout reminds you of a traditional newspaper, crowded with visuals and different rows and columns of content. There seems to be a separate column or row for every category of news.

On mobile, it conforms to the single-column standard and also adjusts the menu to be in the accordion format to be easier to use.

2. Blog: The Art of Non-Conformity

Chris Guillebeau’s blog “The Art of Non-Conformity” has been going strong for over a decade. While the design isn’t the most cutting edge, it’s responsive and adapts the two-column sidebar and main content layout to a single-column design on mobile devices.

3. Ecommerce: Amazon

Amazon is a global leader in ecommerce for a reason, their user interface is perfectly fluid across all devices.

Their tablet layout simply removes some of the white space and adds a scrollable section of icons to fit more content into a smaller package.

Their mobile layout brings it into a single column, focusing on the essentials, like recent purchase history, rather than the different section link icons from their main homepage.

4. Video Site: YouTube

YouTube on mobile, tablet, and laptop

The core of YouTube’s homepage design is a flexible grid of videos that are relevant to each user. On tablets, the number of columns in each row goes down to three. On mobile, it’s reduced to a single-column design.

The mobile version also moves the main menu to the bottom of the screen, closer to the thumbs of their smartphone users. This simple move improves navigation and UX.

5. Online Magazine: Wired

Wired’s approach to responsive web design is focused on implementing a single-column layout on all smaller screens, starting with tablets.

It’s a basic layout but makes it easier to draw user attention to top stories and their CTA to subscribe.

Make sure your website looks ✨ stunning ✨ across devices with this guide to responsive design!Click to Tweet

Summary

There are a lot of different elements that go into responsive web design. Without a basic understanding of HTML and CSS, it can be easy to make mistakes.

But through familiarizing yourself with the different building blocks, analyzing the examples with web dev tools, and testing as you go using the sample code, you should be able to make your website responsive without any major issue.

If that sounds too much to achieve, you can always either hire a WordPress developer or simply make sure your theme is already responsive.

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

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

Что такое адаптивный веб-дизайн?

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

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

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

Термин «отзывчивый дизайн» был придуман Итаном Маркоттом в 2010 году, вдохновленным архитектурой, которая реагирует на присутствие или взаимодействие людей. Этот подход работает на трех фундаментальных блоках:

• Гибкие сетки: сетки служат фундаментом в дизайне веб-сайтов. Но добавление текучести к этим сеткам — это то, что помогает сделать веб-сайт отзывчивым. В адаптивном веб-дизайне компоненты сетки выражаются в виде доли контейнера. Следовательно, каждый раз, когда размер контейнера изменяется, сетка перестраивается с точки зрения своих столбцов и строк для отображения содержимого.
• Относительные единицы: это абсолютно необходимо для достижения отзывчивости. Все элементы веб-страницы, насколько это возможно, имеют размер в относительных единицах, таких как проценты. Это позволяет им быстро менять размер.
• Медиа-запросы: интегрированные в CSS, медиа-запросы могут быть полезны для изменения общего стиля страницы в зависимости от размера области просмотра. Разрешение экрана или размер окна браузера служат входными данными, и, следовательно, стиль страницы изменяется, чтобы отображать адаптивный веб-сайт.

Необходимость адаптивного веб-дизайна

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

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

Мобильная реклама катапультировалась на огромный рынок. По данным emarketer, расходы на мобильную рекламу выросли на 5% и превратились в индустрию с оборотом в 100 миллиардов долларов. Люди размещают рекламу в социальных сетях, на YouTube и практически везде, где это возможно, чтобы привлечь потенциальных покупателей. Благодаря эффективному призыву к действию все эти покупатели будут привлечены на целевую страницу бренда. Теперь, если эта страница не отвечает, есть очень хорошие шансы, что потенциальный покупатель покинет веб-сайт. Таким образом, веб-сайты с высокой отзывчивостью являются обязательным условием, если вы хотите что-либо продавать на них и стремиться получить прибыль.

Ключевые термины адаптивного веб-дизайна

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

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

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

Фиксированный размер — когда веб-элементам присваиваются абсолютные размеры, такие как размер изображения в 500 пикселей или отступы в 20 пикселей, говорят, что они имеют фиксированный размер и не связаны с другими размерами или размещением веб-элементов.

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

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

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

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

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

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

Всегда начинайте с макета

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

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

Работа с плавающей сеткой

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

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

Будьте точны с контрольными точками

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

Мобильный: 360 x 640

Мобильный: 360 x 720

iPhone X: 375 x 812

Пиксель 2: 411 x 731

Планшет: 768 x 1024

Ноутбук: 1366 x 768

Ноутбук или настольный компьютер с высоким разрешением: 1920 x 1080

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

Правильно оптимизируйте изображения

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

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

Позаботьтесь о шрифтах

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

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

Mobile First.Начните с маленьких экранов

Лучший способ выполнить любую крупную задачу — сначала взяться за самое сложное. Это справедливо даже для адаптивного веб-дизайна. Приняв подход Mobile First, вы можете сосредоточиться в первую очередь на том, как веб-сайт будет выглядеть и функционировать на мобильных устройствах. Большинство разработчиков сначала создают веб-сайты для настольных компьютеров. Они делают его визуально привлекательным и наполняют его всеми необходимыми функциями. Затем, когда они начинают делать сайт совместимым с мобильными устройствами, они начинают сталкиваться с проблемами и создают неприятный мобильный сайт.

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

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

Назад

Руководство по адаптивному веб–дизайну для начинающих