Веб-дизайн - Дмитрий Кирсанов

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

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

ПЕРВАЯ СТРАНИЦА

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

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

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

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

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

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

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

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

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

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

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

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

The frame of reference

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