Мы несем ответственность за нашу работу!
RUUA
Главная » Услуги и цены » HTML-верстка » Требования к HTML-верстке

Требования к HTML-верстке

Общие требования к HTML-верстке (в частности для CMS TYPO3)

  1. HTML проверяется на валидацию на validator.w3.org в соответствии с заданной версией HTML.
  2. CSS проверяется на валидацию на CSS validator в соответствии с заданной версией CSS.
  3. Верстка только слоями. Таблицы допускаются только в контенте или их использование должно быть аргументировано.
  4. Не должно быть лишних CSS классов и закомментированных участков кода.
  5. Использованы понятные (логические) названия для классов. Например: не использовать ".oshibka" или “.green”, использовать ".error".
  6. Кодировка файлов - UTF-8.
  7. Все специфические символы (äöüßÄÖÜ) а также кавычки, амперсанд, скобки и апостроф должны быть перекодированы в HTML Entity Name.
  8. Все тэги <img> имеют свойство "alt".
  9. Все указанные ниже браузеры должны на 100% 1:1 повторять PSD-шаблон. Вплоть до пикселя. Все отличия обязательно должны быть обоснованы.
  10. Меню сделаны через списки <ul>
  11. Все уникальные элементы (header, footer, content, etc) должны иметь идентификатор id вместо class.
  12. Все элементы должны быть обернуты в <div>. Например, должно быть <div id=”header”><div id=”logo”><img /></div><div>…</div></div> вместо  <div id=”header”><img class=”logo” /><div>…</div></div>.
    Но в некоторых случаях
  13. Должны быть предусмотрены и протестированы длинные пункты меню.
  14. Изменение размеров окна браузера не должно приводить к некорректному отображению сайта. То же самое относительно увеличения и уменьшения шрифтов.
  15. Использование JavaScript должно быть сведено к минимуму.
  16. Используйте все стандартные HTML тэги. Вместо <div> можно использовать:
    • h1, h2, h3 и т.д.
    • ul, ol, dl
    • strong, em
    • cite
    • abbr, acronym, code
    • fieldset, legend, label
    • caption, thead, tbody, tfoot
  17. Для изображений по возможности GIF/PNG с 8-битным альфаканалом вместо PNG-24.
  18. Для гибких макетов обязательно должны быть установлены максимальная и минимальная ширина.
  19. Обязательно прописывать cursor:pointer для кнопок сделанных с помощью картинок. Это важно, если проводится редизайн и модернизация сайта, который работает не первый год.
  20. Для форм при названии поля обязательно использовать label с заполненным атрибутом for.
  21. Для нестандартных шрифтов использовать технологию Cufon (если не оговорено другое).
  22. Цвет фона для body задавать обязательно.
  23. Для JavaScript использовать библиотеки jQuery.
  24. Для однострочных элементов (меню и т.д.) обязательно задавать свойство white-space:nowrap.
  25. Для выпадающих меню при обработке клика указывать href='javascript:void(0)' вместо href=”#”.
  26. Футер всегда должен быть прижат к низу (если не оговорено другое).

Все CSS файлы должны соблюдать следующую структуру:

  1. Сначала общие CSS свойства: типография, заголовки и оформление ссылок.
  2. Далее основные части страницы в том порядке, как они расположены на странице. Например: logo, main content, sub content, main navigation, sub navigation, footer.
  3. Затем описания общих элементов, встречающихся на страницы в разных местах. Например: borders, form styles, кнопки.
  4. Для описания стиля использовать ближайший уникальный элемент: #logo a вместо #header a (подразумевается структура #header #logo a).

Стандарты

  1. Валидность: XHTML 1.0 Transitional и CSS 2.1 спецификации. Проверка на validator.w3.org.
  2. Поддержка браузеров: Firefox 2+, Internet Explorer 7+, Safari 3+ Опционально: Chrome 1+, Opera 9+, Internet Explorer 6

Комментарии

Комментарии обязательны и по возможности на английском языке.

Каждый файл должен иметь начальный комментарий следующего вида:

/*------------------------------------------------------
Version: {version_number}
Author: {autor}
E-mail: {email}
------------------------------------------------------*/ 

Также должна быть комментирована каждая секция. Например:

/* 1. Обнуление CSS */
/* 2. Типовые элементы */
/*   2.1. Залоговки h1,h2,h3 */
/*   2.2. Ссылки */
/*   2.3. Списки */
/*   2.4. Элементы форм */
/* 3. HEADER (Шапка) */
/* 4. CONTENT (Содержимое) */
/* 5. COLUMNS (Справа и слева) */
/* 6. FOOTER (Подвал) */