Прошу профессионалов покритиковать верстку

Здравствуйте. С разрешения заказчика отдаю на публичное растерзание.

Ссылка: посилання

Требуется профессиональная критика примененных приемов верстки и указание ошибок.

Трехколоночный макет (одна из страниц будущего портала) - статические sidebar, резиновый центр.
Семантическая (мне кажется) верстка. xhtml1.0 strict, валидность, кроссбраузерность.

Что используется
Кросбраузерность по возможности (в основном IE начиная с 5.01). IE хаки "* html" (IE< 7.0), экранирование "" (IE5.x), hasLayout (zoom:1)
Универсальные conditional comments по методу Stu Nicholls (посилання).
reset.css (взято без изменений с web-standards.ru).
Оформление css по методу Вадима Макеева (посилання) ну или по крайней мере похоже.
Image replacement - с методом вложенного span (лояльное отношение поисковых систем).
Rounded corners - jquery+jquery-roundcorners-canvas (jquery подключено не только для corners).
min-width+max-width для IE подсмотрено тут: посилання
Вертикальное позиционирование превьюшек в рамке для IE - посилання

Недостатки, которые известны мне:
- сама модель разметки - новый вариант будет с тремя резиновыми колонками.
- форма логина/пароля слегка кривовата, так и задумано - в новой версии будет сплошная резина.
- шрифт в строке поиска получился случайно, в рабочем макете оставил так.
- Самое нижнее меню (Помощь | Реклама на Темпе | О компании) сделано не списком. Но прочитав с комментариями посилання - решил оставить так.
- менять вкладки в поиске правильно будет сменой классов, а не позиций бэкграунда как сейчас.
- увеличение шрифтов в firefox 1.х/2.х не слишком красиво.
- не отмечаются посещенные ссылки (ну тут уж извините).
- jquery-roundcorners-canvas увеличивает ширину страницы - будет заменен.

Дизайн не мой - прошу оценивать верстку

Ну и сколько стоит такая работа - тоже интересно.

Цитата ("Sir_Michael"):

Требуется профессиональная критика примененных приемов верстки и указание ошибок.
Позже тему удалю.

А какой смысл тут кому-то высказываться, если позже тема будет удаляться? Только время зря будет потрачено. Ни ресурсу Weblancer.net пользы от контента, который будет удален, но новичкам почитать в будущем материалов, чтобы поучиться, ни самим отписавшимся попиариться (для тех, кто это любит на форумах делать)...

В общем, нет смысла писать текст, который потом будет удален.

tvv, смысл - получить критику от специалистов, которых можно встретить скорее на фриланс ресурсах, нежели на узкопрофессиональных форумах.
Узнать тонкие места для себя и заказчику тоже интересно. Мне - не жалко, нр заказчик просил открыть тему лишь на небольшой срок.
А ресурсу weblancer.net есть польза - в размерах сумм проведенных через сбс

Цитата ("tvv"):

Цитата ("Sir_Michael"):

Требуется профессиональная критика примененных приемов верстки и указание ошибок.
Позже тему удалю.

А какой смысл тут кому-то высказываться, если позже тема будет удаляться? Только время зря будет потрачено. Ни ресурсу Weblancer.net пользы от контента, который будет удален, но новичкам почитать в будущем материалов, чтобы поучиться, ни самим отписавшимся попиариться (для тех, кто это любит на форумах делать)...

В общем, нет смысла писать текст, который потом будет удален.

а что это Вы "потратили" время и написали "текст, который потом будет удалён", что не в коем случае нельзя писать и комментировать? человек попросил оценку. или вы за каждой темой следите когда она удаляется или нет? и уж явно не Вам, да и не мне считать выгоду или проигрышь в чемто этой темы для веблансера.

Цитата ("TEHb"):

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

А почему бы мне не судить, что хорошо или плохо для ресурса, на котором провожу большую часть своего времени? Я же прямо заинтересован, чтобы он развивался дальше. Более того, на данном форуме у меня есть некоторые обязаннности, поэтому я потратил время и написал свое сообщение, где обратил внимание, что нехорошо (но это - чисто мое IMHO, я могу и ошибаться) создавать темы, чтобы собирать информацию, и сразу эти темы удалять... Ведь темы, изначально предназначенные для удаления, являются тупиком в развитии любого ресурса.

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

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

IMHO, темы иногда удалять имеет смысл только в Черном Списке, из-за его специфики. Также нужно удалять глупые пустые и неинформативные темы, спам и т.д., но это уже дело модерирования. Не более того. Думаю, вопрос о запрете удаления тем имеет смысл поднять перед администрацией.

Согласен с tvv, отбивается желание писать и участвовать в форуме, где темы удаляются без явных причин, вместо того, чтобы идти в архив и быть назиданием потомкам.

