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

Прежде чем начать…

Разберитесь со своим ISP

Поговорите со своим провайдером Internet-услуг и наведите порядок на сервере, которым вы собираетесь воспользоваться. Проверьте, поддерживает ли он все необходимые вам нестандартные возможности, такие как Active Server Pages, дополнительные модули для FrontPage, пароли и так далее. Кроме того, загляните на другие сайты, использующие тот же самый сервер, и проверьте скорость коннекта.

Навигация — это все

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

Целься точнее

Четко определите, кто является вашей целевой аудиторией, поскольку от этого зависит, будете ли вы использовать DHTML, Flash и так далее. Следует ли вам угождать тем посетителям, которые используют старые браузеры и медленные машины? А если да, то не следует ли вам сделать два сайта: один попроще, а другой — более броский, современный?

Структура каталога

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

Сначала подумайте

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

Картинки

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

Шаблоны

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

Кросс-платформная совместимость

Желательно, чтобы у вас на рабочем месте стояли две машины — Mac и PC — и чтобы на них были установлены все возможные браузеры, какие вам только удастся достать. Тогда вы сможете проверить, насколько хорошо выглядит ваш сайт в каждом из этих браузеров и достаточно ли изящно перемещаются использованные вами DHTML-элементы в браузерах, не поддерживающих эту возможность.

Проверь и препроверь

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

Основные советы по дизайну

Чем проще, тем лучше

Ключ к успешному дизайну на Web’е — простота. Не увлекайтесь обилием шрифтов, миллионами цветов и взрывающимися Java-аплетами. Чем проще дизайн, тем лучше. Держите свой сайт опрятным, не загромождайте его.

Дизайнерские идеи

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

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

Размещение навигационных элементов

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

Приоритет содержания

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

Цветовые схемы

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

Текст в формате GIF

Не используйте формат GIF только для того, чтобы вывести на экран текст. В GIF’ах невозможно устраивать поиск по ключевым словам, и они дольше загружаются. Для необходимого стилевого оформления текста используйте различные комбинации тэгов <font>. Если этот способ не проходит, воспользуйтесь каскадными стилями (Cascading Style Sheets), хотя их поддерживают только новейшие браузеры.

Текстовый поток

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

Целевая аудитория

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

Безопасные Web-палитры

При разработке графики для сайта имейте в виду, что не все пользователи работают на машинах с 32-битным цветом. Разрабатывайте сайт для людей с 256-цветными мониторами, и тогда ваш дизайн будет одинаково смотреться на всех машинах. Ваша графическая программа должна легко позволять вам сделать это. Если этого не случится, попробуйте такие программы, как Fireworks или ImageReady.

Прокрутка текста

Старайтесь избегать применения без особой необходимости хитроумных трюков и «штучек», таких как Java-тикеры, перемещаемые картинки и тексты в панели управления. Не все браузеры поддерживают такие штучки, и в них нет никакого смысла. Если их нельзя вставить на страницу, то зачем вообще это делать?

Будущие исправления

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

Анимированные кнопки (ролловеры)

Создайте навигационные управляющие элементы (кнопки с реакцией на курсор (ролловеры)) при помощи JavaScript. Чтобы построить интересный ролловер, нужно задать статичное изображение в качестве Default-кнопки (как она будет выглядеть в обычном состоянии) и анимированный GIF для того состояния, когда поверх кнопки окажется курсор мыши. Создать ролловер можно с помощью программ Dreamweaver или GoLive или описать в JavaScript самостоятельно.

Счетчики посещений

Если вы собираетесь завести счетчик посещений сайта, делайте это осмотрительно или не делайте вовсе. Может получиться неприятный эффект, если люди вдруг увидят, что у вас на сайте побывало всего 249 посетителей. Воспользуйтесь услугами сайта http://TheCounter.com и ему подобными, на которых можно завести скрытый счетчик посещений вашего сайта, а потом обращаться туда и проверять полученные результаты.

Фоновые изображения

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

Вступительная страница

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

Масштаб

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

Разметка изображений

Вместо того чтобы привязывать ссылки по отдельности к каждому изображению, попробуйте воспользоваться одним изображением для всех своих навигационных конструкций сразу. Определите при помощи тэгов <MAP> «ссылочные» области (hit areas) на этом изображении. Эти области могут быть прямоугольными, круглыми и многоугольными, и к этим областям можно привязывать ссылки.

Прозрачные изображения

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

Проектирование анимации

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

Искусство созидания

GIF против JPEG

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

Использование фреймов

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

Имена фреймов

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

Меньше прокруток

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

Карта сайта

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

Ширина окна

