- Обязательно рисуйте все сами. Не
используйте первые попавшиеся картинки,
поставляемые с HTML редакторами. Тем более не
воруйте картинки даже на самых дальних узлах.
- Нейтральный фон. Многие помещают в
качестве фона логотипы и тому подобную мишуру.
Это вызывает усталость глаз, затрудняет чтение
(если есть, что читать), раздражает пользователя.
- Необходимо поддерживать все кодировки на
профессиональных узлах. Этим Вы проявляете
уважение к пользователям других систем и
расширяете контингент пользователей.
- Желательна возможность выбора
кодировки на любой странице. Если
пользователь нашел Вас по ссылке, ему не придется
идти в корень Вашего узла для выбора кодировки и
заблудиться по пути обратно.
- Не забывайте про alt="" в картинках.
Не у всех быстрые линии, тем более у нас в стране.
Позаботьтесь о тех у кого отключен показ
рисунков.
- Не позволяйте читателю заблудиться
в структуре ваших документов. Если вы
разрабатываете большое дерево документов, в них
стоит помещать так называемые "путеводные
ссылки", с помощью которых читатель может
в любой момент вернуться на домашнюю страницу
или же к заглавным страницам.
- Не используйте значки "Under Construction"
- это пошло. Напишите где-нибудь сбоку вежливое
извинение и предложение зайти попозже. Если уж
Вам так нравятся яркие картинки, поместите ее в
самом верху главной страницы, а не в каждом из 3-х
Ваших фрэймов.
- Не пихайте на главную страницу фоновые
звуки и другие нестандарты. Очень
раздражает, когда в качестве приветствия
получаешь сообщение об отсутствующем plagin'е.
Пользователь должен знать, что его ожидает.
- Постарайтесь не использовать метку ,
даже если очень хочется.
- Следите за читаемостью текста.
Попробуйте прочитать текст темносинего цвета
написанный на грязнокоричневом фоне. А если у
пользователя не лучшее зрение? А если у него еще и
не лучший монитор? Если пользователю нужно будет
прилагать усилия для чтения содержимого вашего
узла, то он уйдет от вас очень скоро и никогда не
вернется обратно.
- Не злоупотребляйте анимированными
GIF'ами и прочим движением, т.к. это сильно
отвлекает пользователя от остального
содержимого узла, а при долгом просмотре
(например: чтение материала) начинает раздражать
немилосердно.
- Лучше проставлять размеры у картинок,
которые влияют на раскладку (layout) страницы для
сохранения ее первозданного вида при
отключенных картинках. но если Вы используете
иллюстрации к статье, то наоборот, нужно убрать
параметры размеров, чтобы большие пустые пятна
не мешали читать текст.
- Если Вы используете BACKGROUND="fone.gif", то неплохо
так же задать и BGCOLOR="#RRGGBB", где #RRGGBB -
цвет, соответствующий основному цвету
изображения fone.gif. При загрузке такая страница
производит более благоприятное впечатление, так
как фоновое изображение подгружается в
последнюю очередь.
- Вставляйте оглавление в начало больших
документов. Иногда возникает необходимость
объединить некоторую информацию в один
достаточно большой документ. В этом случае для
облегчения навигации по документу в его начало
стоит вставить оглавление, содержащее ссылки на
различные информационные разделы, содерщащиеся
в этом документе. Тогда читателю не придется
просматривать весь документ в поисках
интересующей его информации - он сможет сразу
перейти к ней по ссылке из оглавления.
- Лучше думать сначала. Перед тем,
как начать делать сайт, тщательно продумайте его
структуру на предмет общего "дерева"
страниц, ссылок между ними и использования
графики. Это позволит вам потратить меньше
времени на его создание пользователю больше
удобства при его просмотре.
- Старайтесь, чтобы имена файлов
соответствовали содержимому (как вы его
видите). Например: если ссылка "Наши
партнеры" будет вести к файлу konchenye_idioty.html то ...
И, к тому же, соответствие имени файла его
содержимому немного повысит рейтинг ваших
страниц в поисковых системах.
- Предоставьте возможность браузерам использовать
строку состояния по назначению. Мало того,
что пользователь не может получить
дополнительной информации о ссылке, но, кроме
того, еще и текст, бегущий в строке состояния,
обычно очень плохо читается.
- Первое впечатление о вашем узле
складывается от просмотра его заглавной
страницы, а если еще учесть, что более 75%
пользователей уйдут с нее через 10 секунд, не
найдя того, что им нужно, то целесообразно будет
помещать активное содержание страницы
(информация о том, что конкретно пользователь
может найти на этом сайте) будет целиком
умещаться в окне браузера при просмотре в
разрешении 800Х600 (основное количество
пользователей пользуются именно этим
разрешением либо выше).
- Создайте прозрачный GIF размером 1x1
и используйте ее для точной подгонки
расположения элементов вашего узла или создания
разделительных пространств, выставляя аттрибуты
<WIDTH> и <HIGHT>.
- Если Вы помещаете страницы узла в таблицы с
фиксированной шириной (например 600 пикселей), не
забывайте помещать всю таблицу внутрь тэга
<CENTER>...</CENTER>. Этим вы сильно улучшите
внешний вид узла при просмотре в больших
разрешениях (например 1600Х1200).
- Не используйте маленький GIF для фона.
Однажды дизайнер хотел получить "полосатый"
фон и использовал для этого
<BODY BACKGROUND="backgrnd.gif">. Полоски были
двухцветные, горизонтальные и находились на
расстоянии 10 пикселей друг от друга. Желая
уложить файл для фона в минимальное количество
байт, автор сделал его размером 1х11 пикселей. В
итоге, даже на машине с хорошей видеокартой, я с
большим удивлением наблюдал, как фон выводится
строчка за строчкой, в течении секунды или двух.
Не так уж и долго, но зрелище раздражающее. Ведь
только для того, чтобы нарисовать один ряд такого
фона (в 11 пикселей высотой) картинка выводилась
на экран несколько сотен раз! Ошибка в том, что
человек не вдавался в тонкости формата GIF. А
последний больше всего "любит"
горизонтальные области одного цвета. И сжимает
их с максимальной эффективностью. Сравните:
BCKGRND1.GIF, размером 1х11 пикселей "весит" 42
байта, а BCKGRND2.GIF, размером 100х11 пикселей -- 80 байт.
 bckgrnd1.gif - 42 байта
 - bckgrnd2.gif - 80 байт
Более того, BCKGRND3.GIF (1000х11 пикселей) обошелся
бы автору всего в 199 байт. Вывод: даже в
ВЕБ-дизайне скупой платит дважды!
- Хороший совет для совсем начинающих. Именно
по дизайну, а не по верстке. Попробуйте сделать
сайт, используя только 3 цвета, включая текст. Три
и не больше. Я не говорю про невозможность
оттенков, их можно сделать достаточно много, но в
рамках одного цвета. Если получилось гармонично,
то попробуйте 2 цвета. Далее совет, из моего
интуитивного опыта, тоже для начинающих. Если на
странице использован какой-то элемент,
выделяющийся из общего фона, например синяя
страница, а в верхнем углу нарисовна фиговина 50*50
желтая, то надо постараться использовать этот
цвет в другой части страницы, чтобы воображаемая
прямая между ними проходила через всю страницу.
И, наконец, последний совет. Не спешите
использовать в дизайне экзотические шрифты. В
большинстве своем они выделяются из общего
дизайна, если только не натягивать дизайн на
шрифт. Получится лучше, если Вы текст, написанный
стандартным шрифтом, обработаете руками в PhotoShope
или другой графической программе до получения
нужного Вам результата.
- Задача: Облегчение работы по размещению
объектов на отдельно взятой странице (фактически
верстка).
Примечание: для тех, кто
пишет HTML-код руками или пользуется не
визивиг-овыми редакторами.
Результат: Ваши таблицы, графика, текст
находятся на странице в определенных им местах.
Способ достижения:
1. Рисуется картинка размером 1024х768 (или
меньшего размера, как кому будет удобней), на
которую наносятся вертикальные и горизонтальные
линии шириной в 1 пиксел(pixel), через каждые 50, 100
точек (соответственно примерно 1,75 или 3,5 см) и
разметка (1-я линия - "50", 2-я - "100", и т.д.).
Обращу внимание на то, что нужно рисовать
линию ограничивающую рисунок снизу потому, что в
случае, если Вы этого не сделали и у вас страница
имеет скроллинг, произойдет примерно следующее:
------+------+------
| |
------+------+------
| | <-- первый показ фона
------+------+------
| |
<-- дырка :)
| |
------+------+------
| | <-- второй показ фона
Назовем эту картинку, например table.gif.
2. Помещаем эту картинку как фоновый
ресунок, для чего в исходный код страницы пишем:
<body background="table.gif" ... >.
3. Смотрите страницу и распределяете ее
элементы в удобном для Вас виде.
4. Подкладываете реальный фоновый рисунок,
для чего пишете backgr.gif вместо table.gif.
|
