Верстка HTML/XHTML

Картинки

Все картинки сохраняются с логическим префиксом, сокращённом на английском тексте, на конце имеют размеры:
    например,
    неверно: bf1.gif
    верно: bottom_footer_400x10.png

Приоритет расширений – png/jpg/gif.

Все помнят, что GIF эффективно сжимает только горизонтальные одноцветные области? Про это ограничение теперь можно забыть:

Вторым важным преимуществом является фильтрация строк (scanline filtering, или delta filters), благодаря которой PNG-упаковщик может получить гораздо более удобные данные для сжатия.

GIF – понимается любыми браузерами, не имеет альфаканала, но сжимается лучше, чем jpg, если картинка имеет менее 300-400 цветов, простые изображения можно сохранять в этом формате

JPG – баннеры, рисунки – используются в основном для размещения контента на страницах

PNG – основно рабочий вариант, у фильтра есть возможность scale, т.е. допускается использовать растягивание картинки по всей высоте или длине, если это фоновый градиент.

Стандарты

Вёрстка начинает строиться со стандарта XHtml Strict 1.1, таблицы используются только для контента и для областей, которые имеют смысловую нагрузку “таблица”, дабы не переделывать работу дважды – убедитесь у того, кто выше вас по иерархии, что вёрстка основных логических блоков закончена и получите одобрение на вставку таблиц

Принцип построения макета – разбиение на основные логические блоки, приоритет оптимизации макета под браузеры Chrome->FF->Opera->IE, действуем по принципу от простого к сложному. При сдаче вёрстки заказчику приоритет отображения имеет немного другую последовательность.

Комментарии

Любой логический блок требует выделения комментариями, используйте полные смысловые выражения для выделения блока, закрывающий тег отличается только наличием “/” .

Пример:

Если блок содержит уже 2 логических единицы информации, то обязательно наличие комментариев к каждому блоку.

Чеклист

Общие требования

• Chrome, FF, Opera, Safari, IE (версии не старше 3лет)
• валидность w3c
• отсутсвие inline подстановок
• адаптивность (ключевые точки 1170, 990, 768, 540, 320)
• комментарии блоков вида <!-- name --> <!--/ name -->, аналогично в css, js
• спрайты
• все что можно сделать без Javascript, делать без него.
• jquery (если вам требуется)
• @font-face шрифты
• комментирование кода (не менее 10% от объёма должен составлять текст комментариев) (удобства интеграции)
• строгое выравнивание (автовыравнивание отступов)
• локаничная инкапсуляция блоков для интеграции (программист не должен собирать будущий фильтр из 2х и более кусков, разделенным, например постраничной навигацией)
• SSI(или альтернатива) для соблюдения принципа DRY, блоки не должны повторяться copy-paste
• контроль версий git (аккаунт выдаётся)
• использование абсолютных путей относительно корня
• максимальное кол-во строк (css, js) 500

Расположение файлов

• html файлы должны лежать в одной папке /_html/,в файле index.html перечислены все доступные страницы то же самое касается css, images или js, у каждого своя папка у меня это папки /js/, /css/
• если вы готовите шаблон для компонента, у Битрикс есть стандарт расположения файлов \local\components\[namespace]\[component.name]\templates\[template.name]\
• style.css
• script.js
• которые будут подключены автоматически т.о. если кому-то потребуется поправить вёрстку, у него будет только 2 варианта где искать код - папка шаблона или базовая папка /css/