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

  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #121
Спасибо за развернутый ответ. Со всем согласен, но хотел бы уточнить пару моментов.

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

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

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

"Не используйте id." - это для меня вообще стало загадкой о_О, обьясните или покажите где почитать, почему не использовть ?
 
Останнє редагування:
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #122
Народ, очень ищу адекватного опытного верстальщика программиста для работы в паре. Надоели умельцы, не умеющие положить текстуру на фон и не знающие, что такое кукисы.
ТС, извиняюсь, если мой пост мешает - уберу. Но тут, мне кажется, есть шансы найти подходящего человека)
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #123
кукисы - печеньки?
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #124
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #125
)))))))))))))))
Пэ-хэ-пэ
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #126
Ну вроде отполировал. Заколебался уже всякие мелочи вычищать.

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

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


Что скажите ?
И еще, могли б вы ответить на мои вопросы, которые выше.
 
Останнє редагування:
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #127

1. Смотреть в нормальных браузерах последних версий, IE c 7.
2. Для IE есть javascript . Семантика, лучше усваивается поисковикам.
3. Так просто не красиво делать.
4. id используются для неповторимых уникальных блоков header ,footer
Да простят меня гуру если что не так.
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
Игоря творения
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
 
Останнє редагування:
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #128

Все понятно, статьи читал, уже и не раз , единственное по поводу id, Del написал "Не используйте id." - что вообще не использовать? не использовать в принципе?, в том старом варианте моей верстки я их так и использовал, header, footer, sidebar, menu и т.д.,но может быть слишком много их было, не знаю, хотя все уникальные и логично понятные, надо ждать Del-а.
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #129
Код: 
border-radius: 45px;
-o-border-radius: 45px;
-moz-border-radius: 45px;

Никогда не используйте префиксы, вы гробите стандарты w3c и тем самым кормите разработчиков браузеров на создание собственных веток неудач.
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #130
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #131
Уважаемый Del!
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Интересно услышать мнение профессионала.
Заранее спасибо!
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #132
Смотреть нужно:
  • В последней версии Firefox, Chrome, Safari и Opera
  • В последней и двух предыдущих версиях IE (на текущий момент это 9,8 и 7)
  • На iPhone/Android/iPad

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


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

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

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

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


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

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



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



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



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

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



На беглый взгляд - нормально, не плохо но и не хорошо, распишу подробней на выходных.
 
Останнє редагування:
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #133
У меня вопрос к 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" есть какой то нюанс, почему так сплошь и рядом не делают?
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #134
Del сказав(ла):
Почему нет цен?...
Натисніть, щоб розгорнути...

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

2 zoofun, таким образом подгружаются картинки, которые будут видны при наведении и увеличении. Но происходит это незаметно для пользователя. Картинки и так оптимизированы, если сжимать сильнее, то это приведет к потере качества.
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #135
я понял !
Можно - картинки #main_fotos сделать спрайтами по ширине 350px, как указано, или не спрайтами , а просто по ширине. Тут дилемма такая , у тебя картинки типа thumbnail's (те которые чб) ,вообще ненужного разрешения 1 155px × 768px - это факт.. а подключаемые большие нужно . Так что наверно спрайты отменяются. Интересно, что скажет по этому поводу Дел)
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #136
Уменьшил размер ч\б картинок, но теперь почему-то при наведении изображения "прыгают"... В чем может быть причина??
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #137
html, body {
background: none repeat scroll 0 0 #CCCCCE;
height: 100%;
overflow: hidden;
}
2 картинки разные
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #138

Если будет возможность, то вот еще на проверку:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
 
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #139
Ну раз полировал, то буду смело придираться ко всем мелочам Поехали!

  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. Микроформаты есть, похвально. А провалидировать:
  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
Del сказав(ла):
На iPad надо глянуть, в офисе посмотрю.
Натисніть, щоб розгорнути...
Посмотрел, более-менее нормально в принципе, могло быть и похуже.

Скрины:
  • ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
  • ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
 
Останнє редагування:
  • 🟡 22:12 Відбій тривоги в Харківська область.Зверніть увагу, тривога ще триває у:- Куп’янський район- Харківський район- Липецька територіальна громада- Вовчанська територіальна громада#Харківська_область
  • #140
AterDeus
* {
margin: 0;
outline: 0 none;
overflow: hidden;
padding: 0;
}
main_css.css (строка 5)
 
Ви повинні увійти або зареєструватися, щоб відповісти.
Меню
Увійти