Инструменты для Бизнеса

Вынесенная в эпиграф цитата датируется 1996/98 годом, однако до сих пор сайтов, построенных по указанному правилу, практически нет. За 6 лет ситуация не изменилась - как тогда, так и сейчас шаблон страницы заключен в таблицу. И на первый взгляд альтернативы не видно. Но это только на первый взгляд. За последние 2 года изменилось очень многое. Плохо это или хорошо, но война броузеров закончилась. 95% пользователей выбрали MSIE. Это дало предпосылку к широкому внедрению одиннадцатого правила Мошкова - "Таблички не использовать". Стандарт HTML4.0 и монопольное положение единственного броузера позволяет уйти от использования таблиц и перейти к построению шаблона на слоях.

Аскетичный дизайн в стиле Библиотеки Мошкова для большинства сайтов неприемлем. Во-первых, на экранах размером больше 800х600 пикселей читать длинные строки крайне неудобно. Во-вторых, многие сайты вынуждены размещать большие рекламные блоки, а мультипорталам сложно обойтись без обширного навигационного блока. Поэтому широкое распространение получила структура сайта, состоящая из двух-трех колонок и шапки.

В первом приближении код традиционного табличного шаблона выглядит так:

Шапка

Контент появится на экране только после того, как загрузится целиком все содержимое таблицы: шапка с логотипами, баннерами и горизонтальной навигационной линейкой, левая навигационная колонка и собственно контент. При этом загрузка страницы существенно (на 25-50%) замедляется параллельной подкачкой графических элементов дизайна и рекламы.

Код шаблона выполненного при помощи слоев выглядит так:

<div id="Right" style="position:absolute; width:300px; left: 150px; top: 21px"> <b>Контент</b></div> <div id="Left" style="position:absolute; width:150px; left: 450px; top: 21px"> <b>Правая навигационная колонка</b></div> <div id="Top" style="position:absolute; width:300px;height:20px; left: 0px; top: 0px"> <b>Шапка</b></div>

В этом случае загрузка идет совершенно по другому. На экране появляется не все одновременно, как в случае с таблицами, а последовательно. Сначала на экране появится контент, затем шапка и навигация. Причем наиболее важно, то что контент отображается практически сразу, т.к. баннеры содержащиеся в шапке и навигационных колонках не тормозят его загрузку. Хотя на первый взгляд, рекламодателю предпочтительнее, чтобы появлению на экране контента предшествовало появление баннеров, рассматриваемый вариант позволяе показать рекламу большему количеству пользователей. Да и раздражение от рекламы, мешающей быстрому получению необходимой информации, немного снижается.

Суммарное время загрузки шаблона на слоях чуть больше, чем у табличного, т.к. обработка слоев требует больших ресурсов . Но здесь срабатывает психологический фактор. Контент, из-за которого пользователь пришел на сайт, в случае шаблона на слоях будет отображаться на экране с максимальной скоростью, которую позволяет канал связи. А в случае с таблицами, придется ждать загрузки практически всей страницы целиком. Известный специалист по usability Я.Нильсен полагает, что "если пользователь не получает необходимую информацию на сайте в течение 10 секунд, он ищет ее в другом месте" (ранее приводилось значение 20 секунд). Естественно, для сайта предоставляющего уникальную информацию, например об особенностях применения гомеопатии в хирургии, и 10 минут - время некритическое. Но если два разных сервера могут выдать одинаковую информацию за 3 секунды и за 10 секунд, даже избалованный выделенным каналом пользователь выберет более быстрый. Говорить о выборе тех, кто платит за каждую секунду модемного соединения и говорить не приходится.

Указать точно, какой выигрыш получит сайт от внедрения слоев невозможно. Это зависит от его структуры, соотношения объема контента и объема рекламы, провайдера и даже от аудитории. Например, поcетители РБК в большей степени оснащены хорошими каналами связи особой разницы они не заметят. А вот читательницы Календаря беременности пользуются в большей степени dial-up'ом, поэтому лишние секунды загрузки для них очень важны. Т.е. для разных сайтов время загрузки контента будет различаться. Методика же подсчета одинакова для всех. В различных точках шаблона устанавливаются картинки размером 1х1 px, которые при помощи Java-скрипта передают на сервер время их загрузки у пользователя (аналогично тому, как работают счетчики типа SpyLog, HotLog и др.). Эти данные позволяют в первом приближении оценить разницу в скорости отображения контента для обоих вариантов шаблона. Ниже приведены результаты тестирования на двух разных серверах

Таблица 1. Распределение времени загрузки контента в первом экране http://mama.ru

Примечание. Мама.Ру. Объем кода 38К. Объем графики: 52K
Количество просмотров: 13949. Дата: 2.12.2001

