Что нужно знать о качественной верстке?

Между разработкой дизайн-макета и запуском сайта стоит еще один важный этап — верстка. То есть, создание структуры страницы на основе HTML-разметки и CSS-стилей. По сути вы прямо сейчас видите результаты работы верстальщика — страницу, блоки, изображения, шрифты и прочее.

Считается, что верстка — одна из основ frontend-разработки в принципе. И что освоить ее весьма несложно. Это правда, обучение верстке — одно из сравнительно простых, но очень важных и популярных направлений. Мы можем подтвердить это на собственном примере, ведь курс «Frontend разработка 2022. Junior верстальщик» — один из наиболее востребованных в Wezom Академии. 

Однако несмотря на «простоту», верстка имеет свою специфику. Качественная верстка от некачественной отличается очень сильно. И именно об этом сегодня пойдет речь.

Критерии качества верстки в 2022 году

Давайте представим, что имеем дело с начинающим верстальщиком, который освоил только HTML и CSS, а также на минимальном уровне JavaScript. По каким критериям мы можем оценивать верстку в данном случае? А какие из этих критериев лично вы можете использовать, чтобы оценивать собственные результаты работы? Их на самом деле достаточно много. Перечислим основные!

• Критерий №1. Кроссбраузерность

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

• Критерий №2. Используемые технологии

В «классическом» варианте верстальщик использует только инструменты HTML и CSS, а также незначительно — JavaScript. На первых порах полезно научиться верстать без вспомогательных инструментов, чтобы лучше понимать логику процесса, а не просто использовать готовые решения.

• Критерий №3. Соответствие размеров страницы

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

• Критерий №4. Переполнение

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

• Критерий №5. Работа со шрифтами

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

• Критерий №6. Использование Pixel Perfect

Pixel Perfect — это техника верстки, при которой сверстанная страница максимально совпадает с макетом. Буквально пиксель в пиксель. Допускаются лишь незначительные погрешности: различия в отображении шрифтов из-за особенностей сглаживания на разных платформах, а также несоответствие до 5px по высоте при расстоянии свыше 30px и 2px — по ширине.

• Критерий №7. Соответствие стайлгайду

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

• Критерий №8. Взаимодействие с элементами страницы

Наведение, нажатие, выделение — любые взаимодействия со страницей должны отрабатывать корректно и точно. Если не работает хотя бы одна кнопка или невозможно ввести запрашиваемую информацию в поле ввода, ни о какой качественной верстке не может быть и речи.

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

Существует достаточно большой набор инструментов, которыми должен в достаточной мере владеть верстальщик:

• Языки разметки HTML и CSS. Это основные инструменты, с которыми верстальщику предстоит работать постоянно. При помощи HTML он составляет структуру страницы, а при помощи CSS — реализует оформление.
• Фреймворки HTML/CSS. Они помогают упростить и ускорить процесс верстки, автоматизируя ряд процессов и избавляя верстальщика от лишних действий.
• Графические редакторы: Photoshop и Figma. В графических редакторах верстальщик анализирует макет и из него же может «вытягивать» изображения, иконки и прочее.
• Библиотеки шрифтов. Незаменимая вещь в верстке. Среди наиболее популярных библиотек шрифтов можем назвать Google Fonts и Font Squirrel.
• Система контроля версий Git. Полезный инструмент для работы с разными версиями верстки и «разветвления» рабочих задач. Удобно, если вы работаете над проектом в команде, где каждый отвечает за свою часть задачи.
• Основы JavaScript. От верстальщика не требуется глубокое знание языка программирования JavaScript, однако на базовом уровне знать JS все-таки нужно. Он существенно расширит возможности верстки, позволит подключать сторонние библиотеки и добавлять функциональные элементы сайта.

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

Чем отличается верстальщик от фронтенд-разработчика?

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

Задача верстальщика — перевесит макет сайта в программный код, используя HTML, CSS и в незначительной мере — JavaScript.

Frontend-разработчик — это специалист, который помимо базовой верстки работает над программированием клиентской части проекта, хорошо владеет языком JavaScript/TypeScript, работает с фреймворками React, Vue.JS и AngularJS, понимает базовые принципы UX/UI-проектирования, работает с Git и так далее.

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

Советы для грамотной верстки сайта от преподавателя курса верстки в Wezom Academy Олега Дутченка

«На мой взгляд, современная качественная верстка — это три главные составляющие:

• Качественный семантический код. Верстальщик должен уметь грамотно использовать логику и семантику кода, теги и атрибуты, прочее. Две визуально одинаковые страницы могут иметь совершенно разный код. В одном случае — «чистый» и структурированный, в другом — хаотичный и с целым ворохом ошибок. 
• Очень важно, чтобы код был понятен не только тому, кто его писал, но и другим разработчикам, которые, возможно, будут работать с ним в будущем. Ну и, естественно, код должен быть оформлен в соответствии с правилами SEO. Потому как поисковики «читают» не страницы. Они «читают» именно код!
• Простой интерфейс. Ваш код должен быть максимально понятным, интуитивным и структурированным. Очень полезно научиться правильно использовать шаблоны проектирования, а не верстать «по наитию». Поверьте, шаблонность и следование базовым правилам в данном случае — это хорошо.
• Кроссбраузерность. Здесь важно понимать следующее: все популярные браузеры, будь то Chrome, Microsoft Edge, Firefox, Safari, Opera и другие считывают сайты по-разному. Даже те, что основаны на одном движке, могут отображать страницы немного иначе. Поэтому верстальщик должен уметь верстать так, чтобы независимо от браузера страницы отображались корректно.

Конечно, невозможно сразу научиться верстать правильно на 100%. Вы в любом случае поначалу будете допускать ошибки, путаться в структуре собственного кода, а иногда и вовсе «ломать» этот код. Но только практика поможет научиться верстать правильно, быстро и эффективно. А потому мой главный совет: меньше зацикливайтесь на теории и больше практикуйтесь!»

Как стать верстальщиком?

Как мы и сказали ранее, основа верстки — это HTML и CSS. Освоив их на должном уровне, вы вполне сможете верстать сайты или приложения. 

Верстка считается тем самым «входным билетом» в IT, с которого начинает свою карьеру большинство современных айтишников. Но важно понимать, что верстальщик в классическом смысле сегодня уже не является таким востребованным специалистом, как раньше. Сейчас большой спрос как раз на frontend-разработчиков.

Собственно, именно с учетом нынешних реалий мы и создали свой курс «Frontend разработка 2022. Junior верстальщик», в котором верстка — это лишь одна из составляющих программы обучения. А еще JavaScript, фреймворки, Git, графические редакторы и многое другое. И если ваш выбор — комплексный фронтенд, а не просто верстка макетов, курс Wezom Академии — то, что нужно!