Что должен знать верстальщик

Ты крутой верстальщик, если ты…

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

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

Перфекционист

Да, этот пункт первый, потому что это боль для тех, кто не может оставаться равнодушным. Много раз видела, как предыдущий верстальщик мог просто взять и не симметрично установить картинку, или же объект выходит за пределы от общей базовой линии или же цвет единственной кнопки #4286f4, в то время как цвет остальных элементов #3b78db (это все тот же синий, но другого тона). Каждый раз задаюсь вопросом: «Как? Как он мог этого не заметить?»

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

Как определить, что Вы — не перфекционист? Например, Вам могут приходить сообщения от дизайнеров или заказчиков в таком духе:

Если хочешь исправиться и встать на путь истинный, то срочно качай плагин PerfectPixel.

Немножко дизайнер

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

Обожаешь взаимодействовать с пользователем

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

Умеешь планировать время

В среде веб-разработки важно уметь не только сообщать о сроках, за которые ты сверстаешь сайт, а действительно выполнять все в срок. Тайм-менеджмент в действии 🙂

Можешь говорить на языке, понятном заказчику

Запомните, не все заказчики разбираются в сайтах. Некоторым придется объяснять всё на простом языке. Забудьте о терминах, лучше расскажите что он увидит в своем браузере и какие действия будут происходить при клике/наведении на тот или иной элемент.

Можешь объяснить заказчику, почему его правки абсурдны

Все мы знаем, что правки, приходящие от заказчиков, порой очень абсурдны. Но больше всего меня поражают не столько правки, сколько сами исполнители. К сожалению, многие соглашаются с ними и идут исправлять верстку! Это неверный подход. Кто специалист по сайтам: Вы или заказчик, который, вероятнее всего, мало понимает в вебе? Лично я всегда стараюсь объяснить почему заказчик может быть не прав и предлагаю собственный вариант решения. Вероятность того, что он согласится с моим решением 99,99%.

Постарайтесь задать себе вопрос: «А действительно это то, что хочет заказчик? Может эти правки наоборот навредят его сайту?» Если ответ: «Да», то смело обсуждайте с заказчиком моменты, по которым Вы не согласны. Дайте ему конструктивный ответ и я уверяю — заказчик Вас услышит.

Понимаешь английский

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

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

Следишь за новинками

Не секрет, что в области фронтенд-разработок очень много нововведений каждый год. Если этот факт Вас смущает, то лучше Вам присмотреться в сторону дизайна или бэкенд-разработки — там все стабильнее. Если этот факт Вас не пугает, а наоборот подстегивает, чтобы узнавать что-то новое, то это именно то, что нужно!

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

Репозиторий

Подробно

Английский язык

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

  • engVid
  • Native English
  • Lingualeo
  • duolingo

HTML и CSS

  • Уроки по HTML и CSS (бывший htmlbook)
  • Самоучитель HTML4
  • Самоучитель CSS
  • Основы CSS/CSS3
  • HTML Academy
  • Codecademy
  • Learn to Code HTML & CSS
  • HTML Dog: HTML Tutorials
  • HTML Dog: CSS Tutorials
  • Intro to HTML/CSS: Making webpages
  • Dash
  • w3schools

Графические редакторы

Самые популярные: Photoshop и Sketch. В ~90% случаев Photoshop’а будет достаточно, дизайнеры только недавно начали переходить на Sketch. Sketch вообще под Windows не работает, но есть почти-решение в лице zeplin

Необходимый минимум, чтобы начать работать:

  • нарезка и экспорт графических элементов;
  • работа со стилями слоя;
  • информация о тексте (размер, шрифт, цвет, межстрочный интервал и тд.).
  • Photoshop для кодера
  • Photoshop для HTML‑верстальщика
  • Photoshop экшены для верстальщика
  • Photoshop — пример нарезки макета для верстки
  • Нарезка в Photoshop — New Layer Based Slice
  • Экспорт слоев из Photoshop в один клик!
  • The Ultimate Front-End Developer’s Guide to Photoshop
  • A Web Developer’s Guide to Photoshop
  • Photoshop Extensions for Front-end Developers
  • Sketch vs. Photoshop: why & how I moved to Sketch 3 and am not going back

Инструменты разработчика в браузере

Это набор инструментов, помогающих быстро найти и исправить ошибку. Верстальщиками часто используется для поиска ответа на вопросы: “почему не отображается?”, “откуда такие размеры?”, “я же его перекрасил” и тд. Умение пользоваться этими инструментами сохранит вам кучу времени и нервов.

  • Chrome DevTools
  • Курс от codeschool
  • Chrome DevTools, в помощь верстальщику
  • Инструменты разработчика Firefox
  • DevTools Tips
  • 15 Must-Know Chrome DevTools Tips and Tricks

