Регистрация Вход
Библиотека /
Поиск по библиотекеМоя библиотекаИскать книгу(обмен)

Максим Мошков. Правила хорошего тона в 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-СКРИПТОВ


- документ без временного штампа не сохраняется в локальном кэше, и постоянно перезасасывается при просмотре что-нибудь другое - Прокси-серверы не кэшируют URL вида http://host.name/cgi-bin/file/name.txt и каждый раз вынуждены обращаться к вам на сервер. автоматическим угадыванием кодировки + Да, если не взводить это поле, то на 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 и ValueClick платят деньги. Это новые посетители от остальных - linkexchange'ных показов.

Давайте посчитаем


за тысячу, и в лучшем случае удается продать около 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

Наша библиотека является официальным зеркалом библиотеки Максима Мошкова lib.ru

Реклама