Максим Мошков. Правила хорошего тона в WWW

Как надо и как не надо оформлять HTML-документы? Основная идея - будьте реалистами - думайте о своем посетителе. А посетитель этот сейчас, в 1998(*) году живет под MS Windows 95 на PC/P586 RAM 16M, и экран у него 14 дюймов. И модем у него 14400, шипящий по паршивой телефонной линии. Использует он Netscape 3.0 или 4.0, Java отключена по соображениям безопасности, загрузка картинок - тоже - чтоб не платить свои кровные денежки за дизайнерские многокилобайтные графические изыски. Вы спросите - а как же MS Explorer и ActiveX? Чтож, есть и такие - их 37%, у них под рукой дистрибутив Win95, и они не боятся, что сквозь дырку в ActiveX им отформатируют drive C:

---

Устарело: (*)посетитель этот сейчас, в 1996 году живет под Windows 3.11 на PC/P486 RAM 4M, и экран у него 14 дюймов, графическое разрешение 640x480 16 цветов. И модем у него 9600, шипящий по паршивой телефонной линии. Использует он Netscape 2.0.

---

Обозначения

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

Идеология

Изредка задумываться - нужна-ли хоть кому-нибудь в мире информация, лежащая на home-page
- сколько таких страниц "о себе любимом" вы уже посетили? Что при этом чувствовали?

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

Технология

ВСЕГДА СТАВИТЬ Last-Modified АТРИБУТ В ВЫДАЧУ CGI-СКРИПТОВ
- документ без временного штампа не сохраняется в локальном кэше, и постоянно перезасасывается при просмотре

Переименовать свою директорию CGI-скриптов из cgi-bin во что-нибудь другое
- Прокси-серверы не кэшируют URL вида http://host.name/cgi-bin/file/name.txt и каждый раз вынуждены обращаться к вам на сервер.

Всегда устанавливать поле Last-midified у Русского-Апача с автоматическим угадыванием кодировки
+ Да, если не взводить это поле, то на proxy-серверах не застрянут файлы в неккоректной кодировке.
- Но насколько напрягутся все остальные юзеры (а их >95%), и сам веб-сервер...

Избегать "широких" документов не влезающих в экран по ширине
- пускай юзер купит себе монитор 25", или ковыряется мышкой в попытке проскроллировать документ по горизонтали
+ Картинки - поменьше, избегайте широких преформатированных PRE текстов, а так же широких таблиц, и все будет Ok
+ Избегать можно, но иногда приходится искать разумный компромис. Можно сделать так, чтоб вся ВАЖНАЯ информация была всегда слева.

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

Никаких мегабайтовых wav и au файлов
- никто никогда не дослушает их до конца
+ формат real-audio примерно в 10 раз компактнее

Никаких Java-апплетов
- Netscape падает в коре без объяснения причин
- Глупое приветствие, ползущее в статус строке загораживает координаты линков

Помечать, какой линк "свой" а какой - "чужой"
- "...ах как легко заблудиться..."

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

Фреймы не использовать
- Теряется пространство. В Netscape 2 из фрейма нельзя выйти кнопкой "back". Кнопка "reload" внутри фреймов не работает, "View document source" тоже. В итоге юзер попадает в непривычный для него интефейс.
+ внутри фреймованых текстов ставьте "TAGET=anotherscreen" внутрь A HREF ссылок на внешние документы, чтоб они открывались на просмотр в целом окне а не внутри фрейма
+ Netscape версии 3 и больше работает с фреймами уже достаточно удовлетворительно. Но все равно - фрейм хорош только там, где он хорош, а в остальных местах он только вреден.
- Netscape младше 4 версии не умеет делать релоад внутри фрейма

Не делать суперобложек, максимум info в головную страницу
+ это так стильно: на первой странице - просто логотип и выбор кодировки, а затем уже вход на основную страницу.
- Среднестатический юзер на любую страницу заходит в среднем на 3-4 клика. За эти 3 клика надо успеть донести до него - какой сайт хороший - "суперобложка" Logo+encoding означает, что один клик уже потерян, на "завоевание" зрителя остается только 2.
- Поисковые роботы заходят на сайт в среднем раз в 3-6 месяцев и за один раз проходят только один уровень сайта. Суперобложка означает, что робот доберется до вашей информации на 3 месяца позже.

