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

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

 
  • Максим Мошков. Правила хорошего тона в 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


    Home | UK Shop Center |Contact | Buy Domain | Directory | Web Hosting | Resell Domains


    Copyleft 2005 ruslib.us