Имея непосредственное или косвенное отношение к IT сфере и веб-разработкам, у вас, наверняка, не раз на слуху были такие термины, как адаптивный дизайн, резиновая вёрстка, позиционирование, и тому подобные. Эти понятия имеют непосредственное отношение к тому, о чём будет идти речь в нашей статье. А поговорим мы об иерархии контента в дизайне страниц, а также о понятии хореографии.
Когда первый раз слышишь термин «хореография контента», невольно ассоциируешь его с танцами и пластикой, и доля истины в этом есть даже в отношении структуры веб-ресурсов. Употребил это понятие впервые в своей статье Трэнт Уолтон. Скорее всего это была метафора, которая символизировала управление поведением блоков контента во время изменения макета страницы. Возникает вопрос: а кода происходит такое изменение? Всё дело в том самом адаптивном дизайне...
Откройте любой сайт в обычном браузере на своём компьютере, и одновременно его же - на телефоне или планшете. Если вы заметите значительное различие в расположении инфо-блоков и других частей контента уже на главной, то этот дизайн, скорее всего, создавался как адаптивный (отзывчивый). Подобный дизайн предполагает смену расположения частей содержимого веб-страниц в зависимости от разрешения дисплея, будь то стационарный ПК, ноутбук, планшет или смартфон.
Сохранение иерархии контента в условиях «отзывчивости»
Представим, что у нас есть сайт для некой бизнес-организации, его структура самая типовая, а дизайн, при этом призван быть отзывчивым. Что мы будем наблюдать? На главной странице, в стандартном оформлении подобного сайта, обычно находится панель навигации, слайд-презентация, под которой могут располагаться несколько блоков с перечнем услуг данной компании.
Ваш целевой пользователь может посетить страницы сайта, открыв его на экране своего планшета, и он увидит, что блоки с услугами, которые находились горизонтально друг возле друга, вдруг слегка сместятся и будут располагаться друг по другом. В принципе, это не сыграет большой роли для него, но вам, как владельцу сайта, нужно обратить внимание клиента на конкретные услуги из списка. Следовательно, вам необходимо сделать так, чтобы они располагались в самом верху главной страницы и никуда не смещались.
В отзывчивом дизайне колонки располагаются так: первая в горизонтальном списке так и остаётся первой, вторая размещается сразу под ней при уменьшении разрешения экрана, третья размещается под второй, и так далее. В резиновой вёрстке контент просто смещается за счёт уменьшения ширины блоков. В идеале, содержимое должно перемещаться вместе со смещением колонок. Было бы неплохо иметь контроль над последовательностью контента, которая не ограничивается исходной очерёдностью в html разметке.
Именно этот неограниченный контроль над текстами в блоках и можно считать хореографией. Но сегодня с помощью кода можно только организовать перемещение колонок друг над другом или одну под одну, то есть хореография контента в своём логичном понимании не реализуется.
Иерархия контента и дизайн веб-страниц
Иерархией контента в случае его соответствия дизайну страниц, можно также считать распределение содержимого по страницам, различные размеры и типы шрифтов, соотношение пустого пространства и текста на страницах, и так далее.
1. Объёмы контента
Если говорить об объёме, то он может касаться и отдельных блоков содержимого, и других элементов в дизайне, таких как изображения, векторы, и другое. Тут важно определить гармоничное сочетание частей контента между собой и их соответствие общему стилю, оформлению сайта. Если одни блоки или разделы контента больше остальных по размеру, то это показывает их степень важности по сравнению с другими разделами информации. Поэтому стоит учитывать то, на какую часть содержимого нужно обратить внимание пользователя, и, в соответствии с этим, определять размеры инфо-блоков.
2. Стили шрифтов
Различные стили и типы шрифтов принято использовать для того, чтобы подчеркнуть важность отдельных подзаголовков в сплошном тексте. Изменяя стиль и тип шрифта, мы, тем самым, обращаем внимание пользователя на отдельные моменты в тексте. Да и вообще, настоящий SEO-текст нельзя представить без подзаголовков, выделенных жирным шрифтом словосочетаний, картинок, обтекаемых текстом, гиперссылок, и многих других признаков.
3. Использование цвета
Изменение цвета отдельных частей контента можно вполне назвать эффективным методом отображения контента. Это совсем не значит, что вы должны придавать страницам невообразимо яркий вид, скорее с помощью цвета проще добавить фокус в отдельные части содержимого, выделить текст или сделать акцент на изображении, и многое другое.
4. Позиционирование и выравнивание
То, как мы размещаем свой контент, в огромной степени влияет на восприятие пользователями нашего сайта. Выравнивание производится с помощью CSS и оно обычно одно эталонное для всех страниц проекта. Правильно выравненный контент создаёт порядок на страницах, позволяет проще находить нужную информацию на них, не путаться в обилии текстов. Конечно же, всё тут, зависит от вёрстки, а осуществляется она с помощью CSS и HTML.
5. Расстояние и пробелы
Визуальная иерархия контента проявляется в определении расстояния между отдельными блоками содержимого, а также между пустыми пробелами на страницах и текстами либо картинками. Тут также важна гармония, тексты не должны находиться слишком близко друг к другу, чтобы пользователь мог разграничить, где заканчивается одна статья и начинается другая. В самих статьях обязательно должны быть отступы между абзацами, подзаголовки, иногда нумерация или тезисы, то есть всё, что делает текст простым для чтения и визуального восприятия.
На основе выше сказанного можно сделать вывод о том, что только сайт, одновременно соответствующий веб-стандартам и соблюдающий всех тонкости иерархии контента способен обеспечить максимальную эффективность взаимодействия с пользователем.