В этой статье мы рассмотрим общие принципы проектирования удобного Web-сайта. То есть, попробуем разобраться, как организовать Web-страницу так, чтобы она была максимально удобной для посетителя.
1. Как правильно организовать общий шаблон страницы
Прежде чем приступить к работе нужно избрать один из способов верстки (резиновый дизайн, дизайн с фиксированной шириной). Рассмотрим немного детальнее эту два возможности.
Т. н. "резиновые" сайты не имеют постоянной ширины. Этот вид верстки является наиболее популярным. Преимуществом таких сайтов является 100%-е использование рабочей области браузера. К недостатку резиновой верстки относят то, что строки (на мониторах с большим разрешением экрана или большой диагональю) слишком длинные и глаза устают по ним бегать. С такой же проблемой сталкиваются редакторы газет и во избежание разбивают всю строку на колонку. С Web-сайтами ситуация несколько более проста. Ведь, ширину браузера при необходимости можно уменьшить и тем самым облегчить процесс чтения. Но захотят ли все пользователи это делать? Поэтому пытайтесь продумать такого рода ситуации.
Сайты с фиксированной шириной. Подходит ли любая ширина? Нет. Объясню почему. Большинство Web-программистов считают, что оптимальной должна быть ширина приблизительно в диапазоне 760-780 пикселов. Это связано с тем, что такая ширина дает возможность избежать появления горизонтальной полосы прокрутки (правило плохого тона) даже для мониторов с разрешением 800x600. Недостаток сайта с фиксированной шириной макета, как Вы уже наверное догадались, – недостаточно эффективное использование свободной площади.
С этим разобрались. Двигаемся дальше.
Перед созданием сайта Вы должны также продумать:
- что будет находиться на сайте;
- каким будет стиль дизайна;
- как разные блоки информации будут связаны между собой.
Большое внимание следуют уделить наполнению главной страницы (home page), потому что именно на ней оказывается посетитель, введя в браузере адрес Вашего Web-ресурса. Это не значит, что ее дизайн должен как-то отличаться от дизайна остальной страницы. Отличие заключается в информации, которую содержит главная страница.
На этой странице рекомендуется разместить:
- сжатую информацию о сайте;
- сжатое содержание (ссылка на главные разделы ресурса);
- если сайт изменяется достаточно часто, то также там должен быть список обновленной страницы (хотя при возможности под этот список лучше всего выделить отдельное место на сайте для того, чтобы с любого места сайта к нему (списку) был доступ).
2. Легкая навигация на сайте – еще один шаг к успеху
В процессе проектирования структуры сайта важным является выбор удобной навигации по Web-ресурсу.
Классическим вариантом для размещения меню и соответственно знакомым каждому посетителю есть верхняя часть рабочей области браузера или же верхняя левая, реже – верхняя правая часть. Расположение навигации имеет определенные преимущества с точки зрения удобства, потому что курсор мыши чаще находится именно в правой части окна браузера.
Web-ресурсы, содержащие большие объемы данных, для лучшей навигации по сайте часто комбинируют эти варианты.
Если при проектировании сайта Вы ожидаете, что страница будет содержать много информации, то лучше всего в таком случае сделать дополнительное нижнее меню. Чаще всего нижнее меню дублирует верхнее или же является сокращенным вариантом верхнего. Такое меню позволяет, находясь внизу страницы, быстро перейти на другой раздел. Здесь же, внизу, можно разместить ссылку "Наверх" ("Return To Top"), какое бы переводило посетителя к верхнему главному меню. Эту ссылку можно реализовать, как с помощью HTML, так и с помощью JavaScript.
Конечно, если Ваш сайт не предусматривает большого объема контента, то и нижнее меню и ссылка "Наверх" будут лишними.
Если навигация по сайту – запутанная, то ситуацию поможет улучшить верхнее меню, которое выпадает. Чаще всего такое меню визуально напоминает стандартное верхнее меню большинства программ ОС Windows. При сложной навигации часто неподалеку от главного меню размещают цепочку из гиперссылки, которая позволяет сориентироваться о месте пребывания и быстро вернуться в ту точку, в которой Вы уже были. Эта цепочка может выглядеть где-то так:
Программирование / Web-програмирование / PHP / Работа с файлами и каталогами
Где каждый подпункт цепочки – это ссылка на отдельную страницу.
Если Web-ресурс является небольшим, то есть имеет всего несколько разделов, то достаточно как-то выделить текущий раздел, для того, чтобы дать знать посетителю, где он находится. Например, ссылку можно выделить другим цветом.
Но навигация этим не ограничивается. Кроме того, Вы должны обеспечить посетителей возможностью с любой страницы сайта перейти на домашнюю (главную) страницу, а также нелишней была бы ссылка на карту Вашего сайта (страница, которая содержит список всей доступной пользователям страницы сайта). Чаще всего эта два ссылки делают в виде двух рисунков-иконы в верхней части рабочей области браузера или же добавляют к главному меню как подпункты.
Идеальной для Вашего сайта будет ситуация, когда к любому месту на сайте посетитель сможет попасть максимум за три клики мыши (при условии, если сайт не слишком большой).
3. Советы по оформлению текста на сайте
Поскольку текстовое наполнение для большинства сайтов играет важную роль, то оформлению текста следуют уделять надлежащее внимание. Поэтому наведу некоторые советы.
Не забывайте, цвет текста не должен быть близким с цветом фона. Он должен контрастировать с фоном страницу. Чем проще читать ваше сообщение, тем большая вероятность, что его прочитают до конца. Классическим считается вариант: черный текст, белый задний фон.
Не забывайте разделять тексты на абзацы. При этом целесообразнее было бы делать небольшое отступление между соседними абзацами. Так называемое "Правило пустого пространства". Именно на этих участках глаза читателя отдыхают.
Ничего так не украшает текст, как грамотность его автора. Я имею в виду не только по теме материала, но и грамотности его языка (комментарий автора: написал эту фразу и стали страшно, а я грамотно пишу?). Немногим приятно читать текст в котором что не слово, то ошибка. После прочтения первого абзаца такого творения отпадает желание читать дальше. Поэтому, тщательным образом проверяйте текст на наличие грамматической ошибки. Текст должен содержать более-менее законченную мысль и каким-то образом совмещаться со следующим абзацем.
Размер шрифта не должен быть слишком малым. Особенно, если Вы зафиксируете его и посетители не смогут изменять размер с помощью браузера. Хотя, ради справедливости, следует заметить, что такие браузеры, как Firefox (так, например, увеличить размер шрифта можно с помощью комбинации +<+>) и Opera, даже в этом случае позволяют подобрать нужный размер.
Не забывайте о заглавиях, об их выделении на фоне общего текста. Как показывает статистика пользователи обращают внимание прежде всего на заглавия и уже в off-line режиме читают сам текст. Поэтому не будет лишним, если заглавием Вам удадутся заинтересовать потенциального читателя.
Однообразный текст – это, как по мне, недостаток. Что же я имею в виду? Вы когда-либо читали обычный текстовый файл (например, для пользователей ОС Windows – это файлы с расширением txt)? Никаких тебе выделений важных слов, выделения текста, цветом. Но HTML имеет столько возможностей! Красиво оформленный текст улучшает восприятие и понимание сути изложеного материала. Каскадная таблица стилей (CSS), например, позволяет выделить первую букву каждого абзаца. Этим можно воспользоваться для визуального оформления сайта. А, если ограничиться средствами HTML, то следуют выделять важные фрагменты текста жирным шрифтом, другими цветами, и тому подобное.
4. Дополнительные сервисы или не текстом единственным
Привычными для нас уже стала статья, рядом с которой есть: надпись, которая удостоверяет авторство, дата публикации, счетчик просмотров .. Да, посетитель может отказаться читать статью через недоверие к автору, или же "несвежесть" материала, не станут ли читать ее, потому что индикатор количества пересмотров стоит на низком уровне. Но этим можно не ограничиваться.
Не помешали бы также: возможность пересмотреть версию для печати, возможность проголосовать за статью (оценить материал).
Статья размещена на сервере и автор забывает о ней. А между тем в ней могут быть неточность, грубая ошибка, логическая дыра . Как-то изменить ситуацию к лучшему можно позволив посетителям оставлять комментарии к статье. Бояться негативных отзывов не стоят. Зная об ошибке в тексте Вы всегда сможете их при желании исправить. Но помните, если Вы думаете, что статья недостойна быть подписана Вашим именем, то лучше не публиковать ее на сайте.
5. Вывод
Обычно этим список советов по созданию удобного Web-сайта не ограничивается. Вы должны понимать, что удобный сайт увеличивает вероятность возвращения посетителя в будущем и вы следовательно, как никто другой должны быть заинтересованы в этом.
