Оцените верстку страницы интернет магазина

[Arthur]

Верстка.

 

Прошу оценить:

-На граммотность в HTML5(как лучше по семантике сделать), CSS.
-Названия блоков и картинок(может сделать снипит так как много мелких картинок?).
-Вообще в целом.


Кроссбраузерность: IE9 и современные браузеры

Edited October 11, 2014 by Arthur

[zenw]

- нет ховеров на активных элементах (кнопках и ссылках)

- если название у товаров становится чуть длиннее, то верстка блоков рассыпается: http://joxi.ru/SLwJVIwyTJDFAutgi7Q

- названия товаров (как и их фото) тоже логичнее было бы сделать ссылками

- семантика хромает - как минимум, заголовка, обернутого в h1, которого могла бы прочесть ПС, у сайта нет

- адрес почты в шапке нужно сделать ссылкой

- форма поиска неопрятно выглядит (firefox) http://joxi.ru/Yb0JVIwyTJDqAuVYbpk

  в хроме при щелчке на инпут появляется outline

- html невалидный. Ну честное слово, лень было в валидаторе проверить?

[Arthur]

- нет ховеров на активных элементах (кнопках и ссылках)

- если название у товаров становится чуть длиннее, то верстка блоков рассыпается: http://joxi.ru/SLwJVIwyTJDFAutgi7Q

- названия товаров (как и их фото) тоже логичнее было бы сделать ссылками

- семантика хромает - как минимум, заголовка, обернутого в h1, которого могла бы прочесть ПС, у сайта нет

- адрес почты в шапке нужно сделать ссылкой

- форма поиска неопрятно выглядит (firefox) http://joxi.ru/Yb0JVIwyTJDqAuVYbpk

  в хроме при щелчке на инпут появляется outline

- html невалидный. Ну честное слово, лень было в валидаторе проверить?

 

Спасибо.

А вот что это за заголовок должен быть, который обернутый?.

[zenw]

Я имею в виду, что текст в логотипе (Солнцезащитные очки) было бы неплохо сделать именно текстом, и обернуть его в тег h1. И логотип, кстати, должен быть кликабельным, чтоб ссылка вела на главную сайта.

[Arthur]

Я имею в виду, что текст в логотипе (Солнцезащитные очки) было бы неплохо сделать именно текстом, и обернуть его в тег h1. И логотип, кстати, должен быть кликабельным, чтоб ссылка вела на главную сайта.

 

К сожалению там нету текстового слоя(в фотошопе просто лежит растрированый логотип. Я кстати тоже сначала так сделал пока не увидел что лого слитое с текстом).

Но в любом случае h1 я бы не вспомнил добавить

Edited September 5, 2014 by Arthur

[Sergik+]

 

Я имею в виду, что текст в логотипе (Солнцезащитные очки) было бы неплохо сделать именно текстом, и обернуть его в тег h1. И логотип, кстати, должен быть кликабельным, чтоб ссылка вела на главную сайта.

 

К сожалению там нету текстового слоя(в фотошопе просто лежит растрированый логотип. Я кстати тоже сначала так сделал пока не увидел что лого слитое с текстом).

Но в любом случае h1 я бы не вспомнил добавить

 

H1 сами добавьте текстом, он должен быть скрытым.

[Galaxy]

увеличение элементов при ховере лучше делать через transform scale

[Vessel]

По данной вёрстке хотелось бы спросить знатоков и автора следующее:

 

1. Зачем html5shiv, если требования ie9+ ? Ведь девятый ишак уже понимает все теги html5.

 

2. Можно ли ставить строку

 

 <meta charset="UTF-8">

 

вместо

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        

Если предполагается поддержка  ie8 ? Часто видел сайты с коротким объявлением кодировки, но с поддержкой восьмого осла. По идее так ставить кодировку не логично, ведь новый атрибут charset понимает только девятый осел.

[zenw]

 

2. Можно ли ставить строку

 

 <meta charset="UTF-8">

 

вместо

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        

Если предполагается поддержка  ie8 ? Часто видел сайты с коротким объявлением кодировки, но с поддержкой восьмого осла. По идее так ставить кодировку не логично, ведь новый атрибут charset понимает только девятый осел.

 

Ни разу не знаток, но: meta charset срабатывает даже в старых ослах, вот здесь написано, что даже IE6:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid

Там же советуют отказаться от Content-Type в пользу meta charset.

[Vessel]

zenw

 

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

 

Там ведь могут какие-то подводные камни случится, когда сайт будут ставить на хостинг, на разные серваки, с разными настройками. И, по сути, необъявленная кодировка может привести теоретически к глюку. Как полагаете?

[Sergik+]

Сработает короткая запись нормально в IE8.

http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type

[Arthur]

1. Зачем html5shiv, если требования ie9+ ? Ведь девятый ишак уже понимает все теги html5.

 

Просто изначально думал про ie8, но потом понял что это на долго и отказался, а html5shiv забыл удалить.

 

 

zenw

 

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

 

Там ведь могут какие-то подводные камни случится, когда сайт будут ставить на хостинг, на разные серваки, с разными настройками. И, по сути, необъявленная кодировка может привести теоретически к глюку. Как полагаете?

 

Если нужен IE8 и html5 не против такого указания кодировки(длинной я имею ввиду), почему бы не написать?

Edited September 6, 2014 by Arthur

[Arthur]

Сработает короткая запись нормально в IE8.

http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type

 

Кстати, да, сам только что проверил в IE8.

htmlbook пишет что 9+ без 8(инересно как так, что он раньше не поддерживался, а теперь поддерживается или это просто опечатка?

Edited September 6, 2014 by Arthur

[zenw]

htmlbook пишет что 9+ без 8(инересно как так, что он раньше не поддерживался, а теперь поддерживается или это просто опечатка?

Ну, как я понял отсюда, в старых браузерах это работает потому что эти самые браузеры подстраиваются к ошибкам в HTML, например, пропущенным кавычкам, и нормально парсят, например, вот такое:

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

А это по сути, и есть meta charset.

[Arthur]

 

htmlbook пишет что 9+ без 8(инересно как так, что он раньше не поддерживался, а теперь поддерживается или это просто опечатка?

Ну, как я понял отсюда, в старых браузерах это работает потому что эти самые браузеры подстраиваются к ошибкам в HTML, например, пропущенным кавычкам, и нормально парсят, например, вот такое:

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

А это по сути, и есть meta charset.

 

 

То есть вы имеете в виду что строку: <meta charset="utf-8"> IE8 принимает за ошибку и в попытке её исправить переписывает эту строку как: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ?

Edited September 7, 2014 by Arthur

[zenw]

То есть вы имеете в виду что строку:

IE8 принимает за ошибку и в попытке её исправить переписывает эту строку как:?

 

Ну, не то чтоб переписывает, но интерпретирует эти два варианта одинаково, судя по всему.