Зачем разрабатывать техническое задание?

Внимание, верстальщики! Тема этой статьи достаточно сухая и, возможно, кому-то будет совсем не интересна. Хочу обратиться к тем, кто планирует серьезно заняться версткой и нацелен на конечный результат – удовлетворить запросы заказчика и оставить хорошее впечатление о себе. Если вы не хотите выяснять отношения с заказчиком во время выполнения проекта, если в ваши планы не входит переделывать одну и ту же работу по несколько раз, если вы хотите иметь постоянных заказчиков, тогда не поленитесь прочитать эту статью. Возьмите себе за привычку писать техническое задание (ТЗ). И вы увидите, что работать станет намного приятнее!

Техническое задание по верстке нужно для того, чтобы:

1. Обеим сторонам
   
   • представить (вообразить) готовую версткувыполнить пошаговую проверку готовой версткиуменьшить число ошибок, связанных с изменением требований

     Заказчику

     • осознать, что именно ему нужнотребовать от исполнителя соответствия всем условиям, оговорённым в ТЗ

       Исполнителю

       • понять суть задачисоставить план выполнения проекта и работать по немуотказаться от выполнения работ, не указанных в ТЗ

         Техническое задание можно разделить на два раздела:

         • Основные требования к верстке
         • Специальные требования заказчика

         Основные требования к верстке

         В этом разделе необходимо раскрыть общие вопросы, которые описывают вашу схему работы, а так же основные правила верстки. Сюда можно писать всё, о чем заказчик может не знать, в силу своей некомпетентности по вопросам верстки. Эти вопросы универсальны и могут относиться ко всем проектам, поэтому с каждым новым проектом раздел можно дополнять и совершенствовать новыми правилами. Основные требования к верстке можно свести в следующий список:

         • Верстка страниц сайта визуально должна соответствовать макетам заказчика. Допустимы небольшие визуальные расхождения верстки с макетами. Если верстка должна быть выполнена “пиксель в пиксель” с макетом, заказчик должен указать это требование в разделе “Специальные требования заказчика”.
         • Макеты должны быть выполнены в формате psd и соответствовать основным правилам “хорошего тона в Фотошопе”. Если макеты psd не соответствуют правилам, исполнитель может запросить у заказчика привести их в соответствие с требованиями.
         • Сверстанные макеты должны предоставляться в виде страниц html и прилагаемых файлов (css, изображений, js и др.). В оговоренный срок исполнитель должен выслать заказчику ссылки на рабочие страницы, по которым заказчик будет проверять соответствие верстки всем требованиям. После утверждения верстки заказчиком, исполнитель должен выслать архив с версткой.
         • Верстка должна одинаково хорошо отображаться в следующих браузерах: IE 9+, FF 3+, Opera10+, Chrome 1+, Safari 3+. Если нужна поддержка других браузеров (их версий), необходимо указать это в специальных требованиях заказчика к верстке.
         • Минимальное разрешение страниц сайта, при котором не будет появляться горизонтальная полоса прокрутки, должно быть равным 1000px. При адаптивной верстке горизонтальная полоса прокрутки может появляться только при разрешениях меньше 360px.
         • При необходимости, в верстке должны использоваться возможности стандарта CSS3 такие как, закругление углов блока, градиентная заливка, тень, прозрачность и другие. Если версия браузера не поддерживает некоторые свойства CSS3, внешний вид страницы может отличаться. Отличия могут быть следующие: прямые уголки блока вместо закругленных, сплошная заливка цветом вместо градиентной, отсутствие тени у блока или текста, отсутствие прозрачности у блока или текста.
         • Изображения на сайте, которые отвечают за дизайн страницы, должны быть оптимизированы для просмотра в интернете. Изображения, которые отвечают за наполнение сайта информацией, не оптимизируются. Например, изображения товаров в каталоге, изображения в фото-галерее и другие.
         • Исполнитель не должен прописывать адреса для абсолютных и относительных ссылок, если это не оговаривалось с заказчиком в разделе “Специальные требования заказчика”. По умолчанию, все ссылки должны ссылаться на текущую страницу.
         • Если заказчиком предусмотрены динамические изменения элементов сайта при наведении или нажатии курсором мыши, они должны оговариваться в специальных требованиях к верстке. К динамическим изменениям относятся: движение, увеличение, появление и исчезновение, поворот, отсвечивание и отражение, увеличение и уменьшение, скругление, фокус, размытие, изменение цвета и яркости.
         • Заполнение страниц сайта контентом (текстом, картинками и др.) выполняется заказчиком. Исполнитель должен наполнить страницы только тем контентом, который находится в psd макете и необходим для тестирования верстки. Если текст в psd макете нельзя выделить и скопировать, верстальщик может вставить любой другой текст для тестирования верстки.
         • Исполнитель в праве сам выбирать оптимальные языки разметки и программирования, а так же инструменты для выполнения верстки сайта, если это не оговорено в разделе “Специальные требования заказчика”.
         • Если на сайте используются нестандартные шрифты, заказчик должен передать исполнителю исходники шрифтов в формате TTF. Если исходник не будет предоставлен, исполнитель вправе заменить шрифт на другой.
         • Динамические медиафайлы, приложения и виджеты не интегрируются в верстку, если это не оговаривается заказчиком в специальных требованиях и если заказчик не предоставит исходники. По умолчанию используется статическое изображение.
         • HTML и CSS код должен проходить проверку на соответствие стандартам W3C по валидности. Исключения могут составлять ошибки, возникающие из-за свойств CSS3, т.к. эти свойства не поддерживаются валидатором.

         Специальные требования заказчика

         Второй раздел очень важный. В нем должны быть раскрыты все вопросы по текущему проекту. Обсуждение удобно проводить в виде диалога с заказчиком по skype, icq или google talk. История переписки будет являться основой для составления этого раздела.

         Схема диалога может выглядеть так:

         1. вы открываете макет с дизайном главной страницы и проводите взглядом по нему сверху-вниз, воображая, что верстаете эту страницу.
         2. если взгляд задержался на каком-то элементе и вам не совсем понятно, как его верстать – задаете вопрос заказчику. Для удобства можно сопровождать вопросы мгновенными скриншотами, воспользовавшись сервисом droplr.com.
         3. после обсуждения главной, вы открываете следующую страницу и делаете тоже самое. Таким образом вы должны мысленно сверстать все без исключения страницы для верстки. В результате у вас должно сложиться точное представление того, что хочет заказчик, а у заказчика – представление того, что он от вас получит.

         Подводим итог

         После того, как техническое задание составлено, и обе стороны его утвердили (согласились со всеми пунктами), можно приступить к окончательной оценке проекта. Только сейчас верстальщик может точно определить объем и сроки предстоящей работы, а заказчик точно знает, за что он будет платить деньги. Только сейчас верстальщик может сосредоточиться на своем любимом занятии, а заказчик может спокойно ждать верстку своего сайта.

         В процессе работы всё же могут возникать какие-то вопросы, которые не оговаривались в техническом задании. Однако, изначально заданный спокойный конструктивный тон ведения переговоров будет способствовать благоприятному их решению.

         Так нужно ли тратить время на составление технического задания? Как должно выглядеть идеальное техническое задание? Ваши мысли и предложения пишите в комментариях.