Как
вы наверняка знаете из собственного опыта, если веб-страница превышает по
размеру окно броузера,еесодержимоепридется промотать влевоили
вверх с помощью услужливо появляющихся в окне полос прокрутки (scrollbars, — иногда
их называют еще «панелями прокрутки» или «движками»). Полосы эти не только нарушают
стилистическое единство дизайна, но и представляют собой эргономический
нонсенс, мгновенно переводящий страницуизкатегориипроизведенийискусствавкатегорию рутинных «объектов интерфейса».
Люди не любят проматывать содержимое окна, особенно по горизонтали, и
хорошийвеб-дизайнер никогда не заставит
их делать это без большой необходимости. Прокрутки по вертикали избежать
удается редко, но по крайней мере по ширине веб-страница должна быть
такой,чтобыгоризонтальная полоса прокрутки не появлялась
даже при минимальной ширине окна броузера.
194
Вообще
говоря, формулировка «при минимальной ширине» неправильна — ведь окно броузера
можно сплющить как угодно, так что «минимальная» его ширина близка к нулю.
Речь должна идти, наоборот, о максимальной ширине, достижимой на самом
маленьком
из существующих компьютерных экранов («маленьком», конечно,
не в сантиметровом, а в пиксельном измерении). При этом пользователи с самыми
узкими экранами должны будут держать окно броузера распахнутым на весь экран, а
у остальных страница будет занимать лишь часть экрана или часть окна броузера.
Общее
число пикселов по горизонтали и вертикали обычно называют «разрешением»
компьютерного экрана, хотя правильнее называть эту величину размером (ведь
она измеряется в пикселах, а не в пикселах на дюйм). Величина эта может
различаться в разы — от 1600 на 1200 пикселов и выше в самых дорогих
графических рабочих станциях до 640 на 480 у графического адаптера VGA,
самого старого из все еще применяемых в IBM-совместимых
компьютерах. Однако и это значение — 640 пикселов по горизонтали — еще нельзя
принимать за искомый минимум: нужно учесть, что любое окно на экране компьютера
имеет рамку и (почти всегда) вертикальную полосу прокрутки, а веб-страница в
окне броузера окружена определенной величины полями. С учетом всех этих
наслоений ширина страницы не должна превышать 600—610 пикселов, а если
рассчитывать на пользователей со старыми моделями Макинтошей — то и еще
меньше, около 580.
Упомянутые только что поля — это не поля, которые
устанавливает вокруг содержимого страницы дизайнер, а те небольшие просветы
вдоль левой и верхней границ окна, которые оставляет сам броузер. Пользователь
не может ни поместить что-либо в эту мертвую зону, ни повлиять на размеры полей
средствами стандартного HTML. Еще хуже то, что величина этих полей непостоянна — она
зависит от марки и версии броузера и от установленного в данный момент базового
кегля шрифта (стр. 216). Из-за этого возникают трудности с точным совмещением
фонового изображения (стр. 259) и материала переднего плана — ведь броузер
настилает фоновую картинку по всему пространству окна вплоть до рамки, вне
зависимости от того, насколько отодвинуты от этой рамки текст и изображения
переднего плана.
Оговорка относительно «стандартного HTML» не случайна —
очевидно, поля эти были введены именно для того, чтобы размеченные в минималистском,
академическом (стр. 150) стиле тексты можно было читать, не стукаясь взглядом о
вплотную прижатую к тексту рамку окна. Предоставляя со временем все больше
оформительской свободы автору страницы, броузеры не могли обойти своим
вниманием и этот аспект. Так, MSIE поддерживает атрибуты leftmargin и topmargin тега BODY, позволяющие
195
станавливать любую (в том числе нулевую и отрицательную)
величину полей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игнорируют эти «MSIE-only» атрибуты.
Более идеологически правильный, хотя и выходящий за рамки
HTML
подход — использование CSS-свойств (стр. 40) margin-left и margin-top для тега BODY. К сожалению, упоминавшаяся уже незрелость реализаций CSS (стр. 23) не
позволяет воспользоваться даже таким невинным трюком: дело в том, что если MSIE отмеряет поле от
рамки окна, то NC
принимает за отправную точку то «поле по умолчанию», которое имеет место в
отсутствие CSS.
Поэтому, чтобы прижать содержимое страницы вплотную к левой рамке окна, в MSIE достаточно сказать
<BODYstyle="margin-left: 0рх">,
тогда как в NC
вместо 0рх придется подбирать некую отрицательную величину (около -7рх).
Желание обойтись без CSS заставляет некоторых дизайнеров прибегать к еще более
замысловатому трюку. Пользуясь тем, что у тега FRAME есть поддерживаемые обоими броузерами атрибуты marginwidth и marginheight, они заключают всю
страницу в единственный фрейм с тем, чтобы иметь возможность точно
устанавливать величину полей.
Итак, горизонтальная
прокрутка должна быть исключена безусловно. Однако и прокрутка по вертикали
тоже не доставляет пользователям большого удовольствия,иеслиееневозможноизбежатьсовсем, нужно по крайней
мере сделать ееменее обязательной. Это
значит, что основное содержимое страницы должно быть видно сразу после ее
загрузки, т. е. должно находиться впервойжевидимойпорциистраницы(по-английски этот прием называется «abovethefold»,
т. е. «кверху от сгиба» — термин, заимствованный из дизайна газет, которые
стараютсяверстать так,чтобызаголовкисамыхважных статей можно было прочесть, не
разворачивая газету). К основному, всегда всплывающему на самый верх страницы
содержимому относятся не только заголовок и начало основного текста, но и
реклама (эффективность которой в начале страницы намного выше, чем в конце), а
главное—ссылки,как«россыпью»,такиобъединенные в навигационные
панели.Щелчок по ссылке требует от
пользователяменьшейзатратысил,чемперетаскивание движка в полосе прокрутки.
Поэтому объемистые страницы иногда помещают вверху оглавление со ссылками на
свои же, расположенные ниже, разделы, а возле каждого заголовка раздела ставят
ссылку, позволяющую одним щелчком вернуться в самый верх (пример ?).
К
сожалению, иногда стремление к размещению материала «над сгибом» приводит к
резкой неоднородности страницы по вертикали — качественная графика и тщательное
позиционирование вверху сменяются ничем не оправданным
196
дырами
и небрежно выполненной графикой ближе к подножию. Конечно, низ страницы не
может быть так же информационно и графически насыщен, как ее «шапка», но в
любом случае он должен быть сделан не менее аккуратно и без резких перепадов
стиля.
Какова
же высота той части страницы, которая видна в окне броузера? Эта величина
задана менее жестко, чем допустимая ширина, так как высота рабочей части окна
зависит не только от размера экрана, но и от легко изменяемого оформления
панелей управления вверху окна броузера (как вы знаете, вариантов здесь очень
много: кнопки могут быть текстовые или с картинками, располагаться в один ряд с
полем адреса или сверху от него и т.п.). Принято считать, что страница будет
видна целиком любому пользователю, только если ее высота не превышает 350
пикселов.
Получившиеся минимальные габариты видимой части страницы
— 580 на 350 пикселов — определяются разрешением экрана массовых персональных
компьютеров PC и
Макинтош. Однако недавно появилось еще одно устройство для доступа к сети —
гибрид компьютера и телевизора под названием WebTV Коробочка с модемом, процессором и зашитым в нестираемую
память броузером, ценой около 200 долларов, позволяет путешествовать по сети,
читая веб-страницы с экрана своего телевизора и выбирая ссылки при помощи
пульта дистанционного управления (для ввода текста в поля бланков можно
присоединить отдельно продающуюся клавиатуру).
Для дизайнера WebTV прежде всего интересен более жесткими ограничениями на
формат страницы. Размер рабочей части экрана на всех устройствах этого типа
один и тот же — 544 на 376 пикселов, и изменить его пользователь не может. А
хуже всего то, что при более узком, чем у компьютерных броузеров, экране это
устройство не позволяет прокручивать страницу по горизонтали — если что-то
вылезет за правую границу экрана, оно так и останется недоступным. Очевидно,
ограничения WebTV
нет смысла учитывать в дизайне русскоязычных сайтов, так как в России эти
устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже
заметный и постоянно увеличивающийся процент.
Традиционное построение
веб-страницы в высоту с вертикальной прокруткой — не единственная возможность.
Некоторые дизайнеры резонно рассудили, что плоха не горизонтальная прокрутка
сама по себе, а ее сочетание с вертикальной, — и положили свои страницы набок,
тем самым избавившись от вертикальной прокрутки и активно задействовав
горизонтальную. В этих «лежачих», панорамных страницах ослаблены иерархические
связи элементов, а последовательность их восприятия (обычно ассоциирующаяся с
вертикальным расположением материала) задана
197
гораздо
менее жестко. Такие страницы не «читаются» и не «просматриваются», а именно рассматриваются как
нечто цельное, одноуровневое и одномоментное. Так, в примере 3 главный визуал
страницы — фотография—смешенвправоиобрезанкраемокнаименно для того, чтобы у зрителя возникло
непреодолимое желание посмотреть — «а что там, за поворотом?» Страница эта
открывает собой целый «горизонтальный» сайт и рассчитана на пользователя,которыйвпервые сталкивается с таким необычным размещением материала, — поэтому
дополнительная «стимуляция» с помощью частично видимой фотографии здесь вполне
уместна. Результат — из рутинной, почти подсознательной операции промотка окна
становится волнующим открытием.
К сожалению, владельцы WebTV не имеют ни малейшей надежды насладиться этим изыском
дизайна — горизонтальной прокрутки у них нет вообще. Нет ее, кстати, и у
встроенных в броузеры функций печати — при попытке распечатать «горизонтальную»
страницу оба броузера обрежут ее правый край, оставив видимыми около 800
пикселов ширины.
Интереснопроследить,какменяется отношение страницы к
описанным ограничениям формата в зависимости от назначения сайта и стиля
дизайна. Для страниц, оформленных в строгом академическом стиле (сиспользованиемтолькотеговHTML2.0,стр.150), размеры окна вообще
не имеют значения, так как HTML 2.0 просто не позволяет
задавать размеры или расположение чего бы то ни было в пикселах (в нем нет даже
атрибутов heightиwidthдляуказанияразмеровизображений). В отсутствие таблиц и других приемов позиционирования
материала колонка текста верстается враспор от левого поля до правого (и,
естественно, переверстывается при изменении шириныокна).Инымисловами,академическийHTML
легко приспосабливается к любому разрешению экрана — причем без малейших усилий
со стороны автора. Следующаяступеньпослеакадемическогостиля—так называемый «резиновый»
дизайн, при котором для размещения текста и изображений уже используются
таблицы (стр. 234), но ширина этих таблиц задана не в пикселах, а в процентах
от ширины окна. Это позволяет оставлять вокруг текста поля, значительно
облегчающие чтение, верстать текст в несколько колонок и достаточно свободно
размещать графику. Главное же достоинство «резиновой» страницы — то, что она
позволяет столбцам текста свободно
растягиваться
и сжиматься, тем самым и приспосабливаясь к минимальным (и даже меньше
минимальных) размерам экрана, и эффективно используя пространство на экранах
шире среднего. Это свойство «резиновых» страниц особенно ценно для
контент-сайтов .
Есть
у «резинового» дизайна и недостатки, главный из которых — невозможность точной
стыковки графических элементов друг с другом и с переменной ширины колонкой
текста (до некоторой степени это преодолимо масштабированием графики, стр.
258). Поэтому самым распространенным сейчас является жесткий табличный
дизайн, в котором величина каждой ячейки в пикселах либо задана явно, либо
определяется размерами помещенной в эту ячейку графики. Такая страница уже не
может свободно растягиваться и сжиматься, поэтому автор должен сам
позаботиться о вписывании табличного каркаса композиции в габаритный
прямоугольник окна броузера (прежде всего по ширине).
При
сужении окна с жесткой страницей за допустимый минимум появляется
горизонтальная полоса прокрутки. Если же, наоборот, окно шире страницы, то
последняя обычно центруется, за исключением тех случаев, когда материал
переднего плана привязан к неподвижному фоновому изображению (стр. 263), —
тогда страницу приходится прижимать вплотную к левому краю окна. Если же
дизайн ваш настолько требователен, что пустыри полей вокруг островка возделанной
земли способны разрушить все впечатление, можно разместить на сплэш-странице
сайта маркеры, показывающие пользователю желательные габариты окна и мягко, но
настойчиво предлагающие ему, прежде чем двигаться дальше, стянуть поле зрения
своего броузера к прямоугольнику нужных размеров (пример 2).
Наконец,
если для вашего дизайна имеет значение буквально каждый пиксел, есть еще более
эффективный способ управления форматом страницы. Вместо того чтобы озадачивать
размерами окна вашего пользователя, ссылка на сплэш-странице, ведущая на
главную стр