Максим Мошков. Правила хорошего тона в 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. Максим Мошков.
Естественно на эту тему есть странички других
вебмастеров. Они могут советовать диаметрально противоположные
вещи. Что поделать - таково их imho.
Кстати, один из главных советов вебсайту - не исчезать из сети.
К сожалению - многие советчики сами этому совету не всегда следуют.
10 советов Артемия Лебедева
Вредные советы на hobby.ifmo.ru (?)
Секреты вебмастера. (Планета Интернет, No 5)
Золотые правила плохого HTML
Last-modified: Thu, 10 Jul 2003 05:17:57 GMT