Просьба покритиковать верстку.

[decode]

Здравствуйте.

Решил попробовать в первый раз сверстать пару макетов.

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

http://decode.su/colorpack/

Edited April 8, 2012 by decode

[Vin]

Вот это порадовало

[wildhind]

Оцениваю на 20 рублей. Всё-таки какая-то работа проделана.

Ошибки:

В форме поиска нет кнопки. О наличии кнопки Return на клавиатуре большинство юзеров даже не подозревает, будут искать, куда мышью тыкать.

Ссылки не подчёркнуты и не меняют вида при наведении мыши. В главном меню — да, меняют. И там подчёркивание излишне.

Зато подчёркнуты подзаголовки. Кажется, что это ссылки, к тому же они могут таковыми быть по смыслу. Тыкаешь — а ничего не происходит. Косяк!

Форма зявки предзаполнена подписями. Это неправильно. Подписи к полям должны быть вне полей. А если уж и помещать их внутрь, то в атрибут placeholder, а не value.

Текст мелкий, с малым межстрочным интервалом, на зашумлённом фоне — читается плохо.

В самой вёрстке много лишнего. Лишние обёртки, в которых нет никакого смысла, тэги img для изображений, которые не несут содержательного смысла, а используются только для оформления. Такие картинки надо ставить фоном.

Использованы несемантические тэги там, где можно было использовать правильные и нужные, наделённые смыслом.

Как пример главное меню:

            	<a class="home" href="/">Главная</a>
                <ul id="menu">
                	<li><a href="/">Доставка</a></li>
                    <li><a href="/">Контакты</a></li>
                    <li><a href="/">О Нас</a></li>
                    <li><a href="/">Вакансии</a></li>
                </ul>

Зачем оно сделано списком? Зачем один пункт из этого списка вынесен?

Что мешало сделать проще?

<nav class="mainmenu">
	<a href="/">Главная</a>
	<a href="/">Доставка</a>
	<a href="/">Контакты</a>
	<a href="/">О Нас</a>
	<a href="/">Вакансии</a>
</nav>

Зачем такое странное нагромождение картинок?

Например такая: http://decode.su/colorpack/img/shadow.png

Каков её смысл?

И потом, если уж реализуете картинками то, чего ещё не знаете о css, почему нет под картинкой одноцветного фона, который посетитель увидит, если картинка вдруг не отобразится по каким-либо причинам?

Edited March 27, 2012 by wildhind

[decode]

wildhind, Спасибо большое, что ответили =))

атрибут placeholder, а не value

Я конечно не знаю, но есть-ли сейчас смысл использовать этот атрибут, если он не поддерживается <IE9?

Точно так же как и тег "nav".

Или это как то можно исправить для IE? (кроме скриптов, моё ИМХО лучше использовать для всех браузеров всё одинаковое, пусть и старое, но зато без дополнительных скриптов, или я не прав?)

Зачем один пункт из этого списка вынесен?

Справа и слева (Первый пункт меню) в навигации углы круглые. Поэтому чтобы поддерживалось IE8, решил задать первому пункту меню фон с уже круглыми углами =)

http://decode.su/colorpack/img/shadow.png

Каков её смысл?

Служит подложкой под форму с поиском и в случае если меню будет меньше - фон останется прежним, также у нее еще тень))))

(решил использовать, вместо "box-shadow" для IE8)

П.С Тот, что мой вариант сейчас реализованной навигации, совсем убого?)))

[alexandr_v-vich]

По поводу placeholder - однозначно его! Никакого value в изменяемом input`е не должно быть. Лучше пустое поле, чем какой-то текст, который нужно оттуда предварительно удалить. И уж точно не подчёркнутый там текст (хотя это уже не важно).

Почему не хотите PIE.htc использовать?

Да даже так, у IE есть фильтры на прозрачность и градиент, не забывайте и про них)

[ablay2009]

кроме скриптов, моё ИМХО лучше использовать для всех браузеров всё одинаковое, пусть и старое, но зато без дополнительных скриптов, или я не прав?

Скрипт этот очень мал, и вообще без скриптов в этом жестоком мире старых браузеров никуда (можно использовать только поддерживаемые технологии, но это не интересно)

Справа и слева (Первый пункт меню) в навигации углы круглые. Поэтому чтобы поддерживалось IE8, решил задать первому пункту меню фон с уже круглыми углами =)

решил использовать, вместо "box-shadow" для IE8

Я уже забил на закругленные углы в IE <9, пользователь их даже не заметит. Использовать для углов картинки или, того хуже, PIE - лишняя трата ресурсов.

[alexandr_v-vich]

ablay2009, да я ж также делаю Просто, может это(IE<9) принципиально? Да и ресурсов тут закачаешься, это если более-менее крупные проекты...

Только вот не пойму, почему PIE хуже картинок?

[decode]

Никакого value. Лучше пустое поле, чем какой-то текст.

Тогда в моем случае, пользователь не поймет что нужно вводить в эти поля.

Я уже забил на закругленные углы в IE <9, пользователь их даже не заметит.

не люблю когда в разных браузерах по разному. =)

[alexandr_v-vich]

Никакого value. Лучше пустое поле, чем какой-то текст.

Тогда в моем случае, пользователь не поймет что нужно вводить в эти поля.

Вставляйте слева бекграундом ваше слово/словосочетание и ещё padding там же, слева. Во, нашёл - http://forum.htmlbook.ru/index.php?showtopic=33650

Edited March 27, 2012 by alexandr_v-vich