Страница последний раз редактировалась 11.03.2012

Структура и дизайн страницы

Структура страницы

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

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

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

Попробую перечислить те элементы структуры страницы, для которых требуется заранее спланировать выделение места. Это

  • "Шапка" страницы (или "шапка" сайта") - блок (часто графический), повторяющийся на каждой странице. Включает (или может включать) в себя:
    • логотип;
    • рекламный баннер;
    • форму поиска (иногда ее делают пунктом меню).
  • Главное меню сайта (подробно рассмотрено на предыдущей странице)
  • Навигационный блок (тоже обсуждался на предыдущей странице)
  • Рекламные блоки (о том, как их лучше разместить мы порассуждаем ниже на этой странице).
  • Текст (основное содержание страницы)
  • Подвал (обычно тут размещаются графические части счетчиков, иконки, копирайт и так далее).

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

"Резиновый" или фиксированный

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

"Резиновым" веб-дизайн называется тогда, когда страница раскрывается на весь экран по ширине независимо от установленного разрешения монитора. То есть, например, и при разрешении 800*600 и при разрешении 1600*1200 веб-страница будет занимать всю ширину экрана. "Фиксированный" веб-дизайн - когда ширина информативной части страницы устанавливается жестко в пикселах и не зависит от разрешения монитора. Обычно при разработке фиксированного веб-дизайна ориентируются на самое распространенное на данный момент разрешение монитора. Но этот параметр постоянно меняется (в сторону увеличения). Еще не очень давно самым распространенным разрешением на мониторах пользователей Интернета было разрешение 800 на 600 пикселей. Но уже сейчас подавляющая часть компьютеров снабжена экранами с разрешением как минимум 1024х768 пикселей, а то и больше. В результате при просмотре любого сайта с фиксированным дизайном рано или поздно в боковых частях экрана будут оставаться пустые колонки (в лучшем случае заполняемые каким-то фоновым изображением).

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

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

Как я понимаю, единого мнения по этому вопросу у веб-мастеров нет. Раньше модным было использовать "фиксированный" веб-дизайн. И это не удивительно. Только такое построение веб-страницы дает дизайнеру возможность разместить материал так, как он считает нужным. И то, конечно, далеко не со 100%-ной уверенностью. В различных браузерах веб-сайт все равно выглядит по-разному. Сейчас же мода качнулась в сторону "резинового" веб-дизайна. И это тоже понятно. Слишком дорого место на веб-странице, чтобы оставлять его пустым, ничем не заполняя.

Но следует сразу отметить некоторые особенности и недостатки присущие "резиновому" дизайну.

  • Хотя веб-страница и подстраивается под ширину окна браузера, при достижении некоторой величины читать текст становится неудобно — строки слишком длинные и глаза устают по ним бегать. Впрочем, браузер можно свернуть в окно, подобрав его комфортный размер.
  • Верстать "резиновый" макет сложнее, чем аналогичный, но фиксированной ширины. Это связано с тем, что приходится учитывать множество дополнительных факторов и знать некоторые приемы верстки. К тому же, популярные браузеры неоднозначно трактуют некоторые параметры и в них "резиновый" макет может отображаться по-разному. Говоря проще, знать о правилах верстки надо больше.
  • Любой макет имеет некоторую минимальную ширину, при достижении которой веб-страница "рассыпается" или появляется горизонтальная полоса прокрутки. Например, если в документ вставлен рисунок шириной 600 пикселов, то при уменьшении окна до этой величины браузер начнет отображать полосу прокрутки.
  • В дизайне страниц часто используются изображения, которые собираются из отдельных картинок, которые по горизонтали должны собираться без швов встык. В случае "резинового" дизайна изменить без потери качества ширину рисунков не получается, так что приходится "подкладывать" под них фон. Чаще всего это не просто сделать.

Как правило, вопрос о том, какой веб-дизайн использовать - "резиновый" или "фиксированный" - решается достаточно просто. Анализируются объем информации, который предполагается размещать на каждой странице, требования к внешнему виду этой информации. Если информации много и принципиально важным является именно сама информация, а не вид ее подачи - выбирается "резиновый" веб-дизайн страницы. Как правило, такой вид веб-дизайна практикуется на информационных порталах, новостных и подобных им веб-сайтах. Для таких сайтов важно разместить на экране как можно больше информации, а эстетика - дело второе. Если же презентационная нагрузка на веб-сайт достаточно высока, а информации мало, или где очень важно, чтобы эта информация располагалась именно так, как задумал веб-дизайнер - предпочтение отдается "фиксированному" веб-дизайну страницы. Чаще всего на основе "фиксированного" веб-дизайна строятся сайты-каталоги и корпоративные сайты. И действительно, представьте себе, что небольшой текст и иллюстрация "размазаны" по всему экрану. Зрелище может быть очень впечатляющим - и совсем не в пользу данного сайта. С другой стороны, большой текст, вытянутый узкой вертикальной лентой, раздражает посетителя, который не может понять, почему этот текст не сделали раскрывающимся на весь экран.

Если выбран вариант "фиксированного" веб-дизайна, возникает следующий вопрос - информативная часть сайта должна быть выровнена по центру экрана или прижата к его левому краю?

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

Надо сказать, что представления о том, что такое хороший веб-сайт, постоянно изменяются. Проводятся новые исследования поведения посетителей веб-сайта, анализируются их предпочтения, привычки. Целые лаборатории крупных компаний работают в этой области. Естественно, результаты этих исследований немедленно используются профессиональными веб-студиями при разработках сайтов для своих клиентов.

Да и сами привычки Интернет-пользователей меняются. Люди все чаще работают в Интернете - эта среда становится для них более дружелюбной, комфортной, удобной. И, естественно, информационно насыщенной - спрос на информацию рождает предложение этой информации. Формируются новые стандарты оформления веб-сайтов и размещения на них информации. Появляются целые научно-практические направления - например, "Информационная архитектура сайта". Поэтому то, что сегодня кажется правильным, неизбежно потребует переделок в будущем. Но для Интернета, как наиболее динамично развивающейся среды, это неизбежный процесс.

В общем, решение о том, какой вид дизайна (или верстки) выбрать - резиновый или фиксированный, принимается на одном из первых этапов работы над сайтом.

Статьи

Места для рекламы

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

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

Рекламные вставки второго типа ориентированы на поисковые системы. Для таких вставок главное не привлечение внимания человека, а само наличие ссылки, указывающей на рекламируемый сайт. Дело в том, что различные показатели популярности сайта типа тИЦ и PR рассчитываются на основе подсчета количества внешних ссылок на сайт (с учетом некоторых весов, назначаемых каждой ссылке). Поэтому веб-мастера стараются заполучить как можно больше внешних ссылок, учитываемых поисковыми роботами. Рекламные вставки этого типа обычно представляют собой простые текстовые ссылки.

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

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

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

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

В шапке страницы, справа от логотипа размещаем один рекламный баннер формата 468х80, либо такого же размера текстовый блок, либо несколько блоков меньшего формата (но чтобы не развалить шапку). Баннер может быть создан с помощью флеш-анимации (такие вставки отображаются даже если в браузере отключить вывод картинок), либо анимированным gif-ом. Шапка отображается обычно до вывода основного содержимого страницы, так что пользователь эту рекламу увидит обязательно.

В боковой колонке можно разместить либо баннеры меньшего формата (100х100, 120х80) либо даже "башню". Ну и текстовые ссылки.

Поскольку рекламные вставки первого типа рассчитаны на людей, содержащиеся в них ссылки можно заключить в теги <noindex> и снабдить аттрибутом "nofollow". Делается это для того, чтобы число внешних ссылок с данной страницы не превышало порога, после которого страница теряет вес для поисковых систем (смотри раздел об индексации сайта). Со ссылками второго типа делать это нельзя, иначе рекламодатели откажутся от их размещения на вашем сайте.

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

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

Дизайн страниц

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

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

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

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

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

Можно обратиться к фрилансерам, например, пойти на сайт freelance.ru. Это дешевле, хотя и не бесплатно, но и качество вам не гарантируется. А, впрочем, на вкус и цвет товарища нет, вы можете получить вполне устраивающее вас решение, особенно, если предварительно просмотрите портфолио дизайнеров и выберете того, чьи работы покажутся вам наилучшими.

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100

Загляните на досуге