Законы верстки сайта

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

ОСНОВЫ МАКЕТИРОВАНИЯ

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

РЕЗИНОВАЯ ЗИНА

Первая проблема, с которой сталкивается дизайнер, - выбор размера сайта, а точнее его ширины. Любая страница должна прокручиваться только по вертикали. Дизайнеры, которые заставляют пользователя передвигать и горизонтальный бегунок, могут сразу распрощаться с 90% возможной посещаемости. Сайты бывают "резиновые" и с фиксированной шириной. Резиновые браузера и не выходят за его пределы, хорошо выглядят при любом разрешении, но имеют ограничения - нельзя выравнивать картинки по краю и в шапку нельзя вставить жесткую картинку, потому что она не сможет растягиваться. С такой шириной экрана все выглядит нормально. А теперь посмотрим, что произойдет, если у пользователя установлено большее разрешение и его экран более широкий. Уродство, не правда ли? То же самое произойдет, если картинки будут выровнены по левому краю, поэтому текст не должен обтекать изображения, а каждой картинке - своя строка. Я уже намекнул, что нельзя использовать в шапке жесткую картинку. Если в качестве логотипа установить рисунок шириной 1000 пикселей, то меньше этой величины сайт не сможет уменьшиться. А при большей ширине окна картинку будет сложно растянуть без использования сценариев и без потери качества. Чтобы решить эту проблему, в заголовке можно использовать кусок однотонного цвета или таблицу с картинкой в качестве фона, которая будет размножаться при растягивании.

МЫ ХОТИМ ПОЖЕСТЧЕ !

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

BIG BOSS

Главная страница должна заинтересовать пользователя в том, чтобы остаться на сайте и продолжить знакомство с ним. Основа сайта (шапка и подвал) обязательно должны быть выполнены в том же стиле, что и весь остальной сайт. Разница должна быть только в содержимом. Здесь можно предложить какие-нибудь горячие новости, прямые ссылки на новинки сайта, горячие предложения и т.д. Возьмем какую-нибудь страницу и рассмотрим ее сильные и слабые стороны. Я долго выбирал претендента и остановился на сайте www.ulead.com. Это софтверная фирма, которая продает софт для дизайнеров. Шапку и подвал трогать не будем, потому что они пока нас не волнуют, а вот центральную часть сейчас обсудим. Сразу под шапкой располагается широкий Flash-ролик, который с помощью красивой анимации показывает какую-то демку. В то время, когда я писал эту статью, ролик рекламировал новую версию Ulead Photoimpact - отличное решение для того, чтобы привлечь внимание к новости и познакомить всех желающих с новыми возможностями программы. Анимация всегда бросается в глаза, и при ее наличии можно быть уверенным почти на 100%, что юзер увидит то, что мы хотим ему показать (смотреть и видеть - разные вещи :) - прим.). Главное, чтобы она была информативной (можно было узнать как можно больше), как, например, анимация сайта Ulead: графика может занять слишком много пространства. На главной странице только одна анимация - это тоже правильно. Некоторые дизайнеры пихают Flash-ролики куда угодно и сколько угодно. Это рассеивает внимание пользователя и мешает сконцентрироваться на главной (информационной) демке. Чуть ниже ролика можно увидеть ссылки на разделы об основных продуктах компании, последние новости и ссылку на полную версию ленты новостей. Это тоже правильное решение. Незачем тулить полную версию на главную страницу, если сайт не является чисто новостным. Справа от ссылки на предложения компании для различных клиентов находится список скачиваемых чаще всего программ (Top Downloads), подписка на новости, быстрые ссылки на основные разделы и баннеры. Все решения по отдельности великолепны, но расположено все по-идиотски. В чем основная ошибка? Цвета картинок и текстовых ссылок не сочетаются друг с другом. Главная страница вообще пестрит цветами, как новогодняя елка. Более страшной ошибкой является сам макет правой половины сайта: текстовые ссылки идут вперемешку с баннерами. Я понимаю, что дизайнер хотел выделить определенные ссылки, но забыл или не знал, что этого делать нельзя. Кто решил, что ссылка на подписку новостей важнее быстрых ссылок и должна быть выполнена в виде картинки? Баннеры отвлекают внимание от текстовых ссылок и заставляют его метаться между текстом и графикой. В этом случае лучше стремиться к единообразию и не впихивать при этом графику везде, где только можно, только потому, что умеешь рисовать. Если что-то необходимо выделить, то лучше выбрать особый цвет, размер или стиль текста, но не перемешивать несовместимые картинки и тексты.

