Необходимые сведения о дизайне сайта

а) Не все работают с разрешением 1024х768.

Не так просто сделать страницу, внешний вид которой одинаково хорош и при разрешении 1024х768 и 640х480. Необходимо растягивать и сжимать страницу для ее подгонки под размер окна браузера. Многие общественные сайты были разработаны для разрешения 640х480 и занимают не весь экран браузера. Но даже при таком разрешении общая ширина страницы не должна превышать 600 пикселей. Закрытые сайты и сайты в интрасетях обычно имеют более широкие страницы, поскольку технические возможности целевой аудитории сайтов хорошо известны. Однако общественные сайты и в том числе наш, ограничиваются размером 640х480.

Ширина 600 пикселей позволит сохранить место для полосы прокрутки браузера. Кроме того, наиболее важные элементы должны поместиться в первые 400 пикселей высоты страницы. Оставьте от 125 до 150 пикселей для левой панели навигации (если она реализована на странице), а область содержимого займет 450 пикселей. Помните, что страница создается в том числе и для окон Linux.

Наметилась тенденция в переходе на разрешение 800х600. В этом случае страница должна быть не шире 760 пикселей и не длиннее 520 пикселей.

Вполне хорошая графика достигается при использовании 256 цветов. Кроме того, графические элементы (например, логотипы и кнопки) следует выполнять в формате GIF. На самом деле ограничение 256 цветовой палитрой не соответствует истине. В проектах доступны только 216 отдельных цветов. Такая палитра называется Webmaster Safety Palette и применяется во многих графических программах (Adobe Photoshop). Поэтому следует придерживаться корректной цветовой гаммы.

Прекрасные ресурсы по теме выбора цветовой палитры доступны на https://www.visibone.com.colorlab/

Нужно внимательно относиться к применению цветов не только в файлах GIF, но и в остальных элементах сайта (фоновый цвет таблиц, цвета шрифта и т.д.). Если используются цвета из палитры Webmaster Safety Palette – сайт будет выглядеть одинаково в режимах 256 и 16 млн цветов.

Для охвата максимально широкой аудитории следует позаботиться о хорошей работе сайта в разных браузерах. Не всегда следует использовать страницы стилей, JavaScript, VBScript и т.д. Например, Amazon.com не содержит ни одной строки кода JavaScript в общественной части сайта. Это сделано для расширения аудитории, за что приходится платить отсутствием определенной функциональности.

Посетители, не имеющие технического образования, часто пользуются устаревшими версиями броузеров.

Не все подключаются по линии Т1

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

Существует 5 способов повышения производительности сайта:

1. Минимальное использование графики. Проверьте, не перегружен ли сайт графическими элементами и хорошо ли оптимизированы эти элементы.
2. Сокращение размера страниц. Не перегружайте информацией страницы сайта. Не заставляйте пользователя ждать загрузки всей необходимой ему информации. По возможности разделите информацию на несколько страниц.
3. Чрезмерное сокращение размера страниц может привести к другой крайности – пользователю придется делать слишком много щелчков мыши для получения нужной информации. В общем случае большая часть сведений должна быть доступна по трем щелчкам, начиная с домашней страницы (к этому правилу относится и поиск средствами сайта, на который обычно требуется один щелчок мыши).
4. Сокращение длины URL-адреса. В динамических свойствах это дает огромное преимущество. Посмотрите на адреса сайта Yahoo: вместо названия папки images указано в адресе только i. По возможности сокращайте имена страниц и папок сайта.
5. Исключение элементов ActiveX и апплетов Java. Пользователю придется ждать загрузки и установки дополнительных компонентов для получения полного набора функций сайта, причем любая задержка в загрузке будет раздражать потенциального покупателя.
6. Использование Cascading Styles Sheets (CSS). Позволит сократить объем повторений во время доставки в броузер информации о форматировании.

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

Компоновка сайта.

Обычно все страницы сайта выполняются в едином стиле (одна тема). Общий стиль облегчает посетителям доступ к инструментам сайта: панели навигации, окну поиска и др.

А. Выбор темы.

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

В. Прототип.

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

1. Создать документ размером 600х400 пикселей
2. В названии сайта может быть заложена идентификация его владельца (фото)
3. В сайтах ЭК следует особое внимание на средства навигации. Посетители знают, что им нужно и применяют чаще всего:

· окно поиска

· понятные кнопки и ссылки на отделы магазина

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

На сайте должен быть раздел Кофейное оборудование. Левая навигационная панель должна обеспечивать выбор по производителям, типам оборудования и т.п. кроме того в левой панели навигации можно поместить окно поиска. Если разрешение будет 640х480, то ширина левой панели навигации будет примерно 125 пикселей. Если оставить небольшое поле между содержимым страницы и панелью навигации, ширину панели можно сделать 110 пикселей.

С.Построение каркаса.

Форматирование таблиц

Разбиение графического каркаса на несколько таблиц HTML упростит разработку дизайна сайта.

D. Включенные файлы.

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

Е. Домашняя навигация. Определяет щелчок мыши, возвращающий посетителя на домашнюю страницу сайта. Стандартным является размещение названия или логотипа сайта в верхнем левом углу страницы. Домашняя страница аналогична команде «сброс», поскольку заблудившийся на сайте посетитель обычно пытается вернуться к отправной точке. Как правило, посетители возвращаются на домашнюю страницу сайта.