RSS   Twitter   Copiny   Copiny
Нашел ошибку? 

Выдели фрагмент текста с ошибкой или неточностью и нажми Ctrl+Enter!

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

...или что нужно учесть при создании качественных 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, …), выставлен белый цвет фона и черный/темный цвет текста. И прочее по обстоятельствам.

Смотрите также:
Комментарии (8) Добавить комментарий
  • Delirious
    Delirious
    18 Февраля 2011, 13:28
     ↑  0  ↓     ответ

    Спасибо, познавательно.

    А вот интересно, отвечают ли вышеизложеным требованиям Джумловские шаблоны на фреймворках T3 и Gantry? Имеется в виду чистые шаблоны, без внесения изменений?

    • smet.denis
      smet.denis (админ)
      18 Февраля 2011, 18:33
       ↑  +3  ↓     ответ

      Не знаю как там другие, а вот ребята из yootheme соблюдают практически все эти рекомендации.

      Joomla 1.6 с новыми шаблонами (blueprint) тоже довольно качественно проработали эти вопросы уже в стандартных шаблонах.

      IMHO, конечно, но по мне так для большинства задач хватает тех возможностей что есть "из коробки" Joomla, но будут полезны для больших проектах, где очень много различных лайаутов.

  • Memfis
    Memfis
    25 Февраля 2011, 17:27
     ↑  +2  ↓     ответ

    "Не использовать лишние селекторы - div#menu это тоже самое, что и #menu, только работает медленнее, аналогично li.active = .active."

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

    • Djony
      Djony
      01 Мая 2012, 17:07
       ↑  +5  ↓     ответ

      Это вы ошибаетесь.

      Сначала он найдет все теги с классами .active, а потом по второй прокрутке будет искать в них div. и Если у .active только один div то получается лишняя прокрутка

      • Memfis
        Memfis
        02 Мая 2012, 07:54
         ↑  +4  ↓     ответ

        Пфф, да, я был не прав, прошу прощения... Почитал спецификацию - правда обработка идет справа налево... и скорость обработки .test будет быстрее, чем div.test

  • Parus7
    Parus7
    12 Марта 2011, 20:58
     ↑  +2  ↓     ответ

    Картинки, связанные именно с дизайном ложить в папку images ...

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

    Картинки, связанные именно с дизайном, разместить в папке images ....

    Или так.

    Картинки, связанные именно с дизайном, сложить в папку images

    А то слух режет.

    • Lu
      Lu
      17 Ноября 2011, 21:32
       ↑  0  ↓     ответ

      Если кроме как до грамматики докопаться больше не до чего,то совсем уж правильно будет "класть" или "помещать/поместить". Однако пост не об этом.

  • uminoo
    uminoo
    08 Мая 2012, 12:49
     ↑  +1  ↓     ответ

    Не сильно ли жирно? FF2.0 , chrome 4?, opera 9. 0_o. Этим единицы пользуются. Зато если верстать придется кучу хаков вставлять + время верстальщика... И для IE6 лучше заглушку вставить. Верстка под старое говно - не показатель хорошей работы верстальщика. Скорее наоборот, чем ниже версия браузера - тем хуже код

Оставить комментарий




* обязательно для заполнения

1 введенный почтовый адрес используется только для обратной связи при ответах в комментариях и сервиса gravatar.com
.