Нояб. 03

Карьера в IT: должность HTML coder (верстальщик)

Представляем новую статью из серии «Карьера в IT». Она посвящена должности верстальщика, чья работа выступает связующим звеном между работой дизайнера и программистов.

HTML coder — это специалист, который из нарисованного дизайнером макета создает web страницу, используя HTML/CSS.

По данным ДОУ, среднему украинскому верстальщику 26 лет, он имеет зарплату $300-800 и опыт работы 1,5 года.

Задачи и обязанности

Основная задача верстальщика — превращение дизайна во внешнее оформление сайта, то есть из формата PSD (реже — из Sketch или других форматов) — в код. Таким образом, он создает HTML-страницу, которая должна выглядеть в точности как утвержденный заказчиком макет дизайнера, и с которой дальше работают front-end и back-end разработчики.

Главные инструменты при верстке — HTML и CSS, а также JavaScript для создания более сложных элементов, например, слайдеров, анимаций, параллаксов, модальных окон, реализации простой логики (например, валидация форм). С помощью HTML-шаблонизаторов (Jade, Swig), верстальщик разбивает сайт на шаблоны, затем собирает их с помощью систем сборки.

«Я получаю макет от дизайнера, разбираю его по слоям, вырезаю картинки, логотипы, снимаю шрифты. Размечаю элементы на странице с помощью HTML, придаю им внешний вид в CSS, максимально приближенный к макету. Чтобы сравнить дизайн страницы с её версткой, использую плагин PixelPerfect. Затем делаю странички адаптивными для мобильных устройств, если такое требуется заказчику. По необходимости добавляю готовые js-плагины, вроде ползунков, каруселей. После окончания работы тестирую сайт на предмет совместимости со всеми браузерами. После этого отправляю проект на back-end, чтобы прописали взаимодействие с сервером».

В обязанности верстальщика может входить:
— создание макета по предоставленному дизайну (превращение PSD-шаблона в код);
— поддержка существующих UI компонентов;
— Адаптация сайтов под различные размеры экрана и устройства;
— интеграция сверстанных страниц в среду разработки;
— оптимизация загрузки сайта;
— создание print версий;
— верстка электронных писем;
— написание несложного JavaScript’a.

«Хороший верстальщик — это тот, кто:
— делает макет максимально точно, при этом может предугадать, что будет меняться или добавляться, и предусмотрит, чтобы это легко было внедрить;
— автоматизирует все, чтобы не писать это заново. То есть дает возможность скопировать элемент и перенести его в другой конец сайта, и оно не поломается;
— старается не использовать фреймворки, где это не надо. Но знает о них и разбирается».

Адаптивная верстка

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

«Верстальщик должен иметь взгляд, как у орла, реакцию, как у боксера, чувство прекрасного, как у Леонардо да Винчи, и терпение, как у святого. Эти свойства и навыки нужны для правильной оценки времени верстки будущего проекта, точности совпадения с макетом и требованиями заказчика и подготовки плацдарма для программиста. Также неплохо уметь переключаться между несколькими проектами, помнить свой код наизусть и знать все шрифты в лицо».

«Верстая компонент, верстальщик обязан понимать, как этот компонент будет реализован программистом, и сверстать его так, чтобы он не развалился, когда программист добавит в него логику. Например, верстальщик получил дизайн кнопки шириной в 200 пикселей. Он должен понимать, как эта кнопка будет себя вести в разных случаях, что с ней произойдет, если в ней будет короткий текст, длинный, если текст на кнопке состоит из нескольких слов, следует ли их переносить на другую строку и увеличивать высоту кнопки или делать что-то другое — вариантов может быть много. Прорабатывание этих вариантов — задача верстальщика, не программиста».

Работа над проектом обычно состоит из таких задач:
— получение макета от дизайнера или ПМ-а;
— обсуждение всех неясных моментов;
— создание кода;
— тестирование страницы в разных браузерах и на разных устройствах согласно требованиям;
— внесение правок.

