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

Даосизм – философия, напоминающая буддизм – образ жизни, бытие в мире, связанная с текстом глубокой древности
Дао Дэ Цзин, 81 глава которого загадочно пронизывает весь опыт человечества, имея общую тему – гармонию

В последние несколько лет – хорошо это или плохо – моя жизнь вращалась не только вокруг издательских инструкций. Я пишу программы, учебные пособия и руководства для них, я ответил на бесконечное число вопросов на телеконференциях и по электронной почте; я боролся за их утверждение в рамках «проекта сетевых стандартов». В связи с этим я постепенно пришёл к разностороннему пониманию веб-дизайна и к видению прочной связи между веб-дизайном и Дао.

Я почувствовал некоторую напряжённость между понятиями о той Сети, которую мы знаем, и той, которая есть на самом деле. Это противоречие между реально существующей печатной страницей и её «детищем» в Сети. Пора понять отношения между родителем и ребёнком, и разрешить ребёнку идти своим путём в мире.

Устоявшуюся иерархию не так легко искоренить; сокровенные убеждения так легко не отпускают; таким образом, ритуалы захватывают поколение за поколением.
Дао Дэ Цзин; 38 Ритуал

Если Вы никогда не смотрели первых телевизионных программ, посмотрите – это довольно поучительно. Телевизор в то время воспринимался как «радио с картинками», и это довольно точное описание. Большая часть телевидения унаследовала формат популярного в то время радио. Действительно, передачи вроде «Ночного шоу», с небольшими вариантами транслируемые на всех каналах мира (приглашённая группа, говорящий на камеру ведущий и сидящие гости) сейчас становятся пережитком прошлого.
Задумайтесь также о первых музыкальных видеоклипах (мало кто из нас достиг такого же возраста). По сути, группа демонстрирует себя посредством воспроизведения песни. Увлекательно.

Когда новая среда что-то заимствует от старой, лишь часть этого позаимствованного имеет смысл. Остальная, большая часть – нечто бездумное, «ритуальное», и часто служащее ограничителем для новой среды. Со временем новая среда развивает собственные правила, освобождаясь от существующих правил, не имеющих смысла.

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

Интернет представляет собой новую среду, хотя он произошёл из печатной среды, умения, дизайн и правила которой сильно повлияли на него. Поэтому он часто бывает ограничен правилами среды, из которой произошёл. «Убийственные веб-сайты» обычно приручают дикость Сети, ограничивая страницы, как будто они сделаны из бумаги – настольная издательская система для Сети.
Такой консерватизм вполне естественен, «сокровенные убеждения так легко не отпускают», но настало время двигаться дальше, чтобы охватить Сеть как отдельную среду. Пора избавляться от традиционных рамок печатных страниц, задействуя собственную среду Сети и её природу.

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

Мудрость “… принимает приливы и отливы вещей, питает их, но не владеет ими”
Дао Дэ Цзин; 2 Абстракция

Уделите некоторое время изучению конференций и новостных бюллетеней по веб-дизайну, и Вы увидите, что некоторые общие слова и идеи повторяются раз за разом. Самый частый вопрос, конечно же, — «как я могу?». Но в основе вопросов вроде «как сделать, чтобы мои страницы выглядели одинаково на любой платформе» и «как сделать, чтобы мои шрифты выглядели одинаково под Macintosh и под Windows» лежит основной вопрос: «Как контролировать браузер пользователя?». В самом деле, слово «контроль» встречается всё чаще и чаще.
В основе всего этого лежит убеждение, что дизайнеры – своего рода контролёры (вспомните термин «пиксель-механик»). Дизайнеры стремятся предугадать пожелания пользователей и выбор, который они делают на основании просмотра (например, «закрепление» размера шрифта). Они хотят компенсировать предполагаемые различия платформ, вызванные разным логическим разрешением (например, 72 dpi на Macintosh по сравнению со стандартными 96 dpi на Windows). Дизайнеры предусмотрительны, и не потерпят чего-то меньшего, чем отдельная отрисовка под каждый браузер, протестированная на их собственной машине.

