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

Каждый человек, который имеет дело с созданием сайтов рано или поздно сталкивается с его версткой. Верстка сайта — это перенос графического дизайна сайта в html/css. Графический дизайн ранее чаще всего делался в photoshop, теперь же более популярны инструменты вроде figma. Фигма позволяет ускорить процесс верстки, делает его более удобным.

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

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

pixel

На картинке выше видны отличия между наложенным изображением и содержимым окна браузера. Теперь нужно изменением css свойств в инспекторе добиться полного совпадения картинок, чтобы при наложении не было видно никаких отличий.

Требовательные заказчики хотят видеть идеальное соответствие сайта макету. И если каких-то 10 лет назад жизнь верстальщиков была немного проще, не было такого многообразия различных расширений экранов и устройств, то теперь во всем диапазоне экранов от 320 до 1920 пикселей верстка должна быть pixel perfect. Это очень долгое занятие подгонять каждый элемент экрана, каждую надпись, кнопку или картинку. Поэтому в веб-студиях  обычно при такой верстке берут коэффициент 2.5, то есть такая верстка в два с половиной раза дороже чем просто верстка.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*

code