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

[FaLaRD]

Всем привет.

Оцените пожалуйста качество верстки, укажите на недочеты.

http://falard.org/

Спасибо!

[klierik]

1. Скрипты перед закрывающим </body>

2.

Избранное <span>0</span>

Тут надо не <p> а <div>, ибо это не абзац. Таких ошибок много.

3.

<h4>Навигатор Prology

iMAP-400M</h4>

<a href="#"><img src="img/item.png" alt="Новинка-1" /></a>

<br />

<span>1440 руб.</span>

А вот тут без <br />. Данный тег, как правило, используется в контенте. К примеру когда пользователь набирает текст через ВИЗИВИГ.

4. Категории товаров должен я бы поместил в список, ибо это список товаров.

5. Не хорошо класть <figure> внутрь тега <a>, так как <figure> - это блочный тип данных, а <a> строчный.

6.

<div class="reccomend">
<h2>Мы рекомендуем</h2>
<ul class="list-one">
<li><a href="#">Пенный очиститель стекол LEDO 400 мл (LD-02)</a></li>
<li><a href="#">Размораживатель стекол LEDO 500 мл (LD-21)</a></li>
<li><a href="#">Шампунь автомобильный Silver 500 мл (HB0046))</a></li>
</ul>
<ul class="list-two">
<li><a href="#">Пенный очиститель стекол LEDO 400 мл (LD-02)</a></li>
<li><a href="#">Размораживатель стекол LEDO 500 мл (LD-21)</a></li>
<li><a href="#">Шампунь автомобильный Silver 500 мл (HB0046))</a></li>
</ul>
</div>

Тут можно было обойтись одним списком. Не вижу причин что бы разделять их на два.

7. Я могу ошибатся, но согласно HTML 5 в коде ожидается встретить только один раз тег <nav> - и это должна быть главная навигация по сайту. Но я могу ошибатся по данному вопросу.

[red4pony]

5. Не хорошо класть <figure> внутрь тега <a>, так как <figure> - это блочный тип данных, а <a> строчный.

HTML5 разрешает

[deadrash]

7. Я могу ошибатся, но согласно HTML 5 в коде ожидается встретить только один раз тег <nav> - и это должна быть главная навигация по сайту. Но я могу ошибатся по данному вопросу.

Всё верно, вы ошибаетесь а если я не ошибаюсь об этом говорил Вадим Макеев в этом видео

[amelice]

1. http://habrahabr.ru/post/143452/

Опускайте кодировку для сss-файлов: для них UTF-8 задана по умолчанию.

2. По поводу синтаксиса <br>, Хром считает синтаксис </br> ошибкой и исправляет на <br>.

а это лишнее движение браузеру.

3. мне кажется некоторые название классов не по смыслу, например - inner-top-header, inner-header- они выполняют роль общего каркаса, может тогда - wrap-top-header, wrap-header?

так же - bottom-data, услуги - help.

В основном верстка понравилась.

А вот тут без <br />. Данный тег, как правило, используется в контенте. К примеру когда пользователь набирает текст через ВИЗИВИГ.

а можно по подробнее? в каком контенте и какое отношение имеет к набору текста пользователем?

Edited May 23, 2013 by amelice

[Great Rash]

1. Скрипты перед закрывающим </body>

А что в этом плохого?

[lexxcode]

1. Скрипты перед закрывающим </body>

А что в этом плохого?

Ооо это вечная война Мы как-то и в чатике тоже спорили на эту тему. Я считаю, что подключать скрипты перед </body> неудобно, лучше пусть они будут в head

[Great Rash]

лучше пусть они будут в head

Зато никакой async не нужен если перед </body> зафигачить. А учитывая что async не работает в старых ИЕ...

[lexxcode]

Зато никакой async не нужен если перед зафигачить. А учитывая что async не работает в старых ИЕ...

Да он и в head не нужен никому

[Great Rash]

Кто async? Вот совсем недавно мне нужен был. На странице стояла кнопка лайка от одноклассников, а они упали, из-за этого вся страница жутко тупила. При асинхронной загрузке скрипта такого бы не случилось (ну ил если б он внизу стоял).

[lexxcode]

Кто async? Вот совсем недавно мне нужен был. На странице стояла кнопка лайка от одноклассников, а они упали, из-за этого вся страница жутко тупила. При асинхронной загрузке скрипта такого бы не случилось (ну ил если б он внизу стоял).

Ну всякий мусор от социалок да, но скажем так он и со страницей особого взаимодействия не делает, подгрузил свой виджет и все, не подгрузил - "ну не шмогла". А так для рядовых скриптов типа jquery, плагина какого-то и своего скрипта, зачем async? Лишний головняк с отслеживанием когда оно там все таки подключилось

[amelice]

Зато никакой async не нужен если перед зафигачить. А учитывая что async не работает в старых ИЕ...

Для тех кто в танке объясните, или дайте линки где можно почитать про async.

Это вы про загрузку документа?

Как она работает?

Как понять в каких случаях нужен?

[Great Rash]

Для тех кто в танке объясните, или дайте линки где можно почитать про async.

Это новый атрибут у тега <script>. Т.е. если написать так: <script src="myscript.js" async="async" />, то скрипт будет грузится асинхронно. Асинхронность нужна если вы подключаете скрипт со стороннего сайта, который может не работать. Например счетчики, кнопки лайков соц. сетей или другие виджеты. Атрибут относительно новый поэтому поддерживается не всеми браузерами (читай ИЕ). Подробно можно почитать тут.

[lexxcode]

Атрибут относительно новый поэтому поддерживается не всеми браузерами (читай ИЕ). Подробно можно почитать

Уточню ИЕ9- не поддерживают, в ИЕ10+ уже есть поддержка

UPD: Как гласит caniuse то опера вообще не поддерживает атрибут async http://caniuse.com/#search=async

[amelice]

Для тех кто в танке объясните, или дайте линки где можно почитать про async.

Это новый атрибут у тега <script>. Т.е. если написать так: <script src="myscript.js" async="async" />, то скрипт будет грузится асинхронно. Асинхронность нужна если вы подключаете скрипт со стороннего сайта, который может не работать. Например счетчики, кнопки лайков соц. сетей или другие виджеты. Атрибут относительно новый поэтому поддерживается не всеми браузерами (читай ИЕ). Подробно можно почитать тут.

Уточню ИЕ9- не поддерживают, в ИЕ10+ уже есть поддержка

Спасибо!

[FaLaRD]

Спасибо. Очень ценная информация для меня.

А в пункте 3 вместо <br /> какая альтернатива?

amelice спасибо большое)

[red4pony]

Либо span dispay: block, либо заменить на блочный элемент(исходя из кода приведенного в комментарии)

[klierik]

1. Скрипты перед закрывающим </body>

А что в этом плохого?

А я и не говорил что это плохо. Я рекомендовал делать так.