Рекомендации о веб-дизайне


- Мои сотрудники написали новый движок к сайту
- Какие требования у движка к серверу?
- Говорят ещё не знают
Реальная переписка

Премамбула

Нет, мы не собираемся никого учить.
     Мы не стремимся заменить этим текстом ру-ководства и книжки по HTML.
     Здесь говорится то, что почему-то не было сказано или просто не встретилось нам ранее.
     К сайту, оформленному в соответствии с нашими рекомендациями - мы просто чуть-чуть лучше и внимательнее относимся. :-)

Небольшой список сайтов, которые мы сочли ИДЕАЛЬНЫМИ с нашей колокольни:

Амбула

Постановка задачи

Вы решили делать сайт. Подумайте: Ответив на все эти вопросы - расскажите эти ответы хотя бы трём-четырём будущим посетителям сайта.
     И только после этого - вперёд!

Заметки о CMS

Если на заглавной странице Вашего сайта висит текст:

Краткие новости
Joomla! 1.0 - 'Испытайте свободу'!. Еще никогда не было столь простого способа создать свой собственный динамический сайт. Управляйте всем своим содержимым с помощью лучшего интерфейса администрирования CMS.

то Вы - не охотник вебмастер, а пидарас.

О статическом и динамическом контенте

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

О графике

Графику следует оптимизировать. Это значит, что 256-цветные gif-изображения, содержащие только два или четыре цвета, или большие jpeg-файлы, сохранённые с 95%-ным качеством не порадуют посетителя. Графику следует приводить к минимальной палитре, необходимой для передачи тех оттенков цвета, которые Вам нужны.
     Имейте в виду, что суммарные объёмы графики объёмом более 100K на одной странице считаются дурным тоном, и могут быть оправданы только если речь идёт о показе высококачественной графики (фото, картины) как о основной задаче сайта или его раздела.
     Так же вряд ли стоит жестко ограничивать размер или терять качество картинок, если речь идёт о сайте, на котором хранятся большие файлы (MP3, AVI, Realvideo...). Пример? Авторский сайт Антона Батагова.
     Можно считать, что если суммарный размер нафигационных картинок (кроме логотипа фирмы) меньше размера одного файла HTML, в котором они упомянуты - то Вы правильно оптимизировали графику на странице.

О шрифтах

Вы уже выставили себе на экране цвет фона, любимый шрифт, его размер и цвет? Пользователь, который придёт на Ваш сайт - тоже ведь выставил. Если на Вашем сайте есть тексты длиннее 1 абзаца - ОСТАВЬТЕ им Default шрифт, НЕ фиксируйте размер и Font Face основной массы текста!
     Бесконечно раздражают уеб-дезигнеры, которые считают, что пользователь ОБЯЗАН читать текст, набранный буквами высотой в пять-шесть пикселей. И при этом - что более важно - ЗАПРЕЩАЮТ оному пользователю менять размер шрифта (кнопочка "A" в интернет-эксплорере), так как "типа круто - 9 пойнтов шрифт везде показывается пральна!".
     Помните, что на разных платформах используются совершенно разные шрифты. Категорически не рекомендуем явно указывать имя шрифта, особенно если он экзотический. Однако, даже привычный Arial или Times New Roman, как ни странно, присутствует далеко не везде. Хорошим тоном считается указание семейства шрифтов (серифные, несерифные, декоративные и т.п.) в конце списка вариантов CSS. Например: <... ... font-family = "Anna, Arial, sans-serif"> то есть - сначала то, чего Вы хотели бы, потом - то, что более или менее подходит из распространённого, и, наконец, семейство шрифтов, которое подходит по классу, если уж на компьютере пользователя нет совсем ничего из Вами упомянутого.
     Применяя Downloadable Fonts, проверьте - как будет смотреться результат при выключенной опции "Download Fonts". У подавляющего большинства параноиков под Windows загрузка шрифта выключена, ибо при незавершённой загрузке файла по http протоколу сформированный в результате битый шрифт может положить Windows до синего экрана. Аналогичный эффект с лёгкостью производит слишком большой по размеру загружаемый шрифт (например, китайский).
     Так же стоит отметить, что очень трудно придумать задачу, для которой действительно НЕОБХОДИМЫ загружаемые шрифты. Однако трудно пройти мимо гармоничных по содержанию и оформлению сайтов, которые бы много потеряли без применения для основного текста загружаемого шрифта. Пример - Радио Духовный Антихрист.

Удобно ли пользователю читать?

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

Зачем надо проверять работу сайта в различных броусерах?

эпоха сменилась. Большинство пользователей давным-давно имеют дело с интернетом с гаджетов, на которых броусеры РАЗНЫЕ, и порой ну очень странные.

Сайт следует тестировать на разных платформах и браузерах, наша средняя статистика показывает, что не менее 25% посетителей применяют сочетание отличное от Windows/MSIE.
     Рекомендуем тестировать сайт в NN3, NN4, Opera, Mozilla. Это позволит убедиться в корректности по отношению к поддержке Java-script и слоёв.
     Если Вы дочитали до этого места - Вы, скорее всего, имеете достаточную склонность к мазохизму. А потому мы рекомендуем Вам для получения наиболее убедительных результатов применить для просмотра своего сайта Интернет Эксплорер 2.0. Найти его нелегко - но поставив Windows NT 4.0 Server или Workstation, вы обретаете именно этот броусер в системе... Пробуйте. :)



[ ]