|
|
| |
Хитрости и советы
- Обязательно рисуйте все сами. Не используйте первые
попавшиеся картинки, поставляемые с 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.
|
|
|
