Дао Web-дизайна

Введение

То, чем Цзен был в 70-х годах, Дао де дзин стал в 90-х. От Пятачка и Пуха до физики и обратно - к чему только не пытались применять Дао де дзин (Дао физики), или наоборот применять что-либо к Дао де дзин (Дао Пуха). А совсем недавно меня осенило, что в веб-дизайне мало что можно понять, если не смотреть на него через призму Дао.
Даосизм - это философия, наподобие буддизма, способ жизни, бытия в мире. Свое начало она берет от текста огромной давности - Дао де дзин, чьи 81 главы таинственным образом изменяют человеческое сознание, наполняя его одной основной темой - гармонией.
В течение последних нескольких лет, в той или иной степени, моя жизнь была связана со стилевыми таблицами. Я пишу программы, учебники и руководства по ним; я ответил на миллионы вопросов о них в группах новостей и по электронной почте; я боролся за их принятие в рамках Проекта стандартов для Web (http://www.webstandards.org/). И благодаря им я пришел к совершенно иному пониманию Web-дизайна, и осознанию прочной связи между дизайном и Дао.
Я ясно ощущаю реальный конфликт между тем Web-ом, который существует сейчас, и тем, чем он мог бы стать. Это конфликт между уже существующей медиа-средой - печатной страницей - и ее детищем - Web-ом. Пришло наконец время понять это взаимоотношение между матерью и ребенком, и дать свободу ребенку развиваться самостоятельно.

Та же старая новая медиа-среда?
"Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation."
Дао де дзин; стих 38. Ритуал

Вы бы многое поняли, если бы вам посчастливилось увидеть программы первых лет развития телевидения. Телевидение в те времена очень часто рассматривалось, как "радио с картинками", и пожалуй эта метафора - достаточно точное описание. Большинство ТВ-передач следовало формату принятому на радио в те времена. Как остатки той эпохи на каждом канале любой станции мира до сих пор существуют программы типа "Добрый вечер" с многочисленными ее вариациями практически (оркестр, ведущий, который говорит в камеру и гости, сидящие в креслах), и даже те же тв-новости с серьезным ведущим в строгом костюме, зачитывающим текст по бумажке. Все это уходит в прошлое.
А вспомните о первых музыкальных клипах (ну вы же не так молоды, что бы вообще не помнить об этом). Особенно смешно выглядели музыканты, изображающие игру на инструментах. Очень захватывающее зрелище.
Когда новая среда перенимает что-то от уже существующей, кое что идет ей на пользу, но большая часть заимствований происходит бездумно, по традиции, и чаще всего это лишает новую среду свободы. С течением времени новая среда разрабатывает свои собственные правила, отбрасывая устаревшие, не имеющее смысла.
Ярким примером этого может послужить любой телефильм той ранней поры. Поскольку законы радио требовали участия рассказчика, который описывал то, что слушатели не могли видеть, в тех ранних телефильмах часто также присутствовал голос рассказчика, который описывал то, что зрители видели и так. Пример прост, но показателен. он демонстрирует то, что происходит, когда новая медиа-среда развивается на основе уже существующей на тот момент.
Web является новой средой, выросшей из издательской среды, чьи приемы, язык и правила оказывают на него огромное влияние. Более того, родительская среда часто уж слишком сильно влияет на Web. "Крутыми Web-сайтами" обычно оказываются те, где свобода Web укрощена и загнана в рамки страниц, словно они готовились для печати - своеобразная издательская верстка для Web. Проявление такого консерватизма объяснимо - от старых привычек и взглядов порой так трудно отделаться. Но пришло время двигаться дальше и осваивать Web на основании его собственных законов. Пришло время отбросить стандарты печатных страниц, и воспользоваться наконец возможностями, присущими именно Web.
Естественно мы не призываем немедленно отбросить все, что накоплено за сотни лет существования издательского дела и тысячи лет существования письменности. Но следует понять, что следует применять в Web, а что следует отбросить как устаревшую традицию.

Управление Web-страницами
"…Порождает и вскармливет все существа ...
Порождает, но не обладает,"
Дао де дзин. 10 стих.Абстракция.

Почитайте некоторое время группы новостей и списки рассылки, посвященные web-дизайну. Время от времени вы будете наталкиваться в них на одни и те же слова и идеи. Вопрос вопросов, естественно, - "как мне…". Но за вопросами типа "как мне сделать так, чтобы мои страницы одинаково смотрелись на любой платформе?" и "как мне сделать так, чтобы мои шрифты были одинаковыми и на Макинтоше и в Windows?" скрывается главный вопрос - "как мне управлять броузером пользователя?". И вправду, слово "управление" встречается нам в группах новостей удивительно часто.
В основании всего этого лежит убеждение, что роль дизайнера сводится к управлению (вспомните, например, популярный термин "допиксельная точность"). Дизайнеры стремятся противостоять желаниям пользователей, и тем привычкам, которые сложились у пользователей при работе с текстом и изображением (например, путем фиксирования размеров шрифта). Дизайнеры пытаются справится с неприятностями, вызванными различными логическими разрешениями, принятыми в различных компьютерных платформах (например, у Макинтоша это разрешение равно 72 т/дюйм, а у Windows - 96 т/дюйм). Дизайнеры знают все, и будут корпеть над работой до тех пор, пока в любом броузере их страница не будет выглядеть до пикселя в точности, как на их собственной машине.
Конечно, это преувеличение, но не такое уж большое. Яркий пример тому то разочарование, которое частенько выражают разработчики, когда узнают, что таблицы стилей вовсе не являются средством верстки web-страниц. Если вы - пользователь Макинтоша, вы особенно остро почувствуете то, как большинство сайтов непомерно злоупотребляет использованием таблиц стилей, делая страницы практически нечитаемыми. Можно наверняка сказать, что они в качестве размера шрифта используют пиксели (px) или точки (pt). Все это - следствия философии "дизайнер должен управлять всем".
Откуда берет истоки эта идея? Я полагаю, что из издательской среды. В издательской среде дизайнер - действительно бог. На принципах WYSIWYG выросла громадная индустрия, и многие web-дизайнеры просто зациклены на традициях и практике принятых в этой среде. Мы - дизайнеры - должны пересмотреть свою роль, отказаться от претензий на полное управление внешним видом страницы, и найти новое взаимоотношение между ней и нами.

Почему это так важно?
Человек, появляясь на свет, мягок и податлив,
а когда умирает - негибок и тверд.
Все живые твари, деревья и травы, когда рождаются, податливы и нежны,
а когда умирают, становятся сухими и ломкими.
И потому тот, кто мягок и податлив, идет дорогой жизни,
тот, кто негибок и тверд, идет дорогой смерти.
Дао де дзин; стих 76. Гибкость

Может показаться, что невозможность управлять внешним видом страницы является ограничением, неприятной ошибкой Web. Приходя из мира WYSIWYG мы поначалу так и думаем. Признаюсь, что и я сам так думал на первых порах. Но сегодня я уже не считаю отсутствие этой возможности недостатком, наоборот, по-моему в этом - сила новой медиа-среды.
Давайте посмотрим на ситуацию с другой стороны микроскопа. На самом деле наша возможность управлять тем, что печатается на бумаге, является недостатком, а не достоинством издательской среды. Можно говорить "я могу точно задать размеры текста", а с другой стороны получается, что "размеры текста изменить невозможно". Можно сказать "я могу точно задавать размеры страницы", а с другой стороны выходит, что "размеры страницы изменить нельзя". Таковы простые реалии этой среды.
И эти реалии совсем необязательно носят положительный характер, особенно для читателей. Если у читателя со зрением не очень хорошо, наверняка шрифт, выбранный дизайнером, будет для такого читателя слишком мелок, и читать текст ему будет затруднительно, если только он не найдет какого-либо способа увеличить его. Для читателя находящегося в стесненных условиях, в поезде, в самолете, широкий разворот газеты будет слишком велик. И читатель ничего с этим поделать не может.
Да степень контроля, которой владеют дизайнеры в издательской среде, и частенько мечтают перенести в Web, просто результат ограничений, накладываемых печатной страницей. Нам же следует принять тот факт, что у Web-а нет подобного ограничения, и делать свою работу, опираясь на эту гибкость. Но для начала мы должны "проникнуться податливостью и текучестью вещей".

Изменяемость = доступность
Высшая добродетель подобна воде.
Вода дарит благо всей тьме существ, но не ради заслуг.
Жить в покое, вдали от дел - вот то, чего избегают люди,
но только так и можно приблизиться к истинному Пути.
Дао де дзин; стих 8. Вода

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

Способность замечать незаметное называется "ясность".
Способность удерживать ускользающее называется "сила".
Используй свое сияние,
и вновь обретешь свою ясность.
Дао де дзин; стих 52. Ясность

Под гибкостью, о которой я тут говорю, я подразумеваю "изменяемость". Все, что я говорил до этого, можно выразить в следующей фразе: "делайте такие страницы, которые можно изменять". Делайте страницы, которые доступны всем читателям вне зависимости от того, каким броузером, платформой или экраном они решили и вынуждены пользоваться. Это значит, страницы, которые можно читать вне зависимости от разрешения и размеров экрана или его цветового режима (не забывайте, что web-страницы еще иногда и распечатывают, а бывает и зачитывают вслух специальными программами, или читают с помощью броузеров для слепых). Это значит, страницы, которые адаптируются под нужды читателя, у которого зрение может быть далеко от идеального, и который скажем желает читать страницы с увеличив размер шрифта до максимального.
Создавая изменяемые страницы вы делаете их доступными. А ведь пожалуй самым многообещающим свойством Web, которое пока еще далеко от реализации, является простота доступа к информации, независимо от каких-либо ограничений. Важнейшей идей World Wide Web Consortium (http://www.w3.org/), и эта идея уже становится фундаментом web-дизайна, является то, что в будущем специальным законом web-дизайнеры будут обязаны обеспечивать универсальный доступ к своим страницам, также, как сейчас строительное законодательство в любой стране требует обязательного наличия подъездных дорог к зданиям.
Звучит неправдоподобно - "универсальная страница". Возможно сейчас, когда броузеры еще такие несовершенные, а множество других средств, с помощью которых мы будем работать в Web, еще находятся в зачаточном состоянии или не существуют вообще, эта идея остается лишь благим пожеланием. Но уже сейчас мы можем многое сделать из того, что станет основой для рождения страниц, которые адаптируются к пожеланиям и требованиям пользователей, а значит делаются более доступными.

Путь
"The Way is shaped by use,
But then the shape is lost.
Do not hold fast to shapes
But let sensation flow into the world
As a river courses down to the sea."
Дао де дзин; стих 32. Формы

Итак, что же мы можем сделать, для разработки изменяемых, а значит и доступных страниц? Для начала я предлагаю вам несколько полезных идей. А затем дам несколько практических советов по тому, что надо делать, что бы ваши страницы стали доступными.
Во-первых, думайте не о том, как страницы будут выглядеть, а о том, что они будут делать. исходите в дизайне из тех функций, с которыми будут работать пользователи, а не из какой-то абстрактной визуальной идеи. Старайтесь делать, так что бы форма следовала содержанию, а не наоборот, создавать дизайн, а потом пытаться его подогнать под задачу.
Краеугольный камень этой идеи - разделение содержания и представления. Наверняка, вы уже сотню раз слышали об этом, но это, пожалуй, самый важный шаг, который вам предстоит сделать. Рассмотрим все на простом примере. На странице есть текст, отображенный курсивом. Почему он отображен курсивом? Может быть потому, что автор текста пытался выделить его важность? А может быть потому, что этот текст - цитата. а может быть это просто текст на другом языке. В традиционной издательской среде форма определяется содержанием. Преимущество web-издательства состоит в том, что мы явно можем указать то, что неявно подразумевается в тексте, напечатанном на бумаге. Если курсив используется для логического выделения мысли, зачем нам пользоваться элементом i? Воспользуйтесь элементом em, чтобы броузеры, работающие на иных принципах, чем традиционные броузеры для PC, могли соответствующим образом обработать этот текст.
Обобщая сказанное, не используйте HTML для визуального форматирования. Никаких font, b, i и прочих форматирующих элементов. Пользуйтесь логическими элементами HTML там, где это только возможно. А там, где невозможно, пользуйтесь классами. И естественно, для информации, где важно форматирование, пользуйтесь таблицами стилей. Пришло время смотреть в будущее, а не тащить за собой прошлое.
Если вы правильно пользуетесь таблицами стилей для того, что бы предлагать свой вариант внешнего вида страницы, а не навязывать его, и если вы не делаете внешний вид страницы полностью зависимым от таблицы стилей, тогда ваши страницы будут прекрасно "работать" в любом броузере, будь то старом или новом. Броузеры, которые не поддерживают таблицы стилей, будут показывать страницу несколько упрощенно. Но большей головной болью являются броузеры в которых поддержка таблиц стилей сделана с ошибками. На сегодняшний день это главная проблема. Но по прошествии короткого времени, эта проблема отпадет. А сейчас вам следует ограничиться небольшим набором стилей, который поддерживается достаточно хорошо, и все же получать большие возможности управления текстом, чем при использовании простых форматирующих элементов HTML. Я где-то (http://www.westciv.com/style_master/house/good_oil/) уже об этом писал, так что повторяться не буду.
Суммируя сказанное, существуют вещи, которые следует делать при разработке таблиц стилей, и вещи, которые делать не следует делать, так как они могут повлиять на изменяемость ваших страниц. Прежде всего в дизайне страниц никогда не полагайтесь полностью на таблицы стилей. не используете абсолютные единицы измерения типа пиксель или точка (если вас это удивляет, читайте дальше), очень осторожно работайте с цветом и никогда на него не полагайтесь.

Шрифты
Обычно в комплекте с инсталляцией Windows, Macintosh или другой системой поставляется лишь небольшое количество шрифтов. И одинаковыми из них оказываются совсем немногие. Уже сейчас во многих броузерах, а в будущем их число увеличится, пользователи сами могут решать, какие шрифты использовать при просмотре страницы. С помощью CSS вы имеете возможность предложить, какой из шрифтов - их число не ограничивается - необходим для лучшего просмотра страницы. Но не полагайтесь, на то, что шрифт будет установлен на системе пользователя, вне зависимости от того, насколько он распространен.
Еще более важной темой по-прежнему является размер шрифтов. Вы должно быть знаете, что один и тот же шрифт одного и того же размера на Макинтошах "выглядит меньше", чем на большинстве Windows-машинах. В двух словах: это происходит потому, что "логическое разрешение" на Макинтоше равно 72 точкам на дюйм, а на Windows-системах - 96 т/д. Следствия из этого факта весьма значительны. Во-первых, совершенно невозможно добиться того, чтобы текст на Макинтоше выглядел также, как и на Windows-системе. Но если вы руководствуетесь философией изменяемости, для вас это не играет никакой роли.
Как это? Если вас волнует то, как в точности будет выглядеть веб-страница, это признак того, что вы по-прежнему мыслите старыми категориями, а не категориями изменяемых страниц. Одним из важных критериев доступности является размер шрифта. чем мельче шрифт, тем труднее его читать. Те из нас, у кого со зрением нет проблем, наверное будут шокированы, узнав, что значительный процент населения испытывает затруднения, читая текст размерами меньше 14 дюймов, который отпечатан на обычной бумаге. Читать с экрана еще труднее, чем с бумаги. Это связано с меньшей разрешающей способностью мониторов.
Значит ли это, что размер шрифта на web-странице должен быть равен минимум 14 точкам? Но проблема все равно останется для тех, у кого зрение еще более слабое. Так каким же должен быть минимальный размер шрифта? Никаким! Не задавайте размер шрифта в точках вообще. Это значит, что пользователь сам сможет выбрать приемлемый для него размер. То же самое касается и пикселей. Из-за разницы в логических разрешениях различных систем, пиксель на одной платформе не равен по размерам пикселю на другой платформе.
При этом можно по-прежнему задавать бОльший размер шрифта для заголовков и прочих элементов. CSS предоставляет возможности указывать размер текста таким образом, что доступность страницы не ухудшается. Давайте рассмотрим всего один пример.
С помощью CSS можно указать размер шрифта в процентах относительно размера шрифта родительского элемента. Например, заголовки H располагаются внутри тела body страницы. Если вы явно не зададите размер шрифта для BODY, тогда шрифт в BODY будет иметь такой размер, который пользователь установит для себя по умолчанию. Вот так мы и обеспечиваем доступность к нашей странице просто (следуя канонам дао) осуществляя недеяние!
Вы скажете: "но в таком случае текст будет слишком большим". Сделайте его меньше. Но в своем броузере. А посетители вашей страницы будут также иметь возможность сделать его больше или меньше по своему вкусу и желаниям.
Что касается заголовков и прочих элементов, то мы можем их выделить, указывая что, например, заголовок первого уровня H1 должен быть на 30% больше, чем обычный текст в BODY, а заголовок второго уровня H2 - на 25%, и так далее. Теперь вне зависимости от того, какой размер шрифта пользователь установит в своем броузере для просмотра основного текста страницы, заголовки будут больше этого текста на строго определенную величину. Точно так же можно управлять и уменьшением текста, однако соблюдайте осторожность, так как может получиться такая ситуация, когда уменьшенный текст окажется слишком мелким для чтения.
Сделали мы немного, всего лишь отказались указывать размер шрифта в абсолютных единицах, и решили использовать пропорциональные размеры для заголовков, но при этом мы сделали нашу страницу гораздо более доступной и изменяемой.

Компоновка страницы
Отступы, размеры страницы, поля - все эти аспекты верстки страницы позволяют улучшить ее читаемость. Web ставит препятствия перед дизайнерами по всем этим аспектам. Размеры окна броузера могут меняться, что вызывает изменения размеров страницы. Различные устройства для просмотра Web (Web TV, высококачественные мониторы, сотовые телефоны) имеют различные максимальные и минимальные размеры окна. Как и в случае с фиксированными шрифтами, фиксированные размеры страницы могут привести к тому, что в Web ваша страница станет недоступной.
Как и со шрифтами, для достижения большей доступности размеры элементов страницы можно задавать в процентах. Отступы можно указывать в процентах от ширины родительских элементов.
Используя в таблицах стилей для компоновки страницы проценты (или иные относительные единицы измерения) вы получаете изменяемые страницы. Вне зависимости от того, как изменяется размер окна броузера, элементы страницы будет изменяться соответственно, сохраняя заданные пропорции, а это значит, что изменяемой становится и сама компоновка. Значит пользователи смогут выбрать такой размер окна, который соответствует их желаниям.
Размеры отступов, полей и прочих элементов верстки можно задавать относительно размера текста, в котором они расположены, например, с помощью единицы em. Если вы укажите:
P {margin-left: 1.5em}
это значит, что левое поле абзаца должно быть в 1.5 раз больше высоты шрифта этого абзаца. Таким образом, когда пользователь подберет удобный для него размер шрифта, поле абзаца увеличится пропорционально. И наоборот, если пользователь уменьшит шрифт, поле тоже уменьшится соответственно.

Цвета
Web по себе может передавать гораздо больше цветов чем, бумага. Кроме того цвет в Web стоит намного дешевле. Цвет может служить украшением, а может делать сайт узнаваемым, либо может иметь практическое назначение (красный цвет, например, привлекает внимание к важной информации). Но цвет создает множество сложностей для доступных страниц.
Знаете ли вы, что во многих странах (если не во всех) люди со красно-зеленой слепотой не могут получить лицензию на вождение самолета? И это вне зависимости от всех своих остальных качеств. Это связано с тем, что практически вся информация об опасности выводится на приборах красным цветом, а простая - зеленым. Просто стыдно, что цвет предупредительных сигналов нельзя изменить простым способом.
А ваши страницы не поступают ли подобным же образом? Что будет в ближайшем будущем, когда в большинстве броузеров станет возможно задавать цвет элементов web-страниц с помощью пользовательских таблиц стилей, которые будут по приоритету выше ваших таблиц стилей. Уже сейчас эта функция есть в IE 5 для Макинтоша.
Как избежать этих проблем? Используйте таблицы стилей и не указывайте цвет в HTML-элементе font. Избегайте использования цвета для передачи смысла текста.

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

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

A Dao of Web Design
автор: 2000 Джон Олсопп (John Allsopp) and A List Apart

Статьи по теме

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

Онлайн-сервисы для работы с визуальным контентом и дизайном сайта, собрали бесплатные и недорогие площадки. Материал обновлен...

2023-12-28

Дизайн сайта: особенности творческого процесса

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

2019-08-07

Создание логотипа: семь сервисов в помощь

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

2019-01-30

20 ценных уроков дизайна от "Мстителей"

Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес...

2015-05-11

15 трендов веб дизайна в 2014-2015 году

1. Первостепенность дизайна для мобильных устройств. Разработка дизайна теперь начинается с маленьких экранов, следующим шагом являетс�...

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

Прежде чем приступить к продвижению сайта в сети Интернет, необходимо позаботиться об отсутствии в нем ошибок, связанных с неправильно�...

2011-12-27

Факторы, определяющие хороший логотип

Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско�...

2011-12-27

Борьба поисковиков и оптимизаторов

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

2011-04-13

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

Нам часто задают один и тот же вопрос, — какой смысл платить нам за установку шаблона, если полно варезников, где все шаблоны можно скача�...

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

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

2011-04-07

Шаблонные решения для web-сайтов

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

2011-04-07

Как сделать картинки в стиле Карсона

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

Поток безопасного оформления сайтов, не оставляет после их просмотра никаких переживаний, кроме безысходности. Несмотря на все огранич...

2011-03-29

Про заказчиков

Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т...

2011-03-29