Верхние и нижние колонтитулы, столбцы и шаблоны

Рассмотрение верхнего и нижнего колонтитулов в общих чертах

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

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

Персональный сайт: Cindy Li

Рис. 38.5. Необходимо отметить два момента особенно ценных для обсуждения здесь: идентичность и контраст

Идентичность

"Идентичность" является термином, который имеет специальное значение в мире рекламы и маркетинга, где он относится к торговым маркам и другим элементам дизайна, которые являются специфическими для представления коммерческого предприятия и его продукции. Сайт Cindy Li (http://www.cindyli.com/) реализует это на персональном уровне, помещая шаржированное изображение лицевого профиля в верхнем колонтитуле сайта, и характерный шрифт, чтобы задать заголовок сайта и основные средства навигации.

Способ реализации идентичности на корпоративных сайтах будет рассмотрен более подробно ниже.

Контраст

На сайте cindyli.com посетителю понятно с первого взгляда, что есть что: идентичность, канва контента, и основной контент, все размещены в определенных контурах, которые выделены своими фоновыми цветами. Кроме того, заголовок сайта и средства навигации заданы высоконтрастными относительно своего фона.

Теперь для нижнего колонтитула сайта:

Рис. 38.6. Нижний колонтитул Cindy Li несколько скуден: имеется заявление об авторских правах, ссылка на сайт издательской платформы, которую она использует (что, вероятно, требуется по условиям лицензии использования), и ссылка на ленту рассылки статей, которые она публикует

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

Социальная сеть: Facebook

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

Подобно многим коммерческим сайтам Facebook предлагает как полнотекстовый поиск, так и классифицированный подход для навигации по сайту.

Рис. 38.8. Подобно своему верхнему колонтитулу нижний колонтитул Facebook также небольшой, даже если принять во внимание постоянный виджет приложений в самом низу. Один интересный элемент здесь находится рядом с заявлением об авторских правах: виджет для изменения используемого по умолчанию языка пользователя

Другая широко распространенная практика, представленная нижним колонтитулом Facebook, состоит в том, что в то время как ссылки использования и до поиска пользователем пути доступа находятся в верхнем колонтитуле, нижний колонтитул содержит все ссылки оператора сайта, и самого сайта.

Корпоративная служба маркетинга и поддержки клиентов: BNSF Railway

Рис. 38.9. Подобно большинству “корпоративных”сайтов, самый высокий контраст в верхнем колонтитуле имеет логотип издателя сайта … и единственный присутствующий тон совпадает с тем, который используется в логотипе

Еще раз об идентичности

Что касается различных логотипов и других аналогичных средств проектирования, которые подчеркивают коммерческую идентичность, рассмотрим следующие примеры, которые все являются вездесущими метками предприятий, которые работают с Opera Software:

• Nokia
  

  
  
• Samsung Group и Samsung Electronics
  

  
  
• Google
  

  
  
• IBM
  

  
  

Кроме этих четырех хорошо известны и другие аналогичные примеры графического дизайна: Nike Swoosh (имя, которое было реально зарегистрировано), логотип AT&T "Death Star", логотип FedEx (и стрела в белом пространстве, окруженная двумя последними буквами), и "UPS Brown" все являются примерами корпоративной идентичности, которая почти всюду известна широкой публике (по крайней мере в США).

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

Что касается других элементов в верхнем колонтитуле сайта BNSF, кроме логотипа, наиболее заметным является использование двух режимов задания маршрута (как и в случае Facebook).

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

Дизайн верхнего и нижнего колонтитулов: низкоуровневые детали

При рассмотрении дизайна верхнего и нижнего колонтитулов в общих чертах становятся очевидны следующие общие черты:

• Корпоративные и прикладные адреса обычно размещают свою основную навигацию в строке вдоль верхнего края канвы браузера. Этот факт отличает их от новостных сайтов и сайтов e-коммерции, которые часто используют столбцовый подход к размещению средств навигации.
• Как распространена горизонтально ориентированная навигация, также распространена дискретная вторичная навигация в нижнем колонтитуле. Более того, описанное ранее в этой статье деление места назначения и метаинформации сайта достаточно широко реализуется.
• Там, где имеется полнотекстовый поиск, его поля ввода обычно размещаются возле правого края верхнего колонтитула. Это в немалой степени связано с тем фактом, что хорошо-реализованный полнотекстовый поиск является таким же допустимым способом навигации по сайту, как и традиционные навигационные ссылки на основе классификации — и скорее всего будет использоваться не по назначению некоторым подмножеством популяции посетителей сайта, которые будут наименее технически подготовленными пользователями.

Дополнительно о реализации компоновки средств навигации

Прежде чем переходить к деталям реализации читатель должен сначала проконсультироваться в List-O-Matic (http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/), приложении, расположенном на сайте Accessify.com, которое создает элементы навигации, используя простое стилевое оформление, готовое для вставки в любую компоновку страницы.

Кроме инструментов, которые на вас работают, существует два основных подхода для размещения средств навигации:

• Навигация делается составной частью верхнего колонтитула сайта (визуально, если не буквально) и ориентируется горизонтально. В этом случае значение display отдельных ссылок будет скорее всего изменено на block, а их объектам, содержащим списки, будет присвоено значение float равное left.
• Навигация ориентирована вертикально и помещается слева от основного контента в своем собственном столбце или сразу над неосновным контентом. В этом случае вы, скорее всего, увидите использование некоторой разновидности нестатического позиционирования.

Сайты с переменным числом столбцов: манипуляции с классами и выводом

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

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

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

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

.about #bodyCopy,
.contact #bodyCopy,
.privacy #bodyCopy {

    float: none; width: auto;
}

  .about #sidebar,
