Pixel Perfect — техника, при которой вёрстка совпадает с макетом, который нарисовал дизайнер. Как правило, допускается разница между конечным результатом и макетом максимум в 5 пикселей.
Проверка по Pixel Perfect была раньше более популярной, но сейчас подавляющее количество компаний отказывается от неё. Тем не менее, есть заказчики, которые не понимают, как проверять работу верстальщика, и Pixel Perfect им кажется оптимальным способом.
На профессиональных курсах мы проверяем проекты по Pixel Perfect, но в будущем планируем отказаться от этого. Сейчас мы оставляем это требование, так как некоторые заказчики всё ещё используют Pixel Perfect, а для новичка это опыт пребывания в условиях, приближенных к реальности.
Но насколько актуален Pixel Perfect на самом деле? Можно ли без него обойтись и как?
В реальности Pixel Perfect используется всё реже, так как он имеет много недостатков. Это достаточно сложный и трудозатратный процесс. Потраченное время можно посвятить созданию хорошего интерфейса. Макет может совпадать с дизайнерским, но если сайт будет загружаться долго и иметь ошибки, то это, очевидно, будет ещё хуже.
Из преимуществ — Pixel Perfect помогает найти ошибки по макету. Так легче обратить внимание на несоответствия по шрифтам или отступам.
Основная проблема, которая приводит к необходимости использования Pixel Perfect — плохо выстроенная коммуникация между верстальщиком и дизайнером. Очень часто при вёрстке опускаются многие моменты. Яркий пример — дизайнер заранее предусмотрел лёгкую асимметрию — слева отступ 20, справа — 23. Однако верстальщик совершает ошибку и делает так, как удобнее ему — отступы со всех сторон по 20. Ничего хорошего из этого не выходит.
Важно наладить коммуникацию между дизайнером и верстальщиком. Например, дизайнерам можно показывать итоговую работу, чтобы они сделали дизайн-ревью и подсказали ошибки. Нужно уважительно относиться к работе друг друга.
И, конечно же, не стоит гнаться за стопроцентным попаданием по Pixel Perfect, но необходимо соблюдать структуру и положение элементов.
Познакомьтесь с HTML и CSS прямо сейчас.
Пройдите тренажёры и соберите свой первый сайт.