Конечно, это преувеличенный случай, но не особенно. Хорошим примером этого является разочарование разработчиков, когда они узнают, что таблицы шрифтов «не совместимы». И если Вы пользователь Mac, то быстро осознаете, как много крупных сайтов на самом деле злоупотребляют таблицами шрифтов, что делает их страницы нечитаемыми. Скорее всего, они используют точки в качестве меры размера шрифта. В основе этого выбора лежит философия «дизайнер – контролёр».

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

“Новорождённый мягок и нежен,
Старик сух и твёрд.
Растения и животные при жизни гибки и сочны;
В смерти – сухи и жёстки.
Таким образом, мягкость и нежность – признаки жизни,
Твёрдость и жёсткость свойственны смерти”
Дао Дэ Цзин; 76 Гибкость

Вероятно, невозможность «контролировать» страницу – ограничение, помеха, свойственная интернету. Мы были склонны думать именно так, когда пришли из мира WYSIWYG. Я признаю, что это было и моей первой реакцией, которая затем превратилась в долговременное убеждение. Но теперь я больше не воспринимаю это как ограничение – я понимаю, что в этом сила новой среды.

Давайте посмотрим на это с другой точки зрения. Тот факт, что мы можем контролировать печатную страницу – на самом деле является ограничением печатной среды. Вы можете думать, что можно закрепить размер текста или оставить его неизменным. Вы можете думать, что размеры страницы можно изменять или оставить неизменными. Это просто факты среды.

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

Методы контроля, которые дизайнеры используют в печатной среде и зачастую хотели бы использовать и в веб-среде – просто функции ограничения печатного материала. Мы должны принять тот факт, что веб-среда не имеет таких же ограничений и разрабатывать страницы с учётом этой гибкости. Но в первую очередь мы должны «принять приливы и отливы вещей».
Адаптивность = Доступность

“Лучшее в человеке – подобно воде,
Приносящей пользу всем вещам, но не борющейся с ними,
Текущей там, где гнушаются другие,
Где она обретает гармонию с Дорогой”
Дао Дэ Цзин; 8 Вода

Некоторые считают Дао фаталистичным. Упрощённое его прочтение говорит, что нужно бесцельно блуждать, без какого-либо плана, позволяя вещам происходить и реагируя на них. Я воспринимаю это так: мы не должны зацикливаться в своём мировоззрении, ставя недостижимые цели; скорее, мы должны уметь приспосабливаться, не останавливаясь на одних взглядах или направлениях.

“Как наблюдение деталей приносит ясность,
Так поддержание гибкости приносит силу;
Пользуйтесь светом, но не проливайте свет,
Чтобы не причинить себе вреда,
Но обрести ясность“.
Дао Дэ Цзин; 52 Ясность

Гибкость, о которой идёт речь, я понимаю как адаптивность, умение приспособиться. Всё, что я сказал выше, можно подытожить следующим образом: создавайте страницы, которые могут адаптироваться. Они должны быть доступны независимо от используемого браузера, платформы или экрана, выбранных пользователями для чтения Ваших страниц. Это означает, что страницы должны быть разборчивыми независимо от разрешения и размера экрана, количества цветов (не забывайте, что они могут быть распечатаны, прочитаны вслух специальными программами, или же прочитаны при помощи шрифта Брайля). Это также означает, что страницы должны приспосабливаться к потребностям читателей, чьё зрение далеко от идеального и кто хотел бы видеть на странице шрифт большого размера. Разрабатывать адаптивные страницы означает разрабатывать доступные страницы. Вероятно, величайшей перспективой Сети, далёкой от того, что достигнуто на сегодняшний день, является независимая от трудностей доступность информации. Это важнейшее убеждение «Ассоциации Всемирной Сети», которое становится необходимым правилом веб-дизайна: веб-страницы должны быть обязанными по закону предоставлять всеобщий доступ, как строительные нормы и правила по всему миру обязаны предоставлять доступ к зданиям.
Это может показаться невозможным – создать универсальную страницу. Вероятно, пока это остаётся просто стремлением, учитывая то, что браузеры все ещё настолько несовместимы, а многие устройства, через которые мы будем получать доступ к веб-страницам, ещё не изобретены. Но есть многое, что мы можем сделать уже сейчас, чтобы положить начало созданию страниц, которые будут приспосабливаться к желаниям и потребностям пользователей, будучи полностью доступными.

