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

Как составить ТЗ на верстку, если ты не верстальщик

Рубрика: Создание сайтов

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

Было решено делать из него СДЛ. Точнее женский журнал. Учитывая разнообразие тематик статей, это не так уж сложно. Немного поколдовав над рубриками, получилось сформировать довольно неплохую структуру. Правда пришлось создать немало подрубрик, которые еще предстоит наполнить, но это вопрос времени.

В общем, предварительная подготовка прошла быстро и безболезненно. Проблемы появились, когда дело дошло до смены дизайна. Раньше я обходился готовыми шаблонами под WP. Некоторые переделывал сам, некоторые заказывал у фрилансеров. А сейчас хотелось именно качественное оформление.

С дизайнером проблем не возникло, его даже искать не пришлось. Мне вовремя попался пост одного из блоггеров, который сам столкнулся с подобными проблемами и нашел исполнителей. Порекомендованный им дизайнер буквально за несколько дней нарисовал макет.

Особенно понравилась его понятливость. На мое невразумительное «нужен диз для женского журнала» и пары примеров, он буквально с первого раза угадал что было нужно. Доработки были, но минимум

С верстальщиком вышло посложнее. С тем, кого рекомендовали, договориться не удалось. Пришлось начинать поиск. Казалось бы, предложений масса, только выбирай, но на практике не все так просто. Несколько исполнителей просто не взялись за работу, мотивируя высокой сложностью. Еще один отказался после того, как я не предоставил четкое ТЗ. В результате исполнитель все же был найден, но и ТЗ пришлось составлять.

Не могу сказать, что это было сложно, но времени ушло прилично. Проблема заключалась в том, что я не верстальщик и не дизайнер, и понятия не имею как правильно составить ТЗ на верстку. Раньше мне казалось, что достаточно того, что я знаю как все должно работать, а остальное – проблемы верстальщика. Во всяком случае, мне бы хотелось так думать Пример тз на верстку сайта

Ладно, хочешь — не хочешь, а составлять надо. Первым делом начал юзать поиск, да и пару блогов верстальщиков в ридере имеется. С информацией проблем не было. Там только один нюанс: есть примеры подробнейших ТЗ, но смысл тупо их копировать, если не понимаешь половину из всего написанного? Пусть даже составлено оно грамотно.

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

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

1. Движок сайта

Меня интересовал готовый шаблон для WP из psd макета, а не просто html верстка. Думаю, будет не лишним указать версию WP. Может это и мелочь, но иногда от этого зависит набор используемых плагинов.

2. Плагины

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

3. Табличная или блочная верстка

Не буду вдаваться в подробности, все-таки я не специалист в данном вопросе, но предпочтительнее блочная верстка. В крайнем случае, смешанная.

4. Количество страниц

Стоимость верстки зависит от количества страниц. Самая дорогая, конечно, главная. Но за каждую внутреннюю придется платить дополнительно. И если их много, общая сумма может быть весьма существенной.

5. Кроссбраузерность

Надеюсь никому не нужно говорить, что сайт должен корректно отображаться во всех браузерах (IE, FF, Opera, Chrome, Safari). Другое дело, в каких версиях. Насчет последних вопросов нет, но некоторые хотят и в более старых. Например, IE 6, что доставляет верстальщику дополнительные неудобства. Соответственно цена может возрасти.

6. Валидность кода

Для получения высоких позиций в выдаче поисковых систем код необязательно должет быть на 100% валидным. Но это не касается грубых ошибок и не дает право верстальщику облегчать себе жизнь. Вы платите деньги и вправе требовать качественную верстку. Кстати, проверить валидность можно здесь.

7. Комментирование кода

Большинство вебмастеров делает мелкие правки html кода самостоятельно и комментирование в таком случае позволяет намного быстрее сориентироваться в коде и сэкономить драгоценное время.

8. Порядок загрузки блоков

Тут все ясно: блок с текстом должен располагаться в коде страницы как можно выше. Я думаю, не нужно разъяснять, зачем и почему?

9. Ширина

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

10. Слайдер

В тематических порталах, интернет-журналах, да и вообще на многих информационных и не только сайтах есть слайдер. Если хотите такой и себе, укажите в ТЗ на верстку пару ссылок на примеры.

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

11. Оформление текста

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

12. Теги

Использование тегов h1…h6 – достаточно важный аспект поисковой оптимизации. Их расположение следует определить заранее. Например, на странице одиночной записи, заголовок должен быть в h1, а подзаголовки в h2 и h3. Соответственно оформление нужно задать так, чтобы они гармонично вписывались в текст.

Пожалуй, на этом можно остановиться. Это хоть и простые пункты, зато понятные вебмастерам практически с любым уровнем подготовки. Более подробное ТЗ на версту будем рассматривать в следующих постах. А это основа, которую может использовать каждый. Надеюсь, в комментариях вы внесете свои дополнения.

P. S. Если планируете сделать сайт или интернет-магазин на Joomla, а не привычном для блоггеров WP, советую посмотреть примеры сайтов на Джумле.

Popularity: 7% [?]

 

Похожие записи:

Комментарии: (25)

Насчет «валидности кода» палка о двух концах. Мое мнение чтобы сайт нормально отображался в популярных браузерах. Валидный сайт может «ехать» в ИЕ и нормально отображаться в остальных.

Во вторых верстальщик может схитрить со стандартами <!DOCTYPE> одни стандарты жестче, другие мягче.

В третьих многие CMS, включая всеми любимую wordpress, из валидного кода быстро сделает не валидный, когда сайт начнет работать в полную силу и на нем появятся первые записи.

Поэтому доверяйте только вашим глазам, а не бездушным валидаторам =)

В какой-то степени правильно. Лишь бы не было грубых ошибок.

Обычно я в ТЗ отдельным пунктом пишу создание страницы, на которой представлены все нужные элементы: возможные примеры форматирования текста и картинок, то есть пример абзаца текста, шесть уровней заголовков <h1>...<h6>, вид нажатых/не нажатых ссылок, кнопок, вид нумерованных и ненумерованных списков, вид выпадающего списка, вид таблиц, форм, полей, оформления картинок и слайдшоу, оформление видео, горизонтальная линейка и т.д.

Этот перечень больше касается ТЗ на дизайн, но и реализовать его потом в верстке ведь тоже нужно. Даже те элементы, которые не представлены сразу в дизайне, могут понадобиться потом.

Хороший подход. Правда придется и самому поработать :)

А не возникало желания использовать HTML5 и CSS3? Все таки если верстка на заказ, то почему бы не идти в ногу со временем?

Возникало, но не стал заморачиваться. И так пришлось верстальщика поискать, а то, было бы еще дольше. Хотя на следующем сайте все же попробую.

Много раз читал про HTML5, даже искал шаблон для блога новый под новые стандарты, но так и не нашел ничего подходящего. Слышал что с помощью CSS3 можно творить чудеса и даже заменить некоторые скрипты  =)

Может и так, вопрос только в поиске верстальщика.

Я верстаю с применением HTML 5 и CSS3, но не нужно за этим гнаться. Есть подводные камни, такие как кроссбраузерность. Но уже сейчас css3 мне сильно облегчает жизнь. Тут важно понимать для чего вам это нужно.

Много проблем с кроссбраузерностью?

Не очень, но они есть. Какие-то вещи поддерживаются даже в IE6 (не без костылей конечно), что-то поддерживается, но с огромными костылями (градиенты например), что-то не поддерживается всеми браузерами (те же градиенты Opera стала поддерживать совсем недавно).

2. Тут плагины по идее должен подбирать тот кто делает сайт, а не клиент.

3. Кто-то еще верстает на таблицах? Для меня уже само собой разумеющееся верстать на дивах, на таблицах за последние несколько лет верстать не просили.

4. Для WP достаточно макета двух страниц — главной и страницы поста.

5. Тут дело даже не в удобствах, а в том, что некоторые вещи нельзя реализовать в том же IE6. Также он плохо переваривает большое количество JS на сайте. К счастью все чаще для него просят повесить просто заглушку с предложением обновиться

6. Самый лучший валидор — это браузер. Можно сделать полностью валидный сайт, а потом рекламодатель пришлет баннер и вся валидность к чертям. Или же сама CMS говнокод сгенерирует.

7. Это вообще правило хорошего тона. Не думаю что это нужно включать в ТЗ.

8. Эээ... Это как? Тут зависит от структуры сайта. Нельзя поставить текст сверху, а потом шапку, сайдбар и все остальное.

9. Тут все правильно. Чаще здесь делают ошибки именно дизайнеры, которые не знают какая максимальная ширина допустима для разрешения 1024×768 к примеру.

11. Что на макете, то и на сайте. Единственное, что можно обговорить, так это поведение ссылок и курсора.

Я немного удивлен, что Вам отказали несколько верстальщиков из-за отсутствия ТЗ. Его вообще мало кто составляет, потому что не знают как. Проще непонятные моменты обсудить с клиентом, чтоб он на пальцах объяснил. Верстальщику в этом плане легче — я что вижу, то и верстаю. Гораздо важнее составить ТЗ для дизайнера, потому как они совершенно не представляют как все будет реализовываться и работать. На моей памяти еще не было макетов, по которым у меня не было бы замечаний к дизайнеру.

2 — правильно, но у вас могут особые пожелания

3 — мало ли кто будет верстать, уж лучше учесть все нюансы

4 — как минимум нужна еще страница с рубриками, архивами

6 — разве это повод отказаться от валидного кода на этапе разработки?

7 — лень может победить любого :)

8 — если шаблон имеет три колонки, почему бы не организовать загрузку блока с текстом, а потом двух сайдбаров, в которых напиханы счетчики, баннеры, тизеры и прочее. Вдруг что-то из них будет сильно тормозить.

Я и сам удивился отказу из-за ТЗ. Личное общение дает гораздо больше информации. По крайней мере, при работе с клиентами лично я предпочитаю именно общение.

По поводу 8 пункта — вот если честно, если бы Вы мне начали говорить, что это надо верстать вот так, а это вот эдак, то я бы скорей всего предпочел отказаться) Все-таки вы обращаетесь к верстальщику как к специалисту в своей области и при этом учите его как надо верстать. Я вообще не понимаю какая разница выше или ниже расположен текст. Все поисковики исходят из того, что пользователю должен быть удобен сайт, а в каком порядке расположены блоки в исходном коде им плевать.

<<<Вдруг что-то из них будет сильно тормозить.

Скрипты не помешают загрузиться контенту. Если брать данный сайт, то блок с текстом и так будет перед сайдбаром. А если сайдбар слева, то я не буду заморачиваться и ставить текст перед сайдбаром, но так чтобы в браузере сайдбар был впереди.

«вы обращаетесь к верстальщику как к специалисту» — только при первом обращении я не знаю, действительно ли это такой специалист. К тому же, если я не прав, у него есть все шансы объяснить свою точку зрения.

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

Это лучший вариант. Просто в моем случае именно с верстальщиком так не получилось.

Про валидность кода не согласен. На ранжирование в ПС это не влияет. В потверждении можн посмотреть видео на Google Webmaster Central или на блого Шакина в недавнем выпуске. 8)

Не влияют незначительные ошибки, а вот серьезные — это вопрос спорный

А в чем разница между серьезными и не серьезными ошибками? Валидатор просто говорит, что правильно, а что нет. Есть еще предупреждения, но они на валидность не влияют. У меня есть сомнения, что поисковик проверяет сайт на валидность, так как на это нужны большие ресурсы, особенно при таких объемах. Я вот недавно проверял на валидность страничку сайта на LS со 180 каментами и валидатор w3c не мог ее проверить. А страничку с меньшим количеством каментов переваривал.

Я предпочитаю все делать качественно, а не исходить из предположения, что поисковики не проверяют валидность.

Приведу небольшой пример. Мне встречалось мнение, что чистка кода также ничего не дает, но эксперимент над одним из сайтов показал обратное. Поэтому лучше подстраховаться :)

Что подразумевается под чисткой кода?

Сайт создавался как сателит, и текст просто вставлялся из ворда с кучей мусора. Потом решил переделать и все вычистил, результат — неплохой прирост трафика.

Когда делал свой сайт все описанные вещи не оговорил зараннее. Потом каждый пункт пришлось оговаривать скандалами. Правильно будет договариваться еще на берегу. И такой списочек очень кстати в таком случае.

Спасибо за пояснение, может в дальнейшем пригодится

Оставить комментарий