опробуем дать определение, что такое Web-сайт.
Несомненно, Web-сайт - это совокупность Web-страниц, объединенных общей идеей донести до пользователя какую-то информацию.
Элементом, связывающим Web-страницы в сайт, являются ссылки. Все страницы сайта должны быть доступны путем переходов по ссылкам с головной страницы сайта без выхода за пределы сайта (т.е. ссылка на страницу еще не включает ее в состав сайта, но каждая страница сайта обязательно должна быть доступна с других страниц этого сайта).
Часто Web-сайт имеет собственное доменное имя, т.е. головная страница сайта совпадает с корневой директорией 'http://имя_сервера/'. Однако ничуть не реже персональные сайты имеют вид 'http://имя_сервера/~имя_пользователя/'. Часто сайт может быть органично включен в состав другого сайта - обычно так делают в случае, когда подразделение какой-либо организации имеет собственный сайт; тогда этот сайт получает собственную директорию внутри директории "вышестоящего" сайта.
Итак, у нас есть три критерия: общая идея, связанность ссылками и собственная директория. Четко определить, является ли данная совокупность Web-страничек сайтом нельзя, но если у Вас нет интуитивного понимания, что такое сайт, наверное Вам не следует читать дальше.
Следует различать роли Host-мастера, Web-мастера и Web-дизайнера в создании и поддержании сайта:
HostMaster отвечает за функционирование сервера как совокупности железа и выполняющегося на этом железе программ.
WebMaster составляет сайт для размещения его на сервере, основываясь на своих концепциях подачи информации.
WebDesigner изготавливает Web-страницы и рисунки, занимается компоновкой Web-страниц.
Даже если все три функции возложены на одного человека, это не означает исчезновения различия между ними. Кроме того, не следует забывать и о других участниках процесса:
заказчике, на которого работают эти трое;
и о посетителях сайта, которым предназначена информация на сайте.
Принципы построения сайта
Сайт должен быть организован понятно для впервые зашедшего на него посетителя. Для этого страницы должны быть четко разделены на навигационные/индексные (состоящие сплошь из ссылок с минимумом информации) и информационные (с собственно информацией и, возможно, перекрестными ссылками). /* Некоторым аналогом навигационных страниц являются сайты, посвященные рубрикации других сайтов. */ Не следует слишком мельчить рубрикацию и делать массу мелких индексных страниц - лишние переходы только замедляют доступ посетителя сайта к нужной ему информации; если на какой-либо навигационной странице оказалось менее пяти ссылок, имеет смысл обьединить ее с нижележащими или вышележащими навигационными страницами.
Нужно четко решить - ориентирован Ваш сайт на пользователей, которые попали на него случайно и, скорее всего, никогда больше сюда не вернутся; или на тех, кто будет возвращаться снова и снова, читая новые статьи и обращаясь к старым статьям за справочной информацией. В первом случае надо разместить на головной странице как можно больше информации в надежде удержать пользователя или сообщить ему хоть что-то (головная страница должна быть информационной); во втором случае на головной странице должны находиться только ссылки, ибо постоянно посещающий сайт пользователь уже не нуждается в рассказе о том, кто такой автор сайта, какой он хороший и как рад посетителям. :-)
Для хранения информации чаще всего используется древовидная файловая структура, в которой есть директории, содержащие списки файлов, и файлы, содержащие информацию (полная аналогия с индексными и информационными страницами). Самым очевидным решением является создание системы ссылок, соответствующей файловой организации сайта, а если это сайт корпорации - заодно и его организационной структуре: например, институт->факультеты->кафедры-> персональные страницы сотрудников и студентов. Такое решение является неправильным, точнее - недостаточным, ибо чтобы найти персональную страницу человека, надо знать, на какой кафедре он работает/учится, и к какому факультету относится эта кафедра; а посетитель сайта, в отличие от заказчика и Web-мастера, скорее всего, будет слабо ориентироваться в орг.структуре корпорации.
Кроме того, разные подразделения и персоналии могут быть представлены в Web совершенно неадекватно своему положению в организации - например, страница факультета может содержать только список кафедр и пару слов о декане, в то время как кафедра или сотрудник могут иметь большой и весьма популярный набор Web-публикаций. Поэтому в дополнение к "списку по ранжиру" надо добавить параллельный ему алфавитный список кафедр со ссылками на кафедры, а также один или несколько списков наиболее мощных/популярных ресурсов. В первом приближении критерием может служить "глубина сайта" - количество переходов по ссылкам, достаточное чтобы кратчайшим путем достичь любой страницы сайта; следовательно, ссылки на "разветвленные" сайты подразделений и людей следует располагать ближе к корню.
Многие ссерверы обеспечивают представление тектовой информации (PlainText, HTML) в нескольких кодировках русских букв с автоматическим преобразованием (например, Apache); на сегодняшний день необходимыми можно считать KOI8-R (Unix) и Win1251 (W'*), а кроме них существуют IBM866 (DOS и OS/2), Mac (Macintosh) и ISO-8859-5; задача обеспечить автоматическую перекодировку ложится на Host-мастера (это делается по порту доступа, по виртуальному имени хоста или по виртуальной директории), а кроме того, сервер может пытаться автоматически определять кодировку браузера по присылаемому им HTTP-запросу. WWW-сервер с единственной кодировкой - дурной тон. Web-мастер должен обеспечить лишь выбор пользователем кодировки. Некоторые посвящают выбору кодировки головную страницу сайта; на мой взгляд это неудачное решение: при котором посетителю требуется дождаться загрузки страницы и сделать один переход по ссылке только для выбора кодировки; лучше всего по умолчанию дать серверу определить кодировку автоматически и предоставить на головной странице переход к жестко указанной пользователем кодировке наряду со списком разделов сайта - это сократит путь посетителя к информации на одно обращение, а значит, снизит загрузку каналов Internet.
Структура ссылок должна приводить посетителя к искомой информации (если она есть на сайте) за минимальное время (с учетом времени на загрузку страниц по медленным перегруженным каналам) и количество обращений (тычков мышкой). Чем меньше труда затратит пользователь на поиск, тем больше времени у него останется на усвоение изложенной на сайте информации.
Не злоупотребляйте саморекламой. Если к платной рекламе других сайтов многие пользователи относятся вполне терпимо и с пониманием (в конце концов, хозяину популярного сайта надо на что-то жить), то навязчивая самореклама сайта только затрудняет продвижение пользователя к заданной цели. Если пользователь забрел на сайт, надо не рассказывать ему, какой это хороший сайт и какой хороший у него хозяин, а произвести впечатление удобством навигации и полезностью содержания. Навязчивую рекламу сайта надо располагать на других сайтах.
Если сайт разросся настолько, что требует более одной индексной страницы, следует озаботиться организацией службы поиска по сайту, благо протокол HTTP содержит в себе механизм CGI, предназначенный для вызова программ из HTML-страниц и передачу им параметров. Русский язык особенно сложен для автоматического поиска в силу многовариантности словоформ (падежей, склонений и т.п.), а также из-за большого количества заимствованных слов, особенно в специфичных областях типа бизнеса или информатики; поэтому, наверно, стОит обратиться к профессионалам, занимающимся созданием ориентированных на русский язык поисковых машин (часто это те же, кто создает программы для проверки орфографии и перевода на другие языки). Некоторые из поисковых машин общего пользования позволяют запросить поиск по ключевым словам только на указанном сайте - в простейшем случае можно воспользоваться этим.
Если сайт разросся настолько, что имеет несколько разделов, которые создаются и сопровождаются разными людьми, каждый из них, скорее всего, захочет поместить на головную страницу как можно больше ссылок на свои материалы, причем на наиболее выгодном месте (в начале страницы). Хорошим решением будет:
Выделение квот как на количество ссылок с головной страницы, так и на наиболее выгодное место.
Создание "глобального индекса", в который каждый сможет поместить что ему вздумается; при распределении наиболее выгодного места предпочтение должно отдаваться тому, кто размещает в глобальном индексе меньше ссылок.
Поместите на сайте список ссылок на сайты и странички сходной тематики - если Вам удастся сделать удачную подборку линков, пользователи будут заглядывать к Вам просто из-за нее. Если популярность Вашего сайта сравнима с популярностью того сайта, на который Вы ссылаетесь - Вы можете претендовать на ссылку оттуда на Ваш сайт, что еще больше прибавит Вашему сайту популярности.
Один из способов убедиться в логичности построения сайта - пригласить человека, впервые видящего Ваш сайт, и попросить его отыскать несколько наугад взятых статей (разумеется, этот человек должен хотя бы минимально разбираться области, которой посвящен сайт). Надеюсь, у Вас хватит здравого смысла не раздражаться по поводу его "бестолковости", а изменить сайт так, чтобы даже действительно бестолковые люди достаточно быстро находили искомое. /* Андрей Седельников назвал это "quick usability testing". Может, это так и называется - не знаю. */
Принципы компоновки страницы
Заботьтесь о читабельности страницы. Web-дизайнер в процессе верстки постоянно держит перед глазами текст, так что почти выучивает его наизусть; к тому же содержимое текста ему обычно неинтересно, а зачастую и непонятно - Web-дизайнер по специальности чаще всего является художником. Отсюда и возникают Web-страницы, переливающиеся всеми цветами радуги, которые очень красиво смотрятся, но которые совершенно невозможно читать. Помните, что посетитель, для которого заказчик захотел сделать сайт, приходит на сайт за информацией, а не оценивать Ваши эстетические изыски.
Не делайте предположений о каких-либо параметрах экрана, на котором будет отображаться Ваша страничка и о браузере посетителя. Фраза "Этот сайт лучше всего выглядит в разрешении 800*600 в InternetExplorer" на головной странице сайта (явно написанная или подразумеваемая) обычно демонстрирует низкий профессионализм Web-дизайнера. Старайтесь как можно меньше параметров указывать в абсолютных единицах (пикселах), если это не вызвано необходимостью - при другом разрешении экрана это приведет к выходу изображения за границу видимой области или к неполному использованию экранной площади.
Не навязывайте без необходимости своих установок пользователю - тип, размер и цвет шрифта, а также цвет остальных элементов страницы должны остаться на усмотрение пользователя, чтобы не нарушать привычной ему обстановки и не вызывать проблем адаптации к Вашим привычкам. Что касается шрифта - если указать конкретный тип, то это часто приводит к проблемам русификации, если указанный шрифт оказался в другой кодировке или вообще нерусифицированным; конкретный размер затруднит чтение (обычно человек подбирает наиболее удобный для себя размер).
Не делайте широких полей слева и справа от текста - если пользователь любит узкий текст, он может сузить окно браузера, а вообще надо максимально полно задействовать экранное пространство.
Делать поля лучше тэгами
Не указывайте кодировку в тексте (заголовке) HTML-страницы - ее могут конвертировать как серверы, так и сами пользователи в приемлимую для чтения кодировку, а указание на кодировку в тексте HTML-страницы останется неизменным и будет затруднять ее чтение при несоответствии указанной и действительной кодировок. Сервер Apache умеет "обдирать" указание кодировки (AddHandler strip-meta-http .расширение) в теле документа - при наличии системы перекодирования и возможности появления на сервере сраниц с указанием кодировки эту опцию надо включить.
Не используйте картинки там, где можно обойтись без них:
обычно картинка занимает гораздо больше места, чем текст той же информативности, а значит, замедляется загрузка (по крайней мере старайтесь сделать файл с картинкой поменьше, выбирайте между gif и jpeg);
картинка-ссылка без бордюра (BORDER=0) не выделяется так явно, как текст-ссылка, а с бордюром выглядит некрасиво;
размер шрифта пользователь подбирает под свое зрение, расположение текста браузер подгоняет под экран и шрифт пользователя, а картинка всегда имеет фиксированный размер;
движущаяся картинка забирает ресурсы процессора и отвлекает внимание посетителя от полезной информации;
на случай, если у пользователя отключена загрузка картинок, картинки должны иметь подписи (ALT="...");
если необходимо опубликовать большую картинку, не надо внедрять ее в информационную страницу - лучше поместить туда уменьшенную копию, а саму страницу загружать по желанию пользователя.
Размер информационных страниц надо подобрать таким, чтобы они загружались за приемлимое время и чтобы переходы к следующей страницы были не слишком часты. Ориентировочно размер страницы (без учета картинок) для российских линий - 10 KB. Исключения возможны для страниц, составляющих единое целое, если предполагается, что пользователь готов сначала загрузить ее целиком, а потом читать - для них пределом можно считать 100 KB.
Если страница имеет внутреннюю структуру, очень желательно поместить в ее начале оглавление с внутренними ссылками ( -> ) для навигации внутри страницы.
Размер и компоновка индексных (навигационных) страниц должны подбираться из предположения, что страница целиком уместится на экране, максимум - на двух экранах. Если это не соблюдается, навигационная страница обязательно должна иметь внутреннюю индексацию.
Не злоупотребляйте таблицами, по крайней мере не делайте их большими - таблицы начинают выводиться на экран только после того, как загрузятся целиком, а это создает ощущение медленности загрузки. Таблицы помогают красиво разместить информацию и эффективнее использовать экранное пространство, но не надо загонять все содержимое Web-страницы в одну таблицу!
Не полагайтесь на "наглядные" (WYSIWYG) редакторы HTML - именно они дают подавляющее большинство нарушений вышеизложенных принципов и делают страницы нечитабельными. Дело в том, что HTML как раз расчитан на отображение на произвольном (в разумных пределах) устройстве, а при "наглядном" редактировании создается страница, которая красиво (по крайней мере с точки зрения ее создателя) выглядит на экране редактора, но никак не проверяется вид страницы при других характеристиках экрана: разрешении, количестве цветов, типе и размере шрифта... Я встречал такие недочеты в HTML-страницах, подготовленных "наглядными" редакторами:
явное указание типа и размера шрифта;
тэги перевода строкИ (
) в тех местах, где происходил переход на новую строку при отображении в окне редактора - т.е. принудительное разбиение на стрОки;
явное указание размеров таблиц в пикселях;
выравнивание текста по горизонтали с помощью жестких пробелов ( ), а по вертикали - с помощью параграфов () или переводов строки (
) - это, конечно, вина Web-дизайнера, но провоцировала его именно "наглядность" редактировния;
кодирование русского текста в виде &#число;, причем чИсла немного больше 1000; по-видимому, имеется в виду кодировка UniCode, а если OS не поддерживает UniCode, то пользователь не сможет прочитать страницу.
Помимо того, что "наглядные" редакторы могут сделать страницу, привязанную к характеристикам экрана, они часто внедряют в нее лишние тэги, делая ее гораздо больше (в худшем случае - раза в полтора), чем необходимо.
Старайтесь делать страницу так, чтобы HTML-текст был читабелен даже без браузера, в исходном виде - это облегчит последующее внесение исправлений и вылавливание ошибок.
Не злоупотребляйте фреймами - фрейм иногда облегчает навигацию по сайту, зато отнимает экранную площадь, на которой мог бы разместиться полезный текст. К тому же фрейм не позволяет определить URL страницы, заинтересовавшей посетителя - в строке "Location" всегда отображается URL фрейм-страницы, (и это почти логично - ведь на экране присутствуют несколько страниц; хотя можно было бы отображать URL активного фрейма, но авторы браузеров этого не сделали).
Ссылка со страницы, включенной во фрем, на страницу другого сайта должна содержать указание загружать ее на полный экран (TARGET=_top), ибо показывать чужую страницу в своем фрейме - дурной тон.
Если дается ссылка на другой сайт, можно внедрить в страницу логотип того сайта или той страницы, с которой он берется; лучше не копировать картинку на свой сайт, а сделать ссылку (
) прямо на тот сайт - это экономит место на диске, а если пользователь переходит по ссылке, то браузеру при загрузке той страницы не понадобится грузить ту же картинку из другого места. При тестировании создается впечатление, что локальная картинка грузится гораздо быстрее, чем картинка с того сервера; помните, что это относится только к Вашей локальной сети.
Не злоупотребляйте новомодными технологиями - Java, javascript, ActiveX, фреймами, включением звука: все это может не поддерживаться браузером и машиной посетителя (или может быть отключено), а без какой-либо части эффект от всей композиции окажется утерян.
С помощью программирования на разных языках можно по всякому издеваться над посетителем вплоть до того, что он не сможет уйти с Вашей страницы. Помните, что пользователь всегда может перезагрузить компьютер; на такую страницу он, скорее всего, никогда не вернется, а информацию, расположенную на странице, забудет в процессе борьбы с Вашей злобной программой.
Несомненно, Web-сайт - это совокупность Web-страниц, объединенных общей идеей донести до пользователя какую-то информацию.
Элементом, связывающим Web-страницы в сайт, являются ссылки. Все страницы сайта должны быть доступны путем переходов по ссылкам с головной страницы сайта без выхода за пределы сайта (т.е. ссылка на страницу еще не включает ее в состав сайта, но каждая страница сайта обязательно должна быть доступна с других страниц этого сайта).
Часто Web-сайт имеет собственное доменное имя, т.е. головная страница сайта совпадает с корневой директорией 'http://имя_сервера/'. Однако ничуть не реже персональные сайты имеют вид 'http://имя_сервера/~имя_пользователя/'. Часто сайт может быть органично включен в состав другого сайта - обычно так делают в случае, когда подразделение какой-либо организации имеет собственный сайт; тогда этот сайт получает собственную директорию внутри директории "вышестоящего" сайта.
Итак, у нас есть три критерия: общая идея, связанность ссылками и собственная директория. Четко определить, является ли данная совокупность Web-страничек сайтом нельзя, но если у Вас нет интуитивного понимания, что такое сайт, наверное Вам не следует читать дальше.
Следует различать роли Host-мастера, Web-мастера и Web-дизайнера в создании и поддержании сайта:
HostMaster отвечает за функционирование сервера как совокупности железа и выполняющегося на этом железе программ.
WebMaster составляет сайт для размещения его на сервере, основываясь на своих концепциях подачи информации.
WebDesigner изготавливает Web-страницы и рисунки, занимается компоновкой Web-страниц.
Даже если все три функции возложены на одного человека, это не означает исчезновения различия между ними. Кроме того, не следует забывать и о других участниках процесса:
заказчике, на которого работают эти трое;
и о посетителях сайта, которым предназначена информация на сайте.
Принципы построения сайта
Сайт должен быть организован понятно для впервые зашедшего на него посетителя. Для этого страницы должны быть четко разделены на навигационные/индексные (состоящие сплошь из ссылок с минимумом информации) и информационные (с собственно информацией и, возможно, перекрестными ссылками). /* Некоторым аналогом навигационных страниц являются сайты, посвященные рубрикации других сайтов. */ Не следует слишком мельчить рубрикацию и делать массу мелких индексных страниц - лишние переходы только замедляют доступ посетителя сайта к нужной ему информации; если на какой-либо навигационной странице оказалось менее пяти ссылок, имеет смысл обьединить ее с нижележащими или вышележащими навигационными страницами.
Нужно четко решить - ориентирован Ваш сайт на пользователей, которые попали на него случайно и, скорее всего, никогда больше сюда не вернутся; или на тех, кто будет возвращаться снова и снова, читая новые статьи и обращаясь к старым статьям за справочной информацией. В первом случае надо разместить на головной странице как можно больше информации в надежде удержать пользователя или сообщить ему хоть что-то (головная страница должна быть информационной); во втором случае на головной странице должны находиться только ссылки, ибо постоянно посещающий сайт пользователь уже не нуждается в рассказе о том, кто такой автор сайта, какой он хороший и как рад посетителям. :-)
Для хранения информации чаще всего используется древовидная файловая структура, в которой есть директории, содержащие списки файлов, и файлы, содержащие информацию (полная аналогия с индексными и информационными страницами). Самым очевидным решением является создание системы ссылок, соответствующей файловой организации сайта, а если это сайт корпорации - заодно и его организационной структуре: например, институт->факультеты->кафедры-> персональные страницы сотрудников и студентов. Такое решение является неправильным, точнее - недостаточным, ибо чтобы найти персональную страницу человека, надо знать, на какой кафедре он работает/учится, и к какому факультету относится эта кафедра; а посетитель сайта, в отличие от заказчика и Web-мастера, скорее всего, будет слабо ориентироваться в орг.структуре корпорации.
Кроме того, разные подразделения и персоналии могут быть представлены в Web совершенно неадекватно своему положению в организации - например, страница факультета может содержать только список кафедр и пару слов о декане, в то время как кафедра или сотрудник могут иметь большой и весьма популярный набор Web-публикаций. Поэтому в дополнение к "списку по ранжиру" надо добавить параллельный ему алфавитный список кафедр со ссылками на кафедры, а также один или несколько списков наиболее мощных/популярных ресурсов. В первом приближении критерием может служить "глубина сайта" - количество переходов по ссылкам, достаточное чтобы кратчайшим путем достичь любой страницы сайта; следовательно, ссылки на "разветвленные" сайты подразделений и людей следует располагать ближе к корню.
Многие ссерверы обеспечивают представление тектовой информации (PlainText, HTML) в нескольких кодировках русских букв с автоматическим преобразованием (например, Apache); на сегодняшний день необходимыми можно считать KOI8-R (Unix) и Win1251 (W'*), а кроме них существуют IBM866 (DOS и OS/2), Mac (Macintosh) и ISO-8859-5; задача обеспечить автоматическую перекодировку ложится на Host-мастера (это делается по порту доступа, по виртуальному имени хоста или по виртуальной директории), а кроме того, сервер может пытаться автоматически определять кодировку браузера по присылаемому им HTTP-запросу. WWW-сервер с единственной кодировкой - дурной тон. Web-мастер должен обеспечить лишь выбор пользователем кодировки. Некоторые посвящают выбору кодировки головную страницу сайта; на мой взгляд это неудачное решение: при котором посетителю требуется дождаться загрузки страницы и сделать один переход по ссылке только для выбора кодировки; лучше всего по умолчанию дать серверу определить кодировку автоматически и предоставить на головной странице переход к жестко указанной пользователем кодировке наряду со списком разделов сайта - это сократит путь посетителя к информации на одно обращение, а значит, снизит загрузку каналов Internet.
Структура ссылок должна приводить посетителя к искомой информации (если она есть на сайте) за минимальное время (с учетом времени на загрузку страниц по медленным перегруженным каналам) и количество обращений (тычков мышкой). Чем меньше труда затратит пользователь на поиск, тем больше времени у него останется на усвоение изложенной на сайте информации.
Не злоупотребляйте саморекламой. Если к платной рекламе других сайтов многие пользователи относятся вполне терпимо и с пониманием (в конце концов, хозяину популярного сайта надо на что-то жить), то навязчивая самореклама сайта только затрудняет продвижение пользователя к заданной цели. Если пользователь забрел на сайт, надо не рассказывать ему, какой это хороший сайт и какой хороший у него хозяин, а произвести впечатление удобством навигации и полезностью содержания. Навязчивую рекламу сайта надо располагать на других сайтах.
Если сайт разросся настолько, что требует более одной индексной страницы, следует озаботиться организацией службы поиска по сайту, благо протокол HTTP содержит в себе механизм CGI, предназначенный для вызова программ из HTML-страниц и передачу им параметров. Русский язык особенно сложен для автоматического поиска в силу многовариантности словоформ (падежей, склонений и т.п.), а также из-за большого количества заимствованных слов, особенно в специфичных областях типа бизнеса или информатики; поэтому, наверно, стОит обратиться к профессионалам, занимающимся созданием ориентированных на русский язык поисковых машин (часто это те же, кто создает программы для проверки орфографии и перевода на другие языки). Некоторые из поисковых машин общего пользования позволяют запросить поиск по ключевым словам только на указанном сайте - в простейшем случае можно воспользоваться этим.
Если сайт разросся настолько, что имеет несколько разделов, которые создаются и сопровождаются разными людьми, каждый из них, скорее всего, захочет поместить на головную страницу как можно больше ссылок на свои материалы, причем на наиболее выгодном месте (в начале страницы). Хорошим решением будет:
Выделение квот как на количество ссылок с головной страницы, так и на наиболее выгодное место.
Создание "глобального индекса", в который каждый сможет поместить что ему вздумается; при распределении наиболее выгодного места предпочтение должно отдаваться тому, кто размещает в глобальном индексе меньше ссылок.
Поместите на сайте список ссылок на сайты и странички сходной тематики - если Вам удастся сделать удачную подборку линков, пользователи будут заглядывать к Вам просто из-за нее. Если популярность Вашего сайта сравнима с популярностью того сайта, на который Вы ссылаетесь - Вы можете претендовать на ссылку оттуда на Ваш сайт, что еще больше прибавит Вашему сайту популярности.
Один из способов убедиться в логичности построения сайта - пригласить человека, впервые видящего Ваш сайт, и попросить его отыскать несколько наугад взятых статей (разумеется, этот человек должен хотя бы минимально разбираться области, которой посвящен сайт). Надеюсь, у Вас хватит здравого смысла не раздражаться по поводу его "бестолковости", а изменить сайт так, чтобы даже действительно бестолковые люди достаточно быстро находили искомое. /* Андрей Седельников назвал это "quick usability testing". Может, это так и называется - не знаю. */
Принципы компоновки страницы
Заботьтесь о читабельности страницы. Web-дизайнер в процессе верстки постоянно держит перед глазами текст, так что почти выучивает его наизусть; к тому же содержимое текста ему обычно неинтересно, а зачастую и непонятно - Web-дизайнер по специальности чаще всего является художником. Отсюда и возникают Web-страницы, переливающиеся всеми цветами радуги, которые очень красиво смотрятся, но которые совершенно невозможно читать. Помните, что посетитель, для которого заказчик захотел сделать сайт, приходит на сайт за информацией, а не оценивать Ваши эстетические изыски.
Не делайте предположений о каких-либо параметрах экрана, на котором будет отображаться Ваша страничка и о браузере посетителя. Фраза "Этот сайт лучше всего выглядит в разрешении 800*600 в InternetExplorer" на головной странице сайта (явно написанная или подразумеваемая) обычно демонстрирует низкий профессионализм Web-дизайнера. Старайтесь как можно меньше параметров указывать в абсолютных единицах (пикселах), если это не вызвано необходимостью - при другом разрешении экрана это приведет к выходу изображения за границу видимой области или к неполному использованию экранной площади.
Не навязывайте без необходимости своих установок пользователю - тип, размер и цвет шрифта, а также цвет остальных элементов страницы должны остаться на усмотрение пользователя, чтобы не нарушать привычной ему обстановки и не вызывать проблем адаптации к Вашим привычкам. Что касается шрифта - если указать конкретный тип, то это часто приводит к проблемам русификации, если указанный шрифт оказался в другой кодировке или вообще нерусифицированным; конкретный размер затруднит чтение (обычно человек подбирает наиболее удобный для себя размер).
Не делайте широких полей слева и справа от текста - если пользователь любит узкий текст, он может сузить окно браузера, а вообще надо максимально полно задействовать экранное пространство.
Делать поля лучше тэгами
..., а не заключая текст в таблицу (о вреде таблиц см.ниже).
Не указывайте кодировку в тексте (заголовке) HTML-страницы - ее могут конвертировать как серверы, так и сами пользователи в приемлимую для чтения кодировку, а указание на кодировку в тексте HTML-страницы останется неизменным и будет затруднять ее чтение при несоответствии указанной и действительной кодировок. Сервер Apache умеет "обдирать" указание кодировки (AddHandler strip-meta-http .расширение) в теле документа - при наличии системы перекодирования и возможности появления на сервере сраниц с указанием кодировки эту опцию надо включить.
Не используйте картинки там, где можно обойтись без них:
обычно картинка занимает гораздо больше места, чем текст той же информативности, а значит, замедляется загрузка (по крайней мере старайтесь сделать файл с картинкой поменьше, выбирайте между gif и jpeg);
картинка-ссылка без бордюра (BORDER=0) не выделяется так явно, как текст-ссылка, а с бордюром выглядит некрасиво;
размер шрифта пользователь подбирает под свое зрение, расположение текста браузер подгоняет под экран и шрифт пользователя, а картинка всегда имеет фиксированный размер;
движущаяся картинка забирает ресурсы процессора и отвлекает внимание посетителя от полезной информации;
на случай, если у пользователя отключена загрузка картинок, картинки должны иметь подписи (ALT="...");
если необходимо опубликовать большую картинку, не надо внедрять ее в информационную страницу - лучше поместить туда уменьшенную копию, а саму страницу загружать по желанию пользователя.
Размер информационных страниц надо подобрать таким, чтобы они загружались за приемлимое время и чтобы переходы к следующей страницы были не слишком часты. Ориентировочно размер страницы (без учета картинок) для российских линий - 10 KB. Исключения возможны для страниц, составляющих единое целое, если предполагается, что пользователь готов сначала загрузить ее целиком, а потом читать - для них пределом можно считать 100 KB.
Если страница имеет внутреннюю структуру, очень желательно поместить в ее начале оглавление с внутренними ссылками ( -> ) для навигации внутри страницы.
Размер и компоновка индексных (навигационных) страниц должны подбираться из предположения, что страница целиком уместится на экране, максимум - на двух экранах. Если это не соблюдается, навигационная страница обязательно должна иметь внутреннюю индексацию.
Не злоупотребляйте таблицами, по крайней мере не делайте их большими - таблицы начинают выводиться на экран только после того, как загрузятся целиком, а это создает ощущение медленности загрузки. Таблицы помогают красиво разместить информацию и эффективнее использовать экранное пространство, но не надо загонять все содержимое Web-страницы в одну таблицу!
Не полагайтесь на "наглядные" (WYSIWYG) редакторы HTML - именно они дают подавляющее большинство нарушений вышеизложенных принципов и делают страницы нечитабельными. Дело в том, что HTML как раз расчитан на отображение на произвольном (в разумных пределах) устройстве, а при "наглядном" редактировании создается страница, которая красиво (по крайней мере с точки зрения ее создателя) выглядит на экране редактора, но никак не проверяется вид страницы при других характеристиках экрана: разрешении, количестве цветов, типе и размере шрифта... Я встречал такие недочеты в HTML-страницах, подготовленных "наглядными" редакторами:
явное указание типа и размера шрифта;
тэги перевода строкИ (
) в тех местах, где происходил переход на новую строку при отображении в окне редактора - т.е. принудительное разбиение на стрОки;
явное указание размеров таблиц в пикселях;
выравнивание текста по горизонтали с помощью жестких пробелов ( ), а по вертикали - с помощью параграфов () или переводов строки (
) - это, конечно, вина Web-дизайнера, но провоцировала его именно "наглядность" редактировния;
кодирование русского текста в виде &#число;, причем чИсла немного больше 1000; по-видимому, имеется в виду кодировка UniCode, а если OS не поддерживает UniCode, то пользователь не сможет прочитать страницу.
Помимо того, что "наглядные" редакторы могут сделать страницу, привязанную к характеристикам экрана, они часто внедряют в нее лишние тэги, делая ее гораздо больше (в худшем случае - раза в полтора), чем необходимо.
Старайтесь делать страницу так, чтобы HTML-текст был читабелен даже без браузера, в исходном виде - это облегчит последующее внесение исправлений и вылавливание ошибок.
Не злоупотребляйте фреймами - фрейм иногда облегчает навигацию по сайту, зато отнимает экранную площадь, на которой мог бы разместиться полезный текст. К тому же фрейм не позволяет определить URL страницы, заинтересовавшей посетителя - в строке "Location" всегда отображается URL фрейм-страницы, (и это почти логично - ведь на экране присутствуют несколько страниц; хотя можно было бы отображать URL активного фрейма, но авторы браузеров этого не сделали).
Ссылка со страницы, включенной во фрем, на страницу другого сайта должна содержать указание загружать ее на полный экран (TARGET=_top), ибо показывать чужую страницу в своем фрейме - дурной тон.
Если дается ссылка на другой сайт, можно внедрить в страницу логотип того сайта или той страницы, с которой он берется; лучше не копировать картинку на свой сайт, а сделать ссылку (
Не злоупотребляйте новомодными технологиями - Java, javascript, ActiveX, фреймами, включением звука: все это может не поддерживаться браузером и машиной посетителя (или может быть отключено), а без какой-либо части эффект от всей композиции окажется утерян.
С помощью программирования на разных языках можно по всякому издеваться над посетителем вплоть до того, что он не сможет уйти с Вашей страницы. Помните, что пользователь всегда может перезагрузить компьютер; на такую страницу он, скорее всего, никогда не вернется, а информацию, расположенную на странице, забудет в процессе борьбы с Вашей злобной программой.
Навигация