Требования к HTML-верстке
Общие требования к HTML-верстке (в частности для CMS TYPO3)
- HTML проверяется на валидацию на validator.w3.org в соответствии с заданной версией HTML.
- CSS проверяется на валидацию на CSS validator в соответствии с заданной версией CSS.
- Верстка только слоями. Таблицы допускаются только в контенте или их использование должно быть аргументировано.
- Не должно быть лишних CSS классов и закомментированных участков кода.
- Использованы понятные (логические) названия для классов. Например: не использовать ".oshibka" или “.green”, использовать ".error".
- Кодировка файлов - UTF-8.
- Все специфические символы (äöüßÄÖÜ) а также кавычки, амперсанд, скобки и апостроф должны быть перекодированы в HTML Entity Name.
- Все тэги <img> имеют свойство "alt".
- Все указанные ниже браузеры должны на 100% 1:1 повторять PSD-шаблон. Вплоть до пикселя. Все отличия обязательно должны быть обоснованы.
- Меню сделаны через списки <ul>
- Все уникальные элементы (header, footer, content, etc) должны иметь идентификатор id вместо class.
- Все элементы должны быть обернуты в <div>. Например, должно быть <div id=”header”><div id=”logo”><img /></div><div>…</div></div> вместо <div id=”header”><img class=”logo” /><div>…</div></div>.
Но в некоторых случаях - Должны быть предусмотрены и протестированы длинные пункты меню.
- Изменение размеров окна браузера не должно приводить к некорректному отображению сайта. То же самое относительно увеличения и уменьшения шрифтов.
- Использование JavaScript должно быть сведено к минимуму.
- Используйте все стандартные HTML тэги. Вместо <div> можно использовать:
• h1, h2, h3 и т.д.
• ul, ol, dl
• strong, em
• cite
• abbr, acronym, code
• fieldset, legend, label
• caption, thead, tbody, tfoot - Для изображений по возможности GIF/PNG с 8-битным альфаканалом вместо PNG-24.
- Для гибких макетов обязательно должны быть установлены максимальная и минимальная ширина.
- Обязательно прописывать cursor:pointer для кнопок сделанных с помощью картинок. Это важно, если проводится редизайн и модернизация сайта, который работает не первый год.
- Для форм при названии поля обязательно использовать label с заполненным атрибутом for.
- Для нестандартных шрифтов использовать технологию Cufon (если не оговорено другое).
- Цвет фона для body задавать обязательно.
- Для JavaScript использовать библиотеки jQuery.
- Для однострочных элементов (меню и т.д.) обязательно задавать свойство white-space:nowrap.
- Для выпадающих меню при обработке клика указывать href='javascript:void(0)' вместо href=”#”.
- Футер всегда должен быть прижат к низу (если не оговорено другое).
Все CSS файлы должны соблюдать следующую структуру:
- Сначала общие CSS свойства: типография, заголовки и оформление ссылок.
- Далее основные части страницы в том порядке, как они расположены на странице. Например: logo, main content, sub content, main navigation, sub navigation, footer.
- Затем описания общих элементов, встречающихся на страницы в разных местах. Например: borders, form styles, кнопки.
- Для описания стиля использовать ближайший уникальный элемент: #logo a вместо #header a (подразумевается структура #header #logo a).
Стандарты
- Валидность: XHTML 1.0 Transitional и CSS 2.1 спецификации. Проверка на validator.w3.org.
- Поддержка браузеров: 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 (Подвал) */