Путь.

“Путь формируется в процессе,
Но потом форма теряется.
Не придерживайтесь формы,
Но дайте ощущениям течь в мир,
Как русла рек текут к морю”
Дао Дэ Цзин; 32 Формы

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

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

Краеугольный камень этой идеи – разделение содержания и внешнего вида. Наверное, Вы слышали это не один десяток раз, но это, пожалуй, самый важный шаг, который Вы можете сделать. Давайте рассмотрим простой пример. На странице есть некоторый текст, выделенный курсивом. Зачем он выделен? Может быть, для акцента. Может быть, это цитата. Может быть, это иностранное слово. В традиционном издательстве форма вытекает из функции. Преимущество веб-публикаций в том, что мы может сделать явным то, что на бумаге лишь подразумевается. Если причина курсива – акцент, то используйте вместо тега <i> тег <em>, и браузеры на платформах, отличных от PC, смогут обработать этот элемент должным образом.

В общем и целом – не используйте html для внешнего вида. Никаких <font>, <b>, <i> и прочих визуальных элементов. Там, где html должен представлять какой-то элемент – используйте этот элемент. Там, где не должен – используйте классы. И, конечно, для презентационной информации используйте таблицы стилей. Пришло время смотреть в будущее, а не цепляться за прошлое.
Если Вы используете таблицы стилей должным образом – чтобы обосновать внешний вид страницы, а не контролировать его, и не полагаетесь на них в смысле передачи информации, то Ваши страницы будут работать в любом браузере. Браузеры, не поддерживающие таблицы стилей, будут просто отображать страницы, которые выглядят как простой текст. Самое большое беспокойство вызывают у нас браузеры с поддержкой ошибочных таблиц стилей. На сегодняшний день это проблема, но до её решения осталось не так много времени. На данный момент Вы можете ограничиться подмножеством CSS, довольно хорошо поддерживаемых, и получить больший презентационный эффект, чем при использовании html.

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

Как правило, Windows, Macintosh или другая система имеют небольшое количество шрифтов. Между установленными по умолчанию шрифтами на этих различных системах очень мало совпадений. Во многих браузерах (в будущем их станет ещё больше) читатели могут сами выбирать шрифт, на котором они хотят читать страницу. С помощью CSS Вы можете предложить множество шрифтов и охватить максимально возможное количество баз. Но не рассчитывайте, что шрифты будут доступны вне зависимости от их распространённости.
Но ещё важнее размер шрифта. Вероятно, Вы знаете, что тот же шрифт, с тем же размером точки, на Macintosh кажется мельче, чем на большинстве машин под Windows. В двух словах, это происходит потому, что «логическое разрешение» Macintosh — 72 dpi, в то время как в Windows этот параметр составляет 96 dpi. Последствия этого различия весьма значительны. Во-первых, в этих условиях текст никогда не будет выглядеть одинаково под Macintosh и под Windows. Но если Вы принимаете философию адаптивности, то это не имеет никакого значения.

Что? Если Вы обеспокоены тем, как именно будет выглядеть веб-страница, это признак того, что Вы ещё не задумываетесь о её адаптивности. Один из наиболее важных вопросов доступности – размер шрифта. Мелкий шрифт менее читабелен. Тех из нас, кто имеет идеальное зрение, может шокировать тот факт, что значительный процент населения имеет проблемы с чтением всего того, что мельче 14 кегля на бумаге. Экраны менее читабельны, чем бумага, в силу их низкого разрешения.