В принципе, могу попробовать согласовать с заказчиком неудаление темы (или так уж и быть удалю недождавшись комментариев) - по вопросу пока нет ни одного коммента, видимо tvv прав.

Sir_Michael, если нужна серьезная, качественная, детальная критика, заказчик в этом заинтересован, и согласен немного заплатить, то IMHO имеет смысл создать проект (или оплачиваемый конкурс) на Weblancer.net, что-то типа "анализ и критика верстки", можно с небольшим бюджетом, затем выбрать несколько исполнителей. Исполнителям поставьте задачу проанализировать существующую верстку, и подготовить качественный отчет о том, что неправильно, что можно и нужно улучшить, и т.д.

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

Tvv прав. Зачем мне тратить свое время на сообщение, которое впоследствии будет удалено?

Получил разрешение заказчика на неудаление темы - вот, жду комментариев.

Sir_Michael, пока серьезно не рассматривал, но сходу хочу сказать:

1. Где-то 15-20% используемых в верстке тегов - лишние, без них можно обойтись, хотя в ряде случаев потребуется немного перекроить CSS. Например тут:

<span class="thumb">
<span class="vcenter">
<img src="images/photos/thumb1.jpg" width="100" height="67" alt="Природа" />
</span>
</span>

можно было бы или обойтись только лишь одним тегом SPAN, или даже вообще без тега SPAN! Да и width и height можно было бы вынести в CSS.

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

2. Часть тегов используются не по назначению, и идеологически должны быть заменены на другие, более соответствующие применению.
Например, в Вашем футере <div id="footer"> секции находятся в теле тега <p>, который принципиально предназначен для разлеления абзацев текста. IMHO тут следовало бы использовать DIV.

tvv,
Цитата:

<span class="thumb">
<span class="vcenter">
<img src="images/photos/thumb1.jpg" width="100" height="67" alt="Природа" />
</span>
</span>

Это очень нужная конструкция - позволяет достичь кроссбраузерного центрирования превьюшек внутри рамок. Превьюшки могут быть не только горизонтальными, но и вертикальными. Можно, было, конечно, прописать отдельные классы для вертикального позиционирования горизонтальных и вертикальных превьюшек, но я решил сделать универсальный вариант - и программисту работы меньше.
Собственно, этот самый двойной span - нужен лишь для всеми любимого IE (в iefix.css спрятан хитрый expression) - отсюда посилання.

Про <p> в footer'е тоже, пожалуй, поспорю. Мне показалось, что это более "семантично".
Посмотрите на сайт с отключенными таблицами стилей - это и есть разметка контента - текст, абзацы, списки. Слои div я использую для разделения блоков.
Поясняю, центральная колонка мне показалась более важной чем боковые, а правая важнее левой - в таком виде я их расположил внутри голого html элемента. А в css я располагаю их в том виде, как это должно предстать пользователю, более div не использую.
Но, возможно, вообще отказаться от тэга <p> в footer, но я не уверен, правильно ли это будет.

Спасибо большое за критику.

Про вложенные SPAN - думаю, программисту одинаково, что подставлять тот или иной SPAN, что просто заменить имя класса в одном из тегов (повторюсь, в Вашем случае можно обойтись без обоих SPAN). IMHO зачем плодить избыточные теги, без которых HTML код был бы намного чище. И таких мест - масса, думаю, до 20% от всего кода.

Про <p> или <div> - Вы тут точно так же могли использовать и например любой другой тег, переопределив его свойства в CSS, хоть даже <h1> или <i>, но не сделали же этого. Почему не сделали? Потому что понимаете, что теги <h1> и <i> предназначены для другого, и их использование в данном месте было бы некорректно воспринято. Вот точно так же и <p> предназначен для другого, а именно для разделения абзацев текста, обычного текста, как в статьях и книгах. В футере же - именно разделенные по горизонтали блоки.

Ну или вот типичный пример избыточности:

<div class="body">
......<ul>
............<li>
..................<a href="#">Авто/Мото</a>
............</li>
............<li>
..................<a href="#">Администрации</a>
............</li>

Что мешало например обойтись меньшим количеством тегов:

<div class="body">
......<div class="column">
............<a href="#">Авто/Мото</a>
............<a href="#">Администрации</a>

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

По ценам.

Вообще получилась отличная верстка, то что я выше мелко ворчу - пожалуйста не обращайте внимания, то я говорил о том, что отличает текущую верстку от идеала.

Думаю, на данную работу профессионалу предполагалось затратить, да и пожалуй было затрачено, где-то 6-8 человеко-часов. Умножьте на Ваш часовой рейт - получите цену. Например мой рейт 20 USD/hr, в моем исполнении 8 часов стоило бы 160 USD, но я вряд ли бы сделал лучше.

