Jump to content

№1 "Раира"

MehOlOLBuC

By MehOlOLBuC,
in Discussion of works

 Share

Recommended Posts

MehOlOLBuC Explorer

MehOlOLBuC

Posted
Posted

Автор макета (PSD) Антон Иванов.

тех. задание

— вёрстка блочная

— вёрстка резиновая

— валидность xhtml & css

— семантика

— seo-оптимизация

— кроссбраузерность (ie 6.0 +, opera 9.0 +, google chrome, mozilla firefox 1.5 +, safari 3.0 +)

проверка на соответствие стандартам xhtml 1.0 strict & css:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

первый раз использую микроформаты. правильно ли всё разметил?

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

http://us.ua/3563/

или

layout (MehOlOLBuC).rar

Link to comment
Share on other sites
rus Explorer

rus

Posted
Posted (edited)

Волкер, ответь человеку!

Для него очень важно твое мнение, он даже всю ночь не спал: Сегодня, 3:46!

Стоп... а что со временем? У меня на часах: 9:43, а на форуме показывает: Дата Сегодня, 6:42...

Edited by rus
Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

MehOlOLBuC

Визуально:

1) Меню "Страхование" почему-то не по середине, а сдвинуто к правому краю.

2) Баннеры тоже самое, только не посередине, а слева

3) Заголовок "Наш адрес" слишком большой интервал между слов

По коду:

1) Очень много дивов, можно было максимум 7 использовать

2) <a href="" - Ссылки лучше пустыми не оставлять, хотяб решётки поставить #

3) Вот это нужно было вынести в отдельный файл

	<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="styles/ie6.css" />
	<script src="scripts/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('#header .wrap, .logo a, #content .wrap .in dd.service ul li, .expertise');
	</script>
	<![endif]-->

4) Зачем html прописывать ширину 100%, он и так 100% по умолчанию

html {
width:100%;

5) тоже самое всяким таким блочным элементам див, которые и так по умолчанию занимают всю ширину своего родителя

#content .toppad {

width:100%;

6) В контенте есть <dl>, в котором весь контент. Вот он нахрен не нужен, без него можно было спокойно обойтись.

7) <ul class="menu"> - В этом меню нет активного пункта, кажись на макете он должен быть

8) <div class="expertise"/> - Во-первых бабочку надо было делать одной картинкой, имгой, а во-вторых она относится к правой колонке, а значит именно в ней нужно было её помещать и от неё плясать.

9) Заголовки кстати нужно было делать картинками. Я про "Страхование", "Скидки" и "Наш адрес"

И делать их не в спанах, а заголовках, например второго уровня.

В целом:

Вроде бы нормал, но много лишнего.

Вот кстати сравни http://psywalker.ru/SAITS/Raira/main-page.html

Тоже конеш не сахар, но всёж.

Link to comment
Share on other sites
MehOlOLBuC Explorer

MehOlOLBuC

Posted
  • Author
Posted (edited)
Волкер, ответь человеку!

Для него очень важно твое мнение, он даже всю ночь не спал: Сегодня, 3:46!

Стоп... а что со временем? У меня на часах: 9:43, а на форуме показывает: Дата Сегодня, 6:42...

не было меня ночью )

Визуально:

1) Меню "Страхование" почему-то не по середине, а сдвинуто к правому краю.

2) Баннеры тоже самое, только не посередине, а слева

3) Заголовок "Наш адрес" слишком большой интервал между слов

1) 2) в макете чуть сдвинуты, сделал точь в точь.

3) с маленьким интервалом смотрится как-то не очень.

По коду:

1) Очень много дивов, можно было максимум 7 использовать

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

2) <a href="" - Ссылки лучше пустыми не оставлять, хотяб решётки поставить #

видел решётки в чужом коде, но не понял зачем они.

4) Зачем html прописывать ширину 100%, он и так 100% по умолчанию

html {
width:100%;

если не изменяет память, читал в блоге webmolot'a, что какой-то браузер не задаёт ширину и высоту. и сам webmolot задаёт ширину.

5) тоже самое всяким таким блочным элементам див, которые и так по умолчанию занимают всю ширину своего родителя

#content .toppad {

width:100%;

задал ширину .toppad, т.к. в ие6 недостаточно использовать один overflow:hidden; для охвата внутренних блоков с float

6) В контенте есть <dl>, в котором весь контент. Вот он нахрен не нужен, без него можно было спокойно обойтись.

семантика. я просто так теги не использую ))

7) <ul class="menu"> - В этом меню нет активного пункта, кажись на макете он должен быть

точно. вот класс #content #sidebar_l .in ul.menu li a.active{color:#424242; text-decoration:none;}

8) <div class="expertise"/> - Во-первых бабочку надо было делать одной картинкой, имгой, а во-вторых она относится к правой колонке, а значит именно в ней нужно было её помещать и от неё плясать.

каркас не позволит. высота хедера 400пк и абсолютно позиционирован. топпад своим верхним отступом ограничивает все три колонки. думаю, лучше надо было сохранить картинку в jpg (без полупрозрачных участков) и добавить <dt>Экспертиза</dt> убив двух зайцев - при включённом показе графики видим картинку с бабочкой и надпись, при выключенном появляется заголовок "экспертиза", то есть содержимое <dt>

9) Заголовки кстати нужно было делать картинками. Я про "Страхование", "Скидки" и "Наш адрес"

И делать их не в спанах, а заголовках, например второго уровня.

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

Edited by MehOlOLBuC
Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

1)

6) В контенте есть <dl>, в котором весь контент. Вот он нахрен не нужен, без него можно было спокойно обойтись.

семантика. я просто так теги не использую ))