ПОСЛАТЬ В ЛЮБОЕ МЕСТО

Самым сложным занятием является макетирование главной страницы, которая должна заинтересовать пользователя и при этом не сильно выделяться на общем фоне. Помимо красивой графики и "заманивающей" анимации, пользователь должен найти на главной странице все, что ему нужно - ссылки на все разделы. Тебе приятно, когда заходишь на сайт, а там нужно щелкать по всем ссылкам в поисках одной-единственной? Нужная информация должна быть найдена посетителем как можно быстрее, и если удастся сэкономить его трафик, время и нервы, то такой человек еще не раз вернется и друзей с собой приведет. Для реализации всего вышесказанного на сайте, а особенно на главной странице должно быть хорошее меню. Посмотри на снимок главной страницы хостера Valuehost. Информации минимум, а ссылок еще меньше. Вот сижу я и думаю, где та ссылка, с помощью которой можно было бы узнать о тарифных планах и расценках? Где ссылка для входа в свою приватную зону управления сайтом? А ведь на сайте работает форум и много других сервисов, которые сразу увидеть нереально. Только если зайти в какой-нибудь раздел, перед тобой откроется страница с более полным набором пунктов меню. Но это мы еще обсудим.

ПО ШАПКЕ

Теперь посмотрим на шапку и то, что должно находится в ней: любая графика, которая делает сайт уникальным и узнаваемым, а также логотип сайта, отображающий его назначение, да еще визитная карточка, она же - средство вернуться на главную страницу. Да, именно так. В любом месте сайта щелчок по логотипу должен приводить к возврату на стартовую страницу. Кроме логотипа, в шапке может быть любая другая графика и даже какие-то основные команды, но их должно быть немного, например здесь допустимы элементы, для поиска по сайту. Не надо перегружать шапку и делать ее слишком высокой. В интернете полно сайтов, в которых шапка по высоте больше, чем допускается, на 400 пикселей. Яркий пример на том сайте, где сразу под шапкой находится рекламное объявление сумасшедшей высоты и минимальной информативности. И вот для размещения действительно полезных данных остается меньше половины экрана, а остальное прячется за пределами окна. Пользователи не любят скроллинг, поэтому основная информация должна быть видна сразу и без прокрутки.

У МЕНЯ В САЛАТЕ МУХИ !

