Современные тенденции построения адаптивного дизайна

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

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

Поиск нужных слов

В последнее время при разработке дизайна сайта начали использоваться термины для описания методов адаптации дизайна. Vox Media, например, представляет свой контент существующим в потоке реки. И в соответствии с этим его изменение и обтекание может быть прекращено в определенных точках. Вот как они описывают главную страницу VOX.com:

Контент обтекает "камни" и "пороги", которыми являются список "Самые комментируемые записи" или панель "Популярные видео". Часто это поведение остается без изменений в новой системе макета, но основное отличие заключается в дополнительном контекстном слое. Элементы «в реке» должны располагаться таким образом, чтобы максимально подчеркнуть разнообразие контента на Vox. Каждый элемент отображается по-разному, в зависимости от его типа и соседних элементов.


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

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

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

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

А для этого существует три основных принципа:

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

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

Поиск швов

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

Но для начала нам нужен метод для определения «швов» элемента и понимание того, как он теряет форму. Для меня этот процесс начинается с рассмотрения четырех характеристик дизайна для сайта: ширины, иерархии, взаимодействия и плотности.

Ширина

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

Ширина

 

В своем адаптивном портфолио Меган Фишер, когда ширина отдельных элементов увеличивается и уменьшается, настраивает их типографику, а не только компоновку.

 

Иерархия

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

Давайте кратко рассмотрим страницу товара на адаптивном сайте интернет-магазина Tattly. При ее просмотре на больших экранах основная область контента имеет два основных элемента информации: карусель с фото товара слева и призыв к действию для приобретения товара справа:

Иерархия

 

На адаптивном сайте интернет-магазина Tattly для просмотра на больших экранах контент, относящийся к товару, «уложен» двумя красивыми столбцами.

 

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

Иерархия - 2

 

На узких экранах иерархия информации о продукте отображается в одном столбце.

 

Иерархия, как правило, напоминает вертикальную структуру. Мы можем использовать медиазапросы min-width и max-width, но также мы можем воспользоваться запросами min-height и max-height. На мой взгляд, в меню сайта музея геологических находок прекрасно сбалансированы вертикальная и горизонтальная составляющие макетов:

 

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

 

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

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

Взаимодействие

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

Взаимодействие

 

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

 

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

Взаимодействие - 2

 

Адаптивные таблицы от SB Nation: сложные диаграммы на больших экранах и простые карусели блоков для каждого дивизиона на малых. Та же информация, разное взаимодействие.

 

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

Плотность

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

Плотность

 

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

 

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

Плотность - 2

 

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

 

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

Вадим Дворниковавтор-переводчик статьи «Frameworks»