У голубого экрана

Получившиеся минимальные габариты видимой ча­сти страницы — 580 на 350 пикселов — определяются разрешением экрана массовых персональных компьютеров PC и Макинтош. Однако недавно появилось еще одно устройство для доступа к сети — гибрид компьютера и телевизора под названием WebTV (www.webtv.net ). Коробочка с мо­демом, процессором и зашитым в нестираемую память броузером, ценой около 200 долларов, позволяет путешествовать по сети, читая веб-страницы с экрана своего телевизора и выбирая ссылки при помощи пульта дистанци­онного управления (для ввода текста в поля бланков можно присоединить отдельно продающуюся клавиатуру).

Для дизайнера WebTV прежде всего интересен более жесткими ограничени­ями на формат страницы. Размер рабочей части экрана на всех устройствах этого типа один и тот же — 544 на 376 пикселов, и изменить его пользова­тель не может. А хуже всего то, что при более узком, чем у компьютерных броузеров, экране это устройство не позволяет прокручивать страницу по горизонтали — если что-то вылезет за правую границу экрана, оно так и останется недоступным. Очевидно, ограничения WebTV нет смысла учи­тывать в дизайне русскоязычных сайтов, так как в России эти устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже заметный и постоянно увеличивающийся процент.

Если тебе дадут линованную бумагу — пиши поперек

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

197

гораздо менее жестко. Такие страницы не «читаются» и не «просматриваются», а именно рассматриваются как нечто цельное, одноуровневое и одномоментное. Так, в примере 3 главный визуал страницы — фотогра­фия — смешен вправо и обрезан краем окна именно для того, чтобы у зрителя возникло непреодолимое жела­ние посмотреть — «а что там, за поворотом?» Страница эта открывает собой целый «горизонтальный» сайт и рас­считана на пользователя, который впервые сталкивается с таким необычным размещением материала, — поэтому до­полнительная «стимуляция» с помощью частично видимой фотографии здесь вполне уместна. Результат — из рутинной, почти подсознательной операции промотка окна становится волнующим открытием.

К сожалению, владельцы WebTV не имеют ни малейшей надежды на­сладиться этим изыском дизайна — горизонтальной прокрутки у них нет вообще. Нет ее, кстати, и у встроенных в броузеры функций печати — при попытке распечатать «горизонтальную» страницу оба броузера обрежут ее правый край, оставив видимыми около 800 пикселов ширины.

Ступеньки ригидности

Интересно проследить, как меняется отношение страницы к описанным ограничениям формата в зависимости от назначения сайта и стиля дизайна. Для страниц, оформленных в строгом академическом стиле (с использованием только тегов HTML 2.0, стр. 150), размеры окна вообще не имеют значения, так как HTML 2.0 просто не позволяет задавать размеры или расположение чего бы то ни было в пикселах (в нем нет даже атрибутов height и width для указания размеров изображений). В отсутствие таблиц и других приемов позиционирования материала колонка текста верстается враспор от левого поля до правого (и, естественно, переверстывается при изменении ширины окна). Иными словами, академический HTML легко приспосабливается к любому разрешению экрана — причем без малейших усилий со стороны автора. Следующая ступень после академического стиля — так называемый «резиновый» дизайн, при котором для разме­щения текста и изображений уже используются таблицы (стр. 234), но ширина этих таблиц задана не в пикселах, а в процентах от ширины окна. Это позволяет оставлять вокруг текста поля, значительно облегчающие чтение, вер­стать текст в несколько колонок и достаточно свободно размещать графику. Главное же достоинство «резиновой» страницы — то, что она позволяет столбцам текста свободно

198

растягиваться и сжиматься, тем самым и приспосабливаясь к минимальным (и даже меньше минимальных) размерам экрана, и эффективно используя пространство на экранах шире среднего. Это свойство «резиновых» страниц особенно ценно для контент-сайтов (пример — первая страница сайта www.webreference.com ).

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

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

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

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