<< Пред. стр.

стр. 5
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

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

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




I • ACCOUNT
The truth you need at the price you can afford | • NEWS



WYOMING MAN FINDS NEEDLE IN HAYSTACK
Story goes here. Story goes here. Story got* here. Story Discuss
goes here. Stay goes here. Stoty goes here. Story goes
Debunk
Sere. Story gees here. Story goes here. Story goes Here.
Story goes here Stoty goes here. Story goes here. Story-
Boofemarit
goes here. Story goes here. .
Related stories
Story goes here. Scry goes here. Story goes here. Story
goes here. Story goes here. Story goes here.
Story goes here. Stoiy goes here. Story goes here. Story
goes hete^ Story ROBS here.
Story goes here. Story giiea l:«e. Story goes here. Story
goes here. Story goes here. -4lory goes here. Story goes
веге. Story goes here. Slon'RO^bere. Story goes here.
Story goes here. Story goes here.
Story goes here.
Story goes here. Stoiy goes here. Stoty goes here. Story
goe* here. Story goes here. Story h Stor o
here. Story goes here. Story goes




Puc. 5.3. Когда дело доходит до контраста,
ничто не поколеблет черный текст на белом фоне

Однако не стоит замыкаться на этой схеме. Существует достаточно веских причин,
чтобы испытать различные комбинации цветов. Бледные оттенки или оттенки с
уменьшенной насыщенностью могут быть настолько же эффективны, как и белый цвет
фона, как показано на рисунке 5.4. Можно поэкспериментировать со светлым текстом
на темном фоне, как показано на рисунке 5.5, хотя эта схема, как правило, тяжелее для
глаз. Если ваш сайт насыщен текстом, подобная схема может быть не лучшим выбором.
Даже если на вашем сайте мало текста, позаботьтесь о выборе цвета фона страниц.
Фон должен оставаться «фоновым» настолько, насколько возможно. Вы же не хотите,
чтобы он отвлек внимание, направленное на основное содержимое ваших страниц.
Фон - это не место для ярких или необычных оттенков. Оставьте их для подсветок -
элементов, которые используются специально для привлечения внимания, - и пусть
содержимое страницы станет звездой представления.
Строим Web-сайты
46




REAL TRUTH
Thetruthyouneed«ltht;pria;;o4rana)Yi>rd | • NEWS \* ACCOUNT
|*ARCHIVE
П 6 W S BsjiMB-aup I *ка«!;а' Дваиии


WYOMING MAN FINDS NEEDLE IN HAYSTACK




Рис. 5.4. Могут быть эффективными светлые оттенки цвета фона,
придающие определенный характер вашему сайту. Обратите внимание,
что в этом примере белый цвет отлично подходит в качестве цвета подсветки




Рис. 5.5. Можно также попробовать светлый текст на темном фоне,
однако это будет тяжелее для глаз
ГЛАВА 5. Выбор цветов 47


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


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


Конечно, не всегда целесообразно или желательно использовать стандартные цвета
гиперссылок. Возможно, вы захотите привести ссылки в соответствие с цветами ком-
пании или цветами, связанными с вашим бизнесом или группой. Возможно, синий и
фиолетовый цвета не подходят в общем контексте вашего дизайна. В конце концов,
отказаться от стандартов лучше, чем заставить их работать. Если вы отказываетесь от
стандартов, отказывайтесь единообразно. Используйте одни и те же цвета для предс-
тавления одних и тех же элементов, страница за страницей. Девизом вашего дизайна
должно стать: «Ожидания оправдались». Это ключ к обучению посетителей тому, как
работает ваш сайт. Если они стали ожидать, что красный цвет используется для непо-
сещенных ссылок, используйте красный цвет для непосещенных ссылок абсолютно
везде на вашем сайте.


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



Совет
Как и в случае с большинством остальных жемчужин традиционной
мудрости Интернета, стандарты цветов гиперссылок могут неожи-
данно привести к обратным результатам. Если вы решили не следо-
вать стандартам, то полностью избегайте их. Вы создадите меньше
путаницы, если вообще не будете использовать синий цвет.
48 Строим Web-сайты

Табл. 5.1. Стандартные цвета гиперссылок

Обозначает Код цвет a (IE) Код цвета (Netscape)
Цвет

Синий #0000FF #0000FF
Непосещенные ссылки

Фиолетовый Посещенные ссылки #990099 #663399




Выбор цветов интерфейса
Часто задаваемые вопросы
Все определяет компания Microsoft?
Почти, но не полностью. В программе Internet Explorer для операцион-
ной системы Windows 98 стандартный фиолетовый цвет для посещен-
ных ссылок был переопределен на зеленый. Однако к тому времени
фиолетовый цвет уже просочился в коллективное подсознание Ин-
тернета в качестве правильного цвета для посещенных ссылок. Прог-
рамма Internet Explorer для операционной системы Windows XP тихо
вернулась обратно к стандартному фиолетовому цвету.

Графическая отделка сайта предоставляет вам наибольшую свободу в выборе цветов.
Вы не обязаны столько же думать о вопросах удобства использования цвета. Вместе с
тем, здесь задается зрительное ощущение сайта, и цвет играет немаловажную роль в
формировании подходящего настроения.
Некоторая работа по цветовому дизайну уже может быть сделана. Если вы разрабаты-
ваете сайт для бизнеса или организации, в вашем дизайне должны выразительно ис-
пользоваться корпоративные цвета. Корпоративные цвета - это лишь цвета, на кото-
рые департамент по маркетингу затратил много времени и ресурсов, чтобы ассоци-
ировать их с организацией. Вспомните красные дуги компании Coca-Cola или золотые
дуги компании McDonald's. Догадайтесь, какие цвета изобилуют на соответствующих
корпоративных Web-сайтах. Использование корпоративных цветов - это способ
брендинга или, другими словами, приведения сайга к общему корпоративному виду
организации. Как только вы захотите использовать в дизайне логотип группы, вы так-
же захотите включить другие признаки фирмы, например, корпоративные цвета.



Определение
Брендинг - это метод приведения сайта к общему корпоративному
виду организации, используя элементы из маркетингового материа-
ла, например, логотипы и корпоративные цвета, в дизайне.
ГЛАВА 5. Выбор цветов 49


Часто задаваемые вопросы
Если я поработаю с отделом маркетинга, буду ли я уважать себя
утром?
Работа с отделом маркетинга часто оставляет неприятное впечатле-
ние. Но просто подумайте об этом следующим образом. Бюджет на
рекламу вашего сайта, возможно, равен нулю. Однако каждый доллар,
потраченный на продвижение торговой марки компании в других ис-
точниках, например, по телевидению, можно считать долларом, потра-
ченным на продвижение вашего сайта - пока вы эффективно использу-
ете торговую марку на сайте. Они тратят деньги, а вы получаете выго-
ду. Кто сказал, что отдел Web-разработок не смеется последним?


У цвета ^акже есть психологическое измерение, которое, ио крайней мере, стоит
учесть при планировании подхода. Вы не задавались вопросом, почему у множества
Web-сайтов в основном интерфейсе присутствует синий цвет? Взглянув на таблицу 5.2,
вы увидите, что у людей синий цвет ассоциируется со стабильностью и доверием - два
отличных качества для продвижения, если вы желаете удержать своих посетителей,
особенно, если разрабатывается сайт для финансового или медицинского сектора.
Табл. 5.2. Общие психологические цветовые ассоциации

Цвет Ассоциация (западная культура) Примеры

Красный Страсть, сила, жара, жестокость, Пожарная машина, стоп-сиг-
предупреждение нал, валентинка
Оранжевый Тепло, пища Камин, интерьер закусочной
Желтый Игривость, счастье Солнечный свет, цветы
Зеленый Природа, рост, успокоение, Леса, деньги; также плесень,
изобилие; также ревность, болезнь тина

Доверие, надежность, Униформа полицейских
Синий
стабильность, преданность и военных

Фиолетовый Роскошь, величие, Королевские одеяния
исключительность

Коричневый Устойчивость, практичность Земля, скалы
Чистота, невинность; также Машины скорой помощи,
Белый
холодность, отчужденность, униформа медицинских
суровость работников, свадебные платья;
также снег, мрамор, гипс

Формальность, власть, уныние; Смокинги, солнцезащитные
Черный
также мрачность, печаль очки; также смерть
(старуха с косой)
Строим Web-сайты
50

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

