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

Что такое хореография контента?

В процессе изменения макета широкоэкранного сайта для экрана планшетного компьютера, а потом и для смартфона, количество столбцов, как правило, снижается с трех-четырех до одного. Простым решением является уменьшить каждый столбец, а потом сложить их один на другой. Как только вы дойдете до того, что у вас останется только один столбец, макет ограничится источником порядка блоков контента в HTML. Любая колонка на первом месте в HTML отображается в верхней части страницы, любая колонка следующая после верхней в HTML, отображается сразу после верхней, и так далее. К сожалению, это означает, что информация, которая хорошо видна в верхней части страницы, когда контент расположен в несколько столбцов, уйдет вниз страницы, если контент будет расположен в один столбец. То есть важная информация,  которую вы видите в верху страницы на экране стационарного компьютера, на экране смартфона будет расположена в нижней части страницы. Хотим ли мы этого? Вся информация, которая расположена, на боковой панели, вероятно, не так важна, как информация в основной колонке, однако, некоторая информация с боковых панелей все-таки важнее, чем с основной колонке. В идеале, визуальная иерархия должна сохраняться прежней, когда конструкция будет изменяться с трех колонок на две, а потом и на одну. И контент в разных колонках должен смешиваться, относительно иерархии контента. Нам нужно больше контроля над порядком отображения контента. Больший контроль над блоками контента внутри контейнеров и есть процесс, который называется “хореографией контента”. Я предполагаю, что Трент выбрал слово «хореография» в качестве метафоры для того процесса, как по нашему мнению должно проходить движение блоков контента, в соответствии с изменением макета сайта. Наш опыт работы в сфере информационных технологий и дизайна, в частности, не облегчает нам  процесс работы над хореографией контента. Автор этого метода предлагает устанавливать колонки с контентом одну на другую, а это значит, что вся информация в одной колонке должна логически начинаться и заканчиваться только в пределах этой колонки.

В связи с этим нам видятся две проблемы:

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

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

Решение проблемы источников порядка

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

• “Flexbox“;
• “Regions“;
• “Grid Layout“.

Вторая и третья спецификации почти не поддерживаются современными браузерами. Удивительно, но Internet Explorer пока лидирует в поддержке обоих спецификаций. IE 10 поддерживает диапазоны и сетки макетов с -ms префиксом. Никакой другой современный браузер не предлагает никакой поддержки, так что нам придется ждать остальные браузеры еще какое-то время. Первая спецификация, под названием Flexbox имеет довольно хорошую поддержку. Спецификации претерпела некоторые изменения, и две последние  версии в настоящее время поддерживаются практически всеми современными браузерами. Если вы не возражаете против смеси старого и нового синтаксиса, вы можете использовать Flexbox для работы  в текущих версиях практически всех браузеров. Opera mini и IE версии ниже 10 не поддерживают синтаксис Flexbox. Тем не менее, вы можете использовать Flexie polyfill, что бы добавить поддержку в  IE. Flexie использует старый синтаксис Flexbox, но он поддерживает IE еще в шестой версии. Flexbox заслуживает отдельной статьи с подробным объяснением. В данной статье я поделюсь с вам ссылками на некоторые работы, в которых я писал о старом синтаксисе и о новом синтаксисе, а также на те статьи, которые познакомят вас с новым синтаксисом для создания отзывчивого макета. Достаточно сказать, что с помощью свойств CSS, мы можем сделать так, что блоки контента будут отображать в порядке отличном от того, как эти блоки расположены в  HTML. Джордан Мур также писал о Flexbox и хореографии контента, кроме того, он создал наглядное демо.

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

Решение проблемы смешения контента

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

CSS модель визуального форматирования

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров