Поиск:

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

1. Введение
2. Управление Web-страницами
3. Изменяемость = доступность
4. Компоновка страницы

Изменяемость = доступность

Высшая добродетель подобна воде.
Вода дарит благо всей тьме существ, но не ради заслуг.
Жить в покое, вдали от дел - вот то, чего избегают люди,
но только так и можно приблизиться к истинному Пути.
Дао де дзин; стих 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%, и так далее. Теперь вне зависимости от того, какой размер шрифта пользователь установит в своем броузере для просмотра основного текста страницы, заголовки будут больше этого текста на строго определенную величину. Точно так же можно управлять и уменьшением текста, однако соблюдайте осторожность, так как может получиться такая ситуация, когда уменьшенный текст окажется слишком мелким для чтения.

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

1. Введение
2. Управление Web-страницами
3. Изменяемость = доступность
4. Компоновка страницы

Самые популярные статьи:

• Элементы разработки веб-сайтов
• Анализ популярных решений в web-дизайне
• Шаблонные решения для web-сайтов
• 10 главных ошибок веб-дизайна 2003 года
• К черту плохие броузеры