Часто задаваемые вопросы
Все ли культуры имеют одинаковые ассоциации?
Нет. Цветовые ассоциации не универсальны. На самом деле, многие
культуры имеют совершенно отличные интерпретации цветов. Труд-
но предположить, что невеста на Западе наденет красное свадебное
платье - цвета пожарной машины - и тем самым не вызовет насме-
шек. Тем не менее, красный цвет является цветом непорочности в
Индии и Китае. И в то время как зеленый цвет на Западе может обоз-
начать богатство, это очень неудачный цвет на Востоке, где он обоз-
начает супружескую измену. Если вы разрабатываете сайт для посе-
тителей из разных стран, в достаточном объеме изучите их культуру.
ГЛАВА 6.
Разработка специальных возможностей
Вы являетесь дизайнером. Интернет же является такой графической средой, где лег-
ко забыть, что не каждый человек бродит по Интернету, используя свои глаза. Ведь
Интернет - это мировое сообщество всех людей, включая людей с ограниченными
возможностями. Инвалиды по зрению тоже желают посещать ваш сайт. То же хотят
делать люди с когнитивными расстройствами или с затруднениями при обучении. Ес-
ли бы эти люди появились перед вашей дверью, вы бы не захотели оскорбить их или
сделать их визит неприятным. Точно также при разработке Web-сайта вы должны учи-
тывать их особые ситуации.
Разработка специальных возможностей заключается в том, чтобы сделать содержи-
мое Web-сайта доступным для каждого, независимо от инвалидности. Интернет не
единственное место, где важны специальные возможности. На самом деле, Интернет
является одним из последних мест,'где рассматриваются вопросы специальных* воз-
можностей. Общественные здания должны иметь пандусы и лифты, чтобы обеспе-
чить легкий доступ людям с физическими недостатками. Автомобильные стоянки вы-
деляют лучшие места для инвалидов. Кинотеатры предоставляют специальные места
и ряды, более удобные для инвалидов-колясочников. Телевизионные программы вы-
ходят с субтитрами для тех, кто плохо слышит. Только в конце 1990-х годов люди, ра-
ботающие с компьютерами, начали думать так же. Теперь в Соединенных Штатах и
многих других странах специальные возможности являются вопросом права. Прави-
тельству США запрещено давать подряды исполнителям - в том числе, разработчи-
кам Web-сайтов - чьи продукты не отвечают нормам по специальным возможностям.
Никто не собирается тащить вас в федеральную тюрьму, если вы не создали Web-сайт
со специальными возможностями. Вы просто не сможете выгодно устроиться и полу-
чать от американских налогоплательщиков семь тысяч долларов за ссылку.



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


Простого упоминания словосочетания «специальные возможности» в обычном разго-
воре достаточно, чтобы причинить страдание некоторым дизайнерам, однако наде-
лить Web-сайт специальными возможностями на самом деле не так уж и сложно. Вы не
обязаны разрабатывать способ направления изображений прямо в мозг инвалида по
зрению. Вы не обязаны пытаться передать каждому одинаковые впечатления от сай-
та. Вы просто должны предоставить эквивалентное впечатление, т.е. предоставить
информацию на сайте таким образом, чтобы люди с инвалидностью имели тот же уро-
вень доступности, что и нормальные люди.
52 Строим Web-сайты


Часто задаваемые вопросы
Где я могу узнать больше о законе по специальным возможнос-
тям в Соединенных Штатах?
Текст закона Соединенных Штатов по специальным возможностям вы
можете найти в 1998 поправке раздела 508 Закона о реабилитации
(www.section508.gov).


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


Определение
Текстовые эквиваленты - это текстовые описания нетекстового со-
держимого для использования читателями экрана или другими спе-
циальными средствами.


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



Обеспечение доступности изображений
Возможно, вы уже знаете, как добавить текстовые эквиваленты к изображениям, не
подозревая об этом. Все, что для этого необходимо - атрибут a l t тега img. Этот атри-
бут определяет текст всплывающей подсказки, которая появляется в окне браузера
при наведении указателя мыши на изображение. Средства специальных возможнос-
тей используют атрибут a l t для описания изображения инвалидам по зрению.
Итак, чтобы сделать изображение доступным, просто задайте ему подробное дублиру-
ющее описание, наподобие следующего:
<img s r c = " s a t u r n . j p g " alt="Фотография планеты Сатурн, полученная с
космического зонда Voyager, которая показывает гигантские кольца и
оранжевые полосы облаков планеты.">
ГЛАВА 6. Разработка специальных возможностей 53^

