Тот, кто открывает школу; закрывает тюрьму Виктор Гюго, 1802 - 1885 французский писатель

Oнлайновое изучение/общаясь серии

Общедоступный веб-дизайн

При проектировании веб-страниц
могут возникать потребности в широком спектре технических решений:

• Люди с плохим зрением нуждаются в альтернативе тексту,
  и текст для них должен быть кратким и четким
• Устройства голосового чтения для людей с плохим зрением
  могут также выступить альтернативой тексту, как это делается на библиотечных терминалах
• Новые портативные устройства,
  основанные на тексте, такие как PDA (Personal Digital Assistants), сотовые телефоны и т.п.
• Некоторые посетители сайта отключают графику,
  чтобы ускорить загрузку страниц, поэтому альтернативный текст для рисунков необходим

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

Ответьте на несколько базовых вопросов:

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

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

• Учитывайте разные размер и разрешение экрана:
  Располагайте важную информацию слева и вверху страницы
  Не привязывайте дизайн к определенным, заданным размеру экрана и разрешению
• Облегчайте просмотр :
  Большинство пользователей (около 75%) сначала просматривают текст и меню в поисках информации
  (и игнорируют графику!)
  Детализируйте и ветвите структуру сайта, делайте ссылки на следующие страницы
  (менее 20% читают слово в слово)
• Стандартизируйте дизайн и навигацию
  Размещайте логотипы, меню и характерные детали единообразно, предсказуемо
  На длинных страницах ставьте ссылки "к началу страницы"
  Интуитивно обозначайте ссылки на контент и URL страницы
  Уменьшайте пустое пространство на главных страницах - это выделяет индексированные каталоги и упрощает просмотр
• Разветвляйте контент, делая ссылки на связанные страницы
  Связанные страницы могут быть третьего и более уровней глубины
  Посетитель сайта всегда должен знать, где находится и иметь возможность легко пройти обратно по пройденному пути или вернуться в начало
• Делайте текст легким для чтения (см. "Writing for the Web")
  Свободно используйте списки, заголовки, подзаголовки и размер шрифта
  Разделяйте блоки текста пробелами
  Не заполняйте весь экран однородным текстом: делайте отступы, колонки текста

Шрифты: используйте стандартные шрифты, если не задано "по умолчанию"
Размер шрифта на экране зависит от размеров монитора, разрешения экрана, а также установок браузера. Georgia (serif), Trebuchet и Verdana (sans serif) были специально созданы для мониторов; Times Roman (serif), Helvetica и Ariel (sans serif) также часто применяются.

• В целях максимальной доступности, размеры шрифта надо указывать в относительных единицах,
  а не в абсолютных, фиксированных. Если размер шрифта фиксирован:

  Минимальный размер должен быть 10 (PC) или 12 (Macintosh) или "medium" или "3"
  Используйте крупный шрифт "larger" на сайтах для детей и пожилых людей
  (см. Руководство по созданию доступного контента (Web Content Accessibility Guidelines) (WCAG), опубликованного Web Accessibility Initiative (WAI), которая является частью World Wide Web Consortium (W3C).

  Study Guides Accessibility (English)

• Исследования показали, что невелика разница в скорости чтения
  между Times Roman, Georgia, Helvetica и Verdana при размере шрифта в 10 пунктов
• Используйте один шрифт для меню, навигации и другой - для контента
  Не используйте больше двух типов шрифта для одного сайта
• Старайтесь не использовать форматирования шрифта (цвет, мерцание, бегущая строка, FACE и т.п..)
  Зачастую такое форматирование не отображается корректно и очень раздражает пользователя

Разумно подбирайте цвета

• Задайте все цвета (BGCOLOR, TEXT, LINK, VLINK, and ALINK)
  или они будут выведены "по умолчанию"
  "По умолчанию" выводятся цвета, определенные по умолчанию на компьютере посетителя сайта
  Если вы зададите только некоторые цвета, то все остальные будут выводиться по умолчанию и не будут гармонировать с теми, которые вы задали сами
• Цвет фона и текста должны быть резко контрастными,
  предпочтительнее сделать светлый фон и темный текст
• Избегайте фона, который затемняет текст
• Используйте безопасную палитру из 216 цветов
  Эти цвета стандартны для всех браузеров (IE, Netscape, Opera, Lynx) и платформ (PC и Macintosh).
  Такие цвета задаются как "#RRGGBB" (Red, Green, Blue) парами одинаковых шестнадцатеричных чисел (00, 33, 66, 99, CC, and FF)

Графика:

• Изображения не должны иметь разрешение больше 75 пиксел на дюйм
  Это принятое для Интернет ограничение; если задать больше, то изображение будет медленно загружаться, а качество при этом не улучшится
• Используйте .jpg файлы для изображений с нечеткими границами;
  используйте .gif файлы для изображений с четкими границами, без полутонов
• Используйте альтернативный текст для описания сути изображения:
  для людей с плохим зрением, для тех, кто отключает графику в своем браузере,
  для браузеров Lynx; для цифровых устройств; для 30% всех браузеров

HTML код, с тэгом <alt>, который определяет альтернативный текст:
<img src="logo.gif" alt="Логотип нашей компании"> Логотип нашнй компании заменяет изображение
<img src="space.gif" alt="*"> или <img src="space.gif" alt="">Пустое место заменит изображение-иллюстрацию, размещенное только для декорации

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

Аккуратно используйте таблицы для форматирования страниц

• Ширину таблицы и размер ячеек, как правило, лучше задавать в процентах, а не в пикселах.
  Обычно удобнее, когда ширина строк таблицы увеличивается и уменьшается в зависимости от размеров окна браузера.
  Фиксированная ширина строк и увеличенный размер шрифта часто бывают несовместимы
  Фиксированная ширина строк может приводить к горизонтальной прокрутке для маленьких экранов
• Избегайте использовать таблицы с тэгом абзаца <p> или делать их "плавающими" (float) с текстом
• Текстовый Lynx сначала считывает целиком верхнюю строку, и только потом переходит к следующей строке.

Ссылки:

• Как можно лучшеописывайте
  содержание ссылки
• Используйтеконструкцию "пробел | вертикаль |пробел,
  чтобы отделять стоящиерядом ссылки
• Не используйтетакие фразы как "нажмите здесь ""ввод"
• Избегайте делатьссылки с изображений (image)
  Труднобывает понять, что рисунки на странице- это ссылки!
• Не делайте"выпадающих" меню
  Трудно бываетпонять, что здесь содержится наборссылок
  Трудно адекватно описатьсодержание таких ссылок

Не используйте

• Фреймы. Либоиспользуйте альтернативныйне-фреймовый вариант
• Java и Flash, гдеэто возможно
• Графику, которая ненесет смысловой нагрузки и отвлекаетот контента
• Изображений,которые крутятся, дрожат,подпрыгивают, если они не иллюстрируютнепосредственно ваш контент
• Бегущих строк

Просмотрите ваши странички :

• Используячерно-белую палитру,
  чтобыпроверить доступность вашего дизайнадля дальтоников
• Без графики,
  чтобы проверить доступность вашегодизайна для людей с плохим зрением итех, кто отключает графику
• На разныхплатформах (PC, Macintosh, Linux ит.п.)
• В разных браузерах(Internet Explorer, Netscape, Opera,Linus)
• С разным шрифтом иразмером экрана

См. также:

Обучение на курсах дистанционного образования |
Содержание веб-сайта (контент) | Web-технологии Нетэтикет |
Строительство веб-сайта | Общедоступный веб-дизайн |
Оптимизация сайта для поисковых машин (SEO)