Работа над чужими ошибками

Фленов Михаил

Спецвыпуск: Хакер, номер #050, стр. 050-070-1

(www.vr-online.ru)

Сказ о том, как правильно макет сайта строить

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

Основы макетирования

Существует множество вариантов расположения объектов на страницах сайта, и сейчас я постараюсь показать основные из них со всеми их преимуществами и недостатками. Что понимают под объектами сайта? Логотип, главное меню навигации по разделам сайта и сама текстовая информация разных разделов.

Для большего удобства понимания структуры разделим макет страницы на четыре части: шапка, панель навигации, содержимое и подвал. Рассмотрим все по частям и посмотрим, где должна находится и что содержать каждая часть.

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

Резиновая Зина

Первая проблема, с которой сталкивается дизайнер, - выбор размера сайта, а точнее его ширины. Любая страница должна прокручиваться только по вертикали. Дизайнеры, которые заставляют пользователя передвигать и горизонтальный бегунок, могут сразу распрощаться с 90% возможной посещаемости.

Сайты бывают "резиновые" и с фиксированной шириной. Резиновые макеты подстраиваются под ширину окна браузера и не выходят за его пределы, хорошо выглядят при любом разрешении, но имеют ограничения - нельзя выравнивать картинки по краю и в шапку нельзя вставить жесткую картинку, потому что она не сможет растягиваться. С такой шириной экрана все выглядит нормально (рис. 1). А теперь посмотрим, что произойдет, если у пользователя установлено большее разрешение и его экран более широкий (см. рис. 2). Уродство, не правда ли?

То же самое произойдет, если картинки будут выровнены по левому краю, поэтому текст не должен обтекать изображения, а каждой картинке - своя строка.

Я уже намекнул, что нельзя использовать в шапке жесткую картинку. Если в качестве логотипа установить рисунок шириной 1000 пикселей, то меньше этой величины сайт не сможет уменьшиться. А при большей ширине окна картинку будет сложно растянуть без использования сценариев и без потери качества. Чтобы решить эту проблему, в заголовке можно использовать кусок однотонного цвета или таблицу с картинкой в качестве фона, которая будет размножаться при растягивании.

Мы хотим пожестче!

В случае использования жестко фиксированной ширины экрана возникает другая проблема - какую ширину выбрать? Минимальное разрешение экрана - 640х480, но таких аквариумов с каждым днем становится все меньше, сейчас это мизерный процент от общего населения интернта и им можно пожертвовать. А если учесть, что для Windows XP минимумом является 800х600, то можно сказать, что 800 - сегодняшний стандарт. Еще не все обзавелись жидкими кристаллами или 17- дюймовыми трубами, чтобы комфортно работать более чем на 1024х768, но 800 пикселей в ширину есть почти у всех.