К этому нужно добавить - только очень терпеливый юзер будет пялиться в экран несколько минут. Пользуясь услугами dial-up "нескучного" Cityline, я всегда избегал заходить на 95-килобайтную Ленту.Ру Дождаться ее загрузки у меня не получалось.
Вынесенные в эпиграф статья датируется 1996/98 годом, однако до сих пор сайтов построенных по указанному правилу практически нет. Что старый стандартный двухколонный дизайн, что новый трехколонный большинства сайтов заключен в таблицу и еще одну таблицу и много других вложенных таблиц. В общем, за 6 лет ситуация с таблицами, на первый взгляд не изменилась и альтернативы не видно. Но это только на первый взгляд. Главное, что произошло - сошли на нет броузеры MSIE3 и NN3, не поддерживающие слои. А поскольку ожидать радикального улучшения качества связи не приходится, единственное, что может как-то улучшить ситуацию - построение сайтов на основе слоев.
Сравним построение шаблона на таблицах и слоях применительно к типовому сайту. Как правило, он из трех частей - шапки и двух колонок, одна из которых содержит основную информационную часть, другая - вспомогательные элементы (навигацию, баннеры, ленты новостей и пр.) В первом приближении табличный шаблон сайта выглядит так:
<table width="600">
<tr>
<td colspan="2" height=20>
Шапка
</td>
</tr>
<tr>
<td width='200'>
Навигационная колонка
</td>
<td width='400'>
Контент
</td>
</tr>
</table>
Контент, появится на экране только после того, как загрузится целиком все содержимое таблицы - шапка с логотипами, баннерами, и горизонтальной навигационной линейкой, левая навигационная колонка и собственно контент. При этом загрузка страницы замедляется параллельной подкачкой картинок.
Шаблон на слоях выглядит так:
<div id="Right" style="position:absolute; width:400px;
left: 200px; top: 21px">
Контент
</div>
<div id="Top" style="position:absolute; width:600px;
height:20px; left: 0px; top: 0px">
Шапка
</div>
<div id="Left" style="position:absolute; width:200px;
left: 0px; top: 21px">
Навигационная колонка
</div>
В этом случае загрузка идет совершенно по другому. На экране появляется не все одновременно, как в случае с таблицами, а последовательно. Сначала на экране появится контент, затем шапка и навигация. Причем, наиболее важно то, что контент отображается по мере загрузки. Т.е. пока пользователь ознакомится с содержимым первого экрана, второй экран будет уже заполнен.
Суммарное время загрузки шаблона на слоях чуть больше чем табличного. Но здесь срабатывает психологический фактор. Контент, из-за которого пользователь пришел на сайт, в случае шаблона на слоях будет отображаться на экране с максимальной скоростью, которую позволяет канал связи. А в случае с таблицами, придется ждать загрузки практически всей страницы целиком. Известный специалист по usability Я.Нильсен полагает, что "если пользователь не получает необходимую информацию на сайте в течение 10 секунд, он ищет ее в другом месте" (по более ранним данным, критическое время отклика равно 20с).
Как можно подсчитать выигрыш полученный от использования слоев? Методика достаточно простая. В различных точках шаблона устанавливаются картинки размером 1х1 px, которые при помощи Java-скрипта передают на сервер время их загрузки у пользователя (аналогично тому, как работают счетчики типа SpyLog или HotLog). Эти данные позволяют, в первом приближении, оценить разницу в скорости отображения контента для обоих вариантов шаблона. Проверку я проводил на главной странице сервера www.mama.ru Ниже приведены результаты тестирования
Таблица 1. Распределение времени получения контента
|
Время [c] |
<1 |
<3 |
>10 |
>20 | |
|
% полного отображения контента первого экрана за заданное время |
таблицы |
9% | 37% | 35% | 15% |
|
слои |
45% | 78% | 2.3% | 0% | |
Что в данном случае дало применение шаблона на слоях? Если принять в расчет указанные выше оценки максимально допустимого времени отклика, получится, что на сайте удалось удержать от 15% до 30% пользователей. Замечу также, что выигрыш или потери трафика нужно учитывать не только по одной странице. Если считать, что 15% пользователей уходит с первой страницы, то вторую не дождутся уже 27% и т.д. В книге Нильсена "Веб.дизайн. Designing Web Usability" приводятся также данные, согласно которым, время отклика <1с - неощутимо, а <3c - ощутимо, но не вызывает дискомфорта. Отказ от таблиц, в этом случае, дает выигрыш для 36 и 43% пользователей, соответственно.
Казалось бы выигрыш очевиден. Почему же использование этой технологии до сих пор широко не применяется? Причины две.
- Несовместимость броузеров и некоторые проблемы со слоями у Netscape и Opera, увеличивают трудоемкость разработки и отладки шаблонов, а ранние версии броузеров (MSIE, Netscape версии ниже 4) вообще не поддерживают слои.
- На стадии проектирования сайт, как правило, просматривается во всех доступных актуальных броузерах (броузеры Mac и Unix актуальны, но не всем доступны). А вот на стадии эксплуатации, это не всегда бывает возможно. Хорошо, если все публикуемые материалы готовятся непосредственно в редакции сайта, оснащенной первоклассным механизмом поддержки контента (движком) за $1500, а статьи не содержат сложных элементов форматирования. А если нет? Слои капризны, и любой незакрытый парный тег (например <p> или <i>), при просмотре в Opera, превращает страницу в гору мусора. Netscape в таких случаях выдает сообщение о неустранимой ошибке и выгружается из системы. Даже MSIE не всегда прощает подобные ошибки.
Какие из всего этого можно сделать выводы?
- Если у вас есть хороший движок и/или грамотный web-master, проблемы поддержки сайта не должны вас волновать, и переход на слои, не создавая особых проблем, даст заметную прибавку в трафике.
- Если движка нет и нет возможности проверять каждую страницу в 5-6 броузерах, нужно десять раз подумать, браться за шаблон со слоями или пренебречь пользователями MAC, Unix (3-7%).
- Если Ваш сайт имеет хорошую посещаемость, у вас есть время, над вами не висит начальство со сроками и планами - делайте два шаблона. Один - для основной массы посетителей, другой для Mac и Unix.
- Ну и наконец, если контент вашего сайта верстался годами, и вы никогда ранее не задумывались о том, что незакрытый парный тег является криминалом, о переходе на слои лучше и не думайте.
Литература по Internet