Основа usability и правильного макетирования любого сайта - это меню. Если оно неудобно, то придется потратить слишком много времени на поиск необходимой информации или вообще отказаться от надежд найти ее. Где располагать меню? Чуть ниже шапки по горизонтали или по вертикали, но вдоль левого или правого края. Что выбрать? Зависит это от дизайна и количества основных разделов. Если основных разделов немного, то можно расположить меню горизонтально, вдоль верхней части. Оно может быть выполнено в виде простых ссылок, если нет подразделов, или в виде выпадающего меню, как на сайтах www.cydsoft.com, www.ulead.com, www.atlantis-pak.ru и т.д. Выпадающее меню рекомендуется делать для сайтов, имеющих много подразделов, в поисках которых неудобно прыгать по разделам. Сейчас многие компании, которые не зарабатывают на баннерах и заботятся о благе посетителей сайта, переходят на использование таких меню, потому что они занимают мало места и при этом позволяют сделать меню сложной структуры - универсально, удобно, без "пересадок" можно добраться в самые отдаленные уголки сайта. Если разделов много и разместить их названия по горизонтали не удается, то придется размещать все по вертикали вдоль одной из сторон страницы (зависит от дизайна), но все же подумай о создании горизонтального меню с выпадающими списками. Только не надо создавать два меню сразу (горизонтальное и вертикальное): убьешь не только дизайн, но и usability, да и пользователь не узнает, в каком меню искать нужный раздел. Желательно, чтобы меню было одно и только одно. Если ты выбрал в качестве основного горизонтальное расположение ссылок, то вдоль края расположи нечто вроде "горячих ссылок" на тему выбранной страницы, но эти же ссылки должны быть и в основном меню. Горизонтальное меню должно умещаться в одну строку, особенно если есть выпадающий список. Вот, например, сайт фирмы "Атлантис-Пак": основное меню встроено в шапку (не будем критиковать это решение, хотя оно откровенно глупое), но хуже всего то, что оно состоит из двух строк. Из пункта "О компании" в верхней строке вываливается список подменю, который перекрывает нижнюю строку. Чтобы перейти на нижнее меню, нужно сначала убрать мышь куда-нибудь в сторону, чтобы скрылся выпадающий список, и только потом возвращаться к нужному пункту меню. У "Атлантис-пак" тоже есть небольшое меню, но под пунктом "Карта действий" много отсутствующего в основном меню, зачем-то дублируется ссылка "На главную страницу". Это меню я заметил не сразу, поэтому долго не мог найти нужной мне информации - строгий выговор дизайнеру. А зачем делать две ссылки на главную страницу вокруг банера, вообще непонятно. Видимо, разработчик не знал, чем заполнить оставшееся пространство.

ПОДВАЛ

Многие считают, что в подвале должен быть копирайт сайта и информация об авторстве на сайт или дизайн. Это верно, но не совсем, потому что, как говорят математики, данная информация необходима, но недостаточна. Допустим, каждая страница содержит очень много информации, а для того, чтобы увидеть самую нижнюю часть, нужно нехило поработать скроллингом. Вот пользователь доскролил до низу и решил перейти в другой раздел. Что делать? Скролить обратно на самый верх сайта, чтобы увидеть меню. Напряжно? По крайней мере, неудобно. В подвале сайта должна быть копия основных ссылок сайта. Некоторые дизайнеры считают, что меню должно быть только в нижней части сайта (сайт компании Valuehost). Видимо, дизайнер решил, что пользователи, просматривая документ, все равно доходят до низа, и основное меню расположил там. А что если тот загрузил страницу и сразу увидел, что она ему не нужна? Облом :(, потому что придется все равно скролить в самый низ. Главное меню должно быть только вверху, а снизу желательно разместить копии основных ссылок. Если удастся впихнуть полное меню и сверху и снизу (что не так-то и легко), то пользователь только спасибо скажет. Конечно, копия меню - мелочь, но очень приятная, а каждая мелочь - это дополнительный юзер.

БАРАХОЛКА

Теперь рассмотрим старые технологии, которые еще годятся или уже должны быть только в бабушкином сундуке. Из последнего я настоятельно не рекомендую доставать фреймы. На первый взгляд это удобно, когда сайт развивается динамично и в нем часто появляются новые ссылки, а хостер не поддерживает сценарии PHP, Perl и т.д. В этом случае меню помещают в один файл фрейма, при изменении которого изменяется весь сайт. Удобства на этом заканчиваются: у пользователя появляется две полосы скроллинга. Желающим упростить задачу содержания меню можно посоветовать использовать JavaScript в виде отдельных файлов, которые легко подключить к любому HTML-документу. Второй недостаток фреймов - это то, что они занимают слишком много пространства. При прокрутке одного фрейма второй не движется, поэтому теряется полезное пространство, в котором можно было бы расположить что-то более полезное.

СТИЛИ

Многие дизайнеры в один голос кричат, что пора забыть про табличное форматирование и использовать стили. Стили - мощная вещь, но они поддерживаются далеко не всеми браузерами (более 80% браузеров по статистике - IE 6, еще около 10% - IE 5, так может, уже пора забыть про Netsсape пятилетней давности? - прим.).

LOG OUT

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