Как составить ТЗ для верстальщика

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

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

Адаптивность – корректное отображения сайта на любом устройстве. Это важно, так как большинство сайтов сейчас просматривается с экрана смартфона или планшета. Адаптивность можно проверить через сервисы, например browsershots.org или crossbrowsertesting.com.

Кроссбраузерность – поддержка всех популярных браузеров, подробнее рассмотрим ниже. Кроссбраузерность можно проверить либо вручную, либо через сервисы, например browsershots.org или crossbrowsertesting.com.

Валидность – соответствие html-кода сайта утвержденным критериям. Критерии были разработаны организацией The World Wide Web Consortium (W3C). Валидный код не содержит «костылей», он полностью подчинен логике, и с ним легко работать в дальнейшем. Валидность css проверяется на jigsaw.w3.org, валидность html — на validator.w3.org.

Скорость работы - скорость загрузки html-кода, JS, изображений и прочего кода, который используется в верстке. Лучше всего проверяется сервисами от Google https://pagespeed.web.dev/ и Webpagetest https://webpagetest.org

Далее подробно расскажу, какие критерии учитываются в работе верстальщика.

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

Соответствие макету можно проверить с помощью плагина ModularGrid.

По умолчанию, кодировка должна быть UTF-8. Это стандарт, наиболее универсальный вид кодировки, который «съедается» всеми браузерами. DOCTYPE – это html-тэг, который сообщает валидатору, какую именно версию html вы используете. В DOCTYPE вы можете указать, каким именно образом браузеру следует отображать ту или иную страницу. Если DOCTYPE не будет, то браузеру придется самому разбираться, как показывать ваш сайт – и не всегда он сделает это корректно. Используя DOCTYPE, вы можете быть уверены, что в браузере корректно отобразятся и элементы со сравнительно новыми тегами, и даже с устаревшими.

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

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

БЭМ – это это современный метод верстки, который расшифровывается как «блок – элемент – модификатор». БЭМ позволяет соблюдать единые правила верстки, которые помогают быстро разрабатывать интерфейсы, гибко их настраивать и легко модифицировать.

По принципу БЭМ вся верстка делится на:

Верстка по БЭМ – это один из современных стандартов, который помогает легко дорабатывать и видоизменять код в случае необходимости.

Список классических разрешений, в которых должен корректно отображаться сайт:

На больших экранах нужно проверить, чтобы изображения соответствовали размеру экрана, а не располагались по центру с белыми полями по краям. При размерах более 375px не должно возникать горизонтальной прокрутки страницы (за исключением отдельных блоков верстки, где подобная реализация предусмотрена дизайн-макетами).

Верстка не должна терять первоначального вида при изменении контента – например, введении текста в формы. Также должны корректно отображаться все отступы, заголовки, списки и другое форматирование текста. Для этого в работе необходимо использовать использовать html5-тэги для разметки: header, footer, aside, nav, section, article и т.д.

Не забываем и правильной структуре заголовков (H1,H2,… и т.д. и TITLE).

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

JavaScript тоже может быть отключен на определенном устройстве или не работать с низким качеством связи. Сайт должен сохранять нормальный вид, пока он грузится на медленном 3G, и java-скрипты ещё не выполнились. Весь важный функционал сайта должен быть доступен без js.

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

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

С верткой сложной анимации… все сложно. Я нашла верстальщика, который может делать сложную анимацию только после 3 месяцев поисков. И это при условии, что я искала в сегменте от 1500р/час. Тут совет только один, если вы хотите дать верстальщику сложную анимацию, убедитесь, что в его портфолио есть подобные проекты. Часто сложная анимация тормозит, поэтому нужно очень ответственно проверять работу перед приемкой.

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

Как проверить верстку

Или можно сделать проще. Я, как дизайнер, всегда проверяю готовую верстку на все вышеперечисленное и даже у хороших верстальщиков бывает до 100 ошибок. Закажите проверку у своего дизайнера и, если он в этом подкован, результат будет лучше, чем просто отдать все на откуп верстальщику.

Пример хорошего ТЗ по верстке можно посмотреть тут https://docs.google.com/document/d/1bZyzlhBvR1luYWY3voxptjkaxbXUHBXr2OCJvSa8Nyk/edi (на английском), а посовременнее тут https://github.com/thedaviddias/Front-End-Checklist

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

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