Означает ли это, что 14 пунктов – минимальный размер точки, который мы можем использовать? Это не поможет тем, чьё зрение ещё слабее. Так каким должен быть минимальный размер? Никаким. Не используйте точки. Это позволит читателю выбрать тот размер шрифта, который подходит именно ему. То же самое касается и пикселей. В силу различия между логическим разрешением, пиксель на одной платформе – совсем не то же, что пиксель на другой.

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

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

Можно выделить заголовки и другие элементы с помощью размера шрифта: например, указав, что заголовки 1 уровня должны быть на 30% больше, чем основной текст, а 2 уровня – на 25% больше, и так далее. Теперь, независимо от размера, выбранного пользователем для основного текста, заголовки будут увеличиваться пропорционально ему. Точно так же можно масштабировать и в меньшую сторону, но это может привести к ситуации, когда текст станет неразборчиво мелким, так что здесь нужна осторожность.

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

Поля, ширина страницы, отступы – всё это аспекты дизайна страницы, которые могут способствовать читаемости. Веб-среда создаёт трудности для дизайнера с каждым из этих аспектов. Можно изменять размер окна браузера, изменяя тем самым размер страницы. Различные устройства (телевизоры, мониторы с высоким разрешением, КПК) имеют разные минимальные и максимальные размеры окон. Как и в случае с фиксированным размером шрифта, фиксированный формат страницы может привести к проблемам её доступности в интернете.
Как и со шрифтами, аспекты формата страницы можно разрабатывать с использованием процентных соотношений, с целью повышения доступности. Например, поля можно указать в процентах от ширины содержащего их элемента.

Использование процентов (или других относительных величин) для определения формата страницы в CSS автоматически делает страницу адаптивной. С сужением или расширением окна браузера расположение элементов меняется для сохранения пропорций, и таким образом вся страница приспосабливается к заданным условиям. Читатель может выбрать размер окна, соответствующий его потребностям.
Поля, текстовые отступы и другие аспекты формата можно задать по отношению к размеру текста в них, используя единицу <em>. Если Вы укажете:
p {margin – left: 1.5em}
это будет означать, что левое поле должно быть в 1,5 раза больше высоты шрифта в этом абзаце. Таким образом, когда пользователь меняет размер шрифта, чтобы сделать текст более разборчивым, поле увеличивается пропорционально. Соответственно, при уменьшении размера текста оно уменьшается.

Цвета

Веб-среда в целом более красочна, чем печатные страницы. В интернете цвет дешевле. Цвета могут выполнять декоративную функцию, могут способствовать созданию визуального образа, и могут иметь практическое значение (например, красный привлекает внимание к важной информации). Но цвет также может создавать проблемы с доступностью.
Знаете ли Вы, что во многих (если не во всех) странах люди с «красно-зелёным» дальтонизмом не могут получить лицензию пилота? Это так и есть, независимо от всех других возможностей, потому что предупреждающая информация почти всегда передаётся с использованием красных и зелёных сигналов для безопасности. Досадно, что сигнальные лампы не так просто адаптировать.
Вы хотите, чтобы Ваши веб-страницы разделяли людей подобным образом? Это было бы очень неприятно, поскольку в ближайшем будущем большинство веб-браузеров предоставят читателям простые способы изменения цвета элементов веб-страницы с помощью таблиц стилей, перекрывающих Вашу таблицу.

Используйте таблицы стилей, а не html-тег <em>. И не применяйте цветовые сочетания только лишь для передачи смысла.

Путешествие

“Дерево, которое шире, чем может обхватить человек, рождается из крошечного побега;
Плотина, которая выше течения реки, начинается с комочка земли;
Путешествие в тысячу миль начинается с того места, где стоит нога”.
Дао Дэ Цзин; 64a. Начало

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

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

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

Путешествие начинается с отказа от контроля и согласия стать гибким.