Не экономьте на тексте, как в данном случае:
<img s r c = " s a t u r n . j p g " alt="CaTypH">
Такой тип значения атрибута a l t полезен только тем людям, которые в нем не ьгужда-
ются. Помните, что вы хотите передать своим нетрудоспособным посетителям эквива-
лентное ощущение, поэтому слова должны быть настолько точными, насколько это воз-
можно, чтобы выразить сущность изображения. Представьте, что вы вернулись на урок
литературы и пишете сочинение. Предоставьте своим читателям достаточно информа-
ции, чтобы они смогли сформировать в уме четкую картину того, что вы описываете.
Для изображений со ссылками попытайтесь вставить в текст атрибута a l t описание
того, что произойдет при щелчке на изображении, как в следующем примере:
<img src="aboutus.jpg" alt="Переход в раздел сайта "О н а с " . " >
или так:
<img src="macromedia.jpg" alt="nepexofl на сайт macromedia.com">
Если в тексте атрибута a l t будет стоять просто «О нас» или «Macromedia», инвалиды
по зрению, посещающие ваш сайт, не будут иметь понятия о том, для чего нужно и что
делает изображение. Используя слово для описания результата, вы воспроизводите
ненужный видимый контекст. Смысл или назначение изображения выясняется из от-
четливости и понятности одного описания.


Часто задаваемые вопросы
Как насчет изображений, содержащих текст? Этот текст
доступен?
Как таковой, нет. Иногда изображение содержит встроенный текст;
например, метка на кнопке или легенда на диаграмме. Однако чита-
тели экрана не воспринимают буквы и слова на изображении, поэто-
му они не могут воспроизвести этот текст в более доступном виде.
Добавляйте текст для атрибута al t и для таких изображений.


Еще одно табу по специальным возможностям, касающееся изображений: не разраба-
тывайте мерцающие, мигающие, трясущиеся, со стробоскопическим эффектом и по-
добные раздражающие изображения, похожие на некоторые из наименее любимых
рекламных баннеров. Делать этого не стоит не только потому, что эти изображения
безобразны с эстетической точки зрения, психологически оскорбительны и тупы кон-
цептуально, но и потому, что они также способствуют возникновению зрительного
напряжения и головных болей у людей с чувствительным зрением и могут привести к
приступам у людей, страдающих эпилепсией. Если вы настолько безрассудны в оформ-
лении рекламного объявления, что готовы создать физические трудности для некото-
рых ваших посетителей, возможно, вам бы больше подошла работа в отделе рекламы.
Строим Web-сайты
54


Обеспечение доступности мультимедиа
Обеспечить доступность мультимедиа, наподобие Flash-роликов, звуковых файлов и
клипов QuickTime, тяжелее, поскольку мы работаем не просто с одним статическим
изображением. По этой причине мы не можем просто обобщить информацию муль-
тимедиа-файла простым текстовым описанием. Более того, средства специальных
возможностей обычно не могут извлечь текст, находящийся внутри мультимедиа фай-
ла, для преобразования в произносимые слова или в шрифт Брайля.
К сожалению, не существует простого и быстрого способа сделать мультимедийные
данные доступным. Консорциум World Wide Web, или W3C, предлагает несколько ре-
шений, однако все они являются трудоемкими и имеют громоздкий и трудный для по-
нимания вид. Так, в соответствии с рекомендацией консорциума W3C, мультимедиа-
презентация должна содержать синхронизированную аудиодорожку, комментирую-
щую действие, происходящее на экране, что очень похоже на прямую радиотрансля-
цию бейсбольного матча, вместе с полными субтитрами. В качестве альтернативы
можно представить содержимое мультимедиа в виде простого текста или создать ряд
страниц, которые бы предоставляли ту же информацию в более доступном формате.
Правда заключается в том, что большинство мультимедиа-файлов в Интернете не
обеспечивает специальных возможностей вообще. Чтобы сделать существующую пре-
зентацию доступной людям с ограниченными возможностями, зачастую приходится
начинать все сначала и разрабатывать ее заново. Помимо этого, возможно, вам при-
дется приобрести новое оборудование, например, качественные микрофоны и прог-
раммное обеспечение для редактирования звука. Конечно же, все это дополнитель

<< Пред. стр.

стр. 5
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>