"Under-construction" не применять
- Да простит меня интиллегентная публика, но этот мужик с лопатой и шлагбаумом, да еще animated, уже просто за-дол-бал!
- Неработающий линк лучше совсем не показывать - тогда, когда он наконец появится, постоянный посетитель сразу его заметит по цвету. Помнить же у кого на каком сайте еще недоделано - выше человеческих сил.
+ Если хотите показать, что ваш сайт все время в работе и достоин регулярного посещения, сделайте регулярно обновляемый "What new"

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

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

О картинках и дизайне

Не класть пестрые темные картинки в background
- невозможно читать текст
- долго ждать полной загрузки документа

Ставить только 256-цветные или 16-цветные картинки.
- Зритель с 8-мибитной картой все равно увидит вашу труколорную картинку рябой и побежалой - так не обманывайте себя.
- При использовании 256 цветной палитры необходимо следить, чтоб на всех картинках была ОДНА И ТАЖЕ ПАЛИТРА! Или использовать Netscape-палитру(216) цветов), или соптимизированную палитру на 128, 64 или даже 32 цвета!

Делать inline-иконки с помощью internal-netscape-images
- долго ждать закачки текста
+ MS Explorer не понимает встроенных в internal-netscape-images
+ При печати сам Netscape internal-иконы не распознает

СТАВИТЬ WIDTH/HEIGHT В IMG SRC
- текст не показывается, пока все картинки не прокачаются

Картинки в jpg и не больше 40 kb
- невозможно дождаться, пока огромный gif доедет до конца
+ естественно, надо смотреть, по месту какой формат предпочтительней - в текстовых картинках (карты, рисунки, текст, иконки) gif оказывается компактней.

НИКАКИХ ANIMATED-ГИФОВ
- Дохлый PC свапуется и еле мышью шевелит
- Мелькание в статус строке загораживает координаты линков
- Неоднократно замечалась "руханье" netscape на сильно "дерганых" страницах.
- Из-за ошибки в Netscape-навигаторе он постоянно перезапрашивает animated-гиф по сети, посылая запрос на сервер каждые 10-15 секунд Представьте, что на вашу страницу с 10 анимированными гифами зашло двадцать Netscape и просто смотрят на нее ни во что не кликая. Netscap'ы сами начнут слать вашему серверу IFMS-запросы в темпе 20 запросов в секунду.
+ Впрочем, если у вас веб-сервером Sequent или HP-9000 сервер модели V, то он и 200 запросов секунду выдержит.

Избегать больших interlased gif'ов
- Netscape заметно тормозит при его показе
+ лучше вместо interlased гифа подложить в img src=... дополнительный параметр LOWSRC=small-black-white-dithered.gif

"Управляющие" иконки дублировать текстом и alt-текстом
- Сайт ДОЛЖЕН быть ПОЛНОСТЬЮ ФУНКЦИОНАЛЕН даже при полном отключении графики. К 2%, использующих lynx добавьте еще 20% веб-серферов отключающих графику в своем броузере.
- Этого вам недостаточно? Тогда добавьте сюда еще поисковых роботов - не думайте, что они отOCRят и проиндексируют ваши gif'ы

Не вешайте чужих баннеров и кнопок, если за них вам не платят
- Картинка с наградой - это для вас она награда, а для наградителя - бесплатно размещенный баннер на вашей корневой странице
- "Best viewed with Netscape/Explorer", да еще заAHREFленная - прямая реклама корпораций Microsoft или Netscape.
+ Сделайте отдельную некорневую страничку "Награды", на которую и поставите все ссылки и url ваших наградителей и любимых производителей софта.
+ картинки с наградами на корневой странице делайте некликабельными
+ Или пусть они вам заплатят. Деньгами, кликами, банерами, услугами, борзыми щенками и т.п.

Не связывайтесь с интернет-магазинами, платящими проценты с продаж
+ Пошлешь туда за месяц 1000 человек, из них 20 купят там что-нибудь на 5 долларов, 3% - вам. 3 доллара в месяц. Заработок, однако.
- Комиссионные с торговли кассетами, CD, книжками, майками - мизерны. Интернет-магазин получит с вас массу посетителей практически задаром. Если бы он заплатил за них или за свои баннеры хотя бы по демпинговым ценам ValueClick'а (3-10 центов за клик) или российских баннеропоказов (от 10 долларов до 10 центов за тысячу _показов_, не кликов!), это обошлось бы ему в десятки и сотни раз дороже.
+ Возможно, комиссионные с _дорогих_ товаров (авто, путевки, авиабилеты...) смогут себя оправдать. (Хотя не удивлюсь, если и здесь будет кидалово).

