Frontend Developer for EPAM Systems
0,0
рейтинг
19 мая 2008 в 02:18

Дизайн → Вредная верстка

Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:


  • О плохих приемах современной верстки;
  • О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.




Какие ошибки бывают в верстке?


  • Вызывающие проблемы у пользователей;
  • Влияющие на SEO;
  • Затрудняющие дальнейшую поддержку и масштабирование сайта и говорящие о низкой квалификации верстальщика.



Проблемы у пользователей


В первую очередь это доступность сайта. Доступность не только для здоровых людей, пользующихся современными браузерами на десктопах/ноутбуках с хорошей скоростью соединения и неограниченных какими-либо политиками безопасности, а доступность для клиентов:
  • с мобильных устройств;
  • с отключенным javascript’ом;
  • с устаревшими браузерами (IE5.x);
  • с низкой скоростью соединения;
  • с отключенной графикой;
  • с физическими ограничениями (в первую очередь это слепые пользователи).



Шрифты в px


body {font-family:Arial, Tahoma, Verdana, sans-serif; font-size:12px}

причём часто именно в таком убогом виде, а не в сокращённом

Чем плохо:


  • пользователи IE не смогут увеличить размер шрифта.


Как надо:


html {font-size: 75%}
body {font: normal 1em/1.3 Arial, sans-serif}




Общий CSS для всех media


<link href="main.css" rel="stylesheet" type="text/css" />

Почему плохо:


  • при печати страницы на принтере получаем не документ, а исковерканный скриншот сайта 1;
  • мобильные устройства не в состоянии отобразить большинство этих стилей и как следствие встроенные в них браузеры вообще не отобразят этот сайт 2;
  • OperaMini попытается конвертировать его в доступный вид, но результат будет весьма далёк от идеала: внешний вид не ахти, много бесполезных на мобильном устройстве элементов и больший чем должен был бы быть трафик у пользователя.


1 – сайт это в первую очередь документ. Это информация, которая может и должна быть представлена в виде: заголовок, текст, иллюстрация.
2 – встроенный браузеры мобильных телефонов (даже старых) вполне могут открывать не только WAP, но и обычные сайты, если они валидны, мало весят и сверстаны семантически, а не презентационно.


Как надо:


<link rel="stylesheet" href="css/main.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld" />


Почему не подключать общий стиль для всех, а в print.css и handheld.css лишь убирать ненужное?

Потому что всё не уберёте, все стили не обнулите, потому что это мартышкин труд, потому что после вас main.css допишут, а про print.css никто и не вспомнит.


Недоступный javascript


<a href="javascript:DoWin(this.href)">Refund Policy and Contact Information</a>


Сюда же относится глупости типа (div не может иметь фокус ввода и к нему нельзя перейти с клавиатуры)

А если у человека отключен Javascript?

Как надо:


<a href="policy_contact.html" target="_blank" onclick="DoWin(this.href); return false">Refund Policy and Contact Information</a>

или даже так:
<a href="policy_contact.html" target="_blank" id="policy_contact">Refund Policy and Contact Information</a>

в js на onload:
      document.getElementById('policy_contact').href = '#';
      document.getElementById('policy_contact').target = '_self';
      document.getElementById('policy_contact').onclick = DoWin;

Продолжая тему доступности:


*:focus {outline: none}

У меня сели батарейки в мыше, как я пойму на какой ссылке я сейчас нахожусь?
Не отбирайте у пользователя то, к чему он привык!
Также это относится к ссылкам:
  • всё-таки лучше когда они подчеркнуты;
  • незабывайте про стили для посещённых ссылок!




img вместо background


<a href="#"><img alt="Переплет на любой вкус" src="images/offer1.jpg"/></a>

Почему плохо:


  • Я мабилко и гружу непонятную картинку ужатую до нечитаемого размера;
  • Я принтер и зря засоряю лист бумаги картинками;
  • Это лишний презентационный мусор в коде для поисковиков, для тех кто будет поддерживать ваш код (вы не поменяете картинку только из css, придется лезть в шаблоны, доступ к которым может быть например только у программеров)


Как надо:


<a href="#">Переплет на любой вкус</a>

Стили (background-image и отступ под неё – в css)

Это касается вообще всех изображений на сайте — в тегах img должны быть только иллюстрации! но не презентационная графика.




Ошибки влияющие на SEO



Отсутствие структуры или вообще отсутствие как таковых h1,h2,h3…



Неправильные h1,h2,h3...

Сюда же входит непродуманность структуры заголовков, из-за которой потом программер, которому срочно понадобилось добавить новый блок с текстом на сайт копирует блок в котором уже есть h1, потому что «он выглядит так как нужно»
Верстальщик должен думать наперёд, он архитектор сайта, он должен предусмотреть стили даже для неиспользуемых элементов, он должен думать над структурой заголовков, и смотреть на их смысл, а не на внешний вид – разные по внешнему виду заголовки, могут быть отмечены тегами одного уровня, если такова логика документа.


Как надо:



Правильные h1,h2,h3...

Выше я описывал img vs background-image – это относится сюда самым непосредственным образом.

Вместо:


<div id="logo"><img alt="Trinity group" src="img/splash/trinity-group.jpg"/></div>



Надо:


<h1>Trinity group</h1>



Вместо:


<li><a href="expert_inner.html"><img alt="" src="img/splash/expert-menu-01.gif"/></a></li>



Надо:


<li><a href="expert_inner.html">Спроси сомелье</a></li>



Но как?!


Читаем про LIR и Pixy.



Антисемантика


<div class="menu">
  <a title="Kinderspiele" class="kinderspiele" href="#"></a>
  <a title="Artikel" class="artikel" href="#"></a>
</div>


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

Почему плохо:


  • У ссылок отсутствует текст.
  • Отсутствует логика в документе. Это тоже влияет на ранжирование.
  • На мобилке и в печатном варианте, этот код будет выглядеть убого даже если бы там был текст внутри ссылок.


Как надо?


<ul class="menu">
  <li><a title="Kinderspiele" id="kinderspiele" href="#">Kinderspiele</a></li>
  <li><a title="Artikel" id="artikel" href="#"> Artikel</a></li>
</ul>



Сюда же относятся перлы вида:


<div class="hr"></div>
<div class="header"></div>

и т.п. — используйте существующие html-тэги, старый добрый html (POSH).

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

Плохо:


<table id="t-personal" class="t-text">
  <tbody>
    <tr>
      <th>Настоящее Имя:</th>
      <td>Иван Копейкин</td>
    </tr>
    <tr>
      <th>Дата рождения:</th>
      <td>16 сентября 1977г.</td>
   </tr>
  </tbody>
</table>



Хорошо:


<dl id="t-personal">
  <dt>Настоящее Имя:</dt>
    <dd>Иван Копейкин</dd>
  <dt>Дата рождения:</dt>
    <dd>16 сентября 1977г.</dd>
</dl>



Плохо:


<p><strong class="black">Предметом бухгалтерского учета</strong> в обобщенном виде выступает хозяйственная деятельность предприятия
с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…</p>

Хорошо:


<p><dfn>Предметом бухгалтерского учета</dfn> в обобщенном виде выступает хозяйственная деятельность предприятия
с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…</p>



Плохо:


<div class="info">
  <p class="data">January 5, 2006</p>
  <p>Finally! We're officially launched! </p>
  <p>Quality product for SEO webmasters. </p>
  <a title="" href="#">Try it and you'll see</a>
</div>



Хорошо:


<div class="hentry">
  <var class="published" title="2006-01-05">January 5, 2006</var>
  <h4 class="entry-title">Finally! We're officially launched!</h4>
  <div class="entry-content">
    <p>Quality product for SEO webmasters.</p>
    <a href="#" rel="bookmark">Try it and you'll see</a>
  </div>
</div>



Плохо:


<div class="copy">2007 — 2008 © Строительная компания «Меридиан»</div>



Хорошо:


  <address class="vcard">
    © <a class="fn n org url work" href="http://www.meridy.ru/">Строительная компания «Меридиан»</a>, 2007—2008
    <span class="adr work">
      <span class="street-address">ул. Ленина 247</span> ·
      <span class="locality">Москва</span>,
      <span class="postal-code">109012</span>
      <span class="country-name">Россия</span>
    </span>
    <span class="tel">
     <span class="type">Work</span> <span title="+74957889775" class="value"> +7 (495) 788-97-75</span>
    </span> ·
    <a class="email" href="mailto:info@meridy.ru">info@meridy.ru</a>
  </address>



Почему?!


Потому что это:
  • Помогает семантическим роботам;
  • Позволит будущим браузерам отдавать юзеру всю необходимую ему информацию быстро и легко (контакты, новости и пр.)





Стили затрудняющие дальнейшую поддержку и масштабирование сайта и говорящие о низкой квалификации верстальщика



float: left для всего



Это ппц. По другому не могу сказать.

Что это означает:


  • либо что верстальщик не знает для чего нужно и что именно делает свойство float;
  • либо что он вообще верстать не умеет.


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

Упрощённо говоря свойство float было придумано для того чтобы текст мог обтекать картинки. Да, его можно и нужно использовать для позиционирования элементов, но не для всех элементов на странице!
Свойство float оно НЕ для того чтобы:

  • поставить элемент слева или справа, не бывает float: center;
  • ширина блока стала равна его содержимому;
  • блоки шли один за одним, как кирпичики;
  • и совсем не для того чтобы «неглючило в IE».


Что происходит реально:

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


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


Почему плохо когда ВСЕ элементы плавающие:


  • потому нарушена логика документа, веб-страница представляет собой не документ, а нагромождение блоков, которые держатся на честном слове. это презентационный подход: раньше было , теперь —
  • масштабировать такой сайт очень тяжело. Особенно программерам.
  • Глюков там немерянно (особенно в IE которому тяжело расчитывать такое кол-во плавающих элементов… которые кстати ещё и с Layout) И чем больше разрастается сайт, тем хуже становится. Мне приходилось поддерживать чужие сайты, где добавляемые ссылки типа «назад-вперёд», выпрыгивали даже из ячеек таблиц (!) на 200-300 пикселей(!!).
    Сайт становится подобен карточному домику, который может упасть от малейшего дуновения ветра.


Как надо:


Тут нельзя написать волшебный код который всё исправит. Для каждого макета — своя вёрстка, это только при презентационном подходе всё одинаково, тут я аппелирую к здравому смыслу — надо учится верстать. Читать спецификации. Читать блоги отцов. Учится. Думать головой.

Сюда же относятся перлы типа:


<br style="clear: both" />


Как надо:


  • overflow: hidden для нормальных браузеров (в особых случаях — :after с clear:both);
  • hasLayout для IE.



Неуниверсальные глобальные стили базовых элементов


