WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

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

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

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

Компоновка страницы

Отступы, размеры страницы, поля - все эти аспекты верстки страницы позволяют улучшить ее читаемость. Web ставит препятствия перед дизайнерами по всем этим аспектам. Размеры окна броузера могут меняться, что вызывает изменения размеров страницы. Различные устройства для просмотра Web (Web TV, высококачественные мониторы, сотовые телефоны) имеют различные максимальные и минимальные размеры окна. Как и в случае с фиксированными шрифтами, фиксированные размеры страницы могут привести к тому, что в Web ваша страница станет недоступной.

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

Используя в таблицах стилей для компоновки страницы проценты (или иные относительные единицы измерения) вы получаете изменяемые страницы. Вне зависимости от того, как изменяется размер окна броузера, элементы страницы будет изменяться соответственно, сохраняя заданные пропорции, а это значит, что изменяемой становится и сама компоновка. Значит пользователи смогут выбрать такой размер окна, который соответствует их желаниям.

Размеры отступов, полей и прочих элементов верстки можно задавать относительно размера текста, в котором они расположены, например, с помощью единицы em. Если вы укажите:

P {margin-left: 1.5em}

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

Цвета

Web по себе может передавать гораздо больше цветов чем, бумага. Кроме того цвет в Web стоит намного дешевле. Цвет может служить украшением, а может делать сайт узнаваемым, либо может иметь практическое назначение (красный цвет, например, привлекает внимание к важной информации). Но цвет создает множество сложностей для доступных страниц.

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

А ваши страницы не поступают ли подобным же образом? Что будет в ближайшем будущем, когда в большинстве броузеров станет возможно задавать цвет элементов web-страниц с помощью пользовательских таблиц стилей, которые будут по приоритету выше ваших таблиц стилей. Уже сейчас эта функция есть в IE 5 для Макинтоша.

Как избежать этих проблем? Используйте таблицы стилей и не указывайте цвет в HTML-элементе <font>. Избегайте использования цвета для передачи смысла текста.

Начало пути

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

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

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

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

Начните свой путь, став гибкими, откажитесь от жестких рамок.

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

JOHN ALLSOPP

Ссылки по теме