Читаем Веб-дизайн полностью

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

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

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

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

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

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

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

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

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

Перейти на страницу:

Похожие книги

1001 совет по обустройству компьютера
1001 совет по обустройству компьютера

В книге собраны и обобщены советы по решению различных проблем, которые рано или поздно возникают при эксплуатации как экономичных нетбуков, так и современных настольных моделей. Все приведенные рецепты опробованы на практике и разбиты по темам: аппаратные средства персональных компьютеров, компьютерные сети и подключение к Интернету, установка, настройка и ремонт ОС Windows, работа в Интернете, защита от вирусов. Рассмотрены не только готовые решения внезапно возникающих проблем, но и ответы на многие вопросы, которые возникают еще до покупки компьютера. Приведен необходимый минимум технических сведений, позволяющий принять осознанное решение.Компакт-диск прилагается только к печатному изданию книги.

Юрий Всеволодович Ревич

Программирование, программы, базы данных / Интернет / Компьютерное «железо» / ОС и Сети / Программное обеспечение / Книги по IT
Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов
Добавьте в корзину. Ключевые принципы повышения конверсии веб-сайтов

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

Брайан Айзенберг , Джеффри Айзенберг

Маркетинг, PR / Интернет / Маркетинг, PR, реклама / Финансы и бизнес / Книги по IT