6 простых рекомендаций для работы с кодерами

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

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

1. Хорошее задание – половина успеха

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

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

2. Базовый QA  за 3 мин.

Сделайте скриншот полученной верстки, сохраните его и наложите на свой макет в Фотошопе, используя настройки прозрачности. Хорошая верстка должна полностью повторять макет (кегль, отступы, интерлиньяж и т.п.)

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

3. Настройки типографики

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

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

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

4.  Семантика

Обязательно проверьте, использовал ли кодер <H1>…<H6> для разметки заголовков, <ol> <ul> – для списков, <p> – для абзацев текста и т.п. Если, например, стиль заголовка реализован через какие-то левые классы, бейте по печени как можно сильнее.

5.  Комментарии к коду

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

6.  Забудьте о наболевших версиях гавнобраузеров, если иное не аргументировано статистикой.

В одном из своих выступлений Сережа Чикуенок рассказывал о том, как глупо игнорировать старые версии браузеров только потому, что они старые и приводил пример сервиса, в котором пользователи 6-го Иксплорера приносили немалую прибыль компании и поэтому поддержка этой версии браузера не игнорировалась.

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

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

Автор статьи, веб-дизайнер до мозга костей, Сергей ЛукьяновTwitter | Facebook 

 

  • Борис

    Дмитрий, скажите, возможно ли подготовить макет для кодера, если макет делался в Adobe Fireworks, так чтобы кодер мог в свою очередь по подготовленному файлу считывать все необходимые размеры, отступы и так далее?
    Спасибо

    • http://www.facebook.com/jetpeks Dima Jet Peks

      Если кодер юзает Firerworks тоже, то размеры смотреть очень удобно, также удобный экспорт файлов. Firerworks отрывает псд тоже нормально.

      + очень удобная фича для резайзинга кнопок без изкажений кнопок http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00d277-7ff4.html

      • Борис

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

    • http://www.facebook.com/jetpeks Dima Jet Peks

      это немозможно пока в принципе


Занесено в каталог Deport.ru
Return to Top ▲Return to Top ▲