А, да, забыл сказать. Чтобы использовать несколько классов, не обязательно городить иерархию тегов SPAN или каких-либо других. Их можно использовать в одном теге через пробел. Например вместо

<span class="thumb">
......<span class="vcenter">
............<img src="images/photos/thumb1.jpg" width="100" height="67" alt="Природа" />
......</span>
</span>

можно было бы (возможно, при необходимости подправив CSS) использовать

<span class="thumb vcenter">
......<img src="images/photos/thumb1.jpg" width="100" height="67" alt="Природа" />
</span>

Но, как я и говорил выше, в данном случае, если поправить в CSS класс вышестоящего тега, возможно было бы даже без того одного SPAN обойтись. И width и height можно из IMG убрать, переместив в CSS.

То есть, Вы видите, что можно минимум на 20% уменьшить количество элементов разметки, и где-то минимум на 40% уменьшить количество строк HTML кода страницы, без потери качества и наглядности.

Я очень сильно с вами не согласен. Наверняка же Вы читали про "программирование квадратиком" у Котерова посилання (вот уж не скажу почему вдруг вспомнилось) - то же самое нельзя допускать и в верстке. Есть понятие "семантической верстки" - отдельно содержимое, отдельно представлене. Туда входит и как и когда использовать те или иные тэги, как именовать блоки и "accessibility" и т.д. И в том числе там описывается когда список должен быть списком. Меню - это список, который оформляется элементами <ul>... <li>...</li>... </ul>. По этому языческому учению (сторонником которого я являюсь) - тот кто так не делает - тот плохой.
Разумеется, не всегда такой код будет самым компактным. А вот ту же jquery я подключаю конечно же в "упакованном" варианте.

Цитата:

<div class="body">
......<div class="column">
............<a href="#">Авто/Мото</a>
............<a href="#">Администрации</a>

Это - неправильно. Все по тому же языческому учению, что я указал выше. Если бы мне дали на рецензию верстку с таким моментом - я бы непременно указал как на грубую ошибку. И выше я как недостаток (с оговоркой почему так сделал) указывал, что меню в footer'е в виде <p class="nav"></p> а не списком.

Цитата:

можно использовать в одном теге через пробел

Я знаю, что можно - там есть такая конструкция, где она требуется. Что касается этих span'ов - такая конструкция работать не будет.
Еще раз повторюсь - необходима для кроссбраузерного вертикального центрирования.
Когда я верстал страницу - я не знал, какого размера будут превьюшки, будут они только определенных размеров или произвольных.
Я согласен с тем, что можно было обойтись без span. Но соглашусь с тем, что нужно обойтись - только если буду твердо знать, что превьюшки будут, скажем только двух размеров. После окончания работы на этой страницей я видел другие страницы, над которыми придется работать и уже знаю, что от универсального вертикального позиционирования не отказаться. Если мне подскажут более продвинутые кроссбраузерные способы вертикального центрирования в блоках без использования таблиц - буду премного благодарен.

width и height в атрибутах - всего лишь скромная забота о нестандартных браузерах.

Sir_Michael, мой пример с меню - это прямо-таки академический пример НЕсемантической верстки, именно поэтому многие последователи модного слова "семантическая верстка" считают, что это плохо. Но я считаю (возможно, ошибочно), что семантическая верстка хороша не везде, а хороша в меру. То есть там, где использование ее логично относительно здравого смысла, а не относительно вероятного восприятия некиим "абстрактным человеком".

Тот код что я привел - он не неправильный, более того, он правильный, но всего лишь не соответствует одной из трактовок расплывчатого понятия "семантическая верстка". Я просто представитель другой школы, имя которой - минимализм и практичность.

Иными словами, если устоявшиеся в некоторых кругах "стандарты" "семантической верстки" противоречат принципам минимализма и здравому смыслы, и приводят к разбуханию HTML кода за счет лишних избыточных элементов разметки, то я к этим "стандартам" отношусь очень осторожно. И уж тем более лично мне (хотя я могу ошибаться) они не кажутся логичными, в том числе и с точки зрения семантики.

Цитата:

семантическая верстка хороша не везде

Ну, это само-собой разумеется, вряд ли я буду верстать админ-панель cms какой-либо направленности строго по требованиям семантической верстки

Вот только что первой же ссылкой нашел нечто похожее на наш пример с меню: посилання
Тут тоже подобный моему пример почему-то был назван нелогичным. А я с этим не согласен, по-моему, наоборот, использование лишнего тега <li> нелогично, только отвлекает от пунктов меню при просмотре HTML кода.

Более того, кому-то из фанатов современных трактовок "семантической верстки" это покажется ересью, но я даже не согласен, что элементы меню - это только список и никак иначе. Я бы назвал это для одних случаев возможно и "списком", для других - "деревом", для третьих - "группой однотипных элементов", и т.д. Шире мыслить стараюсь, более абстрактно.