Идеология HTML

Начнем с того, что дизайн для интернета — далеко не самое важное. Самое важное — информация и ее доступность.

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

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

Семантика против представления
Веб-дизайнеру стоит помнить, что HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста). Не Design Language, а именно Markup. И задумывался он как средство описания структуры информации, а не ее представления.
Например, заголовок раздела должен быть описан как заголовок второго уровня (<h2></h2>), что означает, что это верхний уровень подзаголовков ниже первого, который является заголовком всей страницы. Этот стиль описания был выбран Тимом Бернерсом-Ли (Tim Berners-Lee), так как он хотел, чтобы WWW была универсальной информационной системой. Он не мог предвидеть, какое компьютерное оборудование будет у различных пользователей, поэтому необходимо было хранить данные о том, как будет выводиться информация, отдельно от файла, задающего структуру. То, каким образом будут выводиться страницы, должно определяться в зависимости от конкретного оборудования и системы.
Смысл описания структуры документа, или семантики, был потерян, когда некоторые производители браузеров ввели собственные теги, определяющие, как именно будет выводиться информация. Так, многие дизайнеры стали задавать параметры представления текста, наподобие “шрифт Garamond, жирный, высотой 18 пикселов”, вместо того чтобы использовать семантическое описание заголовка второго уровня. Преимущество такого подхода в том, что страница будет отображаться приблизительно так же, как задумано, если аппаратное и программное обеспечение пользователя совпадают с теми, которыми пользовался дизайнер. Таким образом, стало возможным создавать более изощренный дизайн.
Недостаток в том, что при использовании пользователем других программ и платформ страница может выглядеть абсолютно как попало, а вовсе не так, как задумано, и забота дизайнера состоит в том, чтобы свести эти различия к минимуму.
Начиная с 1997 года (когда получил популярность Internet Explorer), понятие единственного браузера, используемого всеми, стало неактуальным, за исключением интрасетей, которые стандартизированы одним производителем. В открытой сети уже не было единственной платформы. Сейчас становятся популярными такие устройства для доступа к информации, как карманные компьютеры и мобильные телефоны. Появляются браузеры для устройств с голосовым интерфейсом (не только для слепых, но и, например, для водителей, у которых заняты руки и глаза) и алфавитом Брайля. А кроме них есть еще текстовые консоли, телеви­зионные приставки WebTV и планшетные компьютеры. Каждое устройство обладает собственными характеристиками. Невозможно, чтобы один и тот же браузер обеспечил оптимальный пользовательский интерфейс в различных ситуациях.

Что же делать
Очевидно, во всех этих случаях интерфейс будет гораздо лучше, если используется семантическое кодирование и система может “понять” структуру страницы. К примеру, голосовая система может выделять заголовки изменением интонации, текстовый браузер — повышенной яркостью. А что им делать с шрифтом Garamond?
Замечу, что автоматические сборщики информации похожи на слепых пользователей своей ограниченностью текстовым аспектом информации. Поисковый робот, собирающий базу, может придать тексту заголовка больший “вес” при контекстном поиске.

DTC050W

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

Практика
Доступность информации в интернете опирается на два основных принципа, из которых вытекают все остальные, более частные рекомендации.
Первый принцип — это использование структурной, а не визуальной разметки.
С точки зрения семантики, хуже всего дело обстоит с таблицами. Они сейчас используются по большей части для размещения элементов страницы, а вовсе не для оформления табличных данных. И альтернативы не предвидится, разве что наловчиться использовать для этой цели теги <div></div>. Данные на странице с табличным форматированием могут и, скорее всего, будут неправильно отображаться браузерами, не поддерживающими таблицы (вроде Lynx и Lister от Total Commander’а — последний не может называться серьезным браузером, но годится для проверки страницы под Windows). Тем не менее, таблицы вполне допустимы, если соблюдать одно несложное правило: логически связанные фрагменты содержимого должны располагаться либо в одной ячейке, либо в ячейках, соседних по горизонтали.
Второй принцип — это поддержка текстового эквивалента для всей информации страницы. Обычный текст — самый универсальный компьютерный формат данных с самыми широкими возможностями преобразования и отображения, поэтому поддержка текстового плана веб-страницы — лучший способ обеспечить ее доступность для любых потребителей информации.
В первую очередь это относится к атрибутам ALT для изображений. Alt-текст должен давать текстовый эквивалент информации, содержащейся в изображении, а не некую метаинформацию о самом изображении (вроде размера файла изображения; исключение могут составить коллекции картинок). Если изображение служит заголовком, то тег IMG нужно вставить внутрь элемента H*, чтобы приписать его alt-тексту соответствующую структурную роль. Для декоративных элементов, не несущих никакой информации, обязательно указывать пустой alt-текст alt="". При использовании изображений-карт нужно снабдить каждый тег AREA внутри тега MAP атрибутом ALT.

