Оцените верстку

[pincher2012]

Адрес: Сайт

Макет: jpg, psd

Пишите обо всем что вызывает у вас желание переделать. Какие-нибудь очевидные анти-паттерны. Не семантичное использование тегов.

Когда вырезал картинки, оптимизировал. Не использовал div.clear. Проверил валидатором html и css код(в цсс одно невалидное свойство).

[npofopr]

hover hover hover hover

[pincher2012]

Добавил cursor:pointer к input[type=submit], ссылку на весь блок в навигации.

[f2069]

1. Тег header напихан везде где только можно, хотя он используется для задания шапки сайта или основного заголовка страницы, но никак не для каждой статьи и сайдбара;

2. БЭМ - видимо не интересен;

3. Вместа тега section решено было использовать p.article_text, что мне не ясно, если делается такой упор на html5;

4. Свойство border-radius поддерживается не во всех браузерах, почему не написаны аналогичные свойства для старых версий популярных браузеров;

5. PSD было лень качать, но даже с jpg видно, что копирайт находится не на том месте, что в макете;

6. Нет ховеров на ссылки и на кнопки, плюс кнопка в форме подписки не того цвета;

7. При маленьком разрешении или окне браузера бекграунд под меню и страницей уползает влево в итоге половина страницы на белом фоне;

8. Не ясно почему в css-файле символы многострочных комментариев используются для одной каждой строки, например в блоке #header_nav span;

9. background: url(" - где то написан с кавычками, где то без, как-будто писали разные люди;

10. Когда для одного элемента одновременно применяются стили типа font-style: italic; font-size: 26px; line-height: normal; - то наверно есть смысл объединить их в одну запись;

11. Нет placeholder-а наинпуте, раз уж спользуется html5 можно было бы и побольше фишек добавить;

[pincher2012]

1. Не согласен. В текущей версии стандарта сказано:

The header element represents a group of introductory or navigational aids.

Note: A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

Я это понимаю так. Элемент <header> группирует элементы представляющие заголовок секции(всю страницу тоже понимаю как секцию). И вообще, все эти новые теги лишь группируют и задают определенную семантику своему контенту и не более того.

2. Тут всего одна страница. Мне кажется это лишнее. Чтобы продемонстрировать использование БЭМ надо и сайт соответствующий.

3. Вот тут мне непонятно. Стоит ли обрамлять один элемент в секцию? header>h1 это уже излишне. Будет ли section>p избыточной разметкой?

4. Мне кажется что это свойство поддерживается довольно давно чтобы писать его без префиксов. Вот не знаю, обращают ли на это внимание другие верстальщики. Интересно было бы узнать.

5-7. Согласен, поправил.

8. Это редактор так закоментил.

9. Пытаюсь переучить себя писать без кавычек. Со временем пройдет.

11. Добавил.

[Viper]

2. БЭМ - видимо не интересен;

БЭМ не предназначен для... не Яндекса), ИМХО

3. Вот тут мне непонятно. Стоит ли обрамлять один элемент в секцию? header>h1 это уже излишне. Будет ли section>p избыточной разметкой?

Согласен. Не понятно, при чем здесь вообще section...

4. Мне кажется что это свойство поддерживается довольно давно чтобы писать его без префиксов. Вот не знаю, обращают ли на это внимание другие верстальщики. Интересно было бы узнать.

Согласен. Давно уже можно не писать для этого свойства префиксы, ИМХО.

От себя:

1. Не используй ID для стилизации, только class'ы

2. старайся писать более логичные и семантические названия классов, с построением связи/структуры как в методологии верстки независимыми блоками.

П.С. Все не смотрел, но что увидел - достойно, ИМХО.

Edited December 26, 2012 by Viper

[pincher2012]

Поменял имена классов