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

Требования, классификация, и вложенность элементов более подробно

Если следовать современным лучшим подходам к разработке и использовать парадигму Ориентированного на пользователя дизайна (UCD - User Centered Design) для управления дизайном и решениями разработки, то целевые требования посетителей определяют каждый процесс проектирования.

Однако цели спонсора сайта (или издателя) в действительности имеют приоритет с точки зрения команды разработчиков, так как без знания этих целей команда разработчиков не имеет возможности предвидеть цели посетителей.

Определение бизнес-целей

"Бизнес"-цели сайта будут подпадать под одно или несколько из следующих общих определений:

• Непосредственное получение прибыли (e-коммерция)
• Предоставление служб публикации, обмена сообщениями, и/или хранения через Web-интерфейс (например, Blogger, Flickr, Scribd, YouSendIt, Basecamp)
• Продажа продукта или услуги
• Предоставление информации
• Развлечение посетителя

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

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

Определение и удовлетворение требований посетителей

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

Принципиальное предположение этой части процесса проектирования состоит в том, что "посетители ненавидят затруднения". Лучшими способами удовлетворить этому предположению являются:

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

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

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

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

  Иногда для этого достаточно просто пометить кнопку отправки словом "Поиск", но иногда может понадобиться предоставить примечание, чтобы дать посетителям сайта дополнительные инструкции.
• Реализуйте четкое различие между элементами дизайна, которые будут реагировать на взаимодействие пользователя, и всем остальным.

  Стили оформления, которые делают ссылки едва отличимыми от нормального текста, несогласованный дизайн кнопок, и нетипичные стили курсора (cursor) широко распространены, и все вносят свою путаницу. Высококонтрастные цвета, продуманное использование заполнения (padding) (для расширения занимаемой области интерактивных элементов дизайна), и информативные заголовки (title) обычно являются более эффективными.
• Минимизируйте объем взаимодействия пользователя (особенно число щелчков на ссылках или кнопках), требуемого для достижения обычной цели, такой как покупка, или обслуживания популярных ресурсов.

  На практике это требует обычно проигрывания ролей и анализа выбора посетителей. Если и до тех пор пока эти задачи не будут выполнены, сокращенным вариантом этой рекомендации будет подчинение духу Принципа KISS ("Будь проще").

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

• При создании таблицы стилей присваивайте как можно больше свойств в правилах с селекторами простых элементов.

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

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

  Более конкретный способ описания этой рекомендации состоит в том, чтобы "избегать плавающих меню, создаваемых при использовании методов аналогичных Suckerfish" (http://www.alistapart.com/articles/dropdowns) (здесь можно посмотреть другой набор методов Suckerfish (http:// www.htmldog.com/ articles/ suckerfish/ dropdowns/)), известных также как раскрывающиеся меню. Существуют четкие ситуации использования такого дизайна, и все они включают большие сайты, которые полагаются на одно- и двух-столбцовые компоновки, но их часто можно избежать. С другой стороны неопытные пользователи или имеющие недостатки двигательного контроля часто находят раскрывающиеся меню трудными для использования:

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

Классификация контента

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

Обычно контенту можно задать некоторый приоритет, который будет определять возможные компоновки:

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

Кроме контента компоновка почти наверняка будет включать два других раздела:

• Верхний колонтитул будет включать заголовок сайта (который часто связан с самой верхней страницей сайта), основные средства навигации, ссылки на метаданные учетной записи пользователя (в приложении), и, наконец, форму поиска в основном контенте (если используется).
• Нижний колонтитул содержит заявление об авторских правах в минимальном случае. Ссылки на документы, составленные из метаданных (такие как ленты RSS, схемы сайтов, и часть мета-контента сайта из контактной информации) также часто оказываются среди средств вторичной навигации сайта, которые обычно составляют часть нижнего колонтитула.

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

Порядок исходного кода: доступность и другие рассмотрения

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

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

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

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

Поэтому чаще всего внешние разделы организуют в следующем порядке:

1. Верхний колонтитул
   • Заголовок [предпочтительно указывающий на верхнюю/домашнюю/целевую страницу]
   • Основные средства навигации
2. Основной контент
   • Заголовок документа
   • Основной текст
3. Вторичный контент
4. Третичный контент
5. Нижний колонтитул
   • Вторичные средства навигации
   • Дополнительные элементы (например, замечание об авторских правах)

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

Контейнерные элементы, задание class и id

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

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

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

#main
  канва контента 

h1 (уникальный)
  заголовок сайта

ul#nav
  навигационный код сайта 

#breadcrumb
  навигационная цепочка (если используется)

#bodyCopy
  основная статья 

#bodyCopy>h2 (уникальный)
  заголовок основного документа 

#sidebar
  вторичный контент 

#footer
  код нижнего колонтитула

ul#secondaryNav
  вторичные средства навигации

Кроме этого - и что более важно - в элемент body каждой страницы добавляется id (как упоминалось выше), который дает некоторое указание на область действия основного контента, связанного со всем документом. Некоторые проекты генерируют также требование для задания class в элементах body.