Как составить ТЗ на верстку сайта

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

Отмечаем, что при вёрстке верстальщик должен придерживаться общих принципов — кроссбраузерность, адаптивность и чистый, валидный код. Вёрстка должна корректно отображаться во всех браузерах (старые версии Internet Explorer не в счёт). Горизонтальная прокрутка не должна быть ни в одной из версий сайта, ни в одном браузере.

Кроссбраузерность можно проверить либо вручную, либо через сервисы, например browsershots.org или crossbrowsertesting.com.
Адаптивность можно проверить на Google PageSpeed Insights или Responsinator.
Валидность css проверяется на jigsaw.w3.org, валидность html — на validator.w3.org.

Содержание статьи

Комментарии читателей

Верстаем в HTML5 и CSS3 — никаких устаревших тегов вроде br или фреймов, без display:none также лучше обойтись. Все теги должны быть корректно закрыты. Должна быть прописана кодировка. В теге body не должно быть тега script. Подзаголовки h1, h2 и так далее в качестве элементов дизайна использоваться ни в коем случае не должны. h1 на странице должен быть один. h2, h3 и прочие не должны быть выше h1. Все стили должны быть вынесены в style.css. Там должны быть прописаны стили заголовков, списков, параграфов и прочих элементов. Для ссылок должны быть прописаны стили (цвет, подчеркивание) в файле CSS. При выборе между средствами javascript и чистыми HTML5/CSS3 безусловное предпочтение должно отдаваться последним. Если все-таки присутствует javascript, предпочтительно выносить его в отдельный файл. В целом код должен быть как можно короче.

Шапка — не более 200-300 пикселей, фиксированная (при прокрутке вниз остается на месте), по футеру ограничений нет. Меню — не выпадающее. Ширина контента — около 650 пикселей.
Шрифты — Tahoma, Verdana, Arial. Размер их будет 12-16px. Цвет — черный (в крайнем случае серый (#444). Размер подзаголовков от 18px и больше. Высота строки (интерлиньяж, line-height) должна быть больше значения по умолчанию примерно в 1.4em (т. е. 140% от стандартного). Ширина сайдбара — не меньше 260 пикселей.

Тег title должен располагаться в коде настолько высоко, насколько это возможно. Контент (основной текст) должен располагаться в коде настолько высоко, насколько это возможно (после title). У всех изображений должны быть прописаны атрибуты alt и title.

На навигационных страницах, таких как рубрика или главная, всё должно быть кликабельным, например картинки поста. При этом ссылку на картинку нужно закрывать в noindex, nofollow во избежание дублирующихся ссылок. В рубриках ссылкой должен быть только заголовок, никаких «Подробнее» или «Читать далее».
Страницы пагинации от индексации не закрываем. Для них должен быть задан атрибут rel=”canonical”, указывающий первую страницу как каноническую. Кроме того, на каждой странице пагинации в title должен выводиться номер страницы (например: «Новости – страница 3»).

Ссылки

Дублирующихся ссылок на странице (то есть двух одинаковых ссылок на одной странице) быть не должно. Служебные страницы вроде «Контакты» и «О нас» закрываем в noindex, nofollow. Это делается через !—noindex— (валидный согласно Яндексу noindex) и rel=»nofollow».
Не должно быть цикличных ссылок. То есть с главной не должно стоять ссылки на главную, со страницы рубрики не должна быть кликабельной в меню ссылка на эту рубрику и так далее.
Посещенные ссылки делаем другим цветом.
С одной страницы не должно стоять более 90 ссылок (карта сайта — не в счёт).
Ссылки «Предыдущая запись» и «следующая запись» — бессмысленные и мусорные, их мы убираем. То же самое с датами новостей.

Адаптивная верстка

Тут в принципе все то же самое, о чем я писал и в статье про дизайн — делаем 3 мобильных версии главной, поста и рубрики — примерно от 320 до 414px, от 414 до 768px и от 768 до 1024px.
В версии для планшета можно оставить сайдбар (в отличии от версии для мобильных), его можно сузить до 240рх, еще более узким делать не надо. При обычном разрешении планшетов в 768рх с учетом отступов на контент остается примерно 510 пикселей.

Остальное

Если дается задание сверстать шаблон для WordPress, можно указать, какие функции надо внедрить в тему. Шаблон должен быть настраиваемым — то есть должна быть возможность выбрать свой логотип, свой фон/цвет фона, свой цвет меню, свой цвет фона шапки. Можно сделать плавную прокрутку к подзаголовку при нажатии на пункт содержания поста.

Сдаётся техническая версия шаблона (с комментариями для верстальщика и т.д.) и чистовик. Код должен быть структурирован — теги грамотно вложены один в другой и за счет отступов должна прослеживаться структура.

Для справки. Исполнителю можно скинуть ссылки на рекомендации Яндекса и их блог на Хабре (для общего развития):
http://download.cdn.yandex.net/support/ru/webmaster/files/recommendations.pdf
http://habrahabr.ru/company/yandex/