Преимущества и недостатки

Большинство специалистов рассматривает верстку как первый шаг во front-end:

«Профессию верстальщика я выбрал из-за того, что это, фактически, первый шаг к web-разработке. Азы, без которых на следующих уровнях будет трудновато. Сейчас я уже работаю front-end разработчиком, и знания верстки — это моя непосредственная обязанность в совокупности с другими технологиями».

Однако есть и такие, кому нравится непосредственно процесс верстки:

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

«Я попробовала верстать, и мне очень понравилось, как написанный мной код превращает в нечто красивое и динамичное в браузере. Это относительно несложно, это интересно, эта сфера живая и развивающаяся».

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

«Это очень разносторонняя профессия, поскольку надо интересоваться большим количеством смежных областей, помимо, собственно, кода: дизайн (типографика, сочетания цветов, сетки, вертикальный ритм и т. д.), работа с графикой, сеть, анимации, производительность и даже человеческие недостатки, вроде дальтонии и тем, как пользуется компьютером слабовидящий человек».

«Есть место эстетике и здоровому перфекционизму. Большинство задач можно решить несколькими способами. Постоянно держишь себя в тонусе: необходимо следить за новыми спецификациями, обновлениями браузеров и „экосистемы“. Если команда идет навстречу инициативе, можно и нужно внедрять полезные новшества в своих проектах».

Недостатки специальности — высокая конкуренция среди желающих начать свою карьеру в ИТ именно с этой позиции (до 500 резюме на вакансию), большое количество рутинной работы и меньшие, чем у разработчиков, зарплаты.

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

«Задач, которые можно назвать челленджем, не так много — как правило, у нас есть уже готовые решения для большинства случаев. Челлендж есть либо в специфических ситуациях, когда нужно глубокое понимание CSS, чтобы разобраться с проблемой, либо на специфических задачах, например, сложная анимация либо архитектура».

«Мне не нравятся придирки заказчиков или менеджеров, которые никак не влияют на качество конечной работы и на UX пользователя. Из более глобальных штук: зашкаливающее количество технологий и их стремительное развитие, и как следствие — протухание имеющихся знаний о них. Обилие библиотек, фреймворков и просто часто меняющаяся мода на то, как „правильно“ писать код».

«Недостатком позиции именно верстальщика можно считать то, что их многие разработчики не воспринимают всерьез. В сфере IT, наверное, верстальщики самые недооцененные специалисты, после QA Manual :)»

Как стать и куда двигаться дальше

Базовые навыки, которыми должен обладать верстальщик, — понимание HTML, CSS и работы с изображениями. Самые популярные графические редакторы — Photoshop и Sketch; необходимо уметь нарезать и экспортировать графические элементы, работать со стилями и текстом.

Необходимо знать современные CSS фреймворки (Bootstrap, Foundation), иметь представление о методологиях верстки (например, БЭМ), знать и использовать пре- и пост-процессоры (Sass, PostCSS, Stylus), сборщики проектов (Grunt, Gulp, Webpack), знать основы Git, jQuery. Обязательны навыки адаптивной верстки, верстки писем.

«Нередко требуются и знания CMS (чаще всего — WordPress и Joomla) для верстки макетов и интеграции с этими CMS».

Также важны навыки работы с такими инструментами, как:
— инструменты разработчика в браузере;
— подключение шрифтов;
— шаблонизаторы;
— таск-раннеры;
— Linux команды.

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

Возможные карьерные пути верстальщика:
— развиваться как HTML coder, углубляясь в специализацию;
— переквалифицироваться в дизайнеры;
— переквалифицироваться в front-end разработчика — изучать JavaScript, фреймворки и библиотеки (Angular, Backbone etc).
— также открыты пути в тестировщики (в том числе автоматизаторы), проектные менеджеры.

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

P.S. Благодарю за помощь в написании статьи 17 украинских верстальщиков, которые рассказали DOU о своей профессии. Приведенные в статье цитаты взяты из их рассказов.