Pixel Perfect верстка. Пример.

Не все заказчики знают, что такое pixel perfect верстка по макету. Тем не менее, это очень важный показатель качества, к которому должен стремиться каждый верстальщик. Рассказываем, что это значит.

Что такое pixel perfect верстка

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

Пример Pixel Perfect верстки

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

Можно ли любой макет сверстать в Pixel Perfect?

К сожалению не все можно отразить на веб-странице. Язык гипертекостовой разметки HTML и язык стилей CSS имеют некоторые ограничения. Поэтому, если дизайн выполнен без учета этих требований, его нельзя будет сверстать один к одному с макетом. В связи с этим стоит ответственно подходить к выбору исполнителя для создания визуального представления сайта.

Как правило, все PSD-макеты профессионалов, имеющих большой опыт в дизайне интернет-ресурсов, можно сверстать в Pixel Perfect. Такие специалисты понимают, что технически можно отобразить на веб-странице, а что нельзя. Поэтому при создании дизайна они ориентируются не только на ТЗ заказчика, но и на требования, которым должен соответствовать макет для веб-ресурса.

Некоторые новички тоже справляются с такими задачами, но большинство из них все же делают ошибки. К тому же многое зависит от качества образования верстальщика. Многие даже не знают о pixel perfect верстке или считают ее каким-то излишеством. Если же обратиться не к веб-дизайнеру, а например, к дизайнеру рекламных вывесок, на хороший результат тем более можно не надеяться. Скорее всего, он нарисует такой дизайн, который будет просто невозможно воплотить в жизнь по техническим причинам.

Обязательна ли pixel perfect верстка по макету?

В идеале любая верстка (при условии правильно выполненного дизайна) должна выполняться строго по макету. Другими словами, верстка пиксель перфект — это не какая-то дополнительная услуга или опция. Это — обязательное условие хорошо написанного кода.

Если макет сделан правильно, но верстка ему не соответствует 1:1 (возможен небольшой допуск в несколько пикселей), это, по сути, брак. Такую работу необходимо переделывать. Заказчик имеет полное право предъявить претензию и не принять сверстанный сайт, не соответствующий высоким стандартам.

Тем не менее, в реальности pixel perfect верстка по макету встречается очень редко. Дело в том, что писать код, добиваясь совпадения с дизайном 1:1, сложнее, чем верстать с примерным соответствием. Не все разработчики готовы подгонять пиксель в пиксель каждый блок. Многим проще расставлять элементы на глаз, по принципу «и так сойдет». Поэтому чаще всего верстальщики делают просто похожие на макеты сайты, но не идеально совпадающие с ними.

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