Как работать с верстальщиком и контролировать его

О том, как работать с верстальщиками аутсорсерами при разовых заказах.

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

  1. Сразу договориться, что файлы вёрстки всегда доступны! Например верстальщик может править файлы в папке, которая автоматом синхронизируется с dropbox/google disk. Это позволяет контролировать прогресс разработки. Если не dropbox/GD, то какая-нибудь CVS, чтобы можно было смотреть diff между коммитами и понимать, что было сделано за конкретный период.
  2. Если вёрстка должна быть протестирована в нескольких браузерах, то нужны скриншоты процесса тестирования. Во-первых они подтверждают, что тестирование в разных версиях действительно было, а во-вторых можно самому наложить скриншоты в фотошопе один на другой с прозрачностью и посмотреть, есть ли отличия и в чём они.
    Т.е. на выходе index_IE9.jpg, index_FF.jpg, secondpage_IE9.jpg, secondpage_FF.jpg и т.д.
  3. Если не хочется пускать всех подряд в таск менеджер, то заводим 2 документа в Google Docs:
    1. «Список ошибок».markup-bugs
      Поля, у которых шапка с голубым фоном, может редактировать только заказчик (делается через «Защита диапазона»).
      Поля с оранжевой шапкой может редактировать верстальщик.
      Поля A,B,C имеют фиксированные диапазоны значений (делается через «Проверка данных» по типу ENUM поля в базе).
      Поле D меняет фон в зависимости от значений других полей (настраивается через «Условное форматирование» как на этом скриншоте)
    2. «Сроки сдачи макетов».
      dedline Что и кто может редактировать — аналогично списку ошибок. На полях с выпадающими списками — стоит проверка данных.
      Поля A,B,C раскрашены так (условие в последнем инпуте =AND(TODAY()>D1; NOT(ISBLANK(A1)); NOT(ISBLANK(D1)))  )
      Поле D раскрашено так (условие =AND(NOT(ISBLANK(A1)); ISBLANK(D1))   )

Что проверяем при сдаче

  1. Смотрим в разных браузерах и OS (винда и мак). (Если верстальщик верстает под мак, то часто в FF под виндовс появляются разные юникод символы в конце слов или строк)
  2. Смотрим в планшете и телефоне (что-то может не нажиматься, не работать выпадашки, проблемы при зуме, неправильное позиционирование overlay у попапов и т.п.)
  3. Смотрим метатеги. Метатеги для CEO, для соцсетей, верификационные.
  4. Проверяем валидатором HTML и CSS
  5. Нормально ли разбито на блоки, чтобы потом можно было резать вёрстку на шаблоны виджетов
  6. Проверяем относительные/абсолютные url() в CSS (потом могут быть неожиданности)
  7. Наличие .psd для спрайтов

Что придётся доделать

  1. Делаем минифицированные версии JS, CSS. Возможно понадобится оптимизировать PNG.
  2. Вставляем счётчики гугл, яндекс и т.п.
  3. Добавляем метатеги. Метатеги для CEO, для соцсетей, верификационные.

Как работать с верстальщиком и контролировать его: 5 комментариев

  1. > Делаем минифицированные версии JS, CSS
    ..и не забываем удалить первоначальные файлы!
    Bravo!

  2. Здравствуйте! Все перечисленные проблемы не от дизайнера или верстальщика, а от того кто требует чтобы сайт был 1 в 1 с дизайном, и не слушает что дизайнер просто на глаз сюда воткнул заголовок, а посередине это то как сейчас на сайте.

  3. A tidy environment leads to a clearer mindset—start by organizing your physical or digital workspace with designated places for files and tools. Remove distractions and keep only what’s essential within reach. Even small changes like clearing your desktop daily can make a big difference. How do you keep your workspace productive and stress-free? Share your tips!

Добавить комментарий

Ваш e-mail не будет опубликован.