Вчера ко мне обратился представитель проекта dev.by с предложением дать небольшую оценку верстки представленного на суд общественности нового варианта главной страницы главного белорусского портала tut.by для написания какого-то масштабного материала о главной новости Байнета 22 декабря 2009 года. В твиттере я уже поплевалася на эту тему, теперь могу аргументировать свое мнение. Сразу оговорюсь, что я не буду касаться оценки аспектов дизайна и usability проекта, которые не имеют прямого отношения к верстке, хотя и поэтим моментам у меня есть свое мнение.

В целом, новую верстку tut.by можно охарактеризовать как «WTF»? Портал, претендующий на звание местного Яндекса выкатывает вот такое, простите, технологически ущербное убожество. Подобное качество работы для такого уровня проекта просто недопустимо. Среди основных отрицательных качеств кода можно отметить отсутствие его «чистоты», неграмотное применение технологий, применение устаревших технологий, а также отсутствие качественной оптимизации верстки.

В моем понимании «качественной верстки» подразумевается наличие ряда критериев, среди которых наиболее важными будут:

1. разделение структуры документа, его стилистического оформления и его поведения;
2. использование (x)HTML-тэгов в соответствии с их прямым семантическим назначением;
3. минимизация структурных (x)HTML-тэгов по отношению к контенту документа;
4. использование актуальных методов, приемов и технологий;
5. оптимизация (x)HTML, CSS, JS и изображений;
6. ну и валидация как инструмент, а не самоцель.

Рассмотрим подробнее доступные исходники главной страницы new.tut.by и выясним, за что верстальщика проекта можно лишить премии.

Разделение структуры документа, его стилистического оформления и его поведения

Первое, что бросается в глаза это наличие inline-стилей CSS прямо в коде XHTML.

<input type="submit" name="send" value="Ответить" style="border-left:3px solid #13A833; height:16px !important;" />

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

Помимо инлайновых стилей верстальщик не постеснялся использовать многочисленные инлайновые JS в обработчиках событий.

<a href="http://radio.tut.by/player/index.html" title="Радио ТУТ" target="_blank" onclick="return !window.open(this.href,'','width=520,height=175,menubar=0,resizable=0,scrollbars=0,status=0,titlebar=0,toolbar=0,top=10,left=10')">

Подобные вещи также нарушают принципы разделения структуры и поведения, заодно увеличивая долю не кэшируемого кода, относясь тем самым еще и к пункту качества верстки, относящемуся к оптимизации.

Использование (x)HTML-тэгов в соответствии с их прямым семантическим назначением

Чем руководствовался верстальщик, выбрав таблицы для имитации табов (закладок) в соответствующих блоках сайта, я не знаю. По-моему, войны div vs. table уже давно завершились и применять их сегодня по непрямому назначению могут вынудить лишь крайние обстоятельства. Лично я с момента перехода на с табличной верстки на семантическую ни разу не столкнулся с необходимостью оформления какого-либо элемента страницы через таблицы, если только этот элемент не является непосредственно таблицей. Хотя, Виталий Харисов и Андрей Сумин утверждают, что есть еще ситуации, когда раскладка страницы для крупных проектов все еще должна выполняться таблицами, в разумном количестве конечно.

Но городить огород с таблицами ради создания табов просто нелепо.

<td width="14%">
	<div>
		<div>
			<a href="javascript:function(){return false;}" onclick="javascript:return false;">Поиск</a>
		</div>
	</div>
</td>

Добавьте еще к этому <table> и <tr>.

А вот за задание вертикальных отступов с помощью тэга переноса строки <br />я бы вообще отбивал руки и лишал бы возможности заниматься этим видом деятельности в судебном порядке. Полюбуйтесь, пожалуйста.

<a href="tvset/7.html">ВС</a>
<br/><br/>
<span>23:45</span>  Фильм-концерт.. <a href="http://tvset.tut.by/18_channel.html">Ностальгия</a><br/>

Минимизация структурных (x)HTML-тэгов по отношению к контенту документа

