Фреймворки

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

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

Поиск слов

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

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

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

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

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

Как отмечает Боултон, мы исторически создали сетчатые системы, приняв метод «canvas in». Работая с краями печатной страницы, дизайнеры подразделяют страницу на систему столбцов и строк и размещают изображения и текст на этой сетке в приятных, рациональных схемах. Но в сети нет такой границы - в конце концов, это первый по-настоящему гибкий дизайн. В результате Боултон утверждает, что вместо этого мы должны использовать подход «content out» для проектирования наших сеток: построить более сложные системы компоновки из основы небольших модульных элементов контента. И для этого Боултон предлагает три руководящих принципа:

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

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

Поиск швов

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

Но сначала нам нужен метод поиска швов элемента и понимание того, как он теряет свою форму. Для меня этот процесс начинается с рассмотрения четырех характеристик: ширины (width), иерархии (hierarchy), взаимодействия (interaction) и плотности (density).

Ширина (Width)

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

Иерархия (hierarchy)

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

Иерархия - это, как правило, напоминание о том, чтобы быть более вертикальным в наших проектах. В конце концов, у нас есть запросы по ширине min-width и max-width, но чаще также можно использовать запросы min-height и max-height.

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

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

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

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

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

Плотность (density)

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

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

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