Оцените верстку

Heidel · November 30, 2012

Верстка выложена здесь http://web-portfolio1.narod.ru/index4/index.html

Heidel · December 4, 2012

что-то никто не комментирует :mellow:

Justnewone · December 4, 2012

По моему все чистенько, акуратно. Жалко что только доктайп не html5, уже давно пора.

И не очень понял про //изменение положения блока #birds. Я бы вставил внутрь li. Но это дело вкуса, я как-то настороженно отношусь к js-костылям верстки.

Viper · December 4, 2012

1. Структура заголовков твоего сайта:

1.   
    1. лаготворительность
        1. Благотворительная акция «Из добрых рук – с любовью!»

2. верстка не гибкая, много ID и каскадность стилей

3. Очень много лишнего, что можно заменить стилями, в том числе CSS3.

4. Не оптимизировано: изображения, скрипты, стили...

Edited December 4, 2012 by Viper

Heidel · December 4, 2012

1. Структура заголовков твоего сайта:
1.   
    1. лаготворительность
        1. Благотворительная акция «Из добрых рук – с любовью!»
2. верстка не гибкая, много ID и каскадность стилей
3. Очень много лишнего, что можно заменить стилями, в том числе CSS3.
4. Не оптимизировано: изображения, скрипты, стили...

А поподробнее по третьему и четвертому пункту объясните, пожалуйста. Что можно заменить на CSS3 и каким образом и что можно оптимизировать?

Viper · December 4, 2012

А поподробнее по третьему и четвертому пункту объясните, пожалуйста. Что можно заменить на CSS3 и каким образом и что можно оптимизировать?

3. Можно обойтись без <div class="clear"></div>, #bottomNav, #navigation; закругления и тени уже смело можно делать на CSS3(и без префиксов), а если уж и делаешь их поддержу для IE7/8, то обрамляй в соответствующий коммент

Попадаются еще клиенты, которые категорично против graceful degradation? Давно о таких уже не слышал... И кто-то еще поддерживает ИЕ7 на новых проектах?

4. Изображения можно ужать с помощью, например, _http://www.smushit.com/ysmush.it/. Не вижу не одной причины не помещать скрипты в конец body, что существенно повысит скорость отображения сайта. JS и CSS в uncompressed виде. Кроме того, их можно было бы объединить для уменьшения количества запросов.

П.С. Если добавляешь элементу float, то display: block ему писать не нужно.

П.П.С. "ВОлОнтеры"

Edited December 4, 2012 by Viper

Heidel · December 4, 2012

То есть, можно не писать

	border-radius: 10px;
	-moz-border-radius: 10px; /* Для Firefox 3 */
	-webkit-border-radius: 10px; /* Для Safari 4 и Chrome */
	-khtml-border-radius: 10px;

а достаточно

border-radius: 10px;

?

спасибо за объяснения))

я прекрасно знаю, как пишется слово волонтеры. это "стебный" макет, и ошибка допущена намерено, там и содержание соответствующее.

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

По моему все чистенько, акуратно. Жалко что только доктайп не html5, уже давно пора.
И не очень понял про //изменение положения блока #birds. Я бы вставил внутрь li. Но это дело вкуса, я как-то настороженно отношусь к js-костылям верстки.

да, сейчас уже буду учиться с новым доктайпом всё делать.

по второму пункту - да, в итоге скрипт был убран, и было сделано внесением блока #birds внутрь последнего пункта меню и позиционированием относительно него.

Edited December 4, 2012 by Heidel

Viper · December 4, 2012

а достаточно
border-radius: 10px;
?

да

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

Не советую с такими(кто требует поддержку ИЕ6) связываться... <_< Не один здравомыслящий человек не захочет поддержку ИЕ6. Это до жути не рентабельно. И имеет смысл только в Китае.

И уточню: я не говорил, что поддержка ИЕ7/8 не нужна. Я говорил про graceful degradation в этих браузерах.

Edited December 4, 2012 by Viper

Heidel · December 5, 2012

что-то не совсем понимаю, что имеется в виду под graceful degradation.

гугл выдает разное - где-то написано в том смысле, что если те блоки, что в должны быть скругленными, в ие7/8 отображаюся квадратными - то и ладно, фиг с ним, не надо заморачиваться, напишите для таких пользователей плашку "переходите на гугл хром"; где-то написано, что это означает, что всё должно отображаться и работать корректно при отключенном у пользователя javascript.

про ие6 полностью соглашусь, не представляю, что это еще кому-то может быть надо.

Edited December 5, 2012 by Heidel

Viper · December 5, 2012

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

это называется Progressive enhancement

что если те блоки, что в должны быть скругленными, в ие7/8 отображаюся квадратными - то и ладно, фиг с ним, не надо заморачиваться, напишите для таких пользователей плашку "переходите на гугл хром"

по сути, да. За исключением того, что в это понятие не входит обязанность предлагать - "переходите на гугл хром"))

То есть, эта методика пропагандирует деградацию(упрощение) исключительно стилей/дизайна сайта для тех браузеров, которые не поддерживают новые технологии(в особенности, IE7/8), но при этом что бы сайт смотрелся нормально/адекватно. Все понты сделанные с помощью CSS3(закругления, тени, анимация), которые не важны для общего восприятия информации и удобства пользования сайтом.

Heidel · December 5, 2012

по сути, да. За исключением того, что в это понятие не входит обязанность предлагать - "переходите на гугл хром"))
То есть, эта методика пропагандирует деградацию(упрощение) исключительно стилей/дизайна сайта для тех браузеров, которые не поддерживают новые технологии(в особенности, IE7/8), но при этом что бы сайт смотрелся нормально/адекватно. Все понты сделанные с помощью CSS3(закругления, тени, анимация), которые не важны для общего восприятия информации и удобства пользования сайтом.

но ведь заказчики обычно хотят, чтобы в ие7/ие8 всё отображалось так же, как и в других браузерах, со всеми закруглениями и прочими элементами оформления, куда деваться.

Viper · December 5, 2012

но ведь заказчики обычно хотят

Заказчики обычно не знают чего они хотят. И выражают только свои предположения, догадки или "где-то, что-то прочитал...". Они хотят "конфетку" за "копейку" и что бы эта конфетка приносила прибыль. А как она будет реализована им по..., зачастую они просто хотят по-умничать, что бы выбить меньшую стоимость или просто показать что они что-то там знают...ИМХО

чтобы в ие7/ие8 всё отображалось так же, как и в других браузерах, со всеми закруглениями и прочими элементами оформления, куда деваться.

"Это было давно и не правда") Заказчикам нужно объяснять, что эти браузеры устарели и не поддерживают все эти фичи. Что за поддержу этих, мало-значимых элементов для пользователей ИЕ8-го(ИЕ7 уже не входит в список поддерживаемых браузеров по умолчанию, если клиент не понимает почему - покажи статистику по браузерам) они будут прилично доплачивать. Не один здравомыслящий клиент не захочет доплачивать +~20%(для запугивания доходит и до ~50% :rolleyes: ) за поддержку далеко не главных элементов дизайна для 7-12% пользователей. Главное правильно объяснить)

П.С. В дополнение: Гугл уже давно отказался от поддержки ИЕ7 вообще и грозиться в ближайшее время отказаться и от ИЕ8. Все брендовые сайты, компании-гиганты не поддерживают в полной мере ИЕ7/8, а некоторые на промо-сайтах так и вовсе... Graceful degradation не применяют разве-что не опытные разработчики(не считая исключений).

Edited December 5, 2012 by Viper

pashkje · December 6, 2012

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

Viper · December 6, 2012

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

Почему? Смотря какое содержание/структуру необходимо построить. Ошибка в том, что он ALT оставил пустым для logo, который был бы заголовком.

Heidel · December 6, 2012

Один знакомый верстальщик делает так

<div id="logo">
  <h1>
    <a rel="home" title="ООО «Элмат-ПМ»" href="/">
      <img height="75" width="267" title="ООО «Элмат-ПМ»" src="/images/logo.png">
      <span class="hideme">ООО «Элмат-ПМ»</span>
    </a>
  </h1>
</div>

при этом для класса .hideme заданы стили

  .hideme {
    position:absolute;
    top:-32768px;
    left:-32768px;
  }

можно ли использовать такой способ для задания логотипа и заголовка?

Edited December 6, 2012 by Heidel

Viper · December 6, 2012

можно ли использовать такой способ для задания заголовка?

бессмысленный и вредный способ.

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

Во-вторых, зачем этот span? Почему просто не добавить Alt для изображения? Alt это тот же текст, а в <hN> воспринимается поисковиками/системами как заголовок. А то как он скрывает этот спан, вообще верх извращений... :facepalmxd:

Зачем городить подобный бред, выдумывать подобные бессмысленные "костыли" не понимаю...

Heidel · December 6, 2012

ясно, не буду у него учиться, спасибо

Sign In

Оцените верстку

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information