Лишние имаджи = потерянные деньги
+ Многие хостеры не берут денег за траффик и размеры графики можно не считать.
- Но часто включают счетчик на _входящий_ зарубежный траффик. Помните, что сам HTTP-реквест от зарубежного посетителя - _входящий_ Всего-то в нем 200-300 байт. Но если у вас на каждой страничке по 20 гиф-файлов с оформлением, то один HTML-клик из-за заграницы обойдется в 4Кб входного трафика. Помножимна 10 тысяч страничек в день да на 30 дней - 1.2Gb - входящей зарубежки. 100-200 баксов - как с куста.

О броузерах

Страница должна быть смотрибельной в ЛЮБОМ броузере
+ Отсматривать свой сайт 5-ю разными броузерами. MSIE, Netscape 4.75, Netscape 3, Opera, Lynx А так же см. "Viewable With Any Browser"
- Диалектизмы HTML-я одного броузера непонятны в другом.
- Вывеска "Optimized for Explorer" означает - "Сайт изготовлен артелью Напрасный труд": MSIE на начало 1998-го использует только 37% всех посетителей, Netscape - 60%.
- В 2000 году 80% Юзеров все равно пользуются MSIE
+ Сервер может генерить страницу "под конкретный броузер" if ( $ENV {HTTP_USER_AGENT} =~ /MSIE/i ) { ... }else { ... }

Русские буквы

<meta http-equiv="Content-Type" content="text/html; charset=ЧТО-ТО">
Очень стремный таг. Обращаться с осторожностью. Если httpd-сервер с автоматической поддержкой кодировок то этот таг применять _КАТЕГОРИЧЕСКИ НЕЛЬЗЯ_

Все страницы в кодировке koi8 для Netscape и Explorera рекомендуется выдавать со взведенным заголовком charset=koi8-r Тогда броузер (даже под виндами) автоматически подстроит кодировку, и покажет ее корректно.

Взводить charset для броузера Lynx не рекомендуется. Старые версии lynx'а предлагают сгузить подобные странички на диск, а в новой, хоть и есть возможность сконфигурироваться на koi8-r, но тогда он перестанет читать странички с charsetом iso8859-1 !!!

Charset устанавливается HTTP-headerом со стороны сервера

---

Content-Type: text/html; charset=koi8-r

---

Лучше всего сконфигурировать httpd-сервер, чтоб он сам взводил charset. Это умеет делать, например "Русский apach" Это легко сделать в cgi-скрипте ему - достаточно печатать в обязательном заголовке вместо "Content-Type: text/html\n\n" "Content-Type: text/html; charset=koi8-r\n\n"
charset можно взвести и на самой html-страничке, добавив в нее таг <meta http-equiv="Content-Type" content="text/html; charset=koi8-r"> Но это чревато массой сопутствующих неприятностей и я не могу рекомендовать такой метод добавления charset'а.
Про русские буквы мы еще поговорим, надо только набраться духу. Много информации к размышлению найдете на кирилизаторском сайте Андрея Чернова
http://www.nagual.pp.ru

Баннеры

Рекламные баннеры - это зло для клиента. Практически всегда они не по теме материала страницы. Согласитесь, забавно увидеть на религиозном сайте баннер с голой теткой. Разбивается дизайн. Прокачка дополнительных килобайтов бьет по карману диалап-юзера. Img src, да еще с relocation - это 2 лишних DNS-resolving. Баннер и текст на разных хостах, как следствие - неравномерность загрузки страницы. Многие сети (кстати, надо составить черный список) ставят в баннер expires=0, из-за этого по сайту невозможно быстро перемещаться - "Back" тормозится, пока не подсосется новый бантик. Каждый норовит подослать свой cookies, причем - каждый раз новый, хотя и обещает его использовать при _всех_ обращениях к рекламному хосту.
И еще. Баннеры, которые вы заработали дадут вам некоторое количество новых посетителей. Но ведь баннеры крутятся и на вашем сайте. И _ваши_ посетители иногда уходят по ним. Приобретая новых, вы теряете старых. И иногда - даже больше, чем приобретаете.
Я трижды подумал бы, прежде чем в свою страницу 404 ставить баннер - мне нужно, чтоб промахнувшийся юзер уходил ко мне. А баннер вместо этого его от меня уводит, причем навсегда. Задумайтесь - стоит ли надрываться на других страницах копя показы под 2% ctr, и при этом царским жестом избавляться от своего - уже пришедшего к вам клиента - ради одно(!) показа. Прикиньте - заманить юзера вам стоило 50 показов, а теперь вы этого юзера отпускаете обратно - за жалкий 1 показ.