Размер экрана
Большинство страниц хорошо смотрится только на 17-дюймовых мониторах с разрешением не меньше 1024×768 пикселов. Стоит этим значениям чуть измениться в меньшую сторону, как страница сужается, и, чтобы увидеть все ее содержимое, приходится активно применять линейки прокрутки. Еще хуже, когда страничка расползается и читать становится невозможно из-за корявой длины строки. Но так не должно быть. Реальность такова, что в ближайшие несколько лет нам придется проектировать страницы, которые должны будут хорошо смотреться на маленьких экранах.
Главный принцип дизайна, не зависящего от разрешения: никогда не использовать фиксированных размеров таблиц, фреймов или других элементов дизайна. Все размеры должны задаваться в процентах от доступного пространства.
Запомните, что у разных пользователей различные предпочтения относительно размеров шрифтов, поэтому убедитесь, что ваш дизайн подходит и для больших, и для меньших шрифтов по сравнению с выбранным вами размером. Люди используют различные размеры шрифтов из-за проблем со зрением или из-за того, что на экранах с большим разрешением маленькие шрифты читаются с трудом.
Знайте, что пользователь не обязан иметь на своем компьютере определенный шрифт и не обязан иметь в нем кириллицу. При подстановке браузером подходящего шрифта вместо вашего в лучшем случае нарушится дизайн страницы, а в худшем — страница окажется недоступной из-за несовпадения кодировок. Лучше всего не задавать шрифт вообще, а использовать шрифты, определенные по умолчанию. Если вам действительно нужно задать конкретную гарнитуру, определите список шрифтов: это увеличит вероятность того, что хотя бы один из предложенных шрифтов окажется на компьютере пользователя. Используйте родовой признак шрифта — serif, sans-serif или monospace — в свойстве CSS font-family.
На странице должна преобладать информация, представляющая интерес для пользователя. К сожалению, встречаются сайты, где элементам навигации отводится места больше, чем информации. Элементы навигации — это необходимость, но их использование не должно стать самоцелью. Есть сайты, где оставляется слишком много пустого пространства. Белые области не будут напрасной тратой пространства, если они являются частью дизайна навигации или содержания сайта. Но зачастую некоторая доля свободного пространства не относится ни к каким элементам дизайна и возникает из-за того, что страница не выравнивается по всей доступной области окна, и невозможно изменить ее формат, чтобы заполнить все окно. Даже если веб-дизайнер не может повлиять на размещение информации, пользователям нет до этого дела. Все, что знает пользователь — это то, что на экране у него определенное количество пикселов, и только 20% или 14% из них используются для отображения информации, представляющей интерес.

Послесловие
При написании статьи активно использовались наблюдения и рекомендации Якоба Нильсена (Jakob Nielsen), изложенные в его книге “Designing Web Usability: The Practice of Simplicity” (издана в России издательством Символ под названием “Веб-дизайн. Книга Якоба Нильсена”). Это моя библия от веб-юзабилити.
Всем, кто связан с созданием веб-страниц и сайтов, рекомендую прочитать ее, а также книгу Стива Круга (Steve Krug) “Don’t Make Me Think: A Common Sense Approach to Web Usability” (издана издательством Символ под названием “Веб-дизайн. Книга Стива Круга”).
И для интересующихся собственно дизайном — из той же серии “Веб-дизайн. Книга Дмитрия Кирсанова”. Подробно рассказывается о теоретических основах визуального дизайна и приемах практической работы над сайтом.


Рекомендуем почитать: