Подход «Pixel Perfect»
Разбираемся с одним из основных подходов к вёрстке сайтов.
Время чтения: 9 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Расширения помогают найти неточности
- Нужно ли учитывать все отличия?
- Когда использовать Pixel Perfect
- Когда идеальной вёрсткой можно пренебречь
- Взгляд со стороны заказчика
- Если вы новичок
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Pixel Perfect — это подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом. Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений. После наложения становится очевидной разница, если она есть, между тем, как нарисовал дизайнер, и тем, что получилось в итоге.
Пример
Скопировать ссылку «Пример» Скопировано
Допустим, дизайнеры подготовили нам такой макет:
Мы его сверстали, получилось вот так:
При сравнении с макетом видно, что вёрстка совпадает с ним практически идеально:
Работа с адаптивными макетами
Скопировать ссылку «Работа с адаптивными макетами» Скопировано
Современный сайт должен адаптироваться под разные разрешения экранов. Обычно это мобильные экраны, планшеты, ноутбуки и десктопы. В таком случае дизайнер делает по одному макету на каждое необходимое разрешение. Используйте инструменты разработчика, чтобы проверить вёрстку на разных разрешениях. Их можно открыть несколькими способами:
- Control Command I — на macOS;
- F12 — на Windows;
- Control Shift I — на Linux.
Включаем панель инструментов устройства (device toolbar) и выбираем нужный размер экрана. Можно задать размер вручную или выбрать один из предустановленных шаблонов.
После чего делаем всё так же, как раньше. Открываем расширение и добавляем картинку макета для соответствующего разрешения, после чего ищем отличия в вёрстке.
Всегда ли нужен Pixel Perfect
Скопировать ссылку «Всегда ли нужен Pixel Perfect» Скопировано
Требования к вёрстке зависят от задачи и от того, кто её поставил. Если заказчик требует вёрстки по Pixel Perfect — придётся соблюдать это требование. Если же заказчик не требует идеальной вёрстки (или он не знает, что такое бывает), то можно придерживаться следующего алгоритма.
Когда использовать Pixel Perfect
Скопировать ссылку «Когда использовать Pixel Perfect» Скопировано
Если мы делаем презентационный вау-проект, то положение каждого элемента должно быть выверено до пикселя.
Если мы вносим изменения в сложную систему с кучей элементов, то поехавшую вёрстку можно даже не заметить, а вот при использовании Pixel Perfect изменения сразу бросятся в глаза.
Если все участники процесса понимают, для чего нужен Pixel Perfect и чего с его помощью мы пытаемся добиться, то впереди будет лишь продуктивная работа. Но иногда бывает, что у дизайнера дрогнула рука, и один элемент в списке случайно подвинулся на 1 пиксель. Затем макет прошёл цепочку согласований, и любая правка в нём — это недели бюрократических процессов. И тогда сплошь и рядом появляется ужасный код вида:
.list-item:nth-child(4) margin-left: 1px;>.list-item:nth-child(4) margin-left: 1px; >Всё потому, что вёрстка по Pixel Perfect — один из критериев приёмки работы заказчиком. И гораздо быстрее встроить ряд таких «костылей», чем поправить макет и запустить ещё один раунд голосования. Таких ситуаций стоит по возможности избегать, потому что подобный код лишь делает сайт тяжелее и медленнее, необходимо выстраивать более гибкие бизнес-процессы.
Когда идеальной вёрсткой можно пренебречь
Скопировать ссылку «Когда идеальной вёрсткой можно пренебречь» Скопировано
Если скорость разработки сильно важна. Например, мы делаем стартап, и если завтра не выйдем на рынок, то это сделают конкуренты. В таком случае какая-нибудь вёрстка, но сделанная быстро, гораздо лучше идеальной, на полировку которой ушли драгоценные часы.
Если точность вёрстки не важна вообще. Например, мы делаем прототип продукта, который потом будет ещё десять раз переделываться, или панель администрирования, которой будут пользоваться технические специалисты, а не пользователи. Безусловно, это не значит, что мы можем в таком случае верстать как угодно, но и идеала добиваться не стоит.
Если точная вёрстка в принципе недостижима. Например, у графических редакторов, таких как «Фотошоп», рендеринг шрифтов может отличаться от браузерного. И тогда мы не сможем адекватно добиться, чтобы текст в браузере выглядел в точности так, как в «Фотошопе» — придётся играть с letter — spacing , разделять текст на лишние блоки и заниматься прочей уличной магией. Таких манипуляций стоит избегать.
Взгляд со стороны заказчика
Скопировать ссылку «Взгляд со стороны заказчика» Скопировано
Подход Pixel Perfect — самый простой способ для заказчика проверить качество вёрстки. Зачастую заказчик не обладает опытом веб-разработки и не сможет отличить плохой HTML- и CSS-код от хорошего. Но он сможет сравнить макет и результат, и если они совпадают — значит, верстальщик сделал свою работу хорошо.
Вам же, как верстальщику, это даёт конкурентное преимущество — говоря «Я верстаю по Pixel Perfect», вы сообщаете заказчику «Я сделаю именно то, что вам нужно, и вы сможете это очень легко проверить».
Если вы новичок
Скопировать ссылку «Если вы новичок» Скопировано
Когда вы только начинаете путь в веб-разработке и вёрстке, использование подхода Pixel Perfect крайне желательно. Это поможет вам развить очень важные качества:
- Глазомер. После получения определённого опыта вы сможете буквально с одного взгляда замечать неточности в вёрстке.
- Чувство визуального ритма. Дизайнеры выбирают отступы между элементами, размеры шрифтов и иконок и т. д., основываясь на определённых критериях визуального ритма, которые помогают сделать сайт более приятным для глаза. Если вы будете постоянно следовать макетам дизайнеров, чувство визуального ритма разовьётся и у вас.
- Внимательность и дотошность. Один из основных критериев хорошего программиста или верстальщика — способность внимательно и сфокусированно выполнять свою работу, не допуская неточностей.
Итог
Скопировать ссылку «Итог» Скопировано
- Используйте подход Pixel Perfect, чтобы найти отличия получившейся вёрстки от исходного макета.
- Не страдайте излишним перфекционизмом — обращайте внимание только на значимые отличия.
- Обговорите требования к точности перед началом работы. При необходимости объясните коллегам, почему абсолютное совпадение макета и вёрстки не всегда достижимо, и что в этом нет ничего сильно страшного.
Что такое Pixel Perfect вёрстка и зачем она нужна
Работа над сайтом начинается с разработки дизайна. Сначала дизайнер продумывает, как будут выглядеть страницы, и создаёт макет. Затем он утверждает оформление с заказчиком и вносит итоговые правки.
Заказчик ещё до появления сайта знает, как должен выглядеть каждый элемент на странице. И если что-то изменится, он может не принять работу. Поэтому веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету.
Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки строго по макету, при котором размеры и интервалы из макета соблюдаются с точностью до нескольких пикселей.
Зачем учиться Pixel Perfect вёрстке начинающему разработчику
Концепция Pixel Perfect вёрстки распространена в компаниях, которые создают сайты и веб-приложения. Чтобы избежать проблем с заказчиками и не затягивать сроки сдачи проектов, полезно сразу, ещё во время обучения, научиться верстать сайты «пиксель в пиксель». Для этого нужны время и практика, но с каждым проектом вы начнёте писать код быстрее, а вёрстка будет соответствовать макету.
Как верстать под Pixel Perfect
Чтобы вёрстка соответствовала дизайну, нужно указывать точные размеры и группы шрифтов, высоту строк, отступы между элементами и блоками, размеры изображения.
Чтобы добиться еще большего сходства, разработчики используют программы и скрипты: X-Precise, pixLayout, Crosspixel и другие. Но один из наиболее удобных способов проверить совпадение сайта и макета — использовать плагин PerfectPixel. С его помощью можно в браузере наложить макет на вёрстку и проверить, какие элементы нужно исправить.
Как проверить вёрстку с помощью PerfectPixel
Чтобы проверить вёрстку, для начала нужно скачать плагин PerfectPixel для браузера Chrome, Opera или Edge. Для Firefox можно использовать Pixel Perfect Pro, а вот для Safari плагин пока находится в стадии разработки.
После установки в панели браузера появится розовая иконка — это и есть PerfectPixel Если она не появилась, добавьте самостоятельно. Для этого откройте «Расширения» (находится на панели или в настройках браузера) и закрепите иконку в меню быстрого запуска.
Иногда плагин бывает недоступен для работы с сайтами, запущенными локально, то есть не размещёнными в интернете. В таких случаях откройте в браузере раздел «Расширения» и найдите 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 вёрстке — неправильное выравнивание слоёв, игнорирование межбуквенного интервала или высоты строк и хаотичный порядок редактуры. Из-за этого вёрстка начинает «ползти», а наложение вновь и вновь показывает разницу между расположением элементов. Есть несколько способов избежать таких ошибок.
Задайте положение макета: отцентрируйте его или выровняйте по левому верхнему углу сайта. Исправляйте отступы и размеры от верхних элементов к нижним, от левых к правым. Так гораздо быстрее и меньше рисков, что вам придётся что-то переделывать.
Если вы используете резиновую вёрстку, проверяйте соответствие только на тех же размерах, которые использовал дизайнер в макете. На промежуточных состояниях, если их вид не предусмотрен макетом, добиваться схожести не нужно.
И главное: начинайте работу с PerfectPixel только тогда, когда завершите работу над блоком или страницей: добавите стили и графику. Если после проверки какие-то элементы изменятся, придётся заново подстраивать сайт под макет.
Насколько точным должно быть совпадение
Сверстать сайт пиксель в пиксель с макетом невозможно и не нужно, и на это есть причины. Одна из них — специфика отображения шрифтов в разных браузерах и операционных системах. Например, если вёрстка в Chrome сделана точно по образцу, то в Safari элементы могут отличаться.
Резиновая вёрстка тоже не позволяет достичь полного сходства. Причина в том, что дизайнер готовит макеты только в нескольких размерах. Например, 320px для мобильной версии, 768px для планшета и 1440px для экранов компьютеров. Этого достаточно, чтобы проверить фиксированную или адаптивную вёрстку. Но страница, которая меняет размеры элементов и перестраивает сетки в зависимости от ширины окна браузера, на промежуточных состояниях будет отличаться от макета.
Порой перфекционизм излишен и приводит к увеличению объёма кода. Из-за этого сайт становится тяжелее и медленнее. Такое возможно, если дизайнер выпустил макет с ошибками: у одного из элементов указал отличающиеся отступы, размеры или семейство шрифта. В таких случаях желательно обсудить правки с дизайнером или заказчиком: возможно, стоит внести правки в макет или проигнорировать ошибку.
Не пытайтесь добиться идеального совпадения: в реальной коммерческой разработке допускаются небольшие расхождения в отступах. Например, горизонтальная погрешность до 1-2px и вертикальная до 5px. Важнее научиться понимать сам принцип использования PerfectPixel.
Другие задачи верстальщика:
- 6 простых правил хорошего alt-текста
- Как проверить валидность HTML-разметки
- Нестандартное подчёркивание текста на чистом CSS
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Что такое Pixel Perfect в верстке: особенности, инструменты для работы, советы
Процесс верстки сайта всегда основывается на макете, созданном в Photoshop, Figma или другом редакторе. Там можно быстро узнать свойства того или иного элемента, его расположение относительно других объектов. Задачей верстальщика является максимально точно передать внешний вид и расположение элементов на макете в своей верстке. Однако при обычной верстке допускаются небольшие расхождения с оригинальным макетом, а в Pixel Perfect требуется максимально точное соответствие предложенному макету.
Особенности Pixel Perfect верстки
При обычной верстке допускаются расхождения с оригинальным макетом с поправкой на разрешение, размеры окна, особенности браузера, через который ведется просмотр страницы. Pixel Perfect — буквально “идеальный пиксель”, требует минимизации различий между макетом и готовым продуктом. В идеале, если наложить картинку макета на готовую верстку в браузере, то они должны совпасть “пиксель в пиксель”.
Требование соблюдать Pixel Perfect верстку встречается чуть ли не в каждом втором ТЗ. Стоит понимать, что точно определенного стандарта Pixel Perfect не существует — каждый заказчик и исполнитель может интерпретировать его по-своему, поэтому желательно заранее обговорить с заказчиком этот момент.
Порой технически невозможно сделать идеальную верстку “пиксель в пиксель” из-за особенностей отображения элементов в браузере, размера окон, графики, подготовленной дизайнером, необходимости адаптации макета под множество устройств. Золотым правилом является максимальное расхождение с макетом в 5 пикселей.
При верстке “пиксель в пиксель” могут возникнуть проблемы со следующими элементами:
- Шрифтами. Браузеры могут отображать шрифты в макете иначе, чем это делают программы для работы с макетами. В таком случае возможны небольшие расхождения в пару пикселей.
- Различные разделительные элементы и элементы, подстраивающиеся под контент блока. Контента в том или ином блоке может быть больше или меньше, чем задумал дизайнер в своем макете. Если блоку невозможно по техническому заданию придать фиксированные размеры, то он будет подстраиваться под контент, следовательно, размеры могут сильно отличаться от тех, что в макете.
- Непродуманное поведение элементов. Если дизайнер не продумал, как будут вести себя элементы сайта на разных экранах, то несоответствия с макетом могут возникнуть при малейшем изменении разрешения.
- Проблемы с адаптивом. У всех заказчиков основным пунктом ТЗ идет адаптивность готовой верстки. В этом случае Pixel Perfect применим только к готовым дизайн-шаблонам, которые будут служить эталоном. Обычно это вид сайта на мониторе компьютера, планшете и экране смартфона. Учесть все промежуточные состояния нереально, поэтому к ним Pixel Perfect применяться не должно.
Только в исключительных случаях нужно подгонять готовую верстку прямо “пиксель в пиксель”. Если же верстальщик видит, что готовый макет получается неудобным, некрасивым, хоть и полностью соответствующим макету от дизайнера, то лучше проигнорировать принцип Pixel Perfect и верстать так, чтобы макет хорошо смотрелся и был удобен для пользователя.
Где применяется Pixel Perfect верстка
Она может быть применена в любом проекте — от верстки сайта, до верстки электронного письма. Однако полноценно делать Pixel Perfect верстку можно при соблюдении следующих условий:
- Дизайнер представил макеты для основных устройств: монитора, экрана планшета и смартфона. Идеально, если дизайнер также продумал поведение макета при изменении разрешения или на промежуточных размерах, например, на мониторах меньшего разрешения.
- Заказчиком или дизайнером предоставлены файлы шрифтов, используемых в макете. Желательно, чтобы было несколько файлов с разными расширениями, так как внешний вид шрифта может незначительно отличаться от вида на макете. Таким образом в ходе верстки можно будет снизить различия.
- Предоставлены оригиналы изображений и других графических элементов, использованные в макете.
Папка с макетом и исходниками
Очень желательно, но необязательно, получить минимальную документацию к дизайн-макету. Подробное описание поведения элементов и решений дизайнера поможет лучше подогнать верстку под Pixel Perfect и удовлетворить требования заказчика.
Как верстать в Pixel Perfect
Верстка “пиксель в пиксель” ничем не отличается от стандартного процесса верстки, за исключением необходимости следить за размерами элементов и сверять их с размерами на представленном шаблоне. Узнать точные размеры элементов, их расстояние друг от друга можно, используя встроенные инструменты графических редакторов. Например, в Photoshop есть инструмент “Линейка” для измерения расстояния между элементами, а свойства самих блоков можно посмотреть в верхней части экрана.
Инструменты для ускорения Pixel Perfect верстки
Наиболее удобно использовать для верстки “пиксель в пиксель” сторонние инструменты. Одним из самых лучших решений является программа Avocado. Она открывает макеты самых популярных форматов — Photoshop, Sketch, Figma, XD. Редактировать с его помощью макет не получится, но зато можно быстро узнать стили конкретного слоя, блока или группы блоков. Это значительно быстрее, чем в том же Photoshop отмерять расстояние линейкой и переключаться между вкладками со свойствами.
С помощью Avocado процесс работы с макетами и версткой значительно ускоряется, так как стили и HTML-каркас можно просто скопировать из программы. Правда, скопированные данные придется все равно править, подстраивая под вашу верстку, так как программа пока умеет преобразовывать в HTML/CSS только отдельные компоненты, а не весь макет.
Код элемента в Avocado
Avocado — это не бесплатная программа. Ее можно использовать бесплатно в течение тестового периода, но затем придется оформить подписку. Скачивать и устанавливать саму программу на компьютер тоже необязательно. На сайте разработчика программы имеется встроенный редактор, который по функционалу не уступает программе для ПК. Его использование возможно после авторизации на сайте и оплаты использования (или в течение тестового периода).
Инструменты для проверки верстки
Готовая верстка визуально может полностью соответствовать дизайн-макету, но ее требуется дополнительно проверить, особенно, если в ТЗ важным пунктом идет верстка “пиксель в пиксель”. Проверку точному соответствую макету можно организовать с помощью специальных плагинов для браузера.
Наиболее популярным плагином для проверки соответствий носит название 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 позволяет сделать страницу максимально соответствующей макету, но прибегать к ней нужно без фанатизма. Для верстки “пиксель в пиксель” обязательно требуются отлично проработанные макеты, а также возможность связаться с дизайнером, если появились вопросы по поводу того или иного элемента. Для ускорения работы рекомендуется использовать дополнительные инструменты — плагины для браузера, программы, где можно быстро преобразовать стили элемента в HTML/CSS.
Верстая Pixel Perfect не гонитесь за идеальным соответствием макета. Расхождение в несколько пикселей — это нормально, а иногда даже необходимо, если дизайнер допустил мелкие ошибки в расположении элементов.
Зачем Pixel perfect верстка
Зачем писать макет pixel perfect? Я так понимаю для этого используется Position: relative И отрицательные margin. Это же от одной до трех лишних строк иногда на каждый блок! Это, наверное, плохо влияет на скорость загрузки файла и тд. Да еще и столько мороки и реально скучной работы верстальщику. Объясните свое видение и необходимость ее использования, и используете ли вы ее в работе? Спасибо.
Отслеживать
задан 19 ноя 2019 в 22:44
91 7 7 бронзовых знаковНизачем не нужно и в реальности всё равно недостижимо. Впрочем вы неправильно понимаете pixel perfect
19 ноя 2019 в 22:47
@AlexeyTen в чем состоит правильное понимание?
19 ноя 2019 в 23:02
– user256824
3 дек 2019 в 1:102 ответа 2
Сортировка: Сброс на вариант по умолчанию
Pixel Perfect — это стандарт, согласно которому сверстанный блок или страница должен в точности отвечать макету дизайна, вплоть до пикселя (отсюда и название «идеальный пиксель»). Допустимые погрешности различаются в разных компаниях, придерживающихся этого стандарта — где-то это 1-2 пикселя, где-то до 5, обычно погрешность по вертикали допустима больше, чем по горизонтали. Для достижения этого используются различные плагины, например PerfectPixel для Chrome, позволяющие наложить скриншот дизайна на страницу браузера и таким образом подогнать результат.
Относительно использования position: relative и прочего — вы не правы. Пиксель-перфект — это техническое требование к верстке, а не способ ее реализации. Вполне можно добиться идеального совпадения с макетом и без использования костылей вроде отрицательных марджинов.
Однако зачем это надо в принципе — вопрос риторический. ПиксельПерфект как идеология — родом из тех времен, когда сайты верстались под конкретные разрешения. Дизайнер давал три макета: для десктопа, для планшетов и для мобильных, и требовалось добиться полного совпадения во всех случаях. Но сейчас слишком много устройств и разрешений, кроме того, в разных браузерах страницы могут отображаться чуть по-разному — например, из-за особенностей рендеринга шрифтов. Конечно, добиться пиксель-перфект можно, если заказчик на этом настаивает, если он хорошо платит и если вам не жалко своих глаз. Лично я отклоняю любые заказы или вакансии, где pixel perfect находится в обязательных требованиях (что все еще встречается достаточно регулярно). Но многие верстальщики когда-то научились верстать именно так, им комфортно, а заказчик-перфекционист счастлив. Кроме того, для заказчика это иногда единственная возможность проверить качество верстки, если сам он верстать не умеет. Использовать ли этот стандарт на практике — ваш личный выбор. Технических преимуществ в функционировании сайта он никаких не дает.