Не все пользователи Сети имеют большие мониторы. Стройте свой сайт таким образом, чтобы он хорошо смотрелся даже при самом маленьком разрешении (640*480 пикселов). Рекомендуем поместить всю содержательную часть сайта внутрь таблицы, установить определенную ширину таблицы и отцентровать ее относительно окна. Если ширина таблицы будет составлять примерно 640 пикселов, то она будет хорошо смотреться при любом разрешении экрана.

Быстрый поиск

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

Совместимость с браузерами

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

Использование графики

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

<META>-тэги

При конструировании сайта не забудьте включить в раздел <HEAD> тэги <META>. Поисковые системы используют эти тэги для того, чтобы отбирать из вашего сайта ключевые слова и описания. Таким образом, вы можете повысить рейтинг своего сайта в поисковых системах.

Бессмысленные звуки

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

Стандартные гарнитуры

Не на всех машинах есть те же шрифты, что и у вас. Чтобы ваш текст не оказался непригодным для чтения, используйте стандартные гарнитуры, которые есть практически у всех. Для PC стандартными являются Arial и Verdana, для MAC’ов — Helvetica, а Times New Roman — для обеих платформ.

Где грань?

Если вы помещаете на сайт что-то, что на самом деле не очень-то и нужно, то зачем это вообще туда помещать? Бесполезные элементы только отвлекают посетителей. Старайтесь избегать таких вещей, как вращающиеся трехмерные логотипы и ссылки на e-mail в виде анимированных конвертиков.

Использование слоев

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

Кэш превыше всего

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

Текстовые ссылки

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

Пользуйтесь шаблонами

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

Оптимизация графики

Чтобы изображения быстрее загружались в браузер, используйте в них как можно меньше цветов. В процессе размывания границ (anti-aliasing) в изображении возникают новые цвета и, следовательно, увеличивается время перекачивания файла по сети. Для формата JPEG можно использовать инструменты оптимизации, такие как Fireworks или JPEG Optimiser.

Тестирование совместимости

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

Эксперименты на людях

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

Поддержка сайта

Поисковые системы

Поскольку ваш сайт работает в режиме on-line, зарегистрируйте его в системах поиска на постоянной основе. Поиграйте с тэгами <META> и посмотрите, какие из них приведут вас на верхние строки в списках поисковых серверов. Скорректируйте их таким образом, чтобы добиться наилучшего результата, и посмотрите, сколько новых посетителей появится на вашем сайте.

Организация файлов

Держите файлы своего сайта в разных каталогах. Так их легче будет обновлять. Заведите отдельные каталоги для изображений, HTML-файлов, видеофрагментов, звука и CSI-сценариев. Задайте для этих каталогов понятные имена. Так, все файлы, относящиеся к разделу «Работа», стоило бы разместить в каталоге Jobs, и так далее.

Загрузка сайта на сервер

Когда вы загружаете файлы своего сайта на сервер, не забудьте, что их нужно загружать в правильном формате. HTML и текстовые файлы необходимо загружать в формате ASCII, а изображения, CGI-сценарии, файлы Flash, звук и видео — в двоичном формате.

Обновление сайта

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

Имена файлов

При именовании файлов для Web-сайта придерживайтесь правила, известного под названием 8.3, то есть используйте имена файлов длиной не более восьми знаков и расширение не более трех знаков. Не исключено, что некоторые посетители вашего сайта все еще работают на старых машинах. Используйте расширение *1ext1, а не *.html (например, new.htm). Вы, конечно же, хотите, чтобы ваш сайт посмотрело как можно больше народу, поэтому не исключайте из этого списка тех, кто не может работать с длинными именами файлов.

Новейшие технологии

Вам необходимо постоянно быть в курсе новейших технологий. Следите за тем, что происходит на Web’е, каке новые стандарты появляются. Подумайте, не будет ли ваш сайт лучше смотреться в формате Flash? Как на счет Dynamic HTML или XML? Следите, как ведут себя конкуренты, и постоянно совершенствуйте свой сайт.

Резервное копирование

Чем бы вы ни занимались, не забывайте регулярно делать резервные копии. Скопируйте свой сайт на Zip-диск или CD и сохраните его в безопасном месте. Если случится самое ужасное и вы потеряете все свои данные, то, по крайней мере, у вас будет резервная копия, готовая для загрузки на сервер.

Статистика по сайту

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

Проверка ошибок

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

Постоянное совершенствование

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

В статье освещен опыт компаний Headstate(chris@headstate.co.uk) и Chameleon Consultants (susannah@dial.pipex.com), а также лично Карла Ходжа (khodge@dial.pipex.com).

КомпьюАрт 1'2000

КомпьюАрт

175 советов по Web