Chrome DevTools

Emmet

Набор сниппетов для HTML и CSS, дающий супер-скорость. Лучше 1 раз почитать документацию и сразу начать использовать.

Семантика и доступность

  • Семантическая вёрстка. Часть первая
  • Искусство семантики HTML, часть 1
  • Семантический HTML — рекомендация с большими выгодами
  • Продвинутая семантика и доступность
  • Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA
  • Let’s Talk about Semantics
  • HTML5 Semantics
  • Extending Semantics & Accessibility
  • Accessibility in HTML5
  • WebAIM
  • A Look Into Proper HTML5 Semantics

Правильное именование

Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым. У новичков часто можно встретить <b class=»b»>, <div class=»div13>» и все в таком духе. Это неправильно. Также нельзя использовать транслитерацию <div class=»shapka»>. Общепринятый язык для именования — английский.

Responsive/adaptive верстка

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

  • Адаптивно-отзывчивый: разбираемся в терминологии
  • Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница
  • Beginner’s Guide to Responsive Web Design

jQuery

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

  • Учебник “jQuery для начинающих”

Подключение шрифтов

  • Загрузка своего шрифта
  • Как подключить шрифт
  • Подключение шрифта к странице: как нужно делать сейчас

Сборка спрайтов

Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.

  • Введение в CSS спрайты для чайников
  • Верстка с использованием CSS спрайтов
  • CSS Sprites: Image Slicing’s Kiss of Death
  • CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Пример спрайта

Оптимизация изображений

Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 86% (16 мегабайт). Вдумайтесь. Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).

  • Всё, что нужно знать об оптимизации изображений для сайта
  • Оптимизация изображений

Работа с SVG

  • Использование SVG
  • SVG
  • SVG в HTML — из иллюстратора в браузер

SVG-спрайты

  • SVG-спрайты
  • Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев
  • SVG спрайты — 4 способа использования векторных спрайтов

CSS-анимации и плавные переходы

  • Плавные переходы (transition)
  • Css Animation
  • Очень простое руководство по CSS3-анимациям

CSS-методологии

Сотни их: OOCSS, BEM, SMACSS и тд. Не обязательно все использовать, но вы должны иметь представление о лучших практиках css-архитектуры.

CSS-фреймворки

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

  • Bootstrap
  • Foundation
  • Pure
  • Skeleton

Верстка писем

Ад мира HTML-верстки. Привет из нулевых. Тут свои правила и до сих пор верстка таблицами. Звучит плохо, на деле еще хуже.

  • Верстка email рассылок от А до Я для чайников
  • How-to: Правила вёрстки email-писем
  • Основы профессиональной верстки электронных писем

Командная строка

Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, git и другим полезным вещам.

  • Командная строка (cmd) для веб-мастера

Git

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

  • Git — для новичков — #1 — основы
  • Github Tutorial
  • Atlassian Git Tutorials
  • Git How To
  • Моя шпаргалка по работе с Git
  • Шпаргалка по консольным командам Git
  • Pro Git, второе издание
  • Коллекция часто задаваемых вопросов по Git с возможностью поиска

CSS-препроцессоры

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

  • Sass
  • Stylus
  • Less
  • PostCSS + PreCSS (одна из связок)
  • Как работать с CSS-препроцессорами и БЭМ

Шаблонизаторы

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

  • Pug (бывший Jade)
  • HAML
  • Twig
  • Blade

Автоматизация: таск-раннеры

Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.

  • Gulp
  • Скринкаст по Gulp
  • Gulp for Beginners
  • Getting started with gulp
  • Продолжаем бороться с frontend-рутиной
  • Grunt
  • A Simple Guide to Getting Started With Grunt

Тестирование верстки

Плох тот разработчик, который не тестирует свою работу.

  • Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать
  • Тестирование верстки
  • Автоматизированное тестирование верстки веб-сайтов

Все перечисленное не сделает вас сразу хорошим специалистом. Вы должны любить свое дело и делать работу идеально. На протяжении всей карьеры я слышу как дизайнеры жалуются на верстальщиков, которые не следуют макету: пренебрегают размерами блоков и текста, сеткой и тд. Не надо так. Хорошего верстальщика отличает внимательность к деталям и четкое следование макету. В идеале, при наложении макета на результат работы у вас должно быть максимальное совпадение. Общайтесь с дизайнером как можно чаще, задавайте больше вопросов по макету. Только работа в паре даст отличный результат.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *