Все статьи

26 Советов по веб-дизайну

Общие Советы

1. При соединении с URL, который является каталогом (а не страницей), URL оканчивается левым слешем. Пропуск левого слеша в конце адреса является причиной дополнительного обращения к серверу в результате чего увеличивается загрузка сервера и вносятся ошибки в статистику.

2. Хотелось бы надеяться, что все мы сжимаем изображения до минимально возможного размера файла так, чтобы они загружались настолько быстро насколько это возможно. Однако после загрузки изображения, компрессия не имеет значения. Фактически необходимо рассматривать действительный размер пиксела изображения. Для того чтобы отобразить картинку, броузер должен декодировать ее в битмап. Все изображения одного размера пиксела требуют одинаковый объем памяти в ходе отображения. Большие изображения требуют больших объемов памяти - на это пользователи всегда обращают внимание.

3. Если Вы хотите знать, когда веб-страница была изменена последний раз, откройте страницу, и напечатайте следующий кусочек Javascript-кода в поле "Адрес" вашего броузера. Нажмите ввод, и окно покажет дату последнего изменения веб-страницы. Обратите внимание: это будет работать только на веб-страницах, которые не используют Javascript.

javascript:alert(document.lastModified)

4. Вы можете использовать буфер обмена в Windows, чтобы создать скриншот окна вашего броузера. Откройте веб-страницу в броузере, нажмите Alt +Print Screen, чтобы скопировать активное окно в буфер обмена (нажатие только Print Screen копирует весь экран). Откройте графическую программу и вставьте изображение из буфера обмена.

5. Включайте тему и авторский экземпляр в ссылке на электронную почту, используя следующий HTML код:

mailto:name1@domain.com?subject=Hi?cc=name2@domain.com>

Советы по совместимости

6. Некоторые версии Netscape Communicator 4 виснут при обработке прозрачных GIF-изображений. Иногда изображения отображаются как сплошные черные. Чтобы обойти эту проблему, попробуйте сделать первый пиксел в ваших GIF-изображениях непрозрачным.

7. Удостоверьтесь, что TR и TD тэги вложенных таблиц закрыты. Если Вы не сделаете этого, ваши таблицы в Netscape Navigator могут отображаться неправильно.

8. Будьте осторожны при использовании символа перехода на новую строку в ваших HTML документах. Некоторые программы просмотра интерпретируют символ перехода на новую строку как обычный пробел. Это может привести к нежелательным пробелам на вашей веб-странице.

Советы по поводу кеширования

9. Если Вы часто обновляете содержание веб-страницы и не хотели бы чтобы она была кеширована, попробуйте добавить следующие команды в веб-страницу. Expires-тэг будет работать на большинстве броузеров. Указанная в коде дата обрабатыватся броузером так, что он либо отказывается от копии из кэша, либо не кэширует страницу вообще. Команда отмены кэширования не допустит кеширование веб-страницы в Netscape Navigator.

<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Бизнес советы

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

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

Советы, касающиеся шрифта

12. Сглаженный шрифт более четкий при небольшом увеличении размера символа. Установив межбуквенное расстояния равное четырем (экспериментально, это зависит от начертания шрифта) вы сделаете текст более читаемым даже при маленьких размерах шрифта.

13. Как правило, не стоит использовать сглаженный шрифт, размер которого меньше 10-ти пиксел.

14. Старайтесь делать блоки текста как можно более узкими. Для большей удобочитаемости, строка должна содержать приблизительно двенадцать слов.

Советы по организации, тестированию, дизайну, графике и промоушэну

Советы по организации веб-сайта

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

Советы по тестированию

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

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

Советы по проектированию

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

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

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

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

Советы относительно графики

22. Чтобы уменьшать размер JPEG файла, примените небольшое размывания к изображению.

23. Чтобы уменьшать размер GIF файла, уменьшите число используемых цветов и сделайте каждую цветовую область как можно больше.

24. Если Вы хотите закодировать цветовой фон веб-страницы, указывая в качестве фона GIF изображение, цвет фона в различных броузерах может не соответствовать первоначальному. Чтобы избежать проблемы искажения цвета, создайте маленький GIF файл (16x16 пиксели или около того) требуемого цвета, и используйте его как мозаичный элемент фонового изображения.

25. Легко создать текст в Photshop, создав и выровняв надпись в ее собственном слое, затем перетащив слой на иконку 'новый слой', пометив чекбокс "Сохранить прозрачность", выбрать новый цвет текста и нажать ALT+Backspace, чтобы залить текст новым цветом.

Совет по промоушэну

26. Размещайте тэг <TITLE> прямо за тэгом <HEAD>. Некоторые поисковые машины дают более высокий рейтинг первым словам, которые они находят на веб-странице. Убедитесь также, что вы включили наиболее важные ключевые слова в заголовок вашей веб-страницы.

Ещё рекомендуем прочитать:

Рисунок сотен слов дороже нам
Что такое стильный web-сайт?
Основы цвета. Пространственное воздействие цвета
Шрифт в дизайне
Таблица психологического воздействия цвета

Внимание!
Цитирование авторских материалов допускается только при условии прямой гиперссылки на «Introweb.ru»!