.contact #sidebar,
.privacy #sidebar {

    display: none;
}

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

Сводка

Хотя и соблазнительно — особенно, если вы все еще являетесь новичком — просто сесть и начать писать разметку и код, такой процесс не создаст сам по себе особенно привлекательных, полезных, или удобных в сопровождении сайтов.

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

Базовые шаблоны:

• один столбец (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/template_1col.html.txt)
• два столбца (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/template_2col.html.txt)
• три столбца (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/template_3col.html.txt)

Контрольные вопросы

• 1. Для данного списка возможных ссылок, предоставленных инструктором, разделите эти ссылки на первичные ссылки (верхний колонтитул) и вторичные (нижний колонтитул). Обоснуйте свой выбор, используя примеры из этой статьи.
• 2. Возьмите композицию, созданную одноклассником и определите:
  1. число столбцов, которое будет использоваться в дизайне;
  2. значения ширины этих столбцов; и
  3. float/width/margin
  4. схему float/width/margin, если возможно, которая должна использоваться для реализации представления этих столбцов.
• 3. Для данного логотипа, списка требований, и архитектуры, спроектируйте верхний колонтитул сайта. Если вы не сможете обосновать использование Золотого сечения в композиции верхнего колонтитула в предыдущем упражнении, измените его композицию соответствующим образом и субъективно оцените привлекательность результата.
• 4. Используя только результаты поисковых машин, обоснуйте, почему списки предпочтительнее совокупностей div (или других элементов) для структуризации навигационных элементов. Укажите характеристики программного обеспечения считывателя экрана в своем ответе.
• 5. По памяти исправьте один из предоставленных файлов шаблонов, чтобы он поддерживал различное число столбцов. Измените также существенно композицию первичной навигации по сравнению с тем, что находится в файле исходного шаблона.

Библиография

• BNSF Railroad. 2006. http://www.bnsf.com/ (был доступен 13 января 2009).
• Facebook. 2008. http://www.facebook.com/home.php (был доступен 13 января 2009).
• Henick, Ben. 2006. Избегайте крайних случаев при проектировании заранее. A List Apart. http://www.alistapart.com/articles/avoidedgecases (был доступен 13 января 2009).
• Li, Cindy. 2008. Приключения Cindy Li. http://www.cindyli.com/ (был доступен 13 января 2009).
• Morville, Peter, and Rosenfeld, Louis. 2006. Information architecture for the world wide web, 3rd edition. Cambridge, Mass.: O’Reilly Media.

Об авторе

Бен Хеник создает различные Web-сайты с сентября 1995 г., когда он взялся за свой первый Web-проект как академический доброволец. С тех пор большая часть его работы была сделана в качестве фрилансера.

Бен является универсалом, его навыки касаются почти любого аспекта создания и разработки сайта, от CSS и HTML до проектирования и написания текста, и до PHP/MySQL и JavaScript/Ajax.

Он живет в Лоуренсе, Канзас с тремя компьютерами и без телевизора. Вы можете прочитать больше о нем и его работе на сайте henick.net (http://www.henick.net/).

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.