Пиксель перфект что это
Создайте рассылку в конструкторе за 15 минут. Отправляйте до 1500 писем в месяц бесплатно.
Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель. При наложении html-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.
Как проверить вёрстку с помощью PerfectPixel?
Чтобы проверить вёрстку, для начала нужно скачать плагин PerfectPixel для браузера Chrome, Opera или Edge. Для Firefox можно использовать Pixel Perfect Pro, а вот для Safari плагин пока находится в стадии разработки.
После установки в панели браузера появится розовая иконка — это и есть PerfectPixel Если она не появилась, добавьте самостоятельно. Для этого откройте «Расширения» (находится на панели или в настройках браузера) и закрепите иконку в меню быстрого запуска.
Так выглядит иконка PerfectPixel в браузере Chrome.
Иногда плагин бывает недоступен для работы с сайтами, запущенными локально, то есть не размещёнными в интернете. В таких случаях откройте в браузере раздел «Расширения» и найти в нём PerfectPixel. Затем нажмите на кнопку «Подробнее» и измените в настройках две функции: «разрешить открывать локальные файлы по ссылкам» и «разрешить доступ на всех сайтах».
Следующий этап — экспорт страницы макета в формате PNG из Figma или Adobe Photoshop. Если не помните, как работать с Figma, прочитайте статью «Старт в Figma для верстальщика».
Чтобы проверить сайт, откройте его в браузере, а затем в инструментах разработчика установите такую же ширину, как у экспортированного макета. Если, например, дизайнер подготовил макет для мобильной версии шириной 320px, тоже установите ширину 320px. Для этого откройте инструменты разработчика с помощью комбинаций:
OS X — Control + Command + I
Linux — Ctrl + Shift + I
В инструментах разработчика нажмите на значок переключения устройств (toggle device mode), а затем установите подходящую ширину вьюпорта (окна). Это нужно для того, чтобы макет точно ложился на страницу сайта, ведь макеты экспортируется статичными, а ширина страницы в браузере зависит от разрешения экрана вашего устройства.
Инструменты разработчика: стрелками показаны значок переключения устройств и окно для изменения ширины вьюпорта.
Далее нажмите на иконку PerfectPixel и добавьте слой для сравнения — макет страницы. После загрузки макета уточните размеры: на примере ниже показано, как установить размер 1:1. Если нужно, выровняйте расположение макета по высоте и ширине или зафиксируйте по центру.
Над полем с положением находятся три кнопки. Первая устанавливает прозрачность слоя с макетом. Вторая фиксирует этот слой. Третья в режиме инверсии цвета показывает разницу между сайтом и макетом. Используйте эти кнопки, чтобы сравнить вёрстку и утвержденный дизайн.
Работа с PerfectPixel: загружаем слой, выравниваем его и проверяем в режиме прозрачности или инверсии.
Применение Pixel Perfect верстки
Техника работы с Pixel Perfect версткой осуществляется за счет применения особых плагинов, созданных специально для определенных браузеров, а также с помощью специализированных скриптов. Основные этапы работы с Pixel Perfect версткой включают в себя такие процедуры:
- Оригинальный PSD-макет необходимо сохранить в формате .jpg через программу Photoshop.
- Html-шаблон, сверстанный по данному макету, открывается в браузере, после чего с помощью применения плагина копию в формате .jpg необходимо наложить на сверстанную страницу.
- После наложения становится видна разница между расположением элементов на png-копии и html-макете. Далее проводится коррекция значений для точного совпадения.
Нужно ли учитывать все отличия?
Если внимательно присмотреться, то единственным элементом, который расположен точно в нужном месте, является список карточек. Всё остальное хотя бы на 1 пиксель, но различается с макетом. На сколько это критично в рамках подхода Pixel Perfect?
Во-первых, небольшое смещение текста допустимо. Процесс рендеринга шрифта в графических редакторах и в браузерах отличается. Из-за этого заголовки карточек визуально отличаются, хотя и в макете и в вёрстке у них одинаковые параметры.
Во-вторых, критичны только серьёзные расхождения. Основной целью Pixel Perfect подхода является, как бы это парадоксально не звучало, не идеальная, а приемлемая точность. Не нужно добиваться полного совпадения, нужно добиться результата, при котором расхождения не заметны для пользователя. Сейчас у большинства людей стоят мониторы размером 1920 × 1080 пикселей. Если заголовок займёт, допустим, не 187, а 189 пикселей в ширину, большинство людей этого не заметит. Обращайте внимание на отступы между блоками, выравнивание, размеры иконок и так далее.
Работа с адаптивными макетами
Современный сайт должен адаптироваться под разные разрешения экранов. Обычно это мобильные экраны, планшеты, ноутбуки и десктопы. В таком случае дизайнер делает по одному макету на каждое необходимое разрешение. Используйте инструменты разработчика чтобы проверить вёрстку на разных разрешениях. Их можно открыть несколькими способами:
- Control + Command + I — на macOS;
- F12 — на Windows;
- Control + Shift + I — на Linux.
Включаем панель инструментов устройства (device toolbar) и выбираем нужный размер экрана. Можно задать размер вручную или выбрать один из предустановленных шаблонов.
После чего делаем всё так же, как раньше. Открываем расширение и добавляем картинку макета для соответствующего разрешения, после чего ищем отличия в вёрстке.
Исправляем недостатки
Исправим критичные расхождения. Для наглядности применим к заголовкам letter - spacing . Это не критично, но для наглядности будет полезно.
При сравнении с макетом видно, что вёрстка совпадает с ним практически идеально:
Заключение
Верстка Pixel Perfect позволяет сделать страницу максимально соответствующей макету, но прибегать к ней нужно без фанатизма. Для верстки “пиксель в пиксель” обязательно требуются отлично проработанные макеты, а также возможность связаться с дизайнером, если появились вопросы по поводу того или иного элемента. Для ускорения работы рекомендуется использовать дополнительные инструменты - плагины для браузера, программы, где можно быстро преобразовать стили элемента в HTML/CSS.
Верстая Pixel Perfect не гонитесь за идеальным соответствием макета. Расхождение в несколько пикселей - это нормально, а иногда даже необходимо, если дизайнер допустил мелкие ошибки в расположении элементов.
Работа над сайтом начинается с разработки дизайна. Сначала дизайнер продумывает, как будут выглядеть страницы, и создает макет. Затем утверждает оформление с заказчиком и вносит итоговые правки.
Заказчик еще до появления сайта знает, как должен выглядеть каждый элемент на странице. И если в процессе работы что-то изменится, он может не принять работу. Поэтому веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету.
Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки строго по макету, при котором размеры и интервалы из макета соблюдаются с точностью до нескольких пикселей.
Наложение вёрстки на макет. Видно, как отличаются отступы, межбуквенное расстояние у заголовков, размер шрифта и высота строк у текста.
Особенности Pixel Perfect верстки
При обычной верстке допускаются расхождения с оригинальным макетом с поправкой на разрешение, размеры окна, особенности браузера, через который ведется просмотр страницы. Pixel Perfect - буквально “идеальный пиксель”, требует минимизации различий между макетом и готовым продуктом. В идеале, если наложить картинку макета на готовую верстку в браузере, то они должны совпасть “пиксель в пиксель”.
Требование соблюдать Pixel Perfect верстку встречается чуть ли не в каждом втором ТЗ. Стоит понимать, что точно определенного стандарта Pixel Perfect не существует - каждый заказчик и исполнитель может интерпретировать его по-своему, поэтому желательно заранее обговорить с заказчиком этот момент.
Порой технически невозможно сделать идеальную верстку “пиксель в пиксель” из-за особенностей отображения элементов в браузере, размера окон, графики, подготовленной дизайнером, необходимости адаптации макета под множество устройств. Золотым правилом является максимальное расхождение с макетом в 5 пикселей.
При верстке “пиксель в пиксель” могут возникнуть проблемы со следующими элементами:
- Шрифтами. Браузеры могут отображать шрифты в макете иначе, чем это делают программы для работы с макетами. В таком случае возможны небольшие расхождения в пару пикселей.
- Различные разделительные элементы и элементы, подстраивающиеся под контент блока. Контента в том или ином блоке может быть больше или меньше, чем задумал дизайнер в своем макете. Если блоку невозможно по техническому заданию придать фиксированные размеры, то он будет подстраиваться под контент, следовательно, размеры могут сильно отличаться от тех, что в макете.
- Непродуманное поведение элементов. Если дизайнер не продумал, как будут вести себя элементы сайта на разных экранах, то несоответствия с макетом могут возникнуть при малейшем изменении разрешения.
- Проблемы с адаптивом. У всех заказчиков основным пунктом ТЗ идет адаптивность готовой верстки. В этом случае Pixel Perfect применим только к готовым дизайн-шаблонам, которые будут служить эталоном. Обычно это вид сайта на мониторе компьютера, планшете и экране смартфона. Учесть все промежуточные состояния нереально, поэтому к ним Pixel Perfect применяться не должно.
Только в исключительных случаях нужно подгонять готовую верстку прямо “пиксель в пиксель”. Если же верстальщик видит, что готовый макет получается неудобным, некрасивым, хоть и полностью соответствующим макету от дизайнера, то лучше проигнорировать принцип Pixel Perfect и верстать так, чтобы макет хорошо смотрелся и был удобен для пользователя.
Что может пойти не так
Самые частые ошибки новичков при Pixel Perfect вёрстке — неправильное выравнивание слоёв, игнорирование межбуквенного интервала или высоты строк и хаотичный порядок редактуры. Из-за этого вёрстка начинает «ползти», а наложение вновь и вновь показывает разницу между расположением элементов. Есть несколько способов избежать таких ошибок.
Задайте положение макета: отцентрируйте его или выровняйте по левому верхнему углу сайта. Исправляйте отступы и размеры от верхних элементов к нижним, от левых к правым. Так гораздо быстрее и меньше рисков, что вам придется что-то переделывать.
Если вы используете резиновую вёрстку, проверяйте соответствие только на тех же размерах, которые использовал дизайнер в макете. На промежуточных состояниях, если их вид не предусмотрен макетом, добиваться схожести не нужно.
И главное: начинайте работу с PerfectPixel только тогда, когда полностью завершите работу над блоком или страницей: добавите стили и графику. Если после проверки измените какие-то элементы, придется заново подстраивать сайт под макет.
Расширения помогают найти неточности
Откроем демо из примера выше и сравним его с макетом. Вызвать интерфейс расширения можно, нажав на иконку расширения в списке расширений рядом с адресной строкой браузера. Откроется окно с таким интерфейсом:
За что отвечает каждая кнопка, можно посмотреть на официальном сайте расширения. Чаще всего нужны следующие функции:
- Показать или скрыть накладываемый макет.
- Инвертировать цвета макета.
- Закрепить макет, чтобы он оставался на месте при прокрутке страницы.
- Настроить положение макета относительно страницы.
Наложим макет на вёрстку и инвертируем цвета. Получим такой результат:
Сразу видны отличия:
- Съехали заголовки на карточках и цена биткоина и эфира.
- Съехало значение рейтинга надёжности.
- Кнопка «Загрузить ещё» имеет другой размер.
Когда идеальной вёрсткой можно пренебречь
Если скорость разработки сильно важна. Например, мы делаем стартап, и если завтра не выйдем на рынок, то это сделают конкуренты. В таком случае какая-нибудь вёрстка, но сделанная быстро, гораздо лучше идеальной, на полировку которой ушли драгоценные часы.
Если точность вёрстки не важна вообще. Например, мы делаем прототип продукта, который потом будет ещё десять раз переделываться, или панель администрирования, которой будут пользоваться технические специалисты, а не пользователи. Безусловно, это не значит, что мы можем в таком случае верстать как угодно, но и идеала добиваться не стоит.
Если точная вёрстка в принципе недостижима. Например, у графических редакторов, таких как «Фотошоп», рендеринг шрифтов может отличаться от браузерного. И тогда мы не сможем адекватно добиться, чтобы текст в браузере выглядел в точности так, как в «Фотошопе» — придётся играть с letter - spacing , разделять текст на лишние блоки и заниматься прочей уличной магией. Таких манипуляций стоит избегать.
Работа с адаптивными макетами
Современный сайт должен адаптироваться под разные разрешения экранов. Обычно это мобильные экраны, планшеты, ноутбуки и десктопы. В таком случае дизайнер делает по одному макету на каждое необходимое разрешение. Используйте инструменты разработчика, чтобы проверить вёрстку на разных разрешениях. Их можно открыть несколькими способами:
- Control Command I — на macOS;
- F12 — на Windows;
- Control Shift I — на Linux.
Включаем панель инструментов устройства (device toolbar) и выбираем нужный размер экрана. Можно задать размер вручную или выбрать один из предустановленных шаблонов.
После чего делаем всё так же, как раньше. Открываем расширение и добавляем картинку макета для соответствующего разрешения, после чего ищем отличия в вёрстке.
Взгляд со стороны заказчика
Pixel Perfect подход — самый простой способ для заказчика проверить качество вёрстки. Зачастую заказчик не обладает опытом веб-разработки, и он не сможет отличить плохой HTML/CSS код от хорошего. Но он сможет сравнить макет и результат, и если они совпадают — значит, верстальщик сделал свою работу хорошо.
Вам же, как верстальщику, это даёт конкурентное преимущество — говоря «я верстаю по Pixel Perfect», вы сообщаете заказчику «я сделаю именно то, что вам нужно, и вы сможете это очень легко проверить».
Зачем учиться Pixel Perfect вёрстке начинающему разработчику?
Концепция Pixel Perfect вёрстки распространена в компаниях, которые занимаются разработкой сайтов и веб-приложений. Чтобы не испытывать проблем с заказчиками в коммерческой разработке и не затягивать сроки сдачи проектов, полезно сразу, ещё во время обучения, научиться верстать сайты «пиксель в пиксель». Для этого нужны время и практика, ноо с каждым проектом вы начнете быстрее разрабатывать сайты и проекты, полностью соответствующие макету.
Когда использовать Pixel Perfect
Если мы делаем презентационный вау-проект, то положение каждого элемента должно быть выверено до пикселя.
Если мы вносим изменения в сложную систему с кучей элементов, то поехавшую вёрстку можно даже не заметить, а вот при использовании Pixel Perfect изменения сразу бросятся в глаза.
Если все участники процесса понимают, для чего нужен Pixel Perfect и чего с его помощью мы пытаемся добиться, то впереди будет лишь продуктивная работа. Но иногда бывает, что у дизайнера дрогнула рука, и один элемент в списке случайно подвинулся на 1 пиксель. Затем макет прошёл цепочку согласований, и любая правка в нём — это недели бюрократических процессов. И тогда сплошь и рядом появляется ужасный код вида:
Исправляем недостатки
Исправим критичные расхождения. Для наглядности применим к заголовкам letter-spacing . Это не критично, но для наглядности будет полезно.
При сравнении с макетом видно, что вёрстка совпадает с ним практически идеально:
Инструменты для ускорения Pixel Perfect верстки
Наиболее удобно использовать для верстки “пиксель в пиксель” сторонние инструменты. Одним из самых лучших решений является программа Avocado. Она открывает макеты самых популярных форматов - Photoshop, Sketch, Figma, XD. Редактировать с его помощью макет не получится, но зато можно быстро узнать стили конкретного слоя, блока или группы блоков. Это значительно быстрее, чем в том же Photoshop отмерять расстояние линейкой и переключаться между вкладками со свойствами.
Код элемента в Avocado
Avocado - это не бесплатная программа. Ее можно использовать бесплатно в течение тестового периода, но затем придется оформить подписку. Скачивать и устанавливать саму программу на компьютер тоже необязательно. На сайте разработчика программы имеется встроенный редактор, который по функционалу не уступает программе для ПК. Его использование возможно после авторизации на сайте и оплаты использования (или в течение тестового периода).
Если вы новичок
Когда вы только начинаете путь в веб-разработке и вёрстке, использование подхода Pixel Perfect крайне желательно. Это поможет вам развить очень важные качества:
Pixel Perfect — это подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом. Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений. После наложения становится очевидной разница, если она есть, между тем как нарисовал дизайнер, и тем, что получилось в итоге.
Как верстать в Pixel Perfect
Верстка “пиксель в пиксель” ничем не отличается от стандартного процесса верстки, за исключением необходимости следить за размерами элементов и сверять их с размерами на представленном шаблоне. Узнать точные размеры элементов, их расстояние друг от друга можно, используя встроенные инструменты графических редакторов. Например, в Photoshop есть инструмент “Линейка” для измерения расстояния между элементами, а свойства самих блоков можно посмотреть в верхней части экрана.
Пример
Допустим, дизайнеры подготовили нам такой макет:
Мы его сверстали, получилось вот так:
Видите ли вы отличия с первого взгляда?
Есть несколько способов, как можно найти визуальные отличия.
Сравнение скриншота и макета. Можно сделать скриншот сайта и загрузить в графический редактор, после чего сравнить скриншот и исходный макет в режиме наложения. Это удобно для дизайнеров, когда нужно быстро проверить совпадение, а под рукой как раз есть открытый графический редактор. Но весьма неудобно для разработчика, потому что после каждого минимального изменения придётся делать новый скриншот и заменять им старый.
Добавление картинки макета на страницу. Можно сохранить макет картинкой, добавить её в документ с помощью тега и разместить в центре страницы. После чего можно изменить прозрачность картинки с помощью opacity , и отличия сразу будут видны. Это удобно при правке вёрстки, так как при изменении стилей сразу видно, насколько новая вёрстка совпадает с макетом. Этого можно добиться таким образом:
Браузерные расширения. У предыдущего способа есть важный недостаток — нужно на каждую страницу сначала добавить картинку, затем написать для неё стили, а в конце не забыть её удалить. Браузерные расширения, такие как PerfectPixel берут эту рутину на себя. PerfectPixel доступен для установки в Chrome, Opera, Edge, Firefox (там доступна только платная версия), и ведётся разработка версии для Safari.
Нужно ли учитывать все отличия?
Если внимательно присмотреться, то единственный элемент, который расположен точно в нужном месте — это список карточек. Всё остальное хотя бы на 1 пиксель, но различается с макетом. Насколько это критично в рамках подхода Pixel Perfect?
Во-первых, небольшое смещение текста допустимо. Процесс рендеринга шрифта в графических редакторах и в браузерах отличается. Из-за этого заголовки карточек визуально отличаются, хотя и в макете, и в вёрстке у них одинаковые параметры.
Во-вторых, критичны только серьёзные расхождения. Основной целью Pixel Perfect подхода является, как бы это парадоксально ни звучало, не идеальная, а приемлемая точность. Не нужно добиваться полного совпадения, нужно добиться результата, при котором расхождения незаметны для пользователя. Сейчас у большинства людей стоят мониторы размером 1920 × 1080 пикселей. Если заголовок займёт, допустим, не 187, а 189 пикселей в ширину, большинство людей этого не заметит. Обращайте внимание на отступы между блоками, выравнивание, размеры иконок и так далее.
Пример
Допустим, дизайнеры подготовили нам такой макет:
Мы его сверстали, получилось вот так:
Видите ли вы отличия с первого взгляда?
Есть несколько способов, как можно найти визуальные отличия.
Сравнение скриншота и макета. Можно сделать скриншот сайта и загрузить в графический редактор, после чего сравнить скриншот и исходный макет в режиме наложения. Это удобно для дизайнеров, когда нужно быстро проверить совпадение, а под рукой как раз есть открытый графический редактор. Но весьма неудобно для разработчика, потому что после каждого минимального изменения придётся делать новый скриншот и заменять им старый.
Добавление картинки макета на страницу. Можно сохранить макет картинкой, добавить её в документ с помощью тега и разместить в центре страницы. После чего можно изменить прозрачность картинки с помощью opacity , и отличия сразу будут видны. Это удобно при правке вёрстки, так как при изменении стилей сразу видно, насколько новая вёрстка совпадает с макетом. Этого можно добиться таким образом:
Браузерные расширения. У предыдущего способа есть важный недостаток — нужно на каждую страницу сначала добавить картинку, затем написать для неё стили, а в конце не забыть её удалить. Браузерные расширения, такие как PerfectPixel, берут эту рутину на себя. PerfectPixel доступен для установки в Chrome, Opera, Edge, Firefox (там доступна только платная версия), и ведётся разработка версии для Safari.
Когда идеальной вёрсткой можно пренебречь
Если скорость разработки сильно важна. Например, мы делаем стартап, и если завтра не выйдем на рынок, то это сделают конкуренты. В таком случае какая-нибудь вёрстка, но сделанная быстро, гораздо лучше идеальной, на полировку которой ушли драгоценные часы.
Если точность вёрстки не важна вообще. Например, мы делаем прототип продукта, который потом будет ещё 10 раз переделываться, или панель администрирования, которой будут пользоваться технические специалисты, а не пользователи. Безусловно, это не значит что мы можем в таком случае верстать как угодно, но и идеала добиваться не стоит.
Если точная вёрстка в принципе недостижима. Например, у графических редакторов, таких как фотошоп, рендеринг шрифтов может отличаться от браузерного. И тогда мы не сможем адекватно добиться, чтобы текст в браузере выглядел в точности так, как в фотошопе — придётся играть с letter-spacing , разделять текст на лишние блоки и заниматься прочей уличной магией. Таких манипуляций стоит избегать.
Всегда ли нужен Pixel Perfect
Требования к вёрстке зависят от задачи и от того, кто её поставил. Если заказчик требует вёрстки по Pixel Perfect — придётся соблюдать это требование. Если же заказчик не требует идеальной вёрстки (или он не знает, что такое бывает), то можно придерживаться следующего алгоритма.
Как верстать под Pixel Perfect?
Чтобы вёрстка соответствовала дизайну, нужно указывать точные размеры и группы шрифтов, высоту строк, отступы между элементами и блоками, размеры изображения.
Пример наложения макета на страницу в режиме инверсии. Белая «обводка» — разница между элементами двух слоёв.
Насколько точным должно быть совпадение?
Сверстать сайт пиксель в пиксель с макетом невозможно и не нужно, и на это есть причины. Одна из них — специфика отображения шрифтов в разных браузерах и операционных системах. Например, если вёрстка в Chrome сделана точно по образцу, то в Safari элементы могут отличаться.
Резиновая вёрстка тоже не позволяет достичь полного сходства. Причина в том, что дизайнер готовит макеты только в нескольких размерах. Например, 320px для мобильной версии, 768px для планшета и 1440px для экранов компьютеров. Этого достаточно, чтобы проверить фиксированную или адаптивную вёрстку. Но страница, которая меняет размеры элементов и перестраивает сетки в зависимости от ширины окна браузера, на промежуточных состояниях будет отличаться от макета.
Дизайнер подготовил макеты только для двух разрешений: 320px и 1920px. Так как других макетов нет, разработчику не с чем сравнивать отрисовку сайта на промежуточных состояниях.
Порой перфекционизм излишен и приводит к увеличению объема кода. Из-за этого сайт становится тяжелее и медленнее. Такое возможно, если дизайнер выпустил макет с ошибками: у одного из элементов указал отличающиеся отступы, размеры или семейство шрифта. В таких случаях желательно обсудить правки с дизайнером или заказчиком: возможно, стоит внести правки в макет или проигнорировать ошибку.
Не пытайтесь добиться идеального совпадения: в реальной коммерческой разработке допускаются небольшие расхождения в отступах. Например, горизонтальная погрешность до 1-2px и вертикальная до 5px. Важнее научиться понимать сам принцип использования PerfectPixel.
Научиться концепции Pixel Perfect можно на профессии «Фронтенд-разработчик». Под контролем личного наставника вы создадите сайты, которые соответствуют концепции Pixel Perfect и требованиям коммерческой разработки.
Pixel Perfect — это подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом. Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений. После наложения становится очевидной разница, если она есть, между тем, как нарисовал дизайнер, и тем, что получилось в итоге.
Где применяется Pixel Perfect верстка
Она может быть применена в любом проекте - от верстки сайта, до верстки электронного письма. Однако полноценно делать Pixel Perfect верстку можно при соблюдении следующих условий:
- Дизайнер представил макеты для основных устройств: монитора, экрана планшета и смартфона. Идеально, если дизайнер также продумал поведение макета при изменении разрешения или на промежуточных размерах, например, на мониторах меньшего разрешения.
- Заказчиком или дизайнером предоставлены файлы шрифтов, используемых в макете. Желательно, чтобы было несколько файлов с разными расширениями, так как внешний вид шрифта может незначительно отличаться от вида на макете. Таким образом в ходе верстки можно будет снизить различия.
- Предоставлены оригиналы изображений и других графических элементов, использованные в макете.
Папка с макетом и исходниками
Очень желательно, но необязательно, получить минимальную документацию к дизайн-макету. Подробное описание поведения элементов и решений дизайнера поможет лучше подогнать верстку под Pixel Perfect и удовлетворить требования заказчика.
Pixel Perfect верстка в email-рассылках
Pixel Perfect верстка активно применяется при создании email-рассылок. Основной целью рассылок является привлечение как можно большего количества потенциальных клиентов, а также качественное и своевременное информирование и удержание существующих.
Процесс верстки сайта всегда основывается на макете, созданном в Photoshop, Figma или другом редакторе. Там можно быстро узнать свойства того или иного элемента, его расположение относительно других объектов. Задачей верстальщика является максимально точно передать внешний вид и расположение элементов на макете в своей верстке. Однако при обычной верстке допускаются небольшие расхождения с оригинальным макетом, а в Pixel Perfect требуется максимально точное соответствие предложенному макету.
Когда использовать Pixel Perfect
Если мы делаем презентационный вау-проект, то положение каждого элемента должно быть выверено до пикселя.
Если мы вносим изменения в сложную систему с кучей элементов, то поехавшую вёрстку можно даже не заметить, а вот при использовании Pixel Perfect изменения сразу бросятся в глаза.
Если все участники процесса понимают, для чего нужен Pixel Perfect и чего с его помощью мы пытаемся добиться, то впереди будет лишь продуктивная работа. Но иногда бывает, что у дизайнера дрогнула рука, и один элемент в списке случайно подвинулся на 1 пиксель. Затем макет прошёл цепочку согласований, и любая правка в нём — это недели бюрократических процессов. И тогда сплошь и рядом появляется ужасный код вида:
Расширения помогают найти неточности
Откроем демо из примера выше и сравним его с макетом. Вызвать интерфейс расширения можно нажав на иконку расширения в списке расширений рядом с адресной строкой браузера. Откроется окно с таким интерфейсом:
За что отвечает каждая кнопка можно посмотреть на официальном сайте расширения. Чаще всего нужны следующие функции:
- Показать или скрыть накладываемый макет.
- Инвертировать цвета макета.
- Закрепить макет, чтобы он оставался на месте при прокрутке страницы.
- Настроить положение макета относительно страницы.
Наложим макет на вёрстку и инвертируем цвета. Получим такой результат:
Сразу видны отличия:
- Съехали заголовки на карточках и цена биткоина и эфира.
- Съехало значение рейтинга надёжности.
- Кнопка «Загрузить ещё» имеет другой размер.
Всегда ли нужен Pixel Perfect
Требования к вёрстке зависят от задачи и от того, кто её поставил. Если заказчик требует вёрстки по Pixel Perfect — придётся соблюдать это требование. Если же заказчик не требует идеальной вёрстки (или он не знает что такое бывает), то можно придерживаться следующего алгоритма.
Инструменты для проверки верстки
Готовая верстка визуально может полностью соответствовать дизайн-макету, но ее требуется дополнительно проверить, особенно, если в ТЗ важным пунктом идет верстка “пиксель в пиксель”. Проверку точному соответствую макету можно организовать с помощью специальных плагинов для браузера.
Наиболее популярным плагином для проверки соответствий носит название Pixel Perfect. Существуют версии для браузеров с движком от Google Chrome и Mozilla Firefox. Плагин полностью бесплатен. Проверка производится с помощью заранее заготовленного изображения макета. Пока Pixel Perfect умеет работать только с изображениями PNG и JPG, поэтому макет придется преобразовать в один из этих форматов.
Плагин Pixel Perfect в Google Web Store
Вот краткая инструкция по использованию плагина в Google Chrome:
1. После установки плагина кликните в верхней панели браузера по его иконке.
2. Откроется поле, куда нужно будет перенести макет, преобразованный в изображение. Это можно сделать как простым перетаскиванием, так и воспользоваться специальной кнопкой.
Добавление макета для сравнения
3. После этого в браузере появится наслоение картинки макета, которая будет накладываться поверх верстки. Управлять расположением картинки можно с помощью специальной панели, а также клавишами со стрелками.
4. Наложите изображение так, чтобы оно максимально плотно прилегало к верстке. В идеале у вас должно получиться прилегание “пиксель в пиксель”.
5. Зафиксируйте изображение поверх верстки, воспользовавшись иконкой замка.
Наложение макета поверх верстки
6. Если нужно, то можно настроить прозрачность и контрастность накладываемого изображения, воспользовавшись соответствующими кнопками.
Плагины и скрипты для Pixel Perfect верстки
Pixel Perfect верстка требует наличия определенных плагинов или скриптов для возможности осуществления точной корректировки картинок и настроек. Среди наиболее популярных и эффективных плагинов и скриптов для Pixel Perfect верстки стоит выделить:
- Pixel Perfect под Firefox;
- Pixel Perfect под Google Chrome;
- X-Precise;
- pixLayout и другие.
Все скрипты и плагины отличаются удобным и понятным интерфейсом, широкими функциональными возможностями, легкостью подключения и комфортными для работы настройками, позволяющими верстать коды быстрее и эффективнее.
Взгляд со стороны заказчика
Подход Pixel Perfect — самый простой способ для заказчика проверить качество вёрстки. Зачастую заказчик не обладает опытом веб-разработки и не сможет отличить плохой HTML- и CSS-код от хорошего. Но он сможет сравнить макет и результат, и если они совпадают — значит, верстальщик сделал свою работу хорошо.
Вам же, как верстальщику, это даёт конкурентное преимущество — говоря «Я верстаю по Pixel Perfect», вы сообщаете заказчику «Я сделаю именно то, что вам нужно, и вы сможете это очень легко проверить».
Если вы новичок
Когда вы только начинаете путь в веб-разработке и вёрстке, использование Pixel Perfect подхода крайне желательно. Это поможет вам развить очень важные качества:
Читайте также: