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

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

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

СТУПЕНЬКИ РИГИДНОСТИ

Интересно проследить, как меняется отношение страницы к описанным ограничениям формата в зависимости от назначения сайта и стиля дизайна.

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

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

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

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

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

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

Заглавия и заголовки

Переходя от общих вопросов устройства сайта и формата веб–страницы к отдельным элементам дизайна, мы должны прежде всего разбить эти элементы на два примерно равных по важности класса: текстовые блоки и графические вставки (этим словосочетанием я попытался перевести английское inline images).

Конечно, не так уж редко на веб–страницах встречаются и более экзотические объекты — поля бланков, Java–апплеты. Однако именно текст и графика остаются и всегда будут оставаться основными носителями информации в Интернете. Все, что нужно знать веб–дизайнеру об оформлении текстовых блоков, собрано в одном из разделов этой главы (стр. 215). Создание веб–графики — тема более обширная, и ей целиком посвящена гл. IV (стр. 243). Здесь же мне хотелось бы отметить, что противопоставление текста и графики, как частное проявление дуализма содержания и представления в дизайне, особенно наглядно проявляется именно в дизайне заголовков.

ЗАГЛАВИЕ

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

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

Не нужно бояться делать заглавия слишком длинными — длинное и подробное, пусть и обрезанное при выводе заглавие лучше, чем короткое и невразумительное. Прочтите свое заглавие и подумайте — достаточно ли оно осмысленно само по себе, вне контекста страницы?

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

ЗАГОЛОВКИ: ЛОГИКА

После стоящего несколько особняком заглавия (title) логично перейти к иерархии заголовков (headings) на самой странице. Вообще говоря, у большинства страниц никакой «иерархии» нет — после основного заголовка вверху страницы редко когда можно встретить заголовки второго и тем более третьего уровня. Отчасти поэтому стандартные в HTML заголовки шести уровней (теги Н 1—Н 6) редко используются за пределами академического стиля. (Верно и обратное: если вам требуется больше двух–трех уровней заголовков, это следует считать аргументом в пользу перехода к академическому стилю.) Однако в первую очередь непопулярность тегов Н* объясняется параметрами их оформления, принятыми по умолчанию в визуальных броузерах, — параметрами, чаще всего неприемлемыми для страниц с минимальными художественными запросами (к примеру, HI оформляется полужирным начертанием повышенного кегля).