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

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

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

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

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

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

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

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

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

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

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

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

Поиск швов

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

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

Ширина

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

Иерархия

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

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

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

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

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

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

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

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

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

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

Плотность

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

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

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