Дмитрий Кирсанов - Веб-дизайн
Вообще говоря, формулировка «при минимальной ширине» неправильна — ведь окно броузера можно сплющить как угодно, так что «минимальная» его ширина близка к нулю. Речь должна идти, наоборот, о максимальной ширине, достижимой на самом маленьком из существующих компьютерных экранов («маленьком», конечно, не в сантиметровом, а в пиксельном измерении). При этом пользователи с самыми узкими экранами должны будут держать окно броузера распахнутым на весь экран, а у остальных страница будет занимать лишь часть экрана или часть окна броузера.
Общее число пикселов по горизонтали и вертикали обычно называют «разрешением» компьютерного экрана, хотя правильнее называть эту величину размером (ведь она измеряется в пикселах, а не в пикселах на дюйм). Величина эта может различаться в разы — от 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) не позволяет воспользоваться даже таким невинным трюком:
дело в том, что если MSIE отмеряет поле от рамки окна, то NC принимает за отправную точку то «поле по умолчанию», которое имеет место в отсутствие CSS. Поэтому, чтобы прижать содержимое страницы вплотную к левой рамке окна, в MSIE достаточно сказать <BODY style=«margin–left: Орх»>, тогда как в NC вместо Орх придется подбирать некую отрицательную величину (около‑7 рх).
Желание обойтись без CSS заставляет некоторых дизайнеров прибегать к еще более замысловатому трюку. Пользуясь тем, что у тега FRAME есть поддерживаемые обоими броузерами атрибуты marginwidth и marginheight, они заключают всю страницу в единственный фрейм с тем, чтобы иметь возможность точно устанавливать величину полей.
Во первых строках. Итак, горизонтальная прокрутка должна быть исключена безусловно. Однако и прокрутка по вертикали тоже не доставляет пользователям большого удовольствия, и если ее невозможно избежать совсем, нужно по крайней мере сделать ее менее обязательной. Это значит, что основное содержимое страницы должно быть видно сразу после ее загрузки, т. е. должно находиться в первой же видимой порции страницы (по–английски этот прием называется «above the fold», т. е. «кверху от сгиба» — термин, заимствованный из дизайна газет, которые стараются верстать так, чтобы заголовки самых важных статей можно было прочесть, не разворачивая газету).
К основному, всегда всплывающему на самый верх страницы содержимому относятся не только заголовок и начало основного текста, но и реклама (эффективность которой в начале страницы намного выше, чем в конце), а главное — ссылки, как «россыпью», так и объединенные в навигационные панели. Щелчок по ссылке требует от пользователя меньшей затраты сил, чем перетаскивание движка в полосе прокрутки. Поэтому объемистые страницы иногда помещают вверху оглавление со ссылками на свои же, расположенные ниже, разделы, а возле каждого заголовка раздела ставят ссылку, позволяющую одним щелчком вернуться в самый верх (пример 7).
К сожалению, иногда стремление к размещению материала «над сгибом» приводит к резкой неоднородности страницы по вертикали — качественная графика и тщательное позиционирование вверху сменяются ничем не оправданными дырами и небрежно выполненной графикой ближе к подножию. Конечно, низ страницы не может быть так же информационно и графически насыщен, как ее «шапка», но в любом случае он должен быть сделан не менее аккуратно и без резких перепадов стиля.
Какова же высота той части страницы, которая видна в окне броузера? Эта величина задана менее жестко, чем допустимая ширина, так как высота рабочей части окна зависит не только от размера экрана, но и от легко изменяемого оформления панелей управления вверху окна броузера (как вы знаете, вариантов здесь очень много: кнопки могут быть текстовые или с картинками, располагаться в один ряд с полем адреса или сверху от него и т. п.). Принято считать, что страница будет видна целиком любому пользователю, только если ее высота не превышает 350 пикселов.
У голубого экрана. Получившиеся минимальные габариты видимой части страницы — 580 на 350 пикселов — определяются разрешением экрана массовых персональных компьютеров PC и Макинтош. Однако недавно появилось еще одно устройство для доступа к сети — гибрид компьютера и телевизора под названием WebTV (www.webtv.net). Коробочка с модемом, процессором и зашитым в нестираемую память броузером, ценой около 200 долларов, позволяет путешествовать по сети, читая веб–страницы с экрана своего телевизора и выбирая ссылки при помощи пульта дистанционного управления (для ввода текста в поля бланков можно присоединить отдельно продающуюся клавиатуру). Для дизайнера WebTV прежде всего интересен более жесткими ограничениями на формат страницы. Размер рабочей части экрана на всех устройствах этого типа один и тот же — 544 на 376 пикселов, и изменить его пользователь не может. А хуже всего то, что при более узком, чем у компьютерных броузеров, экране это устройство не позволяет прокручивать страницу по горизонтали — если что–то вылезет за правую границу экрана, оно так и останется недоступным. Очевидно, ограничения WebTV нет смысла учитывать в дизайне русскоязычных сайтов, так как в России эти устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже заметный и постоянно увеличивающийся процент.
Если тебе дадут линованную бумагу — пиши поперек. Традиционное построение веб–страницы в высоту с вертикальной прокруткой — не единственная возможность. Некоторые дизайнеры резонно рассудили, что плоха не горизонтальная прокрутка сама по себе, а ее сочетание с вертикальной, — и положили свои страницы набок, тем самым избавившись от вертикальной прокрутки и активно задействовав горизонтальную. В этих «лежачих», панорамных страницах ослаблены иерархические связи элементов, а последовательность их восприятия (обычно ассоциирующаяся с вертикальным расположением материала) задана гораздо менее жестко. Такие страницы не «читаются» и не «просматриваются», а именно рассматриваются как нечто цельное, одноуровневое и одномоментное.
Так, в примере 3 главный визуал страницы — фотография — смещен вправо и обрезан краем окна именно для того, чтобы у зрителя возникло непреодолимое желание посмотреть — «а что там, за поворотом?» Страница эта открывает собой целый «горизонтальный» сайт и рассчитана на пользователя, который впервые сталкивается с таким необычным размещением материала, — поэтому дополнительная «стимуляция» с помощью частично видимой фотографии здесь вполне уместна. Результат — из рутинной, почти подсознательной операции промотка окна становится волнующим открытием.