Здесь все просто, чем меньше структурных тэгов, тем больше такие сайты любят поисковики и тем меньше вес документа.

В этой категории можно перечислить упомянутые уже ранее ошибки:

1. inline-стили и скрипты, которые могут быть вынесены в отдельный файл и будут кэшироваться;
2. применение CSS, который снова же кэшируется, для задания стилистического оформления, в частности вертикальных отступов;
3. применение неуместных тэгов при верстке блока, которые увеличивают общее количество разметки. Например, в табах вместо таблиц можно было бы использовать либо <div> либо <ul> и обойтись меньшим количеством «оберток».

Сюда еще можно отнести нелепую декларацию XML в коде.

<?xml version="1.0" encoding="UTF-8"?>

Эта конструкция является не только излишней, но еще и вредной. Ведь именно она переводит IE6 в quirksmode и вынуждает писать большее количество CSS кода для этого морально устаревшего браузера, доля которого по статистике liveinternet.ru в Байнете на сегодня уже менее 10-ти процентов. Эти потуги тем более непонятны, в случае, когда мы выходе мы имеем не настоящий XHTML с MIME-type application/xhtml+xml, а HTML в строгости синтаксиса XML с MIME-type text/html и разбираем его html-парсером в браузере.

Клиринг блоков задается устаревшим методом при помощи пустого <div> с CSS-свойством «clear: both;».

<div class="clear"></div><hr />

Сегодня существует более удобный способ для достижения клиринга, который я активно применяю и всем настоятельно рекомендую. Он не нуждается в дополнительной разметке, только чистый CSS.

Оптимизация (x)HTML, CSS, JS и изображений

Как я уже говорил выше, оптимизация верстки не проводилась, что для ресурса с ежедневным трафиком в десятки, а то и сотни гигабайт является большим упущением.

К главной странице подключено 15 файлов скриптов, которые необходимо было слить в минимально допустимое количество и обфусцировать, сэкономив тем самым много http-запросов к серверу и приличное количество трафика.

Вся графика на сайте могла быть оптимизирована путем применения технологии CSS Sprites (слияния множество изображений в одно), что снова позволило бы сэкономить на http-запросах. Также графика должна быть оптимизирована за счет прогона ее по специальным утилитам, уменьшающим размер конечного изображения, путем очистки файлов от служебной информации.

Общие замечания по мелочам

1. Активное применение свойства !important в CSS, что значительно ухудшает поддержку кода.
2. Активное использование однопиксельного изображения для неизвестных мне целей.

   <img alt="" src="http://img.tut.by/i/tr.gif"/>

3. Неиспользование тэгов списков там, где это было бы уместно.
4. Неправильное применение элемента <fieldset> в форме авторизации.
5. Необоснованный перенос кнопки сабмита формы авторизации в начало кода, нарушая тем самым порядок фокуса ввода и отсутствие попытки исправить это с помощью атрибута tabindex.
6. Оборачивание кнопки сабмита все той же формы авторизации в <div> для непонятных целей и пр.

Вот так кратенько мы пробежались по основным негативным моментам новой верстки портала tut.by. Более детально изучать верстку нет ни времени ни желания.

Помните, так верстать нельзя! На смертном одре всем мы будем отвечать за грехи свои! =)

Этот материл не является попыткой пнуть, упавшего. Мне хотелось бы, чтобы руководство крупнейшего интернет-проекта помнило о том, что tut.by является лицом всего национального сегмента сети Интернет. На них смотрят, на них ориентируются, по ним оценивают.

Юрий Анатольевич, пожалуйста, наймите квалифицированного верстальщика (программиста, проектировщика, дизайнера и пр.) и сделайте Байнет чуточку лучше.

P.S. Как уже выяснилось, мнения спросили также у Юры Шиляева и Паши Коноплицкого. Видимо, это только вершина айсберга и бить проект собрались больно авторы статьи.

Ссылки по теме

1. Twitter realtime results for #newtutby
2. О новом TUT.by
3. Мнения специалистов об обновленном TUT.by