Объясни плиз

2)

1) Очень много дивов, можно было максимум 7 использовать

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

Ну вот представь себе, только 4 дива идут лишь на каркас, не многовато-ли?

3) Бабочку считаю, что нужно было делать именно ПНГ и засовывать в нужную колонку.

Link to comment
Share on other sites
MehOlOLBuC Explorer

MehOlOLBuC

Posted
  • Author
Posted (edited)
1)

Объясни плиз

есть смысловая связь между "ООО «Раира» является официальным ..." и перечислением страховых компаний? посмотри вёрстку с отключёнными стилями, думаю, так смотрится логичнее. макеев хорошо объяснил: http://pepelsbey.net/2008/04/semantic-coding-1/

2)

Ну вот представь себе, только 4 дива идут лишь на каркас, не многовато-ли?

контент-блок, два сайдбара, родительский контейнер и топпад. есть много способов вёрстки, я выбрал этот.

3) Бабочку считаю, что нужно было делать именно ПНГ и засовывать в нужную колонку.

тогда и каркас будет другим.

спасибо за комментарии.

Edited by MehOlOLBuC
Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
есть смысловая связь между "ООО «Раира» является официальным ..." и перечислением страховых компаний? посмотри вёрстку с отключёнными стилями, думаю, так смотрится логичнее. макеев хорошо объяснил: http://pepelsbey.net/2008/04/semantic-coding-1/

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

контент-блок, два сайдбара, родительский контейнер и топпад. есть много способов вёрстки, я выбрал этот.

Опятьже я в своём примере вполне справился с 7 дивами на всю вёрстку, а мог бы и 6-ю обойтись, просто лень переделывать.

http://psywalker.ru/SAITS/Raira/main-page.html

Link to comment
Share on other sites
LunatiK Explorer

LunatiK

Posted
Posted 

<ul>
								<li>
									<p>
										все возможные виды страхования
									</p>
								</li>
								<li>
									<p>
										наиболее выгодные условия страховой сделки
									</p>
								</li>
								<li>
									<p>
										самую подробную информацию о страховых продуктах и страховании вообще
									</p>
								</li>
							</ul>

MehOlOLBuC, нет никакого смысла в пункт списка вставлять параграф. (тем самым делаете лишние движения и нарушаете пункт 4 техюзадания «— семантика»)

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

Link to comment
Share on other sites
MehOlOLBuC Explorer

MehOlOLBuC

Posted
  • Author
Posted
Так же, текст на странице не является перечнем терминов и определений

в контексте семантики <dl> можно использовать не только в качестве термин - определение. хорошая статья, почитайте: http://pepelsbey.net/2008/04/semantic-coding-1/

Link to comment
Share on other sites
LunatiK Explorer

LunatiK

Posted
Posted
в контексте семантики <dl> можно использовать не только в качестве термин - определение. хорошая статья, почитайте: http://pepelsbey.net/2008/04/semantic-coding-1/

Статью прочитал, мнение не поменялось. Во-первых статья - это просто чьё-то мнение, а не правило и закон. а во-вторых там не савсем про то написано.

Если я не прав разъясните мне.

Link to comment
Share on other sites
Justnewone Explorer

Justnewone

Posted
Posted
Статью прочитал, мнение не поменялось. Во-первых статья - это просто чьё-то мнение, а не правило и закон. а во-вторых там не савсем про то написано.

Если я не прав разъясните мне.

Мне тож статья не очень понравилась. Точка зрения на рафинированное, идеальное восприятие. Причем не просто идеальное, а вообще оторванное от самого контекста. В жизни так не бывает. Либо сам ты совмещаешь в себе редактора+писателя, либо писатель пишет то, что ты потом, все-таки как редактор, пропуская через свое понимание, оборачиваешь в нужные теги.

пример из статьи, кстати, очень показателен в смысле отсутствия всякой вообще семантики:

<dl>
    <dt>.........</dt>
    <dd>.................................</dd>
</dl>

Вообще суфизм. Из разряда "а что первичнее, яйцо или курица".

Тезисы даже не спорные, они "чтобы было о чем поспорить", но что-то не хочется.

Link to comment
Share on other sites
LunatiK Explorer

LunatiK

Posted
Posted
Вообще суфизм. Из разряда "а что первичнее, яйцо или курица".

по теории эволюции и о том что жизнь на планете Земля зародилась в воде (а этой теории я придерживаюсь с 6-ми лет, как единственно пока логичной и не противоречивой) то первым было яйцо, и это яйцо (если не утверждать что яйцо=икра) было яйцом ящерицы или черепахи ... в общем первого земноводного ....

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

Link to comment
Share on other sites
Justnewone Explorer

Justnewone

Posted
Posted
по теории эволюции и о том что жизнь на планете Земля зародилась в воде (а этой теории я придерживаюсь с 6-ми лет, как единственно пока логичной и не противоречивой) то первым было яйцо, и это яйцо (если не утверждать что яйцо=икра) было яйцом ящерицы или черепахи ... в общем первого земноводного ....

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

В общем, я воспринял как солидарность в данном вопросе. =)

Link to comment
Share on other sites
aTei Explorer

aTei

Posted
Posted

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

Семантика это конечно хорошо, но нужно знать меру.

Не относится к верстке, но важно:

Не понравились юзабилити, типографика и дизайн.

Например, заменив один из заголовков со "Скидки" на "Скидки до 20%" (что указано в подписи к нему), конверсия явно возрастет.

Дизайн: он вроде чистенький и красивый, но связи у страхования и бабочек нет.

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

Теперь вы знаете в каком направление развиваться. Успехов :)

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept