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

Соответствие макету

Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков.

Я использую Pixel Perfect не для попиксельного задротства, а для проверки что все базовые блоки находятся там где надо, их размеры и отступы соответствуют макету.

Сверяем с psd макетом все отступы, размеры шрифвто/блоков и др. элементов, их цвета, стили, тени и т.п.,

Желательно делать проверку наложением прозрачного скриншота дизайна на верстку.

Все ссылки и кнопки, поля для вода в формах, имеют разные состояния (hover/active/focus), если эти состояния не нарисованы в psd макете, делаем как минимум небольшую прозрачность, либо просто добавляем прозрачность. Либо спрашиваем, какие нужны/должны быть. У всех ссылок, кроме пунктов меню, должна быть реакция на visited.

Поля вода, селекты, кнопки и ссылки не должны иметь синей обводки при нажатии.

Кодировка, DOCTYPE и

Кодировка обязательно UTF-8 для всех файлов html, css, js
DOCTYPE: HTML5

Поддержка версий браузеров

  • Firefox 60+
  • Chrome 65+
  • Safari 10+
  • Opera 45+
  • Edge 40+
  • IE11+
  • iOS 9+
  • Android 4.4+

Валидность

Главная страница должна быть валидна в любом случае.
Ошибки на внутренних простительны только в рабочей области по вине клиента.
Проверяем валидаторами:
HTML: validator.w3.org/

Микроразметка

Протокол Open Graph для социальных сетей
А именно картинку, ссылка сайта и название.

  • og:title — название объекта.
  • og:image — URL изображения, описывающего объект.
  • og:url — канонический URL объекта, который будет использован в качестве постоянного идентификатора.

Техники верстки

Для минимизации каскада и построения надёжной, современной, масштабируемой вёрстки и независимости блоков в CSS сейчас применяют БЭМ технику.

Никаких “костылей” и коряво используемых Bootstrap’ов в верстке быть не должно!

Разрешения

  • Сайт должен нормально адаптироваться для всех стандартных разрешений телефон 320px, планшеты — 540px 720px, узкие мониторы — 960px, стандартные мониторы — 1170px, широкие мониторы 1920px
  • Не иметь горизонтального скролла.

Оптимизация скорости загрузки

  • Проверка скорости через pagespeed до норм значения больше 90%
  • border-radius, gradient, box-shadow, text-shadow и пр. вместо использования графики;
  • Оптимизация PNG и JPG файлов в сервисе tinypng;
  • Ну и конечно нужно не забывать очевидные вещи: правильно выбирать тип картинки для сохранения JPG или PNG, выставлять тип Progressive для JPG.
  • Файл стилей оформления CSS желательно один, даже если подключены какие-либо JS-плагины со своим CSS;
  • JS максимально должен быть вынесен во внешние файлы, внешние js-файлы разумно объединены для уменьшения кол-ва запросов.
  • Минимизируем файлы CSS и JS, но вместе с ними прикладываем не минимизированые файлы для последующего редактирования.

Важные мелочи

  • Прописываем теги для favicon (желательно с включенными внутрь неё 32×32, 48×48 и 64×64 вариациями) и apple-touch-icon. Favicon должен лежать в корневой папке в формате .ico.
  • HTML сдавать в не сжатом виде.
  • В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние неиспользуемые файлы, старые версии файлов и т.п.;
  • Ресайз textarea не должен ломать вёрстку;
  • Контентные и картинки из базы сайта должны быть должны быть в отдельной папке /img(картинки для дизайна) и /tmp(картинки для статей и новостей) , /css — в отдельной и /js — в отдельной, шрифты в /fonts
  • Тексты на элементах (например, на кнопках) не должны быть сделаны изображением. Исключение составляют баннеры и контент-изображения
  • Если это много страничный сайт, должна быть временная навигация, в которой есть ссылки на все сверстанные страницы, чтобы при заливке папки на хостинг можно было удобно пройтись по всем страницам.
  • Все модальные окна – внизу документа с комментарием соответствующего окна.
  • Запрещено использовать классы, пересекающиеся с классами Bootstrap.
  • Если позволяет дизайн, не дублировать блоки, например, меню для мобильной и десктопной версии.
  • Наличие подключенного woff шрифта
  • CSS должен быть написан с использованием препроцессоров (LESS/Sass/Stylus). Желательно использование систем сборки (Grunt/Gulp) и построцессоров (PostCSS/Autoprefixer).
    При использовании препроцессоров обязательно предоставлять исходники со сборщиком.
  • Доступность при выключенных(загружающихся) фоновых картинках, заливать фон в цвет картинки
  • Футер должен быть «прибит» к низу браузера при отсутствии/малом количестве контента.
  • Для textarea задавайте CSS свойство resize.
  • При вёрстке блоков, описывающих некие сущности, свойства которых могут изменяться (например, формы или элементы в той или иной степени их имитирующие), учитывайте возможность изменения количества свойств сущности. Например, всегда предусматривать возможности того, что у формы будет больше полей, нежели предполагалось первоначально.
  • Вёрстка должна тянуться, не разваливаться и не терять вид при изменении визуально не сложного контента на странице, например текста. Его может быть больше или меньше, чем на макете.

Требования JS коду

  • В начале каждого фрагмента кода писать кратко, что этот код делает.
  • При использовании сторонних плагинов не вырезать функционал, не модифицировать код в файле плагина. В противном случае дописываем к имени файла постфикс _custom и дописываем, что меняли.
  • Не должно быть js-ошибок ни на одной страниц.
  • В продакшене не должно быть вызова консолей.
  • JS файл должне быть подключен в конце документа.

HTML5 формы

  • Label и input/select должны быть слинкованы. (Проверяется кликом по label – должен активироваться соответствующий ему элемент ввода.)
  • Логотип в шапке сайта должен иметь ссылку на главную страницу (a href=“/”)
  • Для всех форм делать вывод ошибок, которые появляются после нажатия на submit.
  • Для обязательных полей использовать атрибут required

SEO

  • У каждой страницы должен быть свой уникальный TITLE формата «Статья о верстке».
  • Ссылки на чужие сайты должны быть с target=”blank” для открытия в новой вкладке и rel=» nofollow» для повышения веса сайта по seo.
  • В верстке также нужно учесть сео-оптимизацию, т.е. предусмотреть теги h1, h2, meta (description) и прописывать Alt’ ов у картинок если это лендинг

Популярные посты