What is pixel perfect html

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

Рассмотрим три основных пунктов для понимания Pixel Perfect.

Что такое Pixel Perfect верстка?
Применение Pixel Perfect верстки.
Инструменты для Pixel Perfect верстки.

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

Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель. При наложении html-шаблона на макет PSD должно произойти полное совпадение графических элементов, изображений и текста.

По современным требованиям к верстке Pixel Perfect уже чуть ли не стандарт де-факто, но стандарта Pixel Perfect нет.

ВАЖНО. Pixel Perfect верстка — это не идеальное соответствие вёрстки нарисованной дизайнером картинке.

Шрифты могут рендерятся в браузере не так же, как в графических редакторах. Более того, в разных браузерах они рендерятся по-разному.
Дизайн должен быть продуман до мелочей. В частности дизайнеры допускают ошибки, например: есть разделители между элементами списка новостей, но пункты разной высоты, и если всё это сверстать и задать правильные отступы, то при наложении хотя бы один разделитель не попадает точь-в-точь туда же, где он на картинке. Или какая-нибудь иконка по логике дизайна находится по центру, а в дизайне съехала на несколько пикселей. И таких моментов много, просто это самые частые из того, что бывает. В конце концов, дизайнер может допустить ошибку при выравнивании элементов по сетке.
Если дизайнер нарисовал 3 макета, один под мобилы, второй под планшеты и третий гигантский под мониторы. То проверка и будет производится на этих эталонных экранах. Переходные различия между разрешениями — это нормальная ситуация.
Pixel-perfect это просто когда объекты, особенно при ресайзе, идут по возможности пиксель в пиксель, а не размываются.

Должен ли разработчик всё это подгонять под дизайн, не обращая внимания на здравый смысл? Или же он должен делать хороший интерфейс, который можно будет легко расширять, который не будет обладать массой захардкоденных параметров, используемых исключительно затем, чтобы конкретная иконочка отображалась в конкретном месте именно так, как нарисовали?

Читайте также: Payment form html css

Все это – адекватные причины, чтобы локально отказаться от pixel perfect и верстать «по ситуации». В идеале каждое отступление от макета должно быть задокументировано.

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

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

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

Инструменты для Pixel Perfect верстки

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

Pixel Perfect под Firefox;
Pixel Perfect под Google Chrome;
X-Precise;
pixLayout и другие.

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

Источник

Подход «Pixel Perfect»

Разбираемся с одним из основных подходов к вёрстке сайтов.

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

Допустим, дизайнеры подготовили нам такой макет:

Мы его сверстали, получилось вот так:

При сравнении с макетом видно, что вёрстка совпадает с ним практически идеально:

Работа с адаптивными макетами

Скопировать ссылку «Работа с адаптивными макетами» Скопировано

Современный сайт должен адаптироваться под разные разрешения экранов. Обычно это мобильные экраны, планшеты, ноутбуки и десктопы. В таком случае дизайнер делает по одному макету на каждое необходимое разрешение. Используйте инструменты разработчика, чтобы проверить вёрстку на разных разрешениях. Их можно открыть несколькими способами:

Всегда ли нужен 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, чтобы найти отличия получившейся вёрстки от исходного макета.
Не страдайте излишним перфекционизмом — обращайте внимание только на значимые отличия.
Обговорите требования к точности перед началом работы. При необходимости объясните коллегам, почему абсолютное совпадение макета и вёрстки не всегда достижимо, и что в этом нет ничего сильно страшного.

Источник