ErlangРаботыРевюСтатьиКнигаЗаказ
 

Как изобрести велосипед

Кирилл Панфилов

1. Ширина сайта

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

Первый случай остался как наследие времён маленьких мониторов (разрешением 640 на 480 и 800 на 600 пикселов), хотя многие делают такие сайты и до сих пор из соображений совместимости с теми же старыми мониторами. В этом случае достаточно учесть, что у полосы прокрутки и границ браузера есть своя ширина, и сделать сайт шириной 750 пикселов или около того (про разрешение 640 на 480 можно забыть). Только не все почему-то понимают, что красивее сайт не станет, если колонка 500-пиксельной ширины будет ютиться слева в верхнем углу на мониторе 1200-пиксельной ширины. С другой стороны, это всегда можно выдать за дизайнерский изыск. Компромиссное решение найти легко: либо располагать колонку с содержимым по центру (на маленьких экранах она просто займёт почти весь экран), либо сбоку, но тогда тщательно сопоставить её с рисунком фона. Фон в любом случае нужно продумать досконально. Особо же узкая колонка будет дизайнерским изыском без иронии.

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

Флэш-ролики являются образцом векторной графики на веб-страницах. Однако их чаще всего помещают как графические вставки фиксированной ширины, например, по центру страницы. Намного реже используются «тянущиеся» флэш-вставки, меняющие размер вслед за размером окна. Тянуться может не весь ролик, а только его часть, например, фон — растягиваться на ширину окна браузера (или на заданное число процентов), а объекты на этом фоне остаются на своём месте и не меняют размер. Приёмы подобной работы описаны, например, в статье флэш-технолога Nox Noctis «Создание резиновых (эластичных) флэш-роликов».

С процентными величинами всё просто. Достаточно сделать таблицу шириной 100%, в ширины её ячеек тоже задать в процентах. А для того, чтобы элементы, располагающиеся в этих ячейках, при больших разрешениях экрана не смотрелись разбросанными по экрану, следует хорошо продумать выравнивание элементов и объединяющие компоненты страницы (линии, цвет, фоновые элементы и прочее). Напротив, следует следить, чтобы совокупная ширина элементов одного ряда не превышала, например, 750 пикселов, чтобы на низких разрешениях не возникало горизонтальной прокрутки. По такому принципу, например, построена вёрстка десятой версии моего сайта.

Применение элементов, которые будут видны только части пользователей, возможно, и не совсем вежливо по отношению к владельцам небольших мониторов, но, тем не менее, хорошо решает одну из проблем тянущейся вёрстки: возникновение пустот. В этом случае используется связка «элемент DIV + процентное обрезание его содержимого средствами CSS» либо просто фоновое изображение блочных элементов, которое, естественно, обрезается при низком разрешении экрана, если оно достаточно большое.

Например, страницы сайта Green House при разрешении 1024 на 768 выглядят так:

Green House

При меньших разрешениях правая часть (малоинформативная, но выдержанная в стиле страницы) просто обрезается без возникновения горизонтальной прокрутки. Обрезать, естественно, можно не только правую часть, но и любую другую. Главное, чтобы не обрезался текст.

Не очень

Я иногда применяю, например, такой приём. При тянущейся вёрстке я пишу таблицу без указания её ширины. При этом совокупная (и явно указанная в пикселах) ширина ячеек одного ряда может превышать 2000 px. Но там, где ячейка по ширине заполнена не полностью, при меньших разрешениях она просто сжимается, не создавая горизонтальной прокрутки.

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

2. Навигационные меню

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

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

А суть та, что таким образом оформлены меню на подавляющем большинстве сайтов. С одной стороны, такой факт — реверанс в сторону Якоба Нильсена, Стивена Круга, Влада Головача и вообще юзабилити: на таких сайтах легко ориентироваться, потому что всё до боли знакомо, и искать что-то даже в длинном меню достаточно просто. С другой стороны, однообразие — оно и есть однообразие. Хочется нового, свежего, чтобы запоминалось и чтобы хотелось приходить ещё и показывать другим.

Сложно придумать что-то новое в навигации только на сайтах — поисковых индексах, или каталогах, где ссылки-рубрикаторы расположены в несколько колонок по всей странице или ближе к её центру. В остальных же случаях можно найти компромисс между удобством и оригинальностью. Посмотрим на примеры.

Пример 1. Меню может быть расположено колонкой по центру, как на упомянутом выше сайте Green House. Это нисколько не затрудняет навигацию, а напротив — акцентирует её.

Пример 2. Меню может быть нестандартной формы. При этом активные пункты меню также можно нестандартно выделять. Образец с сайта Bosco Sport: меню на этом сайте трудно не найти.

Bosco

А так меню с развёрнутым подменю выглядит в другом разделе сайта:

Bosco про футболку

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

Пример 3. Сайт, не являясь каталогом, может заимствовать его принципы. Например, на главной странице сайта «Юкко» основные возможности работы с сайтом и его разделы перечислены не в виде колонки или строки, а в виде наглядной «карты сайта»:

Юкко

Пример 4. Кто сказал, что меню не может располагаться внизу страницы? Сайт, посвящённый куклам Ольги Андриановой:

Куклы Ольги Андриановой

Примеры 5 и 6. Анна Драпеза, белорусский веб-дизайнер и создатель сайта klinαmen, считает, что меню также может быть расположено справа (и не такой уж строгой колонкой):

klinαmen

или занимать основную часть страницы — как на vvv.voprosov.net:

gis

Резюме. В отличие от решений с тянущейся или фиксированной вёрсткой вопрос о решении вида меню ещё открыт, и придумывать что-то новое здесь можно до бесконечности. Главное, чтобы было удобно.

3. Браузеры

Тут я даже рассуждать долго не буду. Около 10% процентов (может, больше, а может, меньше) посетителей будут заходить на созданный вами сайт не из Internet Explorer, а из Mozilla Firefox или Opera, так что, если вы считаете себя хорошим веб-дизайнером, потрудитесь протестировать сайт хотя бы в последних версиях этих трёх браузеров, чтобы не оказаться в неловком положении.