Веб-дизайн

Всплеск и вскрик. Нередко пустота на дизайнерских сайтах столь обильна (опять каламбур), что она не только растекается по всей первой странице сайта, но и выплескивается с нее в третье измерение, образуя сплэш–страницу (англ. splash page) — своего рода заставку, прихожую, суперобложку сайта. Расположенная первой сплэш–страница, как правило, не содержит ничего, кроме логотипа фирмы или визуала (часто анимированного), и единственной своей ссылкой, привязанной к этому изображению, ведет на главную (хотя теперь уже не «первую») страницу сайта. На случай, если посетитель не догадается щелкнуть по этой единственной ссылке, тег МЕТА (стр. 40) автоматически перенесет его туда спустя какое–то время.

Отсутствие другого содержимого позволяет вывешивать на сплэш–странице довольно объемистую (иногда до 100 Кб) анимированную графику, показывающую способности дизайнера во всем их блеске. Однако и простой, без анимации, логотип фирмы в центре пустой страницы прекрасно справится со своей задачей, — представив зрителю главное действующее лицо начинающейся феерии дизайна и сделав небольшую паузу, чтобы дать утихнуть аплодисментам. Кроме психологической артподготовки посетителя, приучения его «малыми дозами» к стилю лежащего впереди сайта, сплэш–страница способна решать и вполне практические задачи: русскоязычные сайты нередко выносят на нее меню выбора языка и/или кодировки, а особо заботливые любят здесь же объявлять о предпочтительных для просмотра этого сайта броузерах и даже указывать оптимальные размеры окна (этой теме посвящен следующий раздел).

Формат страницы

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

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

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

Все это означает, что понятие разрешения как количества пикселов, приходящихся на единицу физического расстояния (сантиметр или дюйм), в веб–графике можно полностью игнорировать. Работая с изображениями в Photoshop'e или другом растровом редакторе, вы можете не обращать никакого внимания на цифры разрешения («resolution») — вас могут интересовать только ширина и высота картинки в пикселах. Берегитесь сантиметров, дюймов и прочих единиц реального мира — они способны вас только запутать.

И все–таки — каково физическое разрешение компьютерного экрана? Хотя величина эта меняется из–за множества почти случайных обстоятельств (она зависит не только от паспортного размера экрана дисплея и количества пикселов по вертикали и горизонтали, но и от модели дисплея, положения ручек настройки, иногда даже от положения измеряемой области на экране), традиционно принято считать, что среднее значение разрешения экрана составляет 96 dpi на компьютерах с Windows (в режиме 800х 600 на 15-дюймовом мониторе) и 72 dpi на Макинтошах.

The frame of reference

Как вы наверняка знаете из собственного опыта, если веб–страница превышает по размеру окно броузера, ее содержимое придется промотать влево или вверх с помощью услужливо появляющихся в окне полос прокрутки (scrollbars, — иногда их называют еще «панелями прокрутки» или «движками»). Полосы эти не только нарушают стилистическое единство дизайна, но и представляют собой эргономический нонсенс, мгновенно переводящий страницу из категории произведений искусства в категорию рутинных «объектов интерфейса». Люди не любят проматывать содержимое окна, особенно по горизонтали, и хороший веб–дизайнер никогда не заставит их делать это без большой необходимости. Прокрутки по вертикали избежать удается редко, но по крайней мере по ширине веб–страница должна быть такой, чтобы горизонтальная полоса прокрутки не появлялась даже при минимальной ширине окна броузера.

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

Общее число пикселов по горизонтали и вертикали обычно называют «разрешением» компьютерного экрана, хотя правильнее называть эту величину размером (ведь она измеряется в пикселах, а не в пикселах на дюйм). Величина эта может различаться в разы — от 1600 на 1200 пикселов и выше в самых дорогих графических рабочих станциях до 640 на 480 у графического адаптера VGA, самого старого из всё еще применяемых в IBM-совместимых компьютерах. Однако и это значение — 640 пикселов по горизонтали — еще нельзя принимать за искомый минимум: нужно учесть, что любое окно на экране компьютера имеет рамку и (почти всегда) вертикальную полосу прокрутки, а веб–страница в окне броузера окружена определенной величины полями. С учетом всех этих наслоений ширина страницы не должна превышать 600–610 пикселов, а если рассчитывать на пользователей со старыми моделями Макинтошей — то и еще меньше, около 580.

Заметки о полях Упомянутые только что поля — это не поля, которые устанавливает вокруг содержимого страницы дизайнер, а те небольшие просветы вдоль левой и верхней границ окна, которые оставляет сам броузер. Пользователь не может ни поместить что–либо в эту мертвую зону, hi повлиять на размеры полей средствами стандартного HTML. Еще хуже то, что величина этих полей непостоянна — она зависит от марки и верен» броузера и от установленного в данный момент базового кегля шрифта (стр. 216). Из–за этого возникают трудности с точным совмещением фонового изображения (стр. 259) и материала переднего плана — ведь броузер настилает фоновую картинку по всему пространству окна вплоть до рамки, вне зависимости от того, насколько отодвинуты от этой рамки текст и изображения переднего плана. Оговорка относительно «стандартного HTML» не случайна — очевидно, поля эти были введены именно для того, чтобы размеченные в минималистском, академическом (стр. 150) стиле тексты можно было читать, не стукаясь взглядом о вплотную прижатую к тексту рамку окна. Предоставляя со временем все больше оформительской свободы автору страницы, броузеры не могли обойти своим вниманием и этот аспект. Так, MSIE поддерживает атрибуты leftmargin и topmargin тега BODY, позволяющие устанавливать любую (в том числе нулевую и отрицательную) величину полей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игнорируют эти «MSIE-only» атрибуты.

Более идеологически правильный, хотя и выходящий за рамки HTML подход — использование CSS-свойств (стр. 40) margin–left и margin–top для тега BODY. К сожалению, упоминавшаяся уже незрелость реализации CSS (стр. 23) не позволяет воспользоваться даже таким невинным трюком: