Что такое отзывчивый дизайн?

Отзывчивый дизайн — это подход к разработке веб-сайтов, обеспечивающий их оптимальное отображение на различных типах конечных устройств. Термин «отзывчивый дизайн» существует столько же лет, сколько и мобильный веб, и получил широкое распространение примерно в 2013 году.

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

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

Все изменилось с появлением мобильных устройств и значительной диверсификацией конечных устройств. Экраны смартфонов и планшетов отличаются от настольных компьютеров по нескольким параметрам. Размеры пикселей теперь играют важную роль, а физическое разрешение (пиксели на дюйм, или ppi) также вышло на первый план с появлением экранов retina. И, конечно же, эти устройства управляются пальцем, а не мышью. Помимо смартфонов и планшетов, на рынке появились большие мониторы с высоким разрешением, а это значит, что современный сайт должен работать на экранах шириной от 320 пикселей до более чем 4 000 пикселей.

Отзывчивый веб-сайт подстраивается под доступное пространство на экране. В этом контексте часто говорят о «реальном пространстве экрана». Веб-сайт должен хорошо выглядеть на всех устройствах и обеспечивать оптимальный пользовательский опыт (UX).

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

• элементы HTML5, такие как изображение, и атрибуты, такие как srcset и sizes
• медиа-запросы CSS
• блоки CSS
• использование нескольких активов с одного ресурса
• Первый мобильный подход

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

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

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

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

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

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

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

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

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

Реализация макета обычно требует размещения блочных элементов рядом друг с другом. Этого можно добиться различными способами. До появления CSS стандартом были макеты на основе таблиц; с появлением CSS появились макеты на основе плавающих элементов. Сегодня для простых макетов на основе столбцов или строк используется CSS Flexbox, а для более сложных макетов — CSS Grid. Относительные размеры CSS используются в каждом случае, чтобы позволить варьировать количество элементов, отображаемых рядом друг с другом.

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

• Отображение на большом экране: Все элементы предварительного просмотра отображаются рядом друг с другом в ряд. Каждый элемент занимает 25% доступного пространства.
• Отображение на экране среднего размера: Элементы отображаются рядом друг с другом в два ряда, каждый из которых содержит два элемента. Каждый элемент занимает 50% доступного пространства.
• Отображение на маленьком экране: Все элементы отображаются один под другим в строку. Каждый элемент занимает 100% доступного пространства.

Вот пример реализации с использованием классов из отзывчивого CSS-фреймворка Tachyons. Для каждого контейнера предварительного просмотра мы определяем классы «w-100 w-50-m w-25-l». Все четыре контейнера предварительного просмотра находятся в контейнере с меткой «flex flex-wrap».

Иногда имеет смысл показывать элемент только на экранах определенного размера. Например, табличные данные отображаются в виде таблицы в HTML с помощью тега <table>. Однако, в зависимости от размера таблицы, бывает трудно правильно адаптировать ее для маленького экрана. Вот тут-то и приходит на помощь простой прием: Попросите пользователя повернуть устройство, чтобы создать достаточно места для отображения таблицы. Разумеется, этот текст должен отображаться на маленьких экранах только при вертикальном положении устройства.

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

В сочетании со следующим HTML-кодом функция завершена:

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

Основным компонентом является элемент CSS rem («корневой элемент»), который привязывает размер шрифта элемента пропорционально к «корневому» элементу HTML. Чтобы последовательно масштабировать текст, можно просто изменить размер шрифта «корневого» элемента с помощью точек останова CSS.

Давайте рассмотрим пример. Сначала, в соответствии с подходом mobile-first, установим размеры шрифта для маленьких экранов:

Затем настроим размер шрифта HTML-элемента для больших экранов. Поскольку размер заголовков H1 задается через rem, он будет масштабироваться автоматически:

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

Для оптимизации заголовков, которые заполняют весь экран на маленьких устройствах, существует подход, не использующий CSS. Заголовки должны притягивать взгляд. Это облегчает пользователю быстрое восприятие содержимого страницы. Однако иногда это может привести к проблемам с отображением, особенно когда речь идет о длинных словах. С помощью HTML-сущностей «неразрывный пробел» (&nbsp;) и «мягкий дефис» (&shy;) вы можете определить, где слово должно быть разделено.

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

Изображение размером 1 920×1 080 пикселей займет в четыре раза больше места, чем изображение размером 960×540 пикселей. Кроме того, на мобильном устройстве изображение будет загружаться намного дольше. Если сложить все это вместе, становится ясно, что неотзывчивые изображения оказывают значительное негативное влияние на производительность и удобство использования сайта.

Внедрение HTML5 принесло с собой два новых атрибута для тега <img>. Атрибуты srcset и sizes используются для определения нескольких файлов для изображения, также называемых «активами». Каждый отдельный файл прикрепляется к запросу медиафункции CSS. Таким образом, браузер может загрузить изображение из списка доступных активов, оптимальное для конкретного устройства.

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

Традиционно экраны имели большую ширину, чем высоту. В настоящее время экраны смартфонов имеют большую высоту, чем ширину. Изображения в альбомном формате выглядят относительно маленькими на экранах смартфонов или любых других экранах в портретном формате. Для получения лучшего результата следует использовать квадратное или портретное изображение, которое вы обрезали самостоятельно. Выбор различных обрезков изображения называется «арт-дирекшн». Это можно реализовать с помощью элемента HTML5 <picture>. Элемент <picture> позволяет определить несколько эквивалентных изображений для различных случаев использования.

Давайте рассмотрим пример. Следующий HTML-код определяет элемент <picture>, который задает различные активы для альбомного и портретного формата. В обоих случаях существуют различные версии, оптимизированные для разных размеров экрана:

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

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

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