IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Правильный проект - залог успеха

Антон Орлов, http://antorlov.chat.ru

* * *

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

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

1. На сайте обязательно должна быть главная страница с кратким каталогом всех разделов сайта, причем с каждой страницы сайта должна быть ссылка на эту главную страницу. Это вполне естественное требование - сайт должен иметь некий "центр", с которого будет возможен общий обзор содержимого всего Интернет-ресурса. Зачастую посетитель, пришедший на одну из страниц сайта (например, в результате поиска в Yandex), потом переходит на главную страницу и просматривает остальные материалы сайта.

2. Крайне желательно наличие удобного навигатора по сайту, то есть набора ссылок на остальные страницы сайта, реализованных как обычные ссылки или на основе сценариев. В настоящее время наилучшим решением признано размещение списка ссылок на ресурсы сайта в колонке таблицы, располагающейся слева (как, например, на http://www.freeware.ru) или справа (пример - http://antorlov.chat.ru) от основного текста первой страницы (см.рис.10.1). Расположение списка ссылок справа имеет определенные преимущества с точки зрения удобства, так как при этом направления взгляда на мышь и текст страницы не перекрещиваются (большинство людей на Земле все же правши). Если разделов сайта не так и много, то допустимо размещать список ссылок сверху или снизу.

Примеры удобных навигаторов на основе JavaScript и Dynamic HTML приведены в гл. 13. Желательно, но не обязательно, размещать навигатор на всех страницах сайта.

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

 

Рис.10.1. Два типа расположений навигатора - слева (верхний рисунок) и справа (нижний рисунок).
Решите сами, какой удобнее.

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

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

Если графический обьект является ссылкой, то обязательно наличие альтернативного текста c описанием ссылки (для этого надо включить в тэг <IMG SRC...> параметр alt="Описание рисунка"). Вообще желательно, чтобы количество графических обьектов на странице было минимальным. При отображении страницы для загрузки каждого отдельного графического обьекта требуется отдельное обращение к серверу, что занимает время. Загрузка десятка рисунков по одному килобайту займет гораздо больше времени, чем одного рисунка в десять килобайт.

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

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

И уж, конечно, желательно, чтобы все гиперссылки были текстовые. Использовать в качестве ссылки рисунок допустимо лишь в том случае, если посетителю будет точно известно, что он является ссылкой. В самом крайнем случае можно использовать рисунок как ссылку, но в его поле ALT подробно описать, куда ведет ссылка, и указать, что ее надо нажать.

Рис.10.2. Пример сохраненной на диске страницы, на которой было много
графических обьектов. А сначала она была такой красивой...

5. Размер каждой страницы сайта не должен превышать предел в 80-100 килобайт вместе с графикой (оптимально - 40-50), за исключением страниц с большим количеством информации - электронных книг, например. В любом случае при большом размере того или иного файла об этом должно быть сказано около ссылки на него.

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

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

7. Если на странице сайта регулярно помещается новая информация, то она должна помещаться в самом начале страницы, как это, например, сделано на сервере www.pravda.ru (рис.10.3). Пользователь, заходящий на сайт за его новостями, не должен принуждаться к загрузке всей страницы ради одной-двух новых строк, особенно если размер страницы превышает 30-40 килобайт. Он всегда должен иметь возможность нажать кнопку остановки загрузки и получить самую новую информацию.

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

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

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

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

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

11. Ни в коем случае нельзя использовать при создании сайта фреймы! Не случайно в этой книге до сих пор не сказано ни слова о них.

Фрейм - это способ создания внутри web-страницы окна для отображения другой web-страницы, реализуется с помощью тэга <frame>. Если страница загружена во фрейм, то она может заменяться на другую без замены содержащей фрейм страницы. Эта возможность - единственное достоинство фреймов. Недостатков же - масса. Во-первых, страницу, загруженную во фрейм, нельзя так просто сохранить на локальном диске. Приходится прибегать к ухищрениям вроде тех, что описаны ниже. Во-вторых, на web-страницу во фрейме нельзя так просто поставить закладку, - она будет ставиться на главную страницу сайта. Страницу во фрейме нельзя перезагрузить кнопкой "Обновить" - приходится использовать одноименный пункт из меню правой кнопки мыши. Можно еще долго перечислять проблемы, однако, думается, и этого достаточно.

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

Если до сих пор вы не знали, что такое фреймы, то и не стремитесь узнать о том, как их создавать. Ничего, кроме проблем для посетителей сайта и для вас, их использование не принесет. Знайте лишь, что если вы попали на страницу, на которой есть фреймы, то сохранить ее вместе с содержимым фреймов можно лишь из Microsoft Internet Explorer 5.0 и выше путем выбора из меню "Сохранить как…" пункта "Web-страница, полностью". Если же вы работаете с другой моделью браузера, то для сохранения страницы вам придется использовать пункты типа "Вид - В виде HTML" или одноименный из меню правой кнопки мыши, вначале просматривая HTML-код страницы, загруженной во фрейм, потом сохраняя его в качестве текстового файла, и только затем, переименовав его в .html, получая возможность загрузить его в браузер. Мнение о том, как все это неудобно, можете высказать web-дизайнеру сайта, откуда вам пришлось таким образом сохранять материалы.

12. Использование новых технологий отображения графики (Flash, VRML, MetaStream) допустимо лишь в том случае, если достигаемые ими возможности не могут быт реализованы другими средствами и имеют большое значение для представления информации на сайте. Ни в коем случае нельзя использовать их "для красоты" - без особой к тому необходимости. Ясно, например, что на сайте Интернет-магазина использование технологии MetaStream может серьезно помочь посетителю сделать свой выбор (эта технология позволяет отобразить трехмерное изображение обьекта с возможностью его вращения пользователем вокруг всех трех осей, очень удачно одно время использовалась в Интернет-магазине www.dostavka.ru - рис.10.4), но на большинстве других сайтов использовать ее незачем. Если же такие технологии все же используются, то обязательно наличие альтернативной версии страниц сайта - без использования сложных технологий.

Рис.10.4. Пример использования технологии MetaStream на сайте Интернет-магазина www.dostavka.ru. Можно посмотреть товар со всех сторон.

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

Главы из книги "Тайны и секреты компьютера",
http://comptain.chat.ru

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.