Что в данном случае дало применение шаблона на слоях? Если принять в расчет указанные выше оценки максимально допустимого времени отклика, получится, что на сайте удалось удержать от 15% до 35% пользователей. Замечу также, что выигрыш или потери трафика нужно учитывать не только по одной странице. Если считать, что 15% пользователей уходят с первой страницы, то вторую не дождутся уже 27% и т.д. Но это еще не все. Известны оценки минимального времени взаимодействия человека с машиной. Cогласно исследованиям Роберта Б. Миллера 1968г. (данные приводятся по книге Нильсена "Веб-дизайн"), время ожидания информации равное одной секунде - предельный промежуток времени, в течение которого пользователь не замечает задержку и работает в интерактивном режиме с максимальным комфортом. В этом случае слои обеспечивают выигрыш для 37% пользователей. Если предположить, что 3 секунды - время, за которое пользователь не успеет открыть новое окно и перейти в нем на другой сервер, получится, что в случае шаблона на слоях 78% пользователей останутся на сайте. А при традиционном табличном шаблоне вероятность этого уменьшается вдвое.

Надо отметить, что столь впечатляющие результаты можно получить только при двух условиях: или очень большом объеме главной страницы или при слабом канале у провайдера (или аудитории). В рассмотренном примере объем главной страницы вдвое превышает рекомендованные всеми пособиями 15-20К. И для данного ресурса это, скорее всего, неизбежно. Это диктуется большим количеством рекламы и новостей. Но даже для сайтов, у которых главная страницы не перегружена, слои дают заметное улучшение качества взаимодействия с пользователем. В качестве примера можно привести Мир гомеопатии

Таблица 2. Распределение времени загрузки контента в первом экране http://homeopatica.ru

Примечание. Мир гомеопатии. Объем кода 17К. Объем графики 36K
Количество просмотров: 1259. Дата: 2.06.02

Конечно, в приведенной методике оценки повышения скорости взаимодействия пользователя с сервером много неточностей. В ней не учитывается время соединения с провайдером, время прошедшее со времени загрузки счетчиков до отображения информации на экране и количество пользователей, покинувших сайт до появления хотя бы части контента и многое другое. Но качественные оценки метода вполне приемлемы и убедительно показывают преимущество слоев. Это настолько очевидно, что сразу же возникает вопрос. Почему использование этой технологии до сих пор практически не применяется? Почему слои если и используются, то только для построения меню, баннеров заслоняющих экран, игрушек и пр.?

Распространение слоев в значительной степени сдерживаются двумя факторами. Во-первых, инерцией и здоровым скептицизмом по отношению к новым технологиям. Хотя назвать стандарт HTML4 новым очень сложно. И во-вторых, наличием 5-7% пользователей Netscape, Opera, LYNX, MacOS MSIE и др. Все указанные броузеры в той или иной мере несовместимы с занимающим монопольное положение Windows MSIE. А правила хорошего тона Интернет требуют, чтобы страницы были доступны для всех мыслимых и немыслимых броузеров, даже если это идет в ущерб для 95% пользователей.

По сравнению с традиционным табличным подходом, изготовление совместимого со всеми броузерами шаблона на слоях - занятие более трудоемкое (точнее вообще нереализуемое, учитывая наличие броузеров старше четвертых версий). И хотя FrontPage или DreamWeaver позволяют без особых проблем сделать простой устойчивый шаблон, полностью эта проблема совместимости не снимается. На стадии проектирования сайт, как правило, просматривается во всех более или менее распространенных броузерах. А вот на стадии эксплуатации это не всегда бывает возможно. Хорошо, если все материалы готовятся к публикации при помощи первоклассного движка (механизма поддержки сайта) за $1500 под присмотром квалифицированного web-мастера, и все статьи не содержат сложных элементов форматирования. А если нет? Слои капризны, и любой некорректный стиль или тег (например незакрытый

) при просмотре в Opera может превратить страницу в гору мусора, Netscape будет завешивать компьютер. MSIE, намного более лояльный к ошибкам верстки, не всегда их прощает.

Какие из всего этого можно сделать выводы?

1. Если у вас есть хороший движок и/или грамотный web-master, переход на слои даст вам заметную прибавку в трафике и преимущество перед сайтами конкурентов. При этом указанные проблемы, возникающие при поддержке сайта, могут вас не волновать. А для того чтобы иметь гарантию, что будут счастливы все и никто не уйдет обиженным, сделайте 2 шаблона. Один быстрый - на слоях, другой медленный - на таблицах, без поддержки стилей и Java-скриптов.
2. Если движка нет и нет возможности проверять каждую страницу в 5-6 броузерах в 3-4 операционных системах, нужно десять раз подумать прежде, чем браться за шаблон со слоями. Хотя и в этом случае вы можете перейти на систему с двумя шаблонами. Это не так сложно реализовать даже на бесплатном хостинге.
3. Если контент вашего сайта верстался годами, вы никогда ранее не задумывались о том, что незакрытый парный тег является криминалом - забудьте обо всем, что прочитали в этой статье.