Не ставьте баннеры на самый верх
- Баннер сверху отнимает 1-2 реквеста из 4 - и в итоге грузится вперед тормозя ваши сайтовые картинки
- При движении по сайту "back" страница на которой посетитель уже был вместо того чтобы сразу показаться из кэша, не прорисовывается, пока не пройдет прокачка верхнего баннера (он ведь вверху и expired)
+ Баннер вверху ставить можно - если за него платят 10 долларов за 1000.
+ в ссылке на img src баннера вместо hostname ставьте IP - сэкономите посетителю dns-ресолвинг - а это 2-30 секунд.
- Ставьте в a href баннера target=_blank чтоб он открывался в новом окне

Выделяйте баннер как баннер, подписывайте, что "здесь реклама"
- Умельцы делают баннеры с кнопочками навигации, надписями "смените кодировку" - на прозрачном фоне, или голыми тетками и прочие приколы. Чтоб посетитель по ошибке не принял такой баннер за часть вашего сайта - выделяйте и отделяйте баннероместо как только сможете. Помогает border=1, table bgcolor=black, подписи "RLE Banner Network", "Здесь реклама"...
To be continued.

- Методы борьбы с банерами. Говорят, грамотные фильтры прокси-серверов умеют ампутировать все gif-ы размера 468x60. Довольно действенны ACL-списки на прокси сервере. Подробнее об этом и о других методах см. статью "Как не получать рекламы через Internet"
+ Говорят, рекламные баннеры - это счастье для вебмастера. Это живые деньги за показ коммерческих фантиков. DoubleClick, Burst, FlyCast,24/7 и Val­ ueClick платят деньги. Это новые посетители от остальных - linkexchange'ных показов.

Давайте посчитаем. Оптовая закупка баннеров - обычно около $0.1-0.5 за тысячу, и в лучшем случае удается продать около 5-10% рекламной площади. Берем сайт с 1000 визиторов в день, средней глубиной просмотра 5, и двумя баннерами на странице.

1,000*5*2*30 = 300,000 баннеров в месяц * 10% * 0.5 цента = 15$

Теперь посчитаем, что нам даст linkexchange. Замечательные баннеры типа "Format your drive [Yes/No]" давали аж 30% кликабельность. Но, боюсь, все диски в интернете уже отформатированы, и расчитывать надо на добротных середнячков баннерного дизайнерства дающих 3% визитов за показ. Не забыв отдать 15% комиссионных считаем:

300,000 баннеров в месяц * 85% * 3% = 25% посетителей дополнительно.

Итак, замозолив глаза 29,000 (97%) посетителей навязчивой рекламой, вебмастер получает дополнительно 25% посещаемости и 15$ в месяц навара. Неплохая прибавка к пенсии. Правда он забыл в этих расчетах поделиться наваром с хозяином хоста, заплатить за трафик и аренду дискового пространства. Но это понятно - он ведь (был) некоммерческим сайтом и все это имел бесплатно.

Кстати, мой собственный сайт имеет 4,000 посетителей в день, и средняя глубина просмотра на нем 10 кликов. Если посчитать по примененным в предыдущем примере формулам, получится 60$ в месяц и 50% прирост посещаемости. (Может все же провести на себе эксперимент? :^)

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

From: Pasha Khodakov Date: 31 Oct 98 Статистика сегодняшнего дня для одинаковых баннеров MUSIC RU из сетей: баннер IR RRU показов / CTR показов / CTR lalka.gif 4695 / 1.95 % 5341 / 5.6 % music1.gif 2022 / 1.48 % 3024 / 5.0 % cat.gif 4057 / 2.26 % 1473 / 3.2 %
А здесь меняют клики. Кстати, тут тоже можно прогадать, получив для показа баннер с CTR 0.1%
http://click.ipc.ru
Сравнительные характеристики ведущих баннерных систем

Для рандомизатора в баннерном коде вместо CGI-скрипта (rb2,rru и т.п.) можно использовать просто подстановку переменных, определенных в SSI - текущее время, текущий url, текущий IP клиента - тут все что угодно можно подставить. Простейший пример:
<!--#config timefmt="%m%d%M%S"--> <a href=http://rb2.design.ru/cgi-bin/href/nit?<!--#echo var="date_local"-->> <img src=http://rb2.design.ru/cgi-bin/banner/nit?<!--#echo var="date_local"--> ismap></a>

Эпилог

Не учите жить других
- им это не поможет
+ а если взялись учить других, то получайте от этого удовольствие

Regards. Максим Мошков.