a,body,p,span,td {font-family: Tahoma,Verdana,Sans-serif; color: #3C5C92; font-size: 10px;}
ul li {margin: 0; padding: 0; list-style-type: none}


Если вы увидели такое в стилях вашего верстальщика – остановите его!

Почему это плохо:


  • это грубое нарушение логики документа: например вы зададите стиль для блока – размер шрифта 12px, а текст в параграфах этого блока всё равно будет 10px. Вы зададите дополнительный стиль для параграфов, а ссылки всё равно будут 10px…
  • где-то на новой странице контент-менеджер вставит текст со списками… он не увидит списков. Потому что верстальщик обнулил базовый стиль, и создал специальный класс для списков! Контент менеджеру теперь html учить и в код лезть чтобы список добавить?
  • Самое главное – верстальщик не думает головой. Он просто хуячит как Рамшат и Джумшут.



Многократно вложенные div



Многократно вложенные div

Что это означает:


  • Что верстальщик привык к , и теперь многократно вложенными div (как правило с float: left) он имитирует ячейки таблицы.


Почему это плохо:


  • Такой код ничем не лучше чем табличный.
  • Такой проект невозможно масштабировать – только выбросить и сделать заново, по нормальному.




Как же определить плохо ли сверстан сайт или нет?



Для этого вам понадобится Firefox и несколько плагинов к нему:


Устанавливаем их и открываем сайт в Firefox.

Проверяем доступность сайта без картинок:


Images → Replace Images with alt attributes


Все заголовки должны быть видны. Графические ссылки должны быть заменены текстом или выделены фоновым цветом, с титлами при наведении мыши.

Проверяем структуру заголовков:


Information → View Document Outline


Должна быть аккуратная лесенка из ключевых заголовков и слов без красных строк.

Проверяем семантику:


CSS → Disable Styles → All Styles


Сайт должен стать похож на word'овский документ. Без оформительских картинок, с выделенными меню, списками, заголовками и т.п.

Проверяем микроформаты:


В правом нижнем углу браузера должна загореться иконка: Microformats present

Ihor Zenich @Delka
карма
106,2
рейтинг 0,0
Frontend Developer for EPAM Systems
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (339)

  • 0
    Можно поподробней о проверке на микроформаты?
    • 0
      т.к. валидатора для микроформатов не существует, единственный простой способ увидеть их наличие (кроме "посмотреть к код" :) явлеятся установка плагинов, которые интерпретируют информацию из них.
      Для Firefox это Tails Export (если на странице присутсвуют микроформаты в правом нижнем углу браузера загорается иконка-символ микроформатов) и Operator.
      • +5
        http://microformatique.com/optimus/ кстати валидатор микроформатов =) Надеюсь кому-то пригодится.
        • 0
          о, супер!
          только он на вложенных микроформатах лажается (проверил свой сайт, потом с microformats.org взял пример для чистоты эксперимента).
          но в любом случае - это огромный шаг вперёд.
          спасибо за ссылку!
          • 0
            Где конкретно он «лажается»? Это не праздный вопрос.
  • 0
    Распечатал.
    • +19
      Нафиг ты печатал текст, где много глупостей.
  • 0
    Хорошая статья.
    Неплохо было бы иметь какую-то тулзу, которая анализировала код страницы и на основе замеченных ошибок (не ошибок соответствий с W3C, а именно ошибочных решений) выдавала советы по исправлениям.
    Это весьма пригодилось бы начинающим верстальщикам, которые все эти методы в голове держать не могут, а по ходу работы совершенствовали своё мастерство. А то как закажешь вёрстку на фрилансе - там не то, что о помощи незрячим речи не идёт, там по 100 ошибок на страницу обычный валидатор w3c выдаёт..
    • 0
      webo.in?
      • 0
        он наоборот советует слить все css файлы в один:)
        • 0
          Все лгут=)
    • 0
      yslow?
  • 0
    Я очень часто ищу подобные статьи, их мало и по этому автор молодец! Если знаете где еще можно почитать, то дайте ссылку, буду очень признателен!
  • +13
    Ряд моментов:
    1. Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
    2. target="_blank" — не хорошо.
    3. :focus работает и без мыши. Так что проблем с keyboard-only не будет.
    4. «чтобы „неглючило в IE”» порой приходится не только безобидный float поставить, а столько намудрить, что самому потом смотреть противно. Поэтому см.п.1.
    5. Беда не в глобальных стилях. Это удобное и гибкое средство. Беда в неправильном их использовании.
    6. На масштабирование влияет не тот код что получается в результате, а то как составлены шаблоны.
    • +1
      >> :focus работает и без мыши. Так что проблем с keyboard-only не будет.
      речь о том что outline: none убирает рамку вокруг выделенных ссылок, и их становится тяжело заметить - это явное ухудшение доступности.
      • 0
        Аааа… Тогда да. Но если вместо outline используется другой способ выделения то можно (если осторожно).
      • +2
        вы бы видели как круто в новой опере выделяются ссылки с клавиатуры )
    • НЛО прилетело и опубликовало эту надпись здесь
      • +11
        Пользователи IE - это те, кто не знает про нормальные браузеры,
        а вы - эстет :)
    • 0
      >> 1. Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.

      ну как вы можете? как можно так называть людей на основании того, какой программой они пользуются? откуда хамство такое берётся?
      • 0
        Ровно так же, как можно называть людей на основании их поведения.
        Вы же не удивитесь, ели к вам гопота пристанет со словами "ну ты чё, слыш, мабилу гани"? Правильно, вы назовете их быдлом. Они ведь могут без этого обойтись, нормально общатся, нормально жить. Но ведут себя как быдло, вот и называются оным. Так же пользователи. Могут же, МОГУТ нормальными браузерами пользоватся. Но нет, им нравится сидеть на этом глючном и дырявом со всех сторон IE. Вот и получайте, чего хотели. Исправится ведь никто не мешает в любом случае.
        • НЛО прилетело и опубликовало эту надпись здесь
          • +2
            А есть люди, которые даже не подозревают что такое интернет браузер. У них на рабочем столе есть иконка эксплорера с надписью "интернетик" (Ира привет:)), они этим и пользуются. Им вообще по барабану что люди тратят 50% (может и больше) своего времени, чтобы сайты корректно работали под IE 5/6.
            • 0
              Они не становятся небыдлом от этого. Как уличная гопота может быть не в курсе, что можно прийти к успеху без отжимания мобил.
            • 0
              Ох. Не знаю даже как меня угораздило ответить на комментарий из 2008 года.
      • 0
        Вполне понятная и объяснимая лютая ненависть к IE плавно переходит в ненависть к пользователям IE.
      • 0
        и какая сволочь минусит вполне нормальные, но кому-то неугодившие комментарии, интересно?..
      • 0
        Моё суждение вторично.
    • +1
      Вы про корпоративные стандарты когда-нибудь слышали? Во многих конторах люди пользуют то, что дали (в большинстве случаев именно IE6). Все быдло кроме Я, так?
      • –2
        В таком случае быдло те, кто такие стандарты устанавливает. А причисление к быдлу тут скорее по аналогии с низкосортной музыкальной попсой. Жрут же… И даже ещё просят.
      • 0
        У нас в компании в корпоративных стандартах браузером по-умолчанию указан Firfox.
        Это очень упрощает разработку корпоративного сайта/ERP-системы.
        А какой смысл указывать в КС стандартным браузером IE? Кому от этого лучше/легче/удобней? Пользователям? Разработчикам?
        • –1
          >> А какой смысл указывать в КС стандартным браузером IE?
          У нас, например, есть SharePoint, в котором через FF не полазить - будешь вводить логин, пароль на каждую страничку.
          Причем я уверен, что это не единственная причина использования IE...
        • 0
          1. централизованная настройка и управление через групповые политики?
          2. автоматические обновления с какого-нибудь _локального_ wsus?
          3. использование уже оплаченного N лет назад приложения на ms jvm?
          4. требования сторонних сертифицирующих организаций (для госконтор)?
          • 0
            Понял.
            Спасибо за пояснения.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        У меня нет ЖЖ :-)
        Ищите лучше, мой основной ник Exel, просто на Хабре он был занят.
    • 0
      >Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
      Предположим, я простой электрик. Вы даже представить себе не можете, сколько мучений мне доставляют некачественные розетки, которые приходится устанавливать. А Вы ими пользуетесь, да еще и перегружаете. Как теперь мне Вас называть?
      В то же время я пользуюсь ИЕ, мне вполне удобно, и я понятия не имею как устроены сайты. Но оказалось что я - быдло.
      Я придумал выход: как оплачивается программист по Linux? а Windows?
      Не нравится писать под ИЕ - дерите за это с заказчиков…

      А на счет статьи — очень даже полезно, несмотря на то, что для большинства случаев много лишнего. Стиль у всех разный. Что удобно одному — не удобно другому. Почерпнул много полезного практического (прям хоть copy-paste) и идеологического. Сохранил страничку для заглядывания оффлайн)))
      • 0
        > Как теперь мне Вас называть?
        Я думаю, его можно называть электро-быдло.
    • 0
      >Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
      Предположим, я простой электрик. Вы даже представить себе не можете, сколько мучений мне доставляют некачественные розетки, которые приходится устанавливать, а алюминиевые провода — полная Ж. А Вы ими пользуетесь, да еще и перегружаете. Как теперь мне Вас называть?
      В то же время я пользуюсь ИЕ, мне вполне удобно, и я понятия не имею как устроены сайты. Приходится быть быдлом.

      Придумал выход: как оплачивается программист по Linux? а Windows?
      Не нравится писать под ИЕ - дерите за это с заказчиков… если убедите… )

      А на счет статьи — очень даже полезно, несмотря на то, что для большинства случаев много лишнего. Стиль у всех разный. Что удобно одному — не удобно другому. Почерпнул много полезного практического (прям хоть copy-paste) и идеологического. Сохранил страничку для заглядывания оффлайн)))
      Автору спасибо.
    • 0
      Очень грубо. Конечно, гонятся за парой пикселей и подгонять их, чтобы в IE выглядело также, как и в других браузерах, смысла нет. Именно потому, что будут жрать все подряд.
      Но называть таких людей быдлом... с таким же успехом можно былом называть всех, кто слушает что либо отличное от классической музыки. Непривередливость/всеядность в одной области — не показатель.
      Тем более, многие браузеры для людей с ограниченными возможностями могут быть сделаны на движке IE. Потому, что там(IHTMLBrowser2) и куки, и DOM-парсер и все остальное уже готовое.
  • 0
    Автор молодец безусловно! Серьезная, полезная статья для многих...
    Только вот читал я и думал, что моим клиентам все это нафиг не нужно! И уж платить за эти "дополнительные правильности" они точно не будут!!! А сверстать просто ровно и аккуратно это одно, а Правильно (как автор описывает), да еще для всех устройств, для слепых, для глухих и т.д. - это простите в три-четыре раза больше работы...
    Так что все это далеко не для каждого клиента и не для каждого сайта! Хотя стремиться к лучшему конечно же нужно по-любому...
    • 0
      ну так приучайтесь постепенно.
      автору спасибо, теперь бы найти того, кто содержащуюся в статье полезную информацию уместит на листочке в половину формата А4
      • 0
        половина A4 — A5 :)
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Тогда это два листочка A6 :-)
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Я с вами полностью согласен. Зачастую заказчику важен лишь конечный результат (т.е сам факт существования и работы сайта), а вот то как это сделано его не беспокоит. В этом основная проблема наших заказчиков, которые "я в этом ничего не понимаю, делайте всё сами - вы же профессионалы, отчитаетесь такого-то"... Т.е недальновидны в веб-разработке, но при этом без их одобрения ни одно нововведение в сайте не появится!
        • +2

          я ставлю не от хорошей жизни, а потому что в ИЕ после \n рендерится перенос строки


          display: block для img и всё будет ок. но собственно - зачем вообще использовать img когда есть гораздо более удобный способ - background-image?

          судя по описанию "убираем бордер - элемент отображается со смещением на одну строку вниз"


          вы столкнулись с схлопыванием границ
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              как это img в relative?
              img - одиночный элемент, смысл назначать ему position: relative - всё равно в него другие элементы не вставишь.

              img или background - решать вам, я лишь написал почему img плохо.
              • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                img - одиночный элемент, смысл назначать ему position: relative - всё равно в него другие элементы не вставишь.

                Э... Вы шутите или и правда не знаете что основная цель position:relative не в том, чтобы изменять координаты отсчёта для вложенных элементов. Иногда так бывает, что какой-то блок или картинку нужно сдвинуть относительно её позиции в основном потоке. Вот для этого и делаются <img style="position:relative; top:10px; left:10px;" />
                • 0
                  я знаю, но я не ясновидящий и незнаю как выглядит ваш макет.
                  • 0
                    нет. приведённая цитата как раз говорит о том, что вы не поняли зачем используется position:relative. К конекретному макету это отношения не имеет.
  • +8
    Хорошая статья. Но очень не понравился тон - бессмысленная высокомерность. :(
    К тому же местами противоречит сама себе - сказать, что сверстаное валидно и кроссбраузерно, но при этом в объяснении почему плохо "глюков немеряно". Так глючит или все-таки не глючит? :)

    И, имхо, намешано все в кучу. Например, есть сайты, которые вообще нет смысла открывать без картинок - чисто имиджевые.
    Опять таки, не сказано, как "правильно" сверстать, то что по стандартам и семантике в ИЕ нельзя сверстать в принципе...
    С размерами шрифтов - таже байда. На имеджевых сайтах размер шрифта должен правильно соотносится с картинкой. Для информационных сайтов - совсем наоборот. К тому же все нормальные браузеры давно чихать хотели в чем там у вас задан размер.
    А то что ИЕ.3.0 так не умеет - так это его проблемы. Человек с плохим зрением - пользуется нормальным браузером с произвольным увеличением текста, а не таким, который посчитали достаточным разработчики ИЕ.
    • 0
      валидно и кроссбраузерно
      • +1
        хабр скушал комментарий(

        валидно и кроссбраузерно неравно качественно


        16-кратная вложенность блоков не делает страницу невалидной, хотя это явная недоработка.
        Валидность можно сравнить с проверкой орфографии в вёрде - можно написать глупость, но зато без ошибок :)

        про "глюков немеряно" в float:left расскладках


        При поддержке такой вёрстки сталкиваешся с её непредсказуемостью, особенно в IE, которому очень тяжело обрабатывать такое кол-во плавающих элементов. Хаками и другими грубыми действиями её удаётся привести в чувства, но она неправильна изначально. Зачастую такие сайты первоначально проверяли в IE6, а потом через html>body #someelement {} приводили внешний вид в FF к запланированному.

        Опять таки, не сказано, как "правильно" сверстать, то что по стандартам и семантике в ИЕ нельзя сверстать в принципе...


        про это много хороших статей есть, достаточно в меру использовать hasLayout и одноразовые expression.
        • 0
          много статей - не спорю, но если уж вы взялись писать статью о том в каком случае нужно "гнать верстальщика в шею" - то уж постарайтесь описать все возможные варианты. На некоторые пункты, можно сходу назвать несколько примеров, когда они становятся бессмысленными.
          Например, сайт без картинок - звучит глупо в отношении фотосайта. Так же как возможное открытие его с мобильных устройств.
          Откуда вообще взялось вот это понятие про мобильные устройства? Мобильные устройства уже давным-давно умеют открывать полноценно "большие" сайты.
          А если уж делать версию для мобильных устройств, то тогда уж делать полностью другую "шкурку" специально разработанную под мобильные устройства, а не тот нечитабельный кошмар, который получается при описанных выше раскладах - пример - http://ljmob.ru/
          • 0
            Ну как мабилка полноценно откроет большой сайт на маленьком экране? Например на 176px?

            Разные версии для разных устройств - это презентационный подход. Это лишние расходы. Надо сразу делать нормально.
            • 0
              Если вы чего-то не знаете - не стоит утверждать, что такого не бывает. Скачайте себе в мобилу Оперу.Мини и посмотрите. Или вы так - только теоретически? :)

              Ну когда же вы уже поймете, что комбайны хуже ускоспециализированных вещей!
              Сделать так чтобы выглядело хорошо и в мобиле текстом и в браузере - нереально, не делая разных версий. В при просмотре в браузере должно быть море необходимых вещей, которые в мобиле будут только засорять и без того мелкий экран - дублирующая навигация - пэйджер вверху и внизу списка, куча копирайтов, хлебные крошки и т.д. и т.п. Если делать усреднное - то скорее всего получится и там и там говно. В браузере будет неудобно потому, что много будет не хватать, а в мобиле будет куча лишнего.
              • +1
                я каждый день захожу на сайты из OperaMini

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


                Если это не можете сделать вы. это не значит что это нельзя сделать. Можно. И очень даже легко.
                • 0
                  >я каждый день захожу на сайты из OperaMini
                  и до сих пор не заметили как можно преподнести "большой" сайт на маленьком экране? :)

                  >Можно. И очень даже легко.
                  Примеры в студию!
                  • 0
                    http://anime.kharkov.ua/
                    там есть доп. ссылка "к навигации"

                    а вообще на мабиле будет хорошо отображатся любой семантически качественно сделанный сайт:
                    http://www.webmascon.com/forum/viewtopic…
                    • 0
                      причем тут "отображаться"?
                      я ни слова не сказал, что нельзя сделать так, чтобы хорошо отображалось.
                      я говорю о нормально представлении инфрмации.
                      вот то, что там отображается - эту простыню из кучи текста, ссылок на форум (который в таком виде, кстати, не читается, километровый копирайт, куча счетчиков и т.д. - никто просто читать не станет - оно не подготовлено для того, что бы его читали. (это если смотреть с просто отключенными стилями).

                      Но я пошел дальше - я открыл этот сайт с мобильника (Nokia 5300 XpressMusic) встроенным (x)HTML-браузером.
                      То что оно начало мне качать что-то очень долго это один вопрос - текст появился и я даже начал проматывать в надежде на удивление) Но промотав процентов 5 от всей простыни, телефон выдал окошко, что ему надо что-то срочно догрузить. Секунд через 30 мне начало выдавать какую-то бесформенную хрень с кнопкой "регистрация" - а все остальное уползло за край экрана.
                      И все продолжало и продолжало что-то грузится. В этом месте мне надоело и я отрубил связь, так и не узнаю будут ли мне грузится счетчики, ссылки на форум, облако тэгов, ваши партнеры и другие абсолютно необходимые мне, человеку зашедшему на сайт по тарифам доллар за мегабайт, вещи.
                      Скажете - используй ява-браузер? Так явабраузером я могу и весь сайт посмотреть - выбрав нужный мне кусочек и не тратя при этом кучу трафика.
                      В общем, если вы действительно полагаете, что это сайт оптимизированный под просмотр на мобильных устройствах - то дальше и говорить собственно не о чем... :(
                      • 0
                        *сайт оптимизированный под просмотр на мобильных устройствах, с дорогим трафиком -
                        • 0
                          должно быть ~30 килобайт.
                          я проверял по счётчику данных столько и выходит.
                          не думаю что мой старенький телефон какой-то особенный.
                      • 0
                        должно быть вот так:

                        с мобилки будет результат почти 1:1 как если просто выключить стили - это легко можно сделать в современных браузерах. в Опере даже есть специальный режим: Вид - Небольшой экран (Shift-F11) - он отобразит сайт как если бы он был открыт мобильным устройством.
                        Остаётся лишь структурированный контент - заголовки, абзацы, списки, иллюстрации (не презентационные) и т.д.
                        А как у вас отобразилось, что вы говорите о неподготовленной простыне?

                        Я проверял сайт именно обычным встроенным в обычную мабилу браузером. Ещё старым древним телфоном SE K750 - всё отлично, результат почти 1:1 как в Опере в режиме эмуляции. У вас на Нокии обязан быть такой же результат.
                        • 0
                          Я не знаю кто, кому и чем обязан - я вижу то, что вижу. :)
                          Это как в старой шутке -
                          "- Акулы в Черном море не водятся!
                          - Это ты им расскажи - они об этом видимо не слышали". :)
                          Что-то в роде того.
                          Я не знаю - может у вашего телефона и такое разрешение как показано на картинке и все так же красиво выглядит, но у моего - стандартное разрешение 240х320. При этом все выглядит далеко не так радужно.
                          А что там ниже куда недоскроллено? не кнопочки ли рейтингов?
                          И не ссылки ли на форум, который даже так не "складывается" в тексте?
                          И нужно ли мне каждый раз качать эти 30КБ (или сколько там) с текстом, который я уже сто раз прочел, и минуту скролить вниз чтобы добрать до меню? В чем вообще смысл открытия этого сайта на мобильном устройстве?
                          • 0
                            у меня вообще 176х220

                            если на вашем телефоне так происходит, возможно он пытается загрузить сайт считая себя полноценным браузером? т.е. применяя те же css-стили что и desktop, а не те что написаны для мобильных.
                            • 0
                              главное не это.
                              главное - это вопрос - зачем мне заходить на этот сайт с мобильника?
                              если нет ответа на этот вопрос - все остальное уже не важно.
                              для начала нужно определить зачем что-то делается, а потом уже обсуждать пути реализации. иначе - будет плохо.
                      • 0
                        кстати ява-браузером будет вообще классно.
                        я смотрел в ОпераМини - она грузила 13 кб траффика! в два раза меньше чем весит просто html страница, без иллюстраций (пусть они и маленькие, но всё же) и css!

                        на экране - только информация, всё аккуратно. структурированно и ничего лишнего.
    • 0
      солгасен, чересчур эмоционально
    • +2
      даже в имиждевых сайтах есть раздел с "контактами" и не хорошо, если я не смогу до них добраться только из-за того, что у меня нет флеша, яваскриптов, картинок, сильверлайта или пучехрена.
      • 0
        вооот! :)
        Именно поэтому можно смело утверждать, что статья сырая. Т.к. качество верстки нужно оценивать не только и не столько по описанным выше параметрам. Гораздо важнее - соблюдение красивых отступов, дублирование флешей, простота в управлении, соответствие задумке дизайнера и много другого, о чем в статье ни слова.
  • +3
    Охрененно обширная и правильная статья.
    Посылаю автору лучи уважения и одобрения прямиком в карму.
  • +2
    Писатель статьи слишком умный. Видимо, так много времени уделяет верстке что аж самому тошно.
    • +3
      Не надо профанировать. Человек, который умеет не только х@ячить, но ещё и разобрался в сути достоин уважения, каким бы нудным вам не казался такой подход.
      • –2
        В какой сути, не понимаю, всё что тут написано это просто основные мысли изложенные в книгах по верстке, никаких открытий здесь вообще нет.

        Меня бесит излишняя самоуверенность автора в том что он пишет (именно так а если иначе, то верстальщик лох и гавнюк), этакий судья, нашелся блин... Мы тоже не лыком шиты.
        • 0
          О стандартах и логике невозможно написать ничего нового. Но можно разъяснить и расставить акценты. Именно это попытался сделать автор глядя на недопонимание со стороны верстальщиков. (Я согласен далеко не со всем сказанным по сути, но поднятие такой темы считаю полезным)

          Вы правы в том, что автор действительно не смог не задеть вашего самолюбия, однако если взглянуть на материал прагматично, то даже обиженному там есть с чем согласиться =)
          • –2
            Тока вот не надо играть в психологов. Я хуячу потому что все клали на эту верстку, лижбы не ехало никуда и проще на cms насадить было, вот и все вам правила которые подходят под 95% случаев.
        • 0
          "у самих револьверы найдутся :D"
  • 0
    Есть не только статьи, но и целый блог, который поможет определись и улучшить качество сайта
    http://webpagesthatsuck.com/does-my-web-…
  • +1
    Статью повесил в мемориз. Побольше таких!
    Автору - сто плюсов в карму.
  • 0
    очень нужная статья для программеров, дорвавшихся до верстки :0
    • 0
      Мечтаю о том, чтобы такие статьи были полезными для дизайнеров.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      палавина фигни, обычно требуют точного соотвествия с версткой в псд как же вы ее получите в em ?)
      • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        нужный размер в em = нужный размер в px / размер шрифта содержащего блока
        несмотря на дробные значения получаются размеры почти 1:1

        что до точного соответствия psd, то Вадим Макишвили на UA WEB советовал увольнятся из фирм где требуют точности в 2px вместо семантики :)
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            да можно вылизать все отступы, что нарисовал дизайнер, но дизайнер то не под линейку рисовал!
            ну я о к примеры промеружках между абзацами и т.п. Замерял один раз интервал между ними, установил в css.

            А по поводу увольнятся, он имел в виду то, что такая работа останавливает верстальщика в развитии, что нужно идти туда где это оценят, такие люди нужны.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                как раз с текстом тяжелее всего - блоки то что - спозицировал и сидят себе строго пиксель в пиксель там, где ты сказал, никогда проблем небыло.
                а вот текст - это и ошибки округления (на каскадах em), и интерьяж, и дизайнер - он же не робот, чтоб расположить все тексты точно как они должны были бы рендерится...

                но и это можно править, если нужно - даже стилями для конкретного браузера... правда неинтерестно это уже... но проблем с этим при семантической верстке - нет.
        • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          По-моему Вадим рекомендовал выбирать инструмент согласно поставленным задачам.
      • –1
        "Чтобы работать с em как с px, установите font-size для тега body 62.5%. Размер шрифта по умолчанию 16px используя это правило, мы задаем величину em равную примерно 10px (16 x 62.5% = 10). Это позволяет легко задавать в em размеры соответствующие пиксельным величинам, к примеру 1.3em примерно равно 13px."

        отсюда: http://designformasters.info/posts/70-ex…
        • –1
          75%, 62.5%, кто меньше?
          и размер шрифта у вас везде одинаков на странице
    • 0

      ибо не все браузеры понимают (понимали), что 1.3 — это высота строки


      IE 5.0 - 7.0, Opera 8-9, FF, Safari - понимают. Какие непонимают?! И как задавать интерльяж для тех что "непонимают"?

      Да и нах указывать «font-size: 75%»?


      чтобы неиспользовать дробное значение в body.
      Вам потом удобно будет размер шрифта по каскаду считать?
      высота 14px в em = (14 x 0.8125)/13 = 0.875 (0.8125 - это 13px а не 12 :p)
      размер в html задвётся чтоб пивести 1em = базовому размеру шрифта

      а как вы зададите размер шрифта для таблиц? (иначе заглючит в IE5)
      вложенные элементы будут всё уменьшатся и уменьшатся, у вас-то не 1em.

      Вижу очень много недостатков, невижу достоинств.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          это тот самый line-height только в сокращённой форме записи.
          сократить то можно и до body - но считать неудобно потом.
          или вы принципиально, чтоб поспорить? :)
          • НЛО прилетело и опубликовало эту надпись здесь
  • +5
    1. Коли ставите критерии качества, то и ставьте цену этой работы. А то люди начнут думать что классную вёрстку с микроформатами можно приобрести за $20 с макета

    2. Жёстко вы: body-size {font-size: 1em}. Корневые элементы исчисляют em относительно начальных значений, которое для font-size- medium, и в разных браузерах этот medium вполне может быть разный, поэтому как раз у body или html надо указывать абсолютную величину, а не относительную и, пожалуй, лучше всего в pt.

    3. Здорово что вы дошли в семантике до микроформатов… Может стоит разделять не только стили от содержания, но и скрипты? и вместо
      <a href="policy_contact.html" target="_blank" onclick="DoWin(this.href,360,440); return false;">Refund Policy and Contact Information</a>
      писать
      <a href="policy_contact.html" target="_blank" id="heh">Refund Policy and Contact Information</a>
      и уже в скриптах, вынесенных отдельно, объявленные среди head
      document.getElementById («heh»).onlick=«DoWin (this.href,360,440); return false;»

    Отличная статья, но в некоторых местах нарушено общий стиль изложения и заставляет перечитывать место по несколько раз, например про:focus, когда везде пишете как надо и как не надо, там «продалжая тему недоступности», причём без пояснения как везде

    • 0
      поправил про :focus

      спасибо за дополнения!
      • +1
        самое важное- это первый пункт)
      • 0
        По поводу пункта «2»

        В Опере исправил всего одну настройку- Web page normal text: вместо 16 поставил больше (30 вроде). Вот что стало с вашим (?) сайтом, вот что стало с хабром. Всему вина font-size для body в em.

        • +2
          Если у кого-то стоит размер текста 30px, то это ему зачем-то нужно, и не стоит мешать такому пользователю. Тут нужно писать не "Всему вина", а "Благодаря".
          К примеру, у пользователя проблемы со зрением и он увеличил размер основного шрифта в браузере, а тут кому пришло в голову задать его в абсолютных единицах.
          • 0
            если у кого-то стоит ie6 значит это ему нужно и не стоит ему советовать перейти на oper'у или firefox. это я о том что в нём немного другие размеры у некоторых элементов
  • 0
    очень информативно. автор - человек _свод_законов:) но, мне показалось, что есть в тексте какая-то эмоциональная составляющая оценок "хорошо-плохо". то есть видятся моменты, в которых вёрстка может зависеть от факторов, которые автор не учитывает за счёт некоего формализма. формалисты в вопросах вёрстки это как бы хранители эталона, но человеческий фактор надо бы также учитывать, хотя бы для коммуникации с коллегой, который будет потом суппортить код.

    Конкретнее:
    >> Плохо: div class="info"..., Хорошо: div class="hentry"
    инфо всё таки человечней звучит, не правда ли?

    и ещё этот момент (я мелочный, наверное):
    >> span class="adr work"...span
    неужели формализм в вёрстке действительно требует форматирования КАЖДОЙ строки адреса? мне кажется, что приведённые основания (помощь роботам и быстрая и лёгкая отдача информации браузерами) слишком общие.

    я правильно понял, описания типа a.footer права на авторское признание не имеют?

    таких пуристов побольше и любой холодильник acid-тест проходить будет:):):)
    • 0

      инфо всё таки человечней звучит, не правда ли?


      а можно ж объединять :) class="info hentry"

      неужели формализм в вёрстке действительно требует форматирования КАЖДОЙ строки адреса?


      требования формата hcard - ничего не поделаешь. А с другой стороны - как же ж ему разделить адресс на составляющие если мы не подскажем? Вообще же эти дополнитеьные стили бывают очень удобны - в футере редко пишутся полные контакты фирмы, поэтому можно в hcard вынести всё, а ненужное скрыть для отображения.
    • +1
      микроформаты сделаны что бы усложнить вашу жизнь и облечить жизнь пользователей, что бы адрес с сайта они могли добавить в адресную книгу в один клик. Обозначение адреса как адреса и есть самантика, но абсолютно все типы данных исполнять в html глупо, поэтому будут микроформаты
  • +1
    > Общий CSS для всех media
    > Как надо:
    > link rel="stylesheet" href="css/main.css" type="text/css" media="screen,projection"
    > link rel="stylesheet" href="css/print.css" type="text/css" media="print"
    > link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld"

    простите, а куда делись Aural, Braille, Embossed, Tty, tv? И как будет отображаться в них?
    • 0
      поправка, как в них будет отображаться я то знаю :) но это "как" совсем не устраивает :)
    • 0
      в них будет отображатся настолько хорошо, насколько семантически верно сверстан документ, т.к. он подгружается без стилей.
      если сайт действительно ориентирован на слепых пользователей, то конечно aural, braille, embossed можно определять, но и без них сайт будет хорошо читаться даже в браузерах (а таких большинство), ничего не знающих про эти media типы.

      тоже самое tty и tv.
  • +4
    количество гонора на единицу текста зашкаливает. со смыслом не так всё хорошо. особенно «порадовали» параграфы про javascript и float:left;

    кстати говоря: onclick как инлайн атрибут это ппц (с), а у вас он есть в разделе «как надо».
  • –5
    бля да и вообще вся эта батва это экономия на спичках) верстка - это ху..ня как бы вы на спичках не экономили на сэкономленные деньги майбах и виллу в испании не купить) половина пунктов мягко говоря спорная, половина зависит от контекста задачи, а ради половины и париться не стоит (итого 3 половины неплохо), еще я над версткой думал) насмешили, ее обычно нужно сделать и избавиться от нее поскорее) вот что с ней нужно делать а не выискивать в документах W3C какуюто ху.ню которая поможет сэкономить 2байта текста в CSS файле))некоторые пункты конечно заставили задуматься но в большинстве обычная провокационная статья в модном ныне стиле) пойдите выпейте успокаивающего чая и все будет хорошо.
    • 0
      насчитать 3 половины целого это надо постараться
    • –1
      А вот соглашусь. Все таки верстка в проекте занимает небольшую роль (по ресурсам).
      Так что в 90% достаточно просто нормальной блочной верстки под конкретный дизайн. Отсюдаже в 90% случаях потом проще будет переверстать частично или полностью при изменении дизайна, расширении и т.п.
  • +1
    Есть разумное зерно в статье - но написано чересчур "крикливо", автор показывает своё ханжество: зачем учить других, как делать нельзя, допуская ошибки, которых делать нельзя действительно?
    Я согласен со статьёй - но не со всеми её пунктами: валидность ради валидности и семантика ради семантики - это порой похоже всё-таки на параною.
    Выше написали много указаний, я напишу ещё один: хозяину сайта порой глубоко фиолетово и психологически далеко до разницы между «i» и «em», «b», «strong» и «dfn» - он пишет текст в визуальном редакторе, для него разница между WYSIWYG и MSWord/OFWrite должна быть минимальна, а исходя из пользования этими программами пользователь знает только несколько кнопок: К, Ж и пр. Если человек на той стороне писать ДОЛЖЕН писать галимый html... это уж, извините, неверно: люди, которые не знают языка разметки - и не должны о нём задумываться.
    Я, конечно, понимаю, что таких пользователей нужно "загнать в рамки" немного, но всё же не "заставлять дворника шить сапоги".
    • 0
      люди которые не знают языка разметки и не должны заниматься заполнением сайта. остальное популяцизм и метание бисера. хотя ради денег приходится.
      • 0
        Ты же знаешь, что занимаются :) Да и знание языка и умение на нём разговаривать - всё же суть разные вещи.
        Знаешь теги del, ins, dfn, tt и разницу между blockquote и cite? :) Разница зыбка при отсутсвии дзен-философии вёрстки:)



        P.S. Есть у меня подруга в Москве, которой поручили заниматься сайтом. Девчёнка крайне сообразительная, но разметка - не её конёк. Постоянно звонила с вопросами, как лучше и правильнее оформить - и порой проверял её заполнения. Как-то раз просто объяснил смысл "заголовок1-заголовок2-текст-заголовок2-заголовок3-текст" на примере книги - всё сразу встало на свои места. Примитивно, но всё же. Больше и не нужно. Пока что. А потом время покажет.
      • 0
        Заказчику порой трудно найти хоть когото, чтобы заниматься сайтом, там уже не до профессионала прости господи
        • 0
          Для этого при внедрении сайта учитывается ещё 10 часов обучения сопровождающих. Плюс инструкции для последующих "поколений" работников на этой должности.
          • 0
            Обучение неотъемлимый процесс, инструкции весчь полезная но редко используемая.
            Нехватка рабочих кадров, времени на сайт — с чем приходится сталкиваться в первую очередь.
  • 0
    Вот непонятно:

    Неуниверсальные глобальные стили базовых элементов
    ...ul li {margin: 0; padding: 0; list-style-type: none}

    Это случаем не про reset css? (Крайне удобная штука, если чутка подогнать под свои нужды)

    Еще непонятно (тут уже о затаратах времени, не всегда обоснованных):


    с устаревшими браузерами (IE5.x);

    Забыли про четвертый ;)

    с физическими ограничениями (в первую очередь это слепые пользователи)
    Часто можно встретить сайт, с учетом того что он будет корректно отображаться при выводе устройствами, использующими Шрифт Брайля?
    Логичнее предложить что у пользователя уже есть user css специально настроеный под его личные нужды.

    Заметка хорошая, есть полезные вещи, но все-же пусть останется за Маяковским определине "что такое хорошо и что такое плохо" ;)
    • 0
      reset css обнуляет всё, даже strong и em до обычного текста. это как образец, но не руководство к действию, иначе получим на выходе равномерный текст.

      в чём штука с ul-li


      когда сайт сдан, правки текстов как правило происходят из визига в админке.
      Вот контент-менеджер вставляет список - а он неотображается как список! Потому что верстальщик обнулил базовый стиль, и создал специальный класс для списков! Контент менеджеру теперь html учить и в код лезть чтобы список добавить?

      поддержка IE5.x обычно занимает один час (переопределить width и height на основании traditional box model, т.е. width = width + padding + border)

      Поддержка IE4 - это всё равно что поддержка 78-го бензина - пустая трата времени и сил.

      про слепых


      у нас в городе недавно на одной улице поставили говорящий светофор: "переход разрешён"/"переход запрещён"... а ведь у слепых уже есть палочка (user-css).
      • 0
        По-поводу reset.css font-weight: inherit; не означает font-weight: lighter;
        Да и подправить под свои нужды никто не мешает.
        А по поводу очень больших проэктов с привалирующим JS и проч. для IE5 мало того что потребуется отдельный стилевой файл, но гораздо больше времени, чем час.
      • 0
        Нужно не специальный класс для списков создавать, а задавать оформление контента. Использование Reset.css этому никак не мешает.
    • 0
      Специально для пользователей с ослабленным зрением некоторые браузеры уже умеют читать вслух текст с сайта. И в этом случае семантика рулит.
  • –9
    +1
    Отлично! Одна из лучших статей на Хабре за последнее время.
  • 0
    За статью респект, но имхо вы слишком сильно пытаетесь вылизать вертку, т.е. в некоторых примерах, абсолютно не будет разницы при отображении.

    Дальше, да надо заботиться о людях со старыми браузерами (во вском случае, пока такие люди составляют какой то существенный процент), но, опять же имхо, отключенный javascript - это проблемы исключительно юзера, или его админа. И мне совсем не понятно при чем тут слепые (я вообще не понимаю как они могут пользоваться компьютером).
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        слепые МОГУТ пользоваться компьютером. При этом браузер произносит содержимое страницы синтезированным голосом. Семантика влияет на расставляемые синтезатором акценты, так что именно там
      • и для списков имеют первостепенное значение.
  • 0
    Сори, забыл про тэги. Речь шла про <li> и <dd>
  • 0
    Да, слепые могут пользоваться компьютером, но про слабовидящих, которым необходима возможность переключения в спецрежим, тоже не забудьте, а то моему другу с таким зрением не подходят многие программы и на некоторых сайтах возможность пользовательских настроек отключена.
    • 0
      современные браузеры имеют возможность подключать и настраивать отдельные user.css, которые имеют приоритет перед стилями, которые навязывает сайт. У некоторых браузеров есть набор предустановок, где нужные стили user.css можно активировать просто галочками в меню. так что технически у слабовидящих есть возможность менять дизайн под себя вне зависимости от планов дизайнера.
  • –4
    "всё-таки лучше когда они подчеркнуты;"
    Совершенно не имеет разницы, подчеркнуты или нет. Ссылку и без этого можно отлично обозначить.
    • –1
      Согласен, всё зависит от дизайна - но она должна быть оформлена.
    • 0
      и это верно, обычно разницы цвета всегда достаточно, а подчеркивать ссылки потому что к ним привыкли динозавры с 95 года или так сказал Лебедев, вовсе не стоит.
      На Хабре, кстати,тоже не все ссылки подчеркнуты.
    • 0
      Имеет! Если каждый будет оформлять ссылки по разному (но не подчеркивая) то каша получится, а подчеркнутую всегда видно, и это привычно.
      Ссылку и без этого можно отлично обозначить.

      жирную сделать? — а как же strong
      наклонную? - а em?
      Цветом? — какой нибудь span например
  • 0
    вам +. в принципе со всем согласен, почти ничего нового не узнал (dfn был новостью, полез на w3c - он еще и валидный по стрикту оказался, то что нужно).
    Также использовал раньше dl-dt, но отказался потому, что если они для этого не предназначены(а задуманы они для семантики типа FAQ: вопрос - ответ), то для себя решил, что не надо их там писать.

    Уберите мат из текста(на детей может это и произведет впечатление, но у людей, уже знающих о чем текст, вызовет максимум кислую улыбку), и символы вроде копирайта все-таки писать нужно в html-эквивалентах & copy; .
  • НЛО прилетело и опубликовало эту надпись здесь
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Немного компенсировал вам карму.
        По сути у меня замечаний нет. Точно так же был удивлён наездом на float, как и вы. Собирался написать подобный комментарий, если бы не было вашего.
      • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Просто вы читали не совсем ту статью, что все остальные. Мало кто воспримет фразу "float:left для всего" как призыв совсем не использовать float.
      PS я не минусовал :)
      • 0
        Фраза "float:left для всего" по сути категорична и предвзята. Если обратить внимание на построение основного потока, то все display:inline элементы можно охарактеризовать как display:block; float:left. Имел ли автор в виду это? Для меня осталось загадкой. Если же его максиму рассмотреть с другой стороны множества, то можно заметить, что он ошибочно обвинил float в изъятии элемента из основного потока. Если внимательно присмотреться, то float элемент не теряет ни своего местоположения в основном потоке ни плейсхолдера (вытесняемого им свободного пространства страницы), то есть такая аналогия float с position:absolute очевидно безграмотна.

        Так что я рекомендовал бы не читать или игнорировать именно этот блок статьи, который построен автором исключительно на эмоциональном отношении к ошибочному рендерингу некоторыми браузерами некоторых частных случаев float, но никак не на логике или понимании технологии float.
        • 0
          А я похоже и не читал :). Мне кажется автор просто перепутал что-то вряд ли он это сознательно написал.
        • 0
          float изымает элемент из потока:
          Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
          http://www.w3.org/TR/2007/CR-CSS21-20070…
          • 0
            Спасибо, что показали что именно вы поняли неправильно. От этого легче отолкнуться. Float это реально одна из самых сложных для понимания технологий. В результате техническая реализация этого процесса отразилась на документации. Однако если начать отдавать себе отчёт в реальном поведении браузеров, то можно заметить, что под изъятием из потока имелось в виду только смещение блока по горизонтали к краю контейнера (или предыдущему float). Все остальные свойства объекта в основном потоке сохранены и совпадают с inline. Единственным исключением является отсутствие учёта высоты этого объёкта (и его плейсхолдера) для подсчёта высоты контейнера. Причём это исключение описано даже в указанном вами документе.

            Что такое настоящее изъятие из основного потока вы можете прочитать (и наблюдать своими глазами в браузере) на примере position:absolite.

            По сему рекомендую меньше придираться к букве и больше прислушиваться к духу рекомендаций W3C. Тогда возможно вы перестанете излишне эмоционировать по поводу поведения float и сможете сформулировать более точные рамки применимости этой технологии (как это вполне удачно получилось у вас с другими технологиями в этой статье).
            • 0
              это именно исключение из потока.

              Cама коробка блока, следующего за float'ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.

              Вот спецификация на русском:
              "Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока (или, в случае его отсутствия, по нижней части предшествующего структурного блока). Если в текущей строке недостаточно свободного места для перемещаемого объекта, то он последовательно, строка за строкой, перемещается вниз до тех пор, пока не найдется строка, в которой для него найдется достаточное количество места.

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


              Можете пример написать - увидите.
              • 0
                =)
                Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока

                То есть переводя с русского на русский ваш float-блок ориентируется на линейный блок, находящийся в основном потоке и сдвигается вместе с ним при пересчёте основного потока. Это говорит о присутствии в основном потоке. Просто привязка блока идёт не к предыдущему inline-элементу, а ко всей строке. А то что float-блок перекрывает следующий контейнер это специальное исключение из правила, которое введено для улучшения отображения. Это не делает элемент исключенным из основного потока, поскольку его положение жёстко привязано к основному потоку, хоть и по другим правилам.
                • 0
                  Это не делает элемент исключенным из основного потока, поскольку его положение жёстко привязано к основному потоку, хоть и по другим правилам.

                  Если абсолютно позиционируемому элементу не указывать top то он тоже ориентируется на текущий линейный блок, получается тоже в основном потоке?

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

                  Это все к тому, что из зависимости положение элемента от основного потока не следует, что он присутствует в основном потоке.
                  • 0
                    Элемент в основном потоке имеет не только позицию, но и влияет своим размером на другие элементы основного потока. Про inline, float и position:relative можно сказать, что они влияют на расчёт позиций других элементов основного потока, а вот position:absolute действительно изъят из основного потока и никак на него не влияет.
        • 0
          Хех, вот автор все и разрулил, хотя вы и были столь убедительны, что я даже не задумался, что к чему. Чтобы float что-то вытеснял используется свойство clear у следующего элемента, или overflow у родительского блока причем делается это так часто, что очень легко поверить в то, что float что-то вытесняет, тут я вас понимаю, сам легко повелся.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          для всего - это когда открываешь макет, а там почти у каждого div - float: left. бывает даже в стилях пишут :)
          float нужно использовать для раскладки колонками например, но не для того чтобы поставить три картинки вряд и т.п.
          Задача это статьи была рассказать про ошибки, дать методы исправления где это легко. про "правильную верстку" - это уже отдельная статья.

          Поэтому, все используют float как раз для того, чтобы "поставить элемент слева или справа"


          чтобы поставить элемент слева или справа есть margin-right: auto и margin-left: auto

          inline-block в мозилле


          display: -moz-inline-box; display: inline-block;
          • 0
            float нужно использовать для раскладки колонками например, но не для того чтобы поставить три картинки вряд и т.п.

            Ок, какими средствами вы ставите три картинки в ряд? Больше всего интересует ситуация когда картинки должны быть с подписью.
            • 0

              просто три картинки в ряд:



              <p>
              <img />
              <img />
              <img />
              </p>

              где img - inline-block

              три картинки с подписью:



              <ul>
              <li>подпись №1</li>
              <li>подпись №2</li>
              <li>подпись №3</li>
              </ul>
              • 0
                А теперь покажите как БЕЗ float вы разместите все эти вещи горизонтально в ряд.

                PS последний пример надеюсь не относится к картинкам контента, а только к презентационной графике, я полагаю?
                • 0
                  можно через inline-block, но это конечно изврат будет :) конечно к презентационной.
                  я не призываю НЕиспольозовать float. Это великолепное свойство. Я призываю использовать его с умом, а не для того чтобы переламывать сткруктуру документа под себя.
                  • 0
                    Вы именно призываете не использовать float так, как он правомерно может быть использован. Причём ваши аргументы иррациональны, а значит и вам есть чему подучиться в указанной документации. Не думаю, что без глубокого копания в документации вы сможете ответить на вопрос "Почему колонки по-вашему допустимо делать через float?" (есть inline-block, но им что-то никто таких задач не решает). В качестве другого задания для самостоятельной проработки приведу картинку, которая расположена на указанной вами странице докумендации w3c. Получилось ли бы у вас сделать такое без float? А это именно выровненная налево картинка, против такой реализации которой вы так активно агитировали.



                    Надеюсь натолкнул вас на мысль о пересмотре своего отношения к float. Ещё раз замечу, что дело не в "использование float для всего", а в том, что предложенные вами варианты похожи на неоправданную перестраховку человека, который так и не научился пользоваться этим свойством и потому решил его избегать.
                    • 0

                      Вы именно призываете не использовать float так, как он правомерно может быть использован.


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

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


                      я уже сбился со счёта какой раз повторяю вам о чём речь. вы увы непонимаете.
                      прочитайте ещё раз мои посты - я говорю о разумном использоваии и семантике.

                      насчёт рекомендации читать документацию


                      я её в отличии от вас читаю, и не пишу глупостей вроде того что float не винимает элемент из потока.
                      • 0
                        Я вообще не воспринимаю категоричных слов. Слова "каждый", "все", "всегда" игнорирую, заменяя на необходимость разобраться применимо ли это в конкретном случае. И хуже всего что вы не показали примеров что ВЫ понимаете под применимостью и недопустимостью float, а вместо этого вцепились в своё "каждый".

                        Я ни разу не спорил о РАЗУМНОМ использовании float. Но увы, вы ни разу не продемонстрировали его. Ваши примеры во некоторых случаях недопустимы ничуть не меньше, чем таковые бывают с float (и честно говоря вы не продемонстрировали чем 3 картинки float в ряд хуже). Вы не затронули, что inline-block привязан к тексту в контейнере и вы, "избегая глюков float" рискуете наплодить новые при решении элементарных задач.

                        Хамить пожалуйста не надо. Тут культурная дискуссия.
                        • –2
                          топик не про то что такое "хорошо", а про то что такое "плохо".

                          примеры когда float хорошо - колонки, врезки, картинки с обтеканием, галлереи (вместо картинок в таблице) и т.п.

                          если вам нужны доказательства моей профпригодности то вот: http://www.webmascon.com/forum/viewtopic…
                          там и хорошие примеры float есть) я его не боюсь, я знаю что это, и умею использовать.

                          если и вы и я согласны что float для всего - плохо, а там где надо - хорошо, тоо чём мы вообще спорим?
                          • 0
                            "плохо" без "хорошо" бесполезное крииканство. Причём у вас в статье почти везде, кроме float есть "хорошо".

                            В вашем профессионализме я не сомневался даже тогда когда обвинял вас в непонимании некоторых аспектов документации.

                            Я не согласен обсуждать "float для всего". Как я уже заметил, не мыслю такими категориями и мне необходима конкретика. Может так статься, что мы говорим об одном и том же, а может и нет, но за вашим обобщением это не понятно.
    • 0
      я имел в виду именно float:left для всего, а не его разумное использование.
      речь о неразумном использовании.
      • +1
        у вас есть примеры неразумного изпользования float? Поскольку в вашем топике написано слишком категорично и предвзято. Пара примеров помогла бы указать рамки разумности, про которую вы говорите.
        • 0
          неразумное - это когда float почти к каждому div, обычно их куча вложенных друг в друга.
          примеры можно глянуть на сайте фри-ланс.ру, я брал оттуда почти все примеры.
          • 0
            Странно, что на всё сказанное у вас нашлись иллюстрации, а неправильные float вы отсылаете искать чёрт знает где и в самой статье требуете для понимания вашей мысли заучить стандарт.

            А между тем в стандарте ничего не сказано ни про многоколоночную вёрстку через float, ни про недопустимость выставлять "картинки" в ряд при помощи этого float. Пока всё выглядит как не подкреплённые фактами домыслы.
            • 0
              это тоже самое вёрстка таблицами - даже внешне похоже.
              тут нельзя написать волшебный код который всё исправит. для каждого макета - своя вёрстка. это только при презентационном подходе всё одиноково - раньше было: <td></td>, теперь - <div></div>
              тут я аппелирую к здравому смыслу, нельзя дать список "идеальных" решений, но можно направить людей к самообразованию и повышению скила.

              для иллюстративных картинок есть inline-block (иллюстрация - часть текста).
              • 0
                У... а я то подумал, что вы отличаете вёрстку на div от css-вёрстки. Поскольку css-вёрстка не предполагает симуляции таблиц именно потому, что разные css-файлы могут содержать различный порядок демонстрации этого содержимого. На мониторе это табличка в столько колонок, сколько поместится при текущей ширине окна браузера, а на мобильнике это единственная колонка со всеми картинками. Ваш страх float-ов для этой ситуации не понятен. Особенно учитывая, что вы не можете без него сделать рядок из подписанных картинок контентной графики.
                • 0
                  я говорю о семантике
                  • 0
                    Предложенный вами пример не отражает семантику галлереи картинок.
                    • 0
                      галлерея картинок это

                      <div>
                      <img />
                      <img />
                      <img />
                      </div>


                      где img - float: left, div - overflow: hidden

                      для каждой вещи - свои решения. я не против float left. я против бездумного его применения.
                      • 0
                        вот тут имхо всё в порядке. только я так и не увидел вашего критерия "бездумности применения float". Может вы сможете дать ссылки на массово заблуждающихся, которые верстают через div {flaot:left;}? Поскольку я не могу припомнить примеров столь бездумного обращения с float.
  • +6
    Набор достаточно известных истин, перемешанный с некоторыми спорными утверждениями, поданными в качестве аксиом.
    Почему такие статьи постоянно претендуют на абсолютизм в мнениях?
    Да ещё используется в некоторых местах не нормативная лексика!
    Статья похожа на техническую - зачем добавлять элементы манипуляции читателями?
    Почему бы мне доверять автору, написавшему ещё один, хотя и большой, но явно не имеющий оригинальных "открытий" пост?
    За что статья получила такое большое количество "плюсов", наконец?
    • 0
      Очень согласен, некоторые высказывания настолько спорны, что не хочется читать статью дальше...
      • 0
        Я не нашёл для себя ничего нового в этой статье, а с некоторыми акцентами как и вы не согласен (например про float). Но тема поднята правильно и её неоднозначность это повод для хорошей профессиональной дискуссии, за что я и благодарен автору.
    • +2
      Насчет ненормативной лексики в статьях о веб-дизайне - видимо, мода, как и употребление слова "электропочта".
      • 0
        Электропочту завещал нам великий Лебедев, так что против этого не попрешь :)
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    по поводу CSS для разных устройств приведен не оптимальный метод, автору незачет
    http://webo.in/articles/habrahabr/02-del…
    • 0
      Не то, чтобы "незачёт", но оценку это имхо снижает. Незачётом на мой взгляд пахнет критика float
      • +1
        статья написана в довольно жестком стиле. Я бы не стал так максимизировать ситуацию. Просто автор не очень хорошо знаком с предметной областью, но это нормально. Обычно те, кто очень хорошо знаком, уже не пишут таких обзорных статей :)
        • +1
          На мой взгляд автор выше среднего знаком с областью, хотя я наблюдаю пробелы в понимании float и применении javascript. Для меня важнее то, что дискуссию подняли на довольно высоком уровне и наличие ошибок в утверждениях только обострит обсуждение =)

          Ну а жесткий категоричный тон в данном случае, надеюсь, не будет помехой для людей мыслящих, чтобы воспринять ценные крохи информации.
          • 0
            собственно, я это и имел в виду :) Т.е. профессионалам статья полезна не самой информацией, но дискуссией, вокруг нее поднявшейся. Характерный веб 2.0 :)
    • 0
      если подключать файл со стилями для всех устройств, а в нём первым строками сделат импорт css других media типов - мы заставим юзера грузить килобайты вполне возможно совершенно ненужного ему кода (например он заходит с мобильного телефона, тут не факт что страница вообще откроется)
      • 0
        :) тут возможен компромисс, например, если у нас мобильное устройство, то выдавать ему специальный файл, а не три на выбор.

        Во-вторых, если у меня будет выбор между ускорением загрузки 99% пользователей с нормальными браузерами и ускорением загрузки 1% с мобильными — я выберу первое.

        В-третьих, обычно размер страницы много больше, чем размер CSS-файла.

        В-четвертых, при gzip-сжатии для мобильных браузеров мы получим проигрыш в 7-10Кб кода, что совершенно допустимо.

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

        Однако, было бы хорошо провести тесты для мобильных устройств в этом плане, что-то мне подсказывает, что ситуация здесь не изменится ну никак.
        • 0
          С чего вы взяли что "мобильное устройство также будет грузить все файлы стилей"? Оно будет грузить только те, где media соответствует или отсутствует. Остальные css ваш телефон проигнорирует, можете проверить.

          Раздельные css с разными media только помогают загрузке, а не увеличивают число запросов и трафика, как вы предположили.
          • 0
            у меня, к сожалению, нет такого телефона, с котрого можно проверить, однако, для обычных пользователей браузеры грузят все файлы. Это уже легко можно проверить
            • 0
              вот и проверьте. только не забудьте указать корректные media
              • +1
                какой же Вы упертый, однако. Вот страничка
                webo.in/tmp/css-includes-testing.html
                заходим — и тестируем, сколько влезет.

                Из того, что получается: Firefox (2), IE (7) грузит все, Opera грузит все, но показывает по мере загрузки (поэтому не удается отловить, загружен ли файл тупо по задержке JavaScript). Safari (единственный!) не загрузил handheld

                Смотрел по логам сервера и YSlow.

                Если кто подскажет, как можно проверять, загружен ли CSS-файл или нет (кроссбразуерно, подчеркну!) — буду очень признателен
  • +2
    > < li>< a href="expert_inner.html">Спроси сомелье< /li>
    Исправьте, пожалуйста. Незакрытый тег глаза мозолит.
    • 0
      cпасибо, исправил!
      (8 часов писал, устал :)
  • +2
    Если Вы представляете какую-либо фирму, или фрилансер, то после такой замечательной статьи нелишним было бы оставить контакты нормальных верстальщиков ;)
    • 0
      Имхо наоборот. Академизм нельзя смешивать с коммерцией.
      • +1
        ориентация на ультра-качественный подход не мешает делать нам коммерческие сайты и сдавать работу в срок.
        • 0
          Это и не ставилось под сомнение. Утверждение касалось лишь того факта, что между образовательным и рекламным материалом должна быть разница. Если в образовательной статье размещена реклама, то под сомнение может попасть весь материал.
    • 0
      Харьков, фирма Ideus, веб-технолог
      delka@ideus.biz
  • 0
    Спроси сомелье
    Исправьте пожалуйста.
    И спасибо вам за хороший материал.
    • 0
      Хабр проглотил HTML. Ошибка в строке содержайщей "Спроси сомелье".
  • +1
    Много паранойи, а в целом полезно.
  • –1
    а начиная от скольки вложенных div начинается плохой тон? на anime.kharkov.ua 4 вложенных div это еще приемлемо или уже нет?
    • 0
      больше 6-7 врядли потребуется. считая html и body.
  • 0
    Подскажите, как лучше увеличивать картинки? сейчас делаю так
    <a href="картинка" target="_blank">превью</a>
    • 0
      js-библиотеки LightBox или GreyBox
      про GreyBox
    • НЛО прилетело и опубликовало эту надпись здесь
  • –1
    бреда много...
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Спасибо. Это наиболее полная подборка из виденных мною.
  • –1
    СОХРОНИЛ!!1
  • –3
    в основной массе чушь.
    особенно поржал над "если у меня сели батарейки в мыше".
    а если у тебя руки из задницы растут что мне делать?
  • 0
    спуститесь на землю и тон смените.
    читать неприятно.
  • +1
    Мне кажется, отличная статья, мало того, что доступно и понятно написанная, так и собравшая достойные комментарии по теме :)

    Почти все понятно, очень жаль, что я ничего не знаю про микроформаты, обязательно надо будет почитать.
    • 0
      посмотрите, например, читшит http://suda.co.uk/projects/microformats/…

      на самом деле, все просто - связь контента с его назначением (это — тег, имя автора, мнение и т.д.)
  • 0
    Надо:
    <li><a href="expert_inner.html">Спроси сомелье</li>

    Вы специально <a> не закрыли?
  • +4
    Статья спорная, состоящая на половину из общеизвестных фактов и на половину из спорных утверждений автора, выдаваемых за истину в высшей инстанции. Все это, приправленое максимализмом в суждениях, расстраивает, так как не все способны критично воспринимать вещи.
    • 0
      ...что мы и наблюдаем в комментариях.
      • 0
        "... Это печально" ©
        • 0
          Это сигнал "с волками жить по волчьи выть", что обязательно надо учитывать особенности аудитории.
          • 0
            Это не сигнал, а одно из краеугольных правил постописательства. Всегда нужно четко понимать что ты пишешь и для кого.
  • +1
    Статья средняя, не знаю насколько автор прав, но в своей работе я столкнулся с тем что всем действительно пофиг что находится внутри, просто нужно делать качественно а семантически и все остальное по желанию. А проверить хорошо ли сверстано посмотреть не разъезжается ли дизайн при увеличении шрифта, этого хватает с лихвой. Единственное в чем соглашусь для сео полезно выводить заголовки и остальное, правда сейчас так все делают (из тех кого я знаю) поэтому эффективность падает. Использование _blank оправданно, меньше места и да и вообще зачем делать валидно и обманывать используя скрипты или иное.
    Описанные внизу примеры совершенны логичны и правильны. Не знаю таких кто по другому делает. Да и вообще заказчикам надо обращаться в фирмы пользующуюся доверием и смотреть визуально на результат.

    Если есть цель то нужно сделать максимально удобно и эффективно, если нужно оптимизировать под СЕО значит надо оптимизировать и так далее. Конечно есть хороший тон. И в частности я его придерживаюсь.

    Не очень понял следующий момент:
    Предметом бухгалтерского учета чем стронг то не угодил?
    Предметом бухгалтерского учета это курсив для новых терминов связь не очень уловил.

    В общем очень правильное высказывание насчет того что нужно думать головой :), если требуется неординарные вещи то после обдумывание многие пункты нарушаются это же не значит что верстать не умеют просто того требовала ситуация.

    Итак подведу итог чтобы определить заказчику хорошая верстка или нет нужно посмотреть не разъезжается ли она при увеличении шрифта (без перегибов естественно). Этого вполне хватает. Плюс конечно следование макету и ТЗ а все остальное это к теоретикам, надо деньги зарабатывать а не сидеть думать поставить див или h2
    • 0
      "Предметом бухгалтерского учета" - это определение, поэтому по семантике здесь дожен быть dfn, а не strong.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      А в чём проблема с IE6.css?
      • 0
        В лишнем css, который сложно отлаживать при групповой разработке. Так в одном файле отредактировал блок определённого стиля и вроде бы всё хорошо. Ну попросили бэкграунд поменять, к примеру. Понимая логически, что ни каким боком это не может повлиять на ИЕ, проверяем лишь в любимой Опере или Сафари. Но потом оказывается, что пользователи ие видят совсем другую картинку, потому что прошлый разработчик вынес фильтры и в отдельный CSS. Так мы грузим один файлик вместо двух и сразу видим наглядную картину всего стилевого блока.
        Это, кстати, было на реальном проекте.
        • 0
          У меня вот совершенно противоположный опыт: я дважды писал посты про то, как МойКруг ломается из-за того, что у них хаки и expression'ы для IE написаны в общем файле, из-за чего браузеры воспринимали весь блок правил как ошибку или вообще отказывались парсить все стили после этого правила. Это раз.

          Два — это трафик. В сложных проектах CSS-файлы для IE получаются довольно большие. Зачем отдавать пользователю на FF то, что ему нафиг не нужно?

          Ну и ещё один вывод — заниматься вёрсткой на всех этапах должен если уж и не автор, то хотя бы человек, достойно в ней разбирающийся. И тестирование всех изменений в самом массовом браузере — про это даже глупо упоминать.
          • 0
            1. это всего-лишь означает, что писать эти "выражения" нужно не абы как, а в соответствии с определёнными ограничениями. что за посты?

            2. нужно реиспользовать код. в частности - выносить некоторые фиксы во внешние компоненты (png.htc, например). в целом, всегда можно достичь разумного компромиса.

            3. зачем делать сложно, если можно делать просто? ;-)
            • +1
              Посты: Если круг оказался вдруг, Пять тысяч пятьсот двадцать шесть

              Имхо, делать нужно не просто и не сложно, а оптимально. Я считаю оптимальным отдавать код, написанный только для этого браузера, только этому браузеру.
              • 0
                если очень хочется селективной отдачи, то всегда можно написать компилятор цсс, который будет выносить специально помеченные блоки в отдельный файл.
                следить за этим вручную - излишний геморой.
                • 0
                  Геморрой для вас, в то время как для многих — это вполне удобно. Аргументы выше.
                  • –1
                    геморррой - для того, кто будет это поддерживать.
                    любители спать на гвоздях идут лесом.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Про «проблемы и 8 и 9 версиями» и правда смех сквозь слёзы )
          В любом случае, я сам использую только один файл ie.css, в котором уже идёт дополнительная фильтрация: * html, w\idth и т.п.
  • 0
    ошибочка:
    <p class="data">January 5, 2006</p>
    не data, а date
    все-таки это дата, а не данные.

    а можнете подробнее рассказать как правильно расставлять теги h1-h6?
    Вместо <div id="logo"><img... вы советуете <H1>
    Например есть сайт информационного агенства, в header я ставлю тег h1. Тогда при выводе списка нововстей все заголовки новостей должны быть уже h2? А при просмотре конкретной новости тоже h2?
    • 0
      это простой пример чтоб передать идею.
      для новостного агенства разумеется, при просмотре конкретной новости, заголовок должен быть h1
  • 0
    LABEL без ID
    или без for ?
    если for вот это действительно ошибка, это просто не удобно, лично я уже привык тыкать на название поля и попадать на него же.
    • 0
      Если вы вспомните что в for вписывается ID, то вопрос отпадет сам по себе ))
      • –1
        а если вспомните, что указанную функциональность (тыкнуть в слово - попасть в поле) можно сделать при помощи label без атрибута for, то поймёте, что вы слабо разбираетесь в предмете и вряд ли вам стоит указывать верстальщику, что делать
        • 0
          Действительно, куда уж мне... Может поделитесь сакральным знанием?
  • +1
    как всегда в топике найдутся люди, которые будут друг друга поливать грязью только из-за того, что "он не использует такой браузер как Я!". Люди вы не понимаете что вы засоряете тему такими комментариями, и становится неудобно читать комментарии другим людям, т.к. им приходится читать вашу "войну".

    Автору статьи респект, пару моментов здесь нашел и про себя, буду исправляться =)
  • 0
    Полезно, конечно. Но пахнет паранойей...
    З.Ы. Батюшка в очередной раз научил правильно молиться и надавал по рукам за святотатство...
    ;)
  • 0
    Может я и критичный, но в статье не все гуд, подключение нескольких css глупо - влияет на скорость загрузки страницы. Не задавать шрифт в пикселах тоже не всегда верно, браузеру нужно знать от чего отталкивать проценты лучше задать для html в пикселах, а для body в процентах, куда будет более точно подогнать под дизайн. С этим высказыванием полностью согласен "Верстальщик должен думать наперёд, он архитектор сайта, он должен предусмотреть стили даже для неиспользуемых элементов...". В целом хорошая статья, нужно быть внимательнее к своему коду, но не стоит загонять себя под рамки как можно и как нельзя, главное валидно, одинаково под всеми браузерами, устойчиво под разными разрешениями и с отключенными стилями, сео грамотно. А если тебе не хочется запятнать свое имя то и легко читаемый код.
    • +1
      Автор говорил о подключении нескольких CSS для разных устройств.
      • 0
        Суть не меняется, все равно больше http запросов к серверу, лучше все сделать в одном CSS.
        • 0
          Что всё? Версию для печати и версию для наладонников?
          Если я браузер, я потяну по http только тот файл, который обозначен как media="screen"…
          • 0
            Хм.. Я тоже так раньше думал :) Оказывается браузер тянет все css, даже с ненужным media.
            • 0
              Ок. Тогда как вы предлагаете делать версию для печати средствами CSS для того, чтобы при ненужности print.css не тянулся?
              • 0
                http://webo.in/articles/habrahabr/02-del…

                Возможно, эта статья была и на Хабре.
                • 0
                  Я просто не успеваю читать все переводы Николая )
                  Насчёт первого способа всё ясно, а вот у второго есть сомнительная пометка, что «это и более элегантное решение с точки зрения уменьшения запросов к серверу» — что звучит несколько странно, поскольку запроса всё равно будет два и оба файла загрузятся.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    <a href=\"policy_contact.html\" target=\"_blank\" onclick=\"DoWin(this.href,360,440); return false;\">Refund Policy and Contact Information</a>

    объясните зачем в конце нужен "return false"?
    • НЛО прилетело и опубликовало эту надпись здесь
  • –2
    3.14здеть 3.14здато — это круто! Автор в теме, за что почёт и уважение. Единственное, что смущает отсутствие ссылок на такие же 3.14здатые работы автора. Просто разглагольствовать что-то всё больше и больше все стали, а толку вот…
    • 0
      • 0
        Красиво, но
        <h1>Пинтагон<a href="index.html"></a><span></span></h1>
        Отключаем стили, теряем ссылку на главную… Печально… Было бы разумнее
        <h1><a href="index.html">Пинтагон<span></span></a></h1>
        и позиционировать уже так. Хотя есть спорное мнение, что логотип семантически более верно представлять картинкой с альтом. А так всё здорово, хотя мне ближе стиль вёрстки, как на badoo.com.
        • 0
          если вставить название в ссылку - текст будет отображатся поверх изображения.
          если убрать его потом text-inden'том - теряется смысл - при отключенных катинках не будет видно текста.
          Можно добавить в <a></a> что-то вроде "на главную", но имхо не очень красиво.
          • 0
            Навскидку

            <h1><a class="logo" href="index.html">Пинтагон<span></span></a></h1>

            .logo { display:block; position:relative; width:300px; height:150px; }
            .logo span { position:absolute; left:0; top:0; width:300px; height:150px; background:url(../i/logo.png) 0 0 no-repeat; }

            Разумеется и здесь текст может «выползти», при неразумном использовании, но уже куда юзабельнее.
            • 0
              какие стили для a?
              если в нём есть текст - он отобразится поверх графики
              если текст скрыть - его не будет видно без картинок
              • 0
                a класса logo, я же доступно написал, соответственно стили класса logo. Не проверял, но должно работать 99%; Соответственно ширина и высота в стилях, это размеры самой картинки лого. А лого непрозрачная картинка, иначе дополнительно задать цвет фона.
                • 0
                  а, понял, быстро смотрел

                  span тогда перекрывает ссылку. в IE перестаёт работать и в принципе это логично - над ссылкой же находится другой слой, некликабельный.
                  • 0
                    К чему лукавить? На днях отверстал, впрочем, как всегда:
                    <a href="#">такая-то компания <big>ХРУМ-ХРУМ</big><span><!-- here goes logo! --></span></a>
                    Единственное, что нужно не забыть сделать - поставить cursor: в hand и pointer для span, просто для того, чтобы эта рука появлялась. Но ссылка работает - только что проверил.
  • +1
    Чуть лохмато и полно максимализма, но… верной дорогой идёте, товарищ ;)
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Если опустить ругань (излишнюю имхо), то в целом ваша мысль ясна. Однако насчёт отключенных картинок вы превратно поняли автора. Отключение картинок это не сама цель, а метод проверки что все картинки подписаны и следовательно доступны для людей с ограниченными возможностями. Кроме того это хороший способ увидеть, что когда заголовки или меню делаются картинками, то и поисковые роботы смогут прочесть что там написано.

      А что клиент всегда прав расскажите врачам =)
  • 0
    Если бы все прочли книгу Карра Аллена "Легкий способ бросить курить" и перешли на человеческие браузеры - жизнь стала бы лучше :)
  • –1
    В принципе, согласен.
    Не соглашусь с тем, что проверять надо с отключенным JS - если сайт изначально пишется как динамический и все такое, то АБСОЛЮТНО никчему проверять его с отключеным js - он не должен и не будет работать. Если у пользователя отключен js и он заходит на такой сайт - его право.
    Другое дело если сайт подается как кроссконтентный - тогда да, вспомогательная навигация на js может отпадать.

    Что касается верстки DIV-ам или же TABLE - я считаю что использовать надо СОГЛАСНО задаче, а не потому что TABLE плохо, а DIV - хорошо. Зачастую DIV-ный дизайн является картиночным, т.е. если потребуется потом сделать гдето резиновость или же добавить какойто блок - разъедется очень много элесентов в отличае от TABLE-дизайна. Какой выбирать - авбирать Вам ) Если сайт - это визитка - тогда можно div, если же сложный портал с большим количеством неупорядоченного контента - я бы не советовал - ну да это мое ИМХО.
    • +1
      <table> предназначен для разметки табличных данных, а не для позиционирования
  • –2
    Надо учится верстать. Читать спецификации. Учится. Думать головой.

    Да-да, надо учиться, учиться и еще раз учиться. ппц он не только у плохих верстальщиков — он прежде всего в голове тех, кто учит других.
  • –2
    > body {font: normal 1em/1.3 Arial, sans-serif}

    кто будет указывать единицу измерения для высоты строки?


    > Отсутствие структуры или вообще отсутствие как таковых h1,h2,h3…

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

    > Вместо: [a href="expert_inner.html"][img alt="" src="img/splash/expert-menu-01.gif"/][/a]
    > Надо: [a href="expert_inner.html"]Спроси сомелье[/li]
    > Но как?! Читаем про LIR и Pixy.

    а может ты лучше почитаешь про аттрибут alt?


    > Плохо: [div class="copy"]2007 — 2008 © Строительная компания «Меридиан»[/div]
    > Хорошо: портянка на десять строк

    думаешь твой vcard на _каждой_ странице кто-то оценит?


    а микроформаты - это вообще идиотизм. у каждого микроформата свой микроформат, каждый нужно по своему парсить, можно запросто породить конфликт (в том числе и между разными микроформатами), не зная микроформата новый верстальщик не сможет определить используется ли данный класс только для наложения стилей или ещё и для указания "семантическим роботам", хтмл неимоверно раздувается.
    • +2
      кто будет указывать единицу измерения для высоты строки?

      RTFM, высоту строки можно указывать без единиц, только в этом случае она будет рассчитываться иначе — line-height: abnormal

      нумерованные заголовки - это вообще несусветная глупость … парсить … каждый раз или дробить документ по главам в релационной бд

      Мы по-прежнему говорим про вёрстку? Парсинг и БД — это проблемы других людей. Наша задача — качественно и аккуратно сверстать, чтобы страница не была куском беспомощного текста, который обёрнут в гениальный дизайн, а была полноценным документом. Если это не аргумент, то подумайте про SEO.

      а микроформаты - это вообще идиотизм

      Для использования микроформатов есть свои цели. Если они вам не интересны — не используйте их. Дел-то…
      • 0
        разницу в расчётах не уловил, но указание единиц измерения по любому хороший тон.

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

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

          Вы не просто не уловили, вы не поняли. Может для opacity: .5 тоже стоит указывать единицы измерения?

          правильную структуру заголовков … сложно технически поддерживать

          Если редактор не идиот, то он сможет понять, как H3 хотя бы визуально отличается от H1 и не натворит глупостей.

          тех же целей можно достичь и без идиотских микроформатов

          Ну, давайте — расскажите мне как разметить адрес так, чтобы он не был просто массивом символов, а был разбит на значимые элементы. Зачем? Плагины и поисковики.
          • –1
            и при чём тут редактор? один и тот же текст может быть вставлен на разных страницах и иметь разную секционную вложенность. банальный пример: страница блога со всеми записями в виде ленты и страница просмотра одной записи. более сложный пример - книга, которую можно читать по главам, а можно вывести её одной страницей.

            для разметки текста существует замечательный формат - XML. для указания семантики - RDF. а для совмещения различный словарей - XMLNS.
            не вижу смысла изобретать велосипед, снова и снова набивая шишки с конфликтами, валидацией, парсингом и тому подобными вещами.
  • 0
    0.05 руб.:

    1. Пользователи с отключенным JS составляют около 0.2-0.3%. Кроме того, с помощью <noscript> можно вежливо попросить включить JS, иначе юзабилити сайта может пострадать. Как-то так.

    2. Пользователи с браузером Microsoft Internet Explorer 5 составляют 0.51%. Сколько из них боты/пауки — остается только догадыватся.

    3. Пользователям "с отключенной графикой" выводится совет-предупреждение, что сайт без графики может оказатся некрасивым. Пользователь сам выбирает как ему смотреть на сайт. В конце концов, если пользователь решил смотреть на сайт без графики, и/или без JS — это его проблемы личное дело. Верстальщик не обязан подгонять графический дизайн под неграфическое отображение. То же относится и к CSS, и к JS, который по умолчанию включен. Если он отключен — вы сами этого хотели. И, да, как было сказано выше, "99% пользователей не умеют, да и вообще, не знают, что картинки в броузере можно выключить".

    4. Как надо на самом деле:
    * {margin:0;padding:0;}
    body {
        background-color: #FFFFFF;
        font: normal 14px/1.4 'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;
        }


    5. Вкратце. Если вы выйдете среди зимы на 30-градусный мороз без одежды — природа не обязана сделать так, чтобы вам было тепло или хотя бы сносно в таких условиях. Вы просто замерзнете. Это ваш выбор, ваше дело, ваши проблемы. В данном примере природа — верстальщик. Одежда — css/js/images.
    Не требуйте противоприродных вещей там, где они не уместны.
    • 0
      1. Многие пользователи с отключенным js заодно блокируют картинки. Поэтому статистика сильно занижена (счетчик не работает вообще).
      3. Сайт без графики имеет одно маленькое преимущество: на мобильных браузерах он может просматриваться в оригинальном виде. Практически без затрат верстальщика на это.
      5. Об этих вещах задумываются при серьезной разработке (не каждый сайт; обычно крупные порталы (а не то, что сейчас принято ими называть)) В этой ситуации многое из топика экономит время на создании и особенно поддержке.
      Но требовать этого для всех серьезных работ действительно неуместно.
  • +1
    по-моему, хтмл-кодеры больше всех склонны к холиварам и той самой подмене целей средствами, о которых не так давно говорилось
  • 0
    В принципе всё здорово написано, но насчет использования устаревших тегов не согласен, тк где то читал о том, что w3c устаревшие теги в следующих спецификациях будет убирать. К сожалению не могу найти ссылку на источник...
  • 0
    Одна из лучших статей на Хабре за последнее время, браво.
  • 0
    Прочла с большим интересом, спасибо. Но заменять один див с "2007 — 2008 © Строительная компания «Меридиан»" на все эти спаны - уже паранойя какая-то. :)
    • 0
      Это не паранойя, это использование микроформатов для конкретных целей. Это же не призыв всем «Срочно все размечайте код именно так»… это скорее предложение начать использование микроформатов или хотя бы понять, что это вообще такое, прежде чем кричать «идиотизм! куча спанов!»
  • +1
    В целом всё довольно здраво, однако два момента спорны.

    — Вложенные элементы — это далеко не всегда плохо — например, если по дизайну требуется несколько фрагментов фона, то на каждый из фрагментов в условиях невозможности использования множественных фоновых изображений необходим свой блок. Такими блоками могут быть и структурные элементы, однако в универсальной вёрстке это далеко не всегда возможно.

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

    — На мой взгляд, микроформаты в настоящий момент — не более чем добрая воля энтузиастов, имеющая мало общего с качественной вёрсткой как таковой. Есть время/желание/необходимость — используйте микроформаты; не используете — качественная вёрстка от этого не перестаёт быть таковой. Микроформатам, кстати, тоже в значительной степени свойственны признаки classities, в то время как реально полезны сейчас лишь считанные единицы из них — например, robots-nocontent от Yahoo!.
    • +1

      Да, чуть не забыл:

      document.getElementById("policy_contact").onclick="DoWin (this.href,360,440); return false;"

      Наверное, имеет смысл проверять работоспособность кода перед тем, как его предлагать. ;-)

      • 0
        спасибо, поправил!
  • +1
    Вот удивляюсь я людям - пишут типа ... "Одна из лучших статей на Хабре за последнее время, браво."
    А вы не задумывались кто такой вообще этот Delka, можно ли эму доверять , откуда такое самочуствие ? А с CSS-ом то у автора проблемы, не все ему там понятно. Зайдите на эго сайт, посмотрите CSS, и уверитесь сами - тот кто понимает. А новичкам надо ходить на w3c.org и сайты разработчиков браузеров - а не читать самозванцев
    • +1
      Какая разница, кто автор, если уже по тексту виден определённый уровень знаний? Предполагается, что мы должны прочитать статью и сделать выводы. Какие выводы - это уже наше личное дело, будь то "А что, дело говорит" или "Да ну его, буду кодить по-старому".
      • 0
        Откуда это предполагается что мы должны прочитать??? Как сделать выводы новичкам ???
        • 0
          Просто принять к сведению.
    • 0
      хотелось бы увидеть доказательства ваших слов (с CSS-ом то у автора проблемы, не все ему там понятно), а то без них такие заявления выглядят смешно.
    • 0
      странные выводы, очень часто люди, занимающиеся веб-разработкой не уделяют своим сайтам должного внимания (времени)...
  • 0
    Статья понравилась ... заставляет думать.
    На тон статьи мне как то все равно ... главное что хотел человек донести.
    Ситуацию с float автор пояснил. Но все равно она осталось спорной.
    Кто то верстает сетку через float - кто-то иначе.

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

    Может быть для других специалистов ваш код покажется чем то несусветным и не пригодным к редактированию?

    Кто забивает на валидаторы, Лебедев забивает на доктайп - каждый делает как ему хочется. Не надо все стандартизировать - не надо говорить, что font-size: 12px это плохо (бывает не масштабируемая графика, а видеть как гигантский текст ее разваливает тоже удовольствие маленькое.)

    А в целом такие статьи должны появлятся - думать это хорошо :)
    • 0
      Лебедев забивает на доктайп


      Да ну: http://imperia.rs.ru/welcome/
      • 0
        • +1
          У Лебедева есть технологи, которые делают сайты.
          У некоторых, вроде Сергея Чикуенока, даже есть мозги — отсюда и доктайпы.
          А сам уважаемый уже не верстает.
  • –3
    еще... на эго сайте используется элемент hr - это каменная эра... Счетчики на сайте - кому они нужны вообще ?
  • –3
    Вспоминается старая цитата с БОРа: «В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и ебошат друг друга в квейк».
  • +1
    <div class="entry-content">
      <p>Quality product for SEO webmasters.</p>
      <a href="#" rel="bookmark">Try it and you'll see</a>
    </div>

    Внутри блокового элемента смешивать блоковые и инлайн элементы не самая хорошая идея...
  • 0
    Кстати, маленький совет — если пишете



    пишите screen с большой буквы, вот так:



    Столкнулся с проблемой, что IE для Windows Mobile считает себя взрослым и подгружает стили с media="screen", чего по идее делать не должен. Со Screen он эти стили пропускает.
    • 0
      Ой.. Забыл про экранирование тегов ;)

      Вместо
      <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />

      пишите
      <link rel="stylesheet" href="css/main.css" type="text/css" media="Screen" />
      • 0
        в следующи раз не партесь, а просто заключайте код в <code></code>
  • +3
    Контент менеджеру теперь html учить и в код лезть чтобы список добавить?

    Вот неплохо бы нашему мистеру «Контент менеджеру» знать базовый язык веба. Очень было бы хорошо.
  • 0
    Если в Opere 7,0 написать media="screen", а потом нажать F11 (полный экран), то будет презабавная картинка слетевших стилей. Поэтому я пишу media для всего кроме screen :)
    • 0
      Потому что в этом режиме текущий media уже не screen, думается.
      • 0
        аха тогда какой? :)
        • +1
          fullscreen :)))))
        • +1
          projection. Поэтому и пишется обычно media="screen,projection"
  • 0
    По поводу структуры заголовков.
    Сверстали сайт, отдали заказчику, он решил, что текст «о компании», какой то не такой и он его хочет переписать, открывает он админку и правит как ему нравится, нарушая всю структуру заголовков.
    По вашим словам — верстальщик в тот же момент переводится в разряд «плохих»?
    Интересная логика
    • 0
      нет конечно, я такого не говорил)
      задача верстальщика - дать возможность легко править контент, написать нужные стили... если клиент всё сотрёт и напишет по-своему - тут ничего не изменить...

      хотя кое с чем можно боротся :)
      например тег font и ему подобные отключать в css ^)
  • 0
    Многое сказанное рулит в теории, но на практике - далеко не всегда применимо.
    Кое-что - откровенный дроч.
    А в целом - согласен.



    Шрифты в px и Общий CSS для всех media
    это старая песня и каждый верстак решает для себя сам
    если работа для портфеля, крупная, с проходняком - тогда "да", если агенство в г. Чебоксары - тогда "обойдутся"
    всё равно это не оценят 95% заказчиков и 95% посетителей
    а известны случаи, когда просили "вернуть обратно на px" - так удобнее править css =)




    Ошибки влияющие на SEO
    <h1>Trinity group</h1>
    с т.з. логики - да, всё круто, это и есть самый главный заголовок
    но с точки зрения сеошника, которому надо раскрутить сайт по запросу "трубы в мелитополе" твой h1 - полный отстой, и он всё равно попросит тебя переделать, и ты переделаешь
    ему нафик не надо крутить сайт по названию фирмы, по нему он и так вылезет из-за title

    кроме того ты перестарался и забыл про юзера без картинок - он увидит пуcтое место (и отрицательным indent'ом и большинством остальных методов)
    за использования sIFR надо отрывать яйца. сразу и без объяснения причин. "клиент захотел" - конечно гнилое, но всё таки оправдание в такой ситуевние
    а логотип - очень-таки логическая деталь сайта, и на него постоянно пытаются нажать...
    имхо, там лучше и проще оставить картинко и div id="logo" =)

    и вообще, img надо юзать для тех элементов, которые несут смысловую нагрузку и требуют альта





    Антисемантика
    про ссылки без текста - согласен

    <div class="hr"></div>
    какой же тег ты порекомендуешь на замену hr? но с т.з. логики
    я сколько думал - не придумал


    <dl id="t-personal"><dt>Настоящее Имя:</dt><dd>Иван Копейкин</dd><dt>Дата рождения:</dt><dd>16 сентября 1977г.</dd></dl>

    а тут - бац, и одно из полей переносится в две, а то и в три строчки =)
    и твой float'ный список во много строк развалился


    Предметом бухгалтерского учета в обобщенном виде выступает хозяйственная деятельность предприятия
    с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…
    нравится, но неуниверсально


    * overflow: hidden для нормальных браузеров (в особых случаях - :after с clear:both);
    * hasLayout для IE.

    та все этим грешат, не вижу тут криминала
    главное что понимание флоата есть - это уже хорошо =)

    Неуниверсальные глобальные стили базовых элементов
    +1, пройденный этап =)




    Это классический пример, но он досих пор встречается повсюду - большинство примеров этой статьи я взял с портфолио топовых по сумме за проект фрилансеров. После просмотра портфолио топовых страшно думать что у нетоповых :)
    Фрилансеров не трожь! У них вектор правильный.
    Имхо фрилансеры-верстаки принимают непосредственное участие в популяризации адекватной верстки.
    Потому-что многие учатся и смотрят участки кода именно на портфелях фриланса.
    Понятное дело, что не у всех там есть на что посмотреть, но некоторые фрилансеры показывают очень достойный уровень верстки.
    А то ж наши вебдевы дрочат на артлебедя, а там в коде белый снег, белый песец.

    А качество работ у топовых может подкачивать из-за "конвейра" - в конце концов, мы же не только за идею пашем, но и за бабки.



    p.s. IE5 вспоминаешь - прикольно
    "Падинги внутрь, а не наружу" (с) =)

    Но на практике ценность этого навыка - ноль.
    Я сам в течении года верстал все проекты под IE5 - и ни разу заказчики даже не посмотрели мои проекты в нём.
    Ни разу =)
    • 0

      но с точки зрения сеошника, которому надо раскрутить сайт по запросу "трубы в мелитополе" твой h1 - полный отстой, и он всё равно попросит тебя переделать, и ты переделаешь


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

      какой же тег ты порекомендуешь на замену <div class="hr"></div>? но с т.з. логики?


      обычный <hr /> :)
      он прекрасно стайлится в css.

      и твой float'ный список во много строк развалился


      clear: left и не развалиться :)
      • 0

        обычный <hr /> :)
        он прекрасно стайлится в css.

        До тех пор, пока не потребуется задать вертикальные поля для hr в em’ах в IE (они [поля] ведь уже будут «израсходованы» на компенсацию паразитных отступов величиной в несколько пикселов, имеющихся у hr в IE), а в качественной вёрстке это необходимо практически всегда.

        • 0
          ну почему же - разницу между margin'ами hr в IE и остальных браузерах можно компенсировать через conditional comments.
          допустим для всех браузеров - 1.66em (20px при 12px базовых)
          для IE - 0.583em (20-13=7px)
          • +1
            Это не что иное, как подгонка. ;-) Изменение размера шрифта в браузере приведёт к нарушению соотношения подогнанного пиксельного значения и реальной величины в em’ах. Кроме того, это недальновидно (не future proof) — баг с паразитными полями у hr имеет место в IE текущей стабильной версии.
  • –2
    Может быть про это уже писали в комментах, я все не осили просто, но вот это точно бред:

    <address class="vcard">
    © <a class="fn n org url work" href="http://www.meridy.ru/">Строительная компания «Меридиан»</a>, 2007—2008
    <span class="adr work">
    <span class="street-address">ул. Ленина 247</span> ·
    <span class="locality">Москва</span>,
    <span class="postal-code">109012</span>
    <span class="country-name">Россия</span>
    </span>
    <span class="tel">
    <span class="type">Work</span> <span title="+74957889775" class="value"> +7 (495) 788-97-75</span>
    </span> ·
    <a class="email" href="mailto:info@meridy.ru">info@meridy.ru</a>
    </address>

    Глупо и не нужно. Однако в статье есть очень хорошие примеры. Хотя в целом, лучший валидатор - это браузер, все остальное - полный бред и никому не нужно. Сверстан у меня сайт с какими-то стандартами или нет? Да насрать, если в браузере он такой же, как и на макете - это главное. :-)
    • 0
      Вот с такой логикой - "лучший валидатор - это браузер, все остальное - полный бред и никому не нужно", будете переделывать свои работы каждый раз когда изменится версия браузера. Если вы не в курсе, браузеры разрабатываются в соответствии со стандартами. Так достигается обратная совместимость, и если сайт сделан по стандартам, то и в новых версиях браузеров он будет отображатся нормально.
      • 0
        Ну вот скажите тогда, если стандарты одни, почему столько браузеров и каждый понимает их по-своему? Если есть стандарт, как его можно иначе показать? Если их, сейчас, браузеры криво понимают, то и в будущем будут, по этому без разницы, из-за чего переверстывать страницы еше раз.
  • +1
    Я вам, как один из топовых, сейчас ситуацию опишу. Ведь, как человек разумный, вы понимаете, что все зависит от контекста?

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

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

    Почему один из топовых — по той причине, что я соблюдаю сроки, делаю кроссброузерное решение, адекватно отношусь к требованиям клиента и помогаю в интеграции. Так как для меня важнее деньги, то и к к своей специализации я отношусь утилитарно. И именно перечисленные скилы ценят мои клиенты. Ни им, ни мне не нужна такая педантичность. Поэтому да, хуячу как Джамшут и Ровшан (вобщем-то, дай Бог каждому въебывать так, как въебываю сам -)

    Итого:
    1. Не вижу своего здесь будущего — это один из жизненых этапов, через год-два меня в верстке не будет
    2. Даю в своей работе базово необходимый набор свойств (кроссброузерность, валидность, внятность кода, SEO-дружственность)
    3. Даю гарантии на свой код в доработке, интеграции и баг-фиксинге
    4. Даю внятное общение с клиентом и гарантирую схождение дизайна с версткой

    То, что описано в вашей статье, это хорошая проверка кодера на готовность быть или становится лучшим в своей сфере. Но никак не отображает то, что ожидает клиент на выхлопе. На клиент ожидает:
    1. Внятных цен
    2. Однозначных гарантий на жизнеспособность и кроссброузерность кода
    3. Хорошего общения

    Поэтому. Я искренне восхищен вашим педантизмом, честно-честно. Я считаю, что именно такие люди, как вы, двигают веб вперед. Но все-таки стоит разделять две стороны одной медали. Вы стоите на академической стороне вопроса и внедряете ценой собственного времени новые и, главное, правильные стандарты работы. А такие как я, обычные мастеровые, просто делаем свою работу. Несколько топорно, без 100% следования букве и духу W3C.

    Потому что у нас с вами разные жизненные цели и приоритеты. В этом котекст. Поэтому если сместить акценты с "хорошо/плохо" на "не идеально/идеально" — все встанет в вашей статье на свои места. А насчет профессионализма — главным признаком профессионала является отсутсвие эмоций в работе.

    Меньше эмоций, сместить акцент, и текст из заносчивого снобства (которого быть может вы и не вкладывали, но её увидели читатели) станет правильным наставлением для тех, кому вы это адресуете.

    Спасибо за статью.
    • 0
      и вам спасибо за хороший комментарий!
  • 0
    Не соглашусь только по float'ам. Но аргументировать не буду, наблюдаю дискуссию выше.

    И еще один момент, по поводу лишних div'ов. Предпочитаю добавлять некоторую экстра-разметку, например, при создании меню вместо

    <ul class="nav">…</ul>

    я скорее напишу

    <div class="nav">
    <ul>…</ul>
    </div>

    Чтобы не пришлось после править макет, если дизайнер вдруг решит добавить каких-нибудь супермегаградиентов.
  • 0
    Автору спасибо за статью.

    Есть моменты с которыми я немного не согласен. А именно: нужно хорошее ТЗ и надо ему следовать. Если такого ТЗ нет, то его нужно сделать самому и обговорить(согласовать) с ПМ-ом(закащчиком). Т.к. автор описал "что нужно делать всегда и везде" и "моменты, зависящие от проекта".

    Простой пример: в ТЗ сказано, что сайт не работает с выключеннным js(очень много логики на js). Вопрос: тогда какой смысл верстальщику просчитывать "отображение без js"?

    Еще пример: в ТЗ просчитано, что основные пользователи(97%) сайта - это люди у которых стоит ie6/ie7, Safari, FireFox, Opera. Для заказчика актуально только это. И он говорит открытым текстом: остальные 3% меня не интересуют, будет лучше если ты "сделаешь идеально" для перечисленных выше.
    Вопрос: зачем мне в данном примере вводить стили для КПК, "aural устройств", проекторов ?
    (например я люблю проверять результат. А нескольких КПК, проектора и прочей экзотике мне не выделят. Есть всякие "эмуляции устройств" - но это немного не то. А писать код вслепую и проверять только на одной модели того же принтера неинтересно ) Тогда зачем делать, если никому, кроме тебя это не нужно?

    Еще пример: с заказчиком обсуждается "как должен вести себя сайт при увеличенни шрифта". Объясняются плюсы(минусы) фиксированного и "процентного" размера шрифта. Ответ заказчика: "Я не хочу чтобы размер шрифта не менялся". Шрифт в ie - не должен меняться.( просто в других брузерах нет проблемы с размером шрифта )
    Вопрос: проценты иногда не нужны, как и не нужна заказчику(проекту) резиновая верстка

    И последний пример: картинки. ТЗ: Сайт будет работать с вкл. картинками, т.к. много красивых графиков(которые делаются на стороне сервера и верстальщик получает только рисунок), изящных дизайнерских решений и т.д.
    Вопрос: зачем проверять с выключенной графикой, если в ТЗ сказано: "графика всегда включена"

    В общем мне есть к чему совершенстваться и уже понял что и как буду внедрять. Еще раз спасибо!
  • 0
    Много слышу про микроформаты и их потрясающие перспективы. Но так ли это? А вот вдруг через пару лет они нахрен никому будут не нужны? Просто я сам нигде не вижу их реально применения кроме уже не малой кучи статей про их полезность. В чем же дело?
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    иногда читаешь такие статьи, думаешь, круто чувак написал, так и надо! с запалом самоуверенности и бодрости начинаешь разбирать замудреную псд-ку, уверенный в том, что будешь следовать всем пунктам статьи.
    но через час ты посылаешь все эти стандарты, все эти статьи и незлым тихим словом вспоминаешь того автора.

    подходы, изложенные в статье, нужны только в качестве писькоувеличителя (для показательных работ, где дизайн заточен под эту семантическую верстку)... или когда ты, не дай б-г, сам сдизайнил сайт
  • 0
    От счастья согласен с выше сказанным, статья хорошая но не скажу что со всем согласен, не понятен и не соглашусь с примером с Антисемантикой.
    а так же не соглашусь от счастья с float'ми бывают дизайнеры сделают такой макет что мозг выпадает как его реализовать(и твоего слова изменить макет нету) и тут флоаты бывают выручают. Нужно уметь ими пользоваться вот в этом заключается профессионализм и грамотность.
    Также не согласен с автором что кто то иной плохо знаком с версткой может отличить хорошо или плохо сверстан макет, по четко опубликованным правилами(законами :) ), из каждого правила есть исключения.
    • 0
      под несогласием с антисемантикой я правильно понимаю кажущиеся иногда экстра-разметкой микроформаты? в защиту их могу сказать что они делает код немного аккуратней, упорядоченней.

      например у нас есть лента новостей.
      можно сверстать её как-то вроде:
      <div class="hfeed block" id="newz">
      ...
        <div class="hentry subblock">
          <var title="2009-08-14T13:19:31+03:00" class="updated published">14.08.09 / 14:19</var>
          <span class="vcard author"><a class="fn n">www.football.by</a></span>
          <a href="news/2009-08-09-42.html">
            <img alt="" src="img/news/small/828146124c03b2acbfccb858afa54980.jpeg" class="photo"/>
          </a>
      
            <h3 class="entry-title">
              <a href="news/2009-08-09-42.html" rel="bookmark">Хорватия не оставила шансов сборной Беларуси</a>
            </h3>
            <div class="entry-summary">
              <p>Белорусы, анализируя поражение от хорватов на своем поле, критикуют игру своей сборой.</p>
            </div>
      
            <ul class="tags-list">
              <li class="tags">теги:
                <ul>
                  <li><a href="http://fst.ideus.biz/news/tags/103-chm-2010.html" rel="tag">ЧМ-2010</a></li>
                  <li><a href="http://fst.ideus.biz/news/tags/102-sbornaya-horvatii.html" rel="tag">сборная Хорватии</a></li>
                  <li><a href="http://fst.ideus.biz/news/tags/101-sbornaya-belorysi.html" rel="tag">сборная Белоруси</a></li>
                </ul>
              </li>
            </ul>
      
            <ul class="details">
              <li><a href="http://fst.ideus.biz/news/2009-08-09-42.html" class="details-watches"><var>22</var></a></li>
              <li><a href="http://fst.ideus.biz/news/2009-08-09-42.html#comments" class="details-comments"><var>0</var></a></li>
            </ul>
        </div>
      ...
      </div>
      


      разве это не прекрасно? :)
  • 0
    После просмотра портфолио топовых страшно думать что у нетоповых :)

    В точку!
    А вообще статья обширная и полезная, но к сожалению, с учетом разнообразия браузеров, искривлений в мозгу участников проекта и нужд, некоторых идеалов достигнуть не удается. Но в целом вполне достижимо и необходимо.
  • 0
    забавно было прочитать эту статью в 2013 году :)