Требования к верстке HTML-шаблонов для сайта

...или что нужно учесть при создании качественных html-шаблонов

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

В итоге программисту достается от верстальщика порой такой неописуемый ужас, что ему в итоге приходиться переделывать половину уже "сделанной" работы. А все почему? Потому что нет элементарных технических требований к верстке.

В одной из веб-студий это проблему решили ребром — составили список требований к html-шаблонам. Работа верстальщика не принимается, если все пункты не выполнены (или большинство из них). Некоторые моменты могут показаться спорными, к примеру требования к поддержке браузерами или используемым скриптам, но думаю любой сможет легко подправить этот список под себя. И так…

Требования и рекомендации к html-верстке

• Руководствоваться здравым смыслом, в спорных местах советоваться с коллегами, искать и изучать новые удобные и красивые решения.
• Кроссбраузерность. Сайт должен нормально работать в IE6-8, FF2+, Opera9+, Safari4+, Chrome4+. Под IE6 сайт должен «хоть как-то» работать. Корректно отображаться в IE6 должен только если это дополнительно оговорено в ТЗ.
• Всегда описывайте цвет фона для body даже если он белый.
• Используйте reset.css
• Если используете CSS хаки, комментируйте, что это и для какого браузера. Заботьтесь о верстальщиках, которым придется работать с этим макетом после вас.
  • Для IE6-8 выносить в отдельный файл(ы) и подключать условным комментарием.
• Названия классов и id должны по смыслу соответствовать применению. Например, header, menu, footer, news
• Разделять основные html блоки комментариями. Примерно так:

  <!-- footer -->
  
      <div id="footer"> ... </div>
  
  <!-- /footer -->
  

  Это нужно для создания из сверстанного html макета шаблонов для CMS, после чего комментарии будут удаляться.
• Если закомментировать отдельные блоки шаблона (например какие-то части в левой/правой колонке, меню, футер и т. п.), то это место должно аккуратно «схлопнуться», либо оставить после себя пространство (зависит от обстоятельств) так чтобы макет не ломался.
• Приветствуется блочная (DIV’ная) верстка, без использования таблиц. Таблицы в верстке используются только там, где они необходимы — контент. В верстке таблицы должны быть аргументированы (кроме как «так проще», «я не умею», …).
• Не пренебрегать возможностью использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
• Не забывать про спрайты в тех местах, где они принесут пользу. Особенно это касается элементов с состоянием hover, clicked и прочих динамических элементов, чтобы не видеть загрузку изображения, например при наведении мышкой.
• Все что можно сделать без Javascript, делать без него. С отключенным JS шаблон сайта не должен терять основной функциональности и навигации (выпадающее меню, например).
• Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже отделить и объявлять в отдельном файле.
• Если это еще не оговорено с заказчиком, предварительно оговорить, какие Javascript библиотеки вы планируете использовать при верстке макета. По умолчанию использовать сжатую последнюю версию jQuery с Yandex.
• Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.
• Если в Т.З. не сказано другое, макет обязательно должен помещаться без горизонтальных скроллбаров в развернутое на весь экран окно браузера при горизонтальной составляющей разрешения экрана 1024px, а если позволяет размер макета, то и 800px.
• В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки. То же относится к неиспользуемым стилям в CSS.
• Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
• CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению, например так:

  /* ___________ 1. reset css_______________ */
  /* ___________ 2. content_________________ */
  /* _______________ 2.1. headers __________ */
  /* _______________ 2.2. links ____________ */
  /* _______________ 2.3. forms ____________ */
  /* ___________ 3. header _________________ */
  /* ___________ 4. footer _________________ */
  /* ___________ 5. sidebar ________________ */
  
  

• Картинки, связанные непосредственно с дизайном, кладите в папку images, картинки, связанные с контентом (баннеры, картинки в тексте, и т. п.) — в папку pictures. Пример структуры папок и файлов
  • css [директория со стилями]
    • reset.css
    • print.css
    • styles.css
    • ie6.css
    • ie7-lte.css
    • layout-1.css
    • …
  • images [директория для картинок, фонов дизайна]
  • pictures [директория для всех остальных медиа]
  • js [директория со скриптами]
    • jquery.pack.js
    • jquery.pngfix.js
    • jquery.swfobject.js
    • scripts.js
    • …
  • flash [директория с swf-файлами]
  • index.html
  • inner.html
  • page-1.html
• Оговорить, в какой кодировке должен быть html-макет. CSS и JS файлы должны быть в той же кодировке, что и макет, иначе вероятность долгой и утомительной охоты на баги критически возрастает. Везде, где можно, наиболее предпочтительно использовать UTF-8 (без BOM)
• В метатегах html явно указывать кодировку.
• Не использовать слишком длинные селекторы в CSS, типа таких «div#menu ul li.active div». Это замедляет обработку CSS браузером.
• Не использовать лишние селекторы — div#menu это тоже самое, что и #menu, только работает медленнее, аналогично li.active = .active. Излишне использовать пути типа ul li — элемент li и так может находиться только внутри элемента ul, т. е. в данном случае ul li.active = .active, div#menu ul li.active div = #menu.active div.
• Так же лучше не использовать пути вида div, так как некоторые CMS могут добавлять свои теги div в шаблоны. В данном случае лучше написать «#menu.active > div > div». Или вообще отказаться от использования вложенных div’ов.
• «#menu.active div» — Лучше использовать дополнительно класс, т.к модификация верстки внутри #menu (например добавить div) все может сломать.
• Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a>.
• Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх.
• Верстайте формы правильно:
  • не забываем вставлять для всех форм тег <form>
  • метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for.
  • Предусматривайте при верстке форм элементы для вывода ошибок валидации и стили для неправильно заполненных полей. Если это не предусмотрено в т.з. и дизайне, обязательно обсудите это с заказчиком.
• Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, @font-face, etc.)
• Если не оговорено обратное для частных случаев, все блоки, высоту которых ничего в дизайне не мешает сделать динамической, должны иметь именно динамическую (т. е. зависимую от содержания) высоту, а иногда, чтобы ничего не могло потенциально поломать дизайн, нужно задавать и минимальную высоту. Если хотите сделать блок фиксированной высоты — сначала спросите у заказчика.
• В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное. Также не забывать проверять верстку при большом количестве контента.
• Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование невалидного кода было оправданно. Не стоит факапить валидность верстки только потому, что «мне так нравится» или «так получается короче»
• При отключенных картинках, плагинах (flash, silverlight) шаблон не должен терять своей информативности и возможностей навигации.
  • Если меню сделано на флеше и от этого нельзя отказаться — не забыть дублировать его текстом внутри тегов вставки флеша.
  • Картинки со смысловой нагрузкой имеют не пустой атрибут alt=«…" (лого, в контенте, …)
• В макете должен присутствовать контейнер для обозначения контентной части сайта. Отформатированный текст в нем должен корректно отображаться. В основном это относится к таблицам, спискам, параграфам, картинкам с обтеканием, всем видам заголовков, ссылок.
• Любые спец символы вписывать html-сущностью.
• Верстка меню
  • Крайне желательно в виде вложенных списков, тогда его в разы проще подстраивать под CMS, в частности Drupal, Joomla, Wordpress, Bitrix. В 80% случаев это самый удобный, оптимальный и правильный вариант во всех отношениях.
  • Очень желательно использовать именно такую вложенность и даже именование классов (это очень упрощает жизнь при кастомизации):

    <ul class="navigation">
           <li class="parent">
               <a href="javascript:void(0)">Новости</a>
               <ul class="submenu">
                   <li><a href="javascript:void(0)">Новости</a></li>
               </ul>
           </li>
           <li><a href="javascript:void(0)">О компании</a></li>
        </ul>
    

• Такие элементы сайта как ссылки, кнопки и прочее должны как-то реагировать на состояние hover. (если это учтено в макете). Ко всем ссылкам прописывать title.
• У макета должен быть favicon.ico, как минимум из лого будущего сайта.
• Расписан файл print.css, для печатающих устройств, в котором выставляется приемлемый шрифт контента, размер в pt, отключены (display:none) ненужные элементы при печати сайта (menu, sidebar, footer, …), выставлен белый цвет фона и черный/темный цвет текста. И прочее по обстоятельствам.

• Чек-лист вёрстки
• Habrahabr.ru / Требования к html-верстке
• Шаблонизация модулей
• JB-CSS Pack — Пакет стилей для быстрой верстки
• Обновился чистый шаблон для Joomla до версии 1.3.0
• Структура шаблонов компонента материалов – com_content
• Создание шаблона