Что такое Pixel Perfect вёрстка

Когда макет сайта, лендинга или письма совпадает с HTML-вёрсткой пиксель в пиксель, значит верстальщик использовал технику Pixel Perfect. При такой технике отклонение между макетом и готовым HTML-шаблоном — 1-3, максимум 5 пикселей.

Как понять, что шаблон свёрстан в Pixel Perfect?

Откройте код в браузере и наложите сверху полупрозрачную картинку-макет. Если не видна разница, и все элементы полностью совпадают, значит верстальщик работал в Pixel Perfect.

при pixel perfect таких неточностей быть не должно
Стрелочками указаны области, где вёрстка и макет не совпадают. При Pixel Perfect таких неточностей быть не должно

Читайте также

HTML-вёрстка писем — полная инструкция

Когда использовать Pixel Perfect

Идея техники — добиться точного соответствия вёрстки с разработанным дизайном.

Когда верстальщик получает от дизайнера PSD-макет и приступает к написанию кода, он может обнаружить, что:

  1. Шрифты в некоторых браузерах выглядят по-разному: где-то жирнее, где-то тоньше. Верстальщик может не обратить на это внимание и перенести шрифт из макета в вёрстку как есть. В результате заказчик может быть недоволен, что результат не тот, что ожидался.
  2. Дизайнер допустил ошибки в макете. Например, иконка, место которой в центре, съехала влево. Или у границ таблицы разная толщина. Pixel Perfect поможет выявить это и исправить до продакшена.

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

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

Клиент получает то, что ожидает

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

С Pixel Perfect таких ситуаций можно избежать. Ведь готовая страница полностью соответствует макету.

Команда не тратит время на переписки

Если у клиента дизайнер в одной стране, а разработчики в другой, то точная вёрстка упростит общение между сторонами.

Команде не придётся отправлять друг другу трудно переводимые письма с пояснениями к своей части работы. Дизайнеры будут создавать макет, а верстальщики в точности его кодировать.

Вёрстка происходит быстрее

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

Недостатки

Страницы сложно менять

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

В Pixel Perfect никаких групп нет, у каждого элемента свой стиль. Собрать новую страницу из таких элементов трудно, и добавление новых разделов сайта займёт много времени.

Также трудно поддерживать вёрстку имеющихся страниц. Стоит только добавить ещё одно меню или текстовый блок, как вся страница разъедется.

Поэтому такую вёрстку стоит применять для тех проектов, которые не будут изменяться в будущем. Например, для электронных писем.

Инструкция: как начать верстать в Pixel Perfect

Для техники точной вёрстки нужно скачать специальные плагины. Они позволят наложить полупрозрачный макет страницы поверх HTML-шаблона и найти несоответствия.

Рассмотрим бесплатные плагины для Mozilla Firefox и Google Chrome.

Как скачать и установить плагин Mozilla Firefox

Открываем браузер, находим значок скрытого меню, кликаем и выбираем раздел «Дополнения».

перейти к поиску плагина Pixel Perfect
Нужно нажать на «Дополнения», чтобы перейти к поиску плагина

В поисковом поле набираем «Pixel Perfect» и нажимаем Enter.

В поисковом поле набираем Pixel Perfect
Поиск плагина вёрстки

Выбираем Pixel Perfect Pro и добавляем в браузер.

добавляем в Firefox
Жмём «Добавить в Firefox»

Плагин добавился в браузер и вот где отображается.

Отображение плагина в навигационной панели

Теперь открываем в браузере Mozilla Firefox HTML-код и через иконку в панели навигации вызываем плагин.

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

Форма для загрузки PNG-макета сайта для pixel perfect вёрстки
Форма для загрузки PNG-макета сайта

В результате вот что отобразит браузер: HTML-макет страницу с наложенным поверх PNG-макетом. Те области, которые выглядят нечёткими или двоятся, сверстаны не в Pixel Perfect.

так выглядит в вёрстка с элементами, которые свёрстали не с помощью Pixel Perfect
Наложение макета на вёрстку

Теперь блокируем слои, чтобы картинка PNG никуда не съехала. Для этого жмём на значок замка на панели плагина справа. Можно подвигать бегунки прозрачности и инверсии, чтобы сильнее выделить неточности.

Окно настройки плагина
Окно настройки плагина

Когда все настроено, открываем инспектор и вносим правки в код.

Читайте также

Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы

Как скачать и установить плагин Google Chrome

Открываем браузер, заходим в интернет-магазин Chrome и набираем в поисковой строке Perfect Pixel.

Поиск плагина PerfectPixel в Google Chrome
Поиск плагина в Google Chrome

Кликаем по плагину, переходим в следующее окно и выбираем «Установить». Когда плагин установится, открываем в Google Chrome HTML-код и запускаем плагин.

Так выглядит иконка Perfect Pixel
Так выглядит иконка Perfect Pixel

Откроется меню. В нём жмём на «Добавьте ваш первый слой!».

Меню Perfect Pixel
Меню Perfect Pixel

Загружаем PNG-шаблон страницы, выравниваем и нажимаем значок замочка — картинка заблокирована. Через бегунки можно поменять прозрачность или усилить контраст через инверсию.

Наложение макета на вёрсткуЧтобы подогнать вёрстку под макет, надо открыть инспектор и поправить код.

Применение Pixel Perfect вёрстки в email-рассылках

Вёрстку пиксель в пиксель удобно использовать для электронных писем. Так как код письма не нужно менять со временем — добавлять новые разделы или элементы — не будет путаницы в стилях.

Применение Pixel Perfect позволяет доводить вёрстку до идеала: письма максимально приближены к макетам, отображаются без искажений на любых устройствах и в браузерах.

Читайте также

Клиентам о email-маркетинге, часть 3. Дизайн, вёрстка, текст рассылки

Подведём итог

Pixel Perfect позволяет верстальщику добиваться точной схожести с макетом дизайнера. Когда проект сдан, клиент видит то, что ожидал получить.

Для крупных сайтов и веб-страниц техника вёрстки пиксель в пиксель может быть неудобна. Поддерживать код, в котором у каждого элемента свой стиль, трудно.

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