Консультации и оценка качества html-вёрстки (бесплатно)

[_KurT_]

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

"Кстати зачем смотреть в FF3.6? Смотрим только мажорные версии + три последних IE." - Вы имеете ввиду смотреть в нормальных браузерах последних версий, а в IE начиная с 8 версии. правильно я понял ? Или смотреть в последних релизах + 2 предпоследних. (так написано в статье "браузерный зоопарк" на хабре)

"Раз уже поставили html5 doctype то и остальные html5-теги юзайте: header, footer, nav, и т.д." - их IE7 и 8 не понимают, не рано ли ?

"Сайт фиксрованный по ширине - зачем резать его как колбасу на полоски и внутри каждой вложенными блоками центрировать контент, оберните всё в один wrapper и всё." - это обусловлено семантикой или еще чем-то, или так просто не красиво делать ? почему это плохо ?

"Не используйте id." - это для меня вообще стало загадкой о_О, обьясните или покажите где почитать, почему не использовть ?

 

[Виля]

Народ, очень ищу адекватного опытного верстальщика программиста для работы в паре. Надоели умельцы, не умеющие положить текстуру на фон и не знающие, что такое кукисы.
ТС, извиняюсь, если мой пост мешает - уберу. Но тут, мне кажется, есть шансы найти подходящего человека)

 

[zoofun]

кукисы - печеньки?

 

[_KurT_]

кукисы - печеньки?

именно так, вот отличная подборка для незнающих !

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[zoofun]

)))))))))))))))
Пэ-хэ-пэ

 

[_KurT_]

Давайте отполируйте до блеска, сделайте "идеально" на ваш взгляд, и повторим

Ну вроде отполировал. Заколебался уже всякие мелочи вычищать.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Что скажите ?
И еще, могли б вы ответить на мои вопросы, которые выше.

 

[zoofun]

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

1 "Кстати зачем смотреть в FF3.6? Смотрим только мажорные версии + три последних IE." - Вы имеете ввиду смотреть в нормальных браузерах последних версий, а в IE начиная с 8 версии. правильно я понял ? Или смотреть в последних релизах + 2 предпоследних. (так написано в статье "браузерный зоопарк" на хабре)

2 "Раз уже поставили html5 doctype то и остальные html5-теги юзайте: header, footer, nav, и т.д." - их IE7 и 8 не понимают, не рано ли ?

3 "Сайт фиксрованный по ширине - зачем резать его как колбасу на полоски и внутри каждой вложенными блоками центрировать контент, оберните всё в один wrapper и всё." - это обусловлено семантикой или еще чем-то, или так просто не красиво делать ? почему это плохо ?

4 "Не используйте id." - это для меня вообще стало загадкой о_О, обьясните или покажите где почитать, почему не использовть ?

1. Смотреть в нормальных браузерах последних версий, IE c 7.
2. Для IE есть javascript . Семантика, лучше усваивается поисковикам.
3. Так просто не красиво делать.
4. id используются для неповторимых уникальных блоков header ,footer
Да простят меня гуру если что не так.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Игоря творения

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[_KurT_]

1. Смотреть в нормальных браузерах последних версий, IE c 7.
2. Для IE есть javascript . Семантика, лучше усваивается поисковикам.
3. Так просто не красиво делать.
4. id используются для неповторимых уникальных блоков header ,footer
Да простят меня гуру если что не так.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Игоря творения

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Все понятно, статьи читал, уже и не раз , единственное по поводу id, Del написал "Не используйте id." - что вообще не использовать? не использовать в принципе?, в том старом варианте моей верстки я их так и использовал, header, footer, sidebar, menu и т.д.,но может быть слишком много их было, не знаю, хотя все уникальные и логично понятные, надо ждать Del-а.

 

[lantian]

border-radius: 45px;
-o-border-radius: 45px;
-moz-border-radius: 45px;

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

 

[lFoXl]

Извините, вот ...
https://www.kharkovforum.com/showthread.php?t=2240308 продам книгу по верстке, может кого заинтересует.

 

[AterDeus]

Уважаемый Del!

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Интересно услышать мнение профессионала.
Заранее спасибо!

 

[Del]

"Кстати зачем смотреть в FF3.6? Смотрим только мажорные версии + три последних IE." - Вы имеете ввиду смотреть в нормальных браузерах последних версий, а в IE начиная с 8 версии. правильно я понял ? Или смотреть в последних релизах + 2 предпоследних. (так написано в статье "браузерный зоопарк" на хабре)

Смотреть нужно:

• В последней версии Firefox, Chrome, Safari и Opera
• В последней и двух предыдущих версиях IE (на текущий момент это 9,8 и 7)
• На iPhone/Android/iPad

"Раз уже поставили html5 doctype то и остальные html5-теги юзайте: header, footer, nav, и т.д." - их IE7 и 8 не понимают, не рано ли ?

Для браузера этот тег ничем не отличается от div/span, как-то по-особенному он их не отобразит. По крайней мере так сейчас.
Фишка - да, в помощи поисковикам, в улучшении структуры документа и повышении надёжности: незакрытый div внутри новомодного header/section/etc не развалит сайт.
Есть проблема что IE не применяет к ним css-стили (не знает что такие теги бывают), но это решается созданием таких элементов через js, есть готовые скрипты.

"Сайт фиксрованный по ширине - зачем резать его как колбасу на полоски и внутри каждой вложенными блоками центрировать контент, оберните всё в один wrapper и всё." - это обусловлено семантикой или еще чем-то, или так просто не красиво делать ? почему это плохо ?

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

Давай на примере рассмотрим. Вот такой сайт тебе надо сверстать:

Ты видишь блоки трёх цветов, внутри каждого из них делаешь отступы, центрируешь текст.

Но на самом деле у тебя есть один большой логически блок - основное содержимое сайта (по центру), разделённое на подблоки! Нужно сделать один блок - центральную часть, её центрировать, а внутри неё - будут подблоки. Подблоки, подстраивающиеся под родителя. По его стили, его размеры. А цвета - это фон(ы) сзади.
Делая широченные блоки, отбивая в них пустоту, ты нарушаешь логику документа, разделяешь взаимосвязанные части.

"Не используйте id." - это для меня вообще стало загадкой о_О, обьясните или покажите где почитать, почему не использовть ?

Почитай про БЭМ.
ID не нужно использовать потому-что:

1. Элемент с ID должен быть на странице только один раз, а бывает так что потом нужно продублировать. Да-да и header бывает продублировать надо, Харисов про такой пример рассказывал =)
2. Программеры будут писать свои ID, у тех же элементов форм, да и не только, могут в какой-то блок что-то через ajax писать, в общем им будет нужен ID и хорошо если его там нет, чтоб не переименовывать, и не переписывать стили

Вы скажете: "Постойте, а как мне слинковать label и input?" Ну кроме вкладывания input внутрь label, да, только через ID, тут можно писать, во всех остальных случаях нельзя - даже для header, даже для logo!
И разумеется - никаких стилей и никакого JS повешенного на эти ID.

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

Расскажи это Эрику Мейеру
Префиксы - спасение от ада несогласованности реализаций новомодных фич. Вы застали “this site best viewed in…”? В общем вот тут всё разжёвано и даже переведено на русский:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Не толкайте людей на тёмную сторону=)

Ну вроде отполировал. Заколебался уже всякие мелочи вычищать.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Постараюсь на выходных посмотреть.

Уважаемый Del! Загляните ко мне, пожалуйста!
Интересно услышать мнение профессионала.
Заранее спасибо!

1. Почему нет цен? Большинство людей не станет звонить узнавать, "а там уже и договоримся", нет, они просто закроют страницу и позвонят тому где цены известны.
   Если есть веская причина - тогда слово цены нужно вообще убрать. Я кликаю на "Услуги и цены" в ожидании увидеть примеры работ и цены. Не виду там ни того, ни другого.
2. На сайте не хватает контактной инфы, хотя бы Имя, телефон, хотя бы в подвале сайта.
3. В плане SEO всё плохо: TITLE, H1, на главной даже вашего имени нет в контенте, да и вообще текста нет, индексировать нечего.
4. Раздел "Статьи" без статей, заголовки не кликабельны... если недоделано - уберите
5. В "Обо мне" - много воды, и мало про рабочую деятельность, а именно ради этого клиенты откроют эту страницу.
6. Морда сайта весит 6 с половиной метров - это катастрофически много, быстрые и дешёвые инеты далеко не у всех (да-да, куча людей с 3G выходит, да и в городе не все сидят на соточке, а ещё есть wi-fi в кафе, GPRS на улице...)

На iPad надо глянуть, в офисе посмотрю.

Вообще то я не превед с регой 7го года, а посты мои потерли.
Залил сюда andremarkup.ucoz.ру/index.html
andremarkup.ucoz.ру/images/for_PP.jpg

На беглый взгляд - нормально, не плохо но и не хорошо, распишу подробней на выходных.

 

[zoofun]

У меня вопрос к AterDeus:
какую погоду делает вот это действие после js:
<div style="display:none">
<img src="images/Pictures/main/ma1.jpg" alt="">
<img src="images/Pictures/main/ma2.jpg" alt="">
<img src="images/Pictures/main/ma3.jpg" alt="">
<img src="images/Pictures/main/ma4.jpg" alt="">
<img src="images/Pictures/main/ma5.jpg" alt="">
<img src="images/Pictures/main/ma6.jpg" alt="">
</div>

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


И вопрос к Del'у:
что ты думаешь по поводу js - который находится не в head, я имею ввиду "Grade A on Put JavaScript at bottom" есть какой то нюанс, почему так сплошь и рядом не делают?

 

[AterDeus]

Почему нет цен?...

1. Сайт еще не закончен, думал, что посмотрите только дизайн и верстку.
   Цены и статьи еще будут.
2. Контактной информации в контактах не достаточно разве? Как раз хотел избавиться от подвала.
3. СЕО еще не занимался, буду и мета тэги делать и тайтл. Если H1 сделать невидимым, как в h2-h3 на страничке с контактами, не повлияет ли это на индексирование Гуглом?
5. Допишу
6. Все-таки сайт фотографа - поэтому главное тут фотографии, поэтому смысла нет заходить на такой сайт с iPad или используя 3G. Можно просто отключить картинки, если дорог трафик.

2 zoofun, таким образом подгружаются картинки, которые будут видны при наведении и увеличении. Но происходит это незаметно для пользователя. Картинки и так оптимизированы, если сжимать сильнее, то это приведет к потере качества.

 

[zoofun]

я понял !
Можно - картинки #main_fotos сделать спрайтами по ширине 350px, как указано, или не спрайтами , а просто по ширине. Тут дилемма такая , у тебя картинки типа thumbnail's (те которые чб) ,вообще ненужного разрешения 1 155px × 768px - это факт.. а подключаемые большие нужно . Так что наверно спрайты отменяются. Интересно, что скажет по этому поводу Дел)

 

[AterDeus]

Уменьшил размер ч\б картинок, но теперь почему-то при наведении изображения "прыгают"... В чем может быть причина??

 

[zoofun]

html, body {
background: none repeat scroll 0 0 #CCCCCE;
height: 100%;
overflow: hidden;
}
2 картинки разные

 

[_KurT_]

Цитата:
Сообщение от _KurT_
Ну вроде отполировал. Заколебался уже всякие мелочи вычищать.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Постараюсь на выходных посмотреть.

Если будет возможность, то вот еще на проверку:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[Del]

Ну вроде отполировал. Заколебался уже всякие мелочи вычищать.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Ну раз полировал, то буду смело придираться ко всем мелочам Поехали!

1. favicon должен включать внутри себя 3 иконки: 16х16, 32х32 и 48х48. В идеале - ещё и 64×64.
2. где apple-touch-icon?
3. почему не используются спрайты? /i/slider-item.gif и slider-item1.gif, list-item.png, list-item1.png
4. Точки в слайдере:
   ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
   - это же слайдер? Почему тогда самого слайдера (автосмены блоков, с возможностью ручной смены кликом по точкам) - нет?
5. Микроформаты есть, похвально. А провалидировать:
   • ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
   • https://www.google.com/webmasters/tools/richsnippets?url=http://aleks1n.ucoz.ua/sergant/
   • ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
6. .menu {margin-right: -60px и right: 69px} А зачем?? Почему не просто один right?
7. h1.textHide - за такое вас будут банить поисковики и правильно будут делать. Нужно юзать
   ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
   или как сейчас советует Zeldman:
   ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
   . А ещё лучше - накрывать тектовое лого картинкой сверху:
   ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
8. Придумайте названия лучше чем wrapper и wrapper1 - от них веет безисходностью. Хороший верстальщик всегда назовёт блок так что никто и не подумает что он там ради презентационных целей
   Аналогично - div.middle - ну хочется вывести в чистое поле, поставить к стенке и немножко расстрелять. Это ж .content!
   .underRightMenu - сегодня он under, а завтра - before. Переименовывать будете?
   И вообще зачем вам первый wrapper? Ради фона? Повесьте его на html!
9. Кстати почему градиенты-картинки? 2012 год на дворе, градиенты давно пора юзать.
10. .middle {height: 1%} - поддерживаете IE6? Мило, но тогда уж _height. А вообще юзайте Modernizr и пишите html.ie6 bla-bla...
11. Внутри заголовков выделять отдельные слова кошерней через em или strong.
12. .container {float: left; width: 100%}, хочется задушить. Ну зачем такое писать? Float - это когда надо чтобы что-то чего-то обтекало. Когда у элемента 100% ширины - обтекать его негде. Зачем float? Ну не табличную же разметку эмулировать (скажите что нет)?
    Есть такой такой классный лёгкий тест на ужастность вёрстки - WebDeveloper-Outline-Positioned Elements-Float - если много красных рамок - в утиль.
13. не нравится что пункты списка в контенте разделены по два внури div.contentLine. Зачем? Это же один список. Почему? Нет же необходимости так делать.
14. для CSS неплохо бы юзать CSSDoc
15. дефолтные стили вы обнули, а выставить заново? Вот я вкинул дефолтный тестовый код от tripoli:
    ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
    Где буллеты? Где нумерация?

А вообще - молодец, прогресс налицо, посмотрим что там в

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

на днях.



AterDeus

На iPad надо глянуть, в офисе посмотрю.

Посмотрел, более-менее нормально в принципе, могло быть и похуже.

Скрины:

• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[zoofun]

AterDeus
* {
margin: 0;
outline: 0 none;
overflow: hidden;
padding: 0;
}
main_css.css (строка 5)