6 причин моей ненависти к Pixel Perfect / ошибки верстки сайтов / pixel perfect верстка 

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

Принципиально не беру заказы, где написано "ПП", потому что в 99.9% случае с этим заказчиком будет жуткий головняк. Как же мне нравятся заказчики "Вроде похоже на макет, всё работает, адаптив не ломается, спасибо за работу" - с такими просто душевно работать. Желаю всем таких заказчиков))))

Видишь "Pixel Perfect" - беги и ругайся

Спасибо! Раньше только догадывался, а теперь буду точно знать, что если в заказе есть "pixel perfect", значит заказчик говна поел и лучше с ним не связываться.

Если в проекте есть требование Pixel Perfect, то от такого проекта лучше отказаться. Это всё что нужно знать о PP. Ну невозможен PP в реальной жизни, он как единорог: лошади существуют, рога существуют, а единорог - нет! :D

Почитал статьи в интернете, потом посмотрел это видео. Даже на душе легче стало, а то думал что мне ещё под это дерьмо подстраиваться нужно, но как я понял шёл он на х** этот пиксельпёрфект.

Фух, ну прям успокоил. Я думал что ПП это обязаловка и все должно быть пиксель в пиксель.

Видео-вставки с примерами, о которых говориться, были бы очень к месту

Pixel Perfect и поддержка internet explorer = специальное занижение стоимости оплаты..

Я если что просто линкану заказчику твой видос)

Спасибо, очень интересно мнение профессионала. Как всегда ролик по делу и зашёл на ура. Смена угла съёмки помогает виэуально лучше воспринимать видео, эксперементируете? Запомнил: если заказчик непреклонно требует пиксель перфект, то лучше найти себе другого заказчика :D

Полностью согласен! Пиксель-в пиксель - гавно, можно очень похожое сделать, без написание лишнего кода и фикс. размеров блоков...

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

вешаешь ПНГ картинку шаблона вместо верстки - говоришь сверстал, провеярй

в ПП можно, но с точки зрения оптимизации выходит "простыня" css правил, а оно нужно ли?

если у блока нижный отступ 20px а у нижнего блока верхний отступ 15px до, расстояние между ними не будет 35px, вертикальные margin-ы схлопнится и расстояние между ними станет 20px

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

Взялся за заказчика я значит с Pixel Perfect... Такой обиженный жизнью человек, мама не горюй.

Хорошее видео. Юзаю Pixel Perfect, но лишь на некоторых макетах, на некоторых компонентах где это реально уместно, если вижу сам что там все норм с макетом и именно тут нет никакой динамики. А вообще я еще ниразу не получал от дизайнера идеальный макет. Это наверное не возможно :)

дизайнеры часто (потому что они не понимают как это верстается) рисуют, например, меню, стильное, которое в спрайт идёт картинкой, но кнопки очень узкие и названия пунктов меню не влазят, или нажатое состояние рисуют только для угловой кнопки с закруглёнными краями, а для средней - нет, в итоге такое меню невозможно сверстать. дизайнеры должны понимать основы вёрстки.

Основная проблема в том, что тех кто называет себя Дизайнером - вагон и маленькая тележка. А вот тех кто понимает все процессы, ограничения и ньюансы при разработке проекта - всего лишь единицы. Я считаю, что помимо понимания принципов UX/UI, дизайнер интерфейсов должен как минимум уметь верстать (чтобы понимать технические моменты при реализации) и желательно знать хотя-бы основы JS (опять таки для понимания реализации, хотя бы в общих концепциях). Потому что как можно проектировать интерфейс, не понимая при этом как это все будет реализовываться? UX/UI Designer - это прежде всего инженер, который уже на начальном этапе закладывает структуру и архитектуру будущего проекта. Но к сожалению, таких дизайнеров очень мало. Да и на курсах по дизайну уделяется внимание только UX и UI проекта, этап разработки либо пропускается полностью, либо же оговаривается вскользь... После просмотра вашего ролика, я в очередной раз убедился. Что чтобы стать действительно востребованным специалистом, лучше стоит обучаться дизайну самому.

Как говорится, подписываюсь под каждым словом!)) Это видео нужно скидывать заказчикам "перфекционистам" в целях профилактики фгм и идиотам, которые пропагандируют этот идиотизм! Если трезво подумать, разве это так критично, что кнопка или какой нить блок будет иметь отступы на 10-15 px выше или ниже. Что собственно говоря от этого изменится на сайте, может юзабилити станет хуже? Верстка сразу начнет сыпаться? Или же это личные "хотелки" заказчика, который где то прочитал про эту технологию, не вникая в технические особенности и думает вау это круто, теперь только пуксель-шмуксель! :'D Я в резюме сразу указал, что не отношусь к категории садомазо и не парюсь с пикселями-перфектами, не вымеряю эти гребаные 2-3 пикселя, но в то же время делаю максимально приближенно к дизайну. Заказчику объясняю, что ничего в итоге от ПП он не выигрывает, кроме удовлетворения собственного эго. Да, некоторая часть заказов проходит мимо меня, но зато нервы и время экономятся, которое можно потратить на действительно полезные занятия! ;)

"можно сделать гораздо лучше ".... а как это можно?

Нихера се, дизайнеры, это люди? Впервые слышу..

Виталий, вы очень здорово рассказываете! ПОЧЕМУ ТАК МАЛО ПРОСМОТРОВ?!))))

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

Pixel Perfect, в моем понимании, это идеальное соответствие макету. Приблизиться к идеалу на 99,99% можно только если экспортировать макет в html как есть, так как элементы расположены относительно одной оси. В браузере же, все элементы располагаются относительно друг друга. Чтоб достичь такого же расположения как в макете, надо располагать их все абсолютом относительно body. Это и происходит при экспорте. Если есть какой-то опыт, то из этого можно сделать вывод, что сайтом нельзя будет нормально пользоваться. Сайт это динамическая среда во всем ее понимании, пытаться сделать его статическим, это все равно что в ресторане вместо котлет подать тарелку голубиного помета. Кто-то может и съест, но большинство свалят и больше не вернуться. Веб дизайнер это должен понимать, иначе это какой-то хер с горы, а не веб дизайнер. Заказчик это должен понимать, если не понимает, ему должны объяснить. Иначе работать будет невозможно.

Я вообще не понимаю как допустим у меня разрешение экрана монитора установлено ширина 1440px , макет и фото pixelperfect в 1920px. Оно не подходит, и приходится монитор ставить тоже в фулХД, а так плохо видно все мелкое. Если делаю сохранение макета тоже в 1440px то когда его подставляю в pixelperfect то там все уменьшается, шрифт, картинки все сжимается. Автор канала ты не подскажешь можно ли установить меньшее разрешение экрана нежели изображение макета в PixelP? Или верстать в 1920 экране как и сам макет?

А где отличия в рендере страницы браузера и шрифтов по сравнению с макетами в графическом редакторе?

Спасибо Вам и согласен полностью.я не верстальщик,но учусь.и попадаются сплошь такие макеты (бесплатные) на которых унификации не получится,(я бы даже сказал что БЭМ строить тяжело). А ведь как хорошо когда сверстал блок,наложил отступы,границы и все можно тыкать по всему проекту, но с кривым макетом и ПП приходится вводить кучу мусорных классов чтобы обрисовать блоки или разместить как того требует макет.ну и соответственно CSS вырастает мгновенно. А уж расширять и адаптировать такие проекты это одно мучение.

Лайк не глядя

Мне кажется просто не нужно возводить любую идею в абсолют. Меня РР выручал, когда я не мог понять, почему что-то у меня не влезает, а на макете вроде все норм. Также иногда та же Фигма показывает неверные размеры, особенно в том, что связано со шрифтами. Тогда тоже используя подход РР можно увидеть, в чем именно отличие и уже придумать, что поменять. Т.е. визуальный контроль дополняет контроль цифр. Опять же, если смотреть "по вертикали", то там РР не имеет логического смысла как правило, и придерживаться его - это просто потеря времени. А вот "по горизонтали" зачастую он действительно отражает дизайнерскую задумку и игнорить ее - это халтура. Опять же, игнорировать РР имеет право человек, который помимо технических скиллов имеет скиллы дизайнера, и у которого чувство гармонии не атрофировано (бывают и такие фронты, и не так уж и мало). Тогда это чувство ему подскажет, где РР дает дополнительную красоту, а где нестандартно поставленный элемент - просто ошибка. Так что не все так однозначно. РР как выборочная подгонка под нестандартные решения - выручает. Опять же РР допускает несовпадение на 1-3 рх, так что тут тоже не все так прямо страшно как звучит. Как компромисс можно договориться, что верстаешь без РР, потом даешь на просмотр и потом отдельно правишь те места, которые стали выглядеть хуже чем в оригинальном дизайне. В плагине РР специально есть возможность сместить макет в любом направлении, т.е. можно совместить именно отдельный блок с макетом, игноря то, что все остальное "поехавшее" и поправить уже этот блок в соответствии с РР. В целом РР как раз требует от фронта определенного опыта "разумной" верстки, когда ты понимаешь суть макета, а не просто тупо повторяешь то, что видишь. В общем, нужен компромисс между "все верстаем до пикселя, в том числе и вертикальные отступы" и "верстаем на глаз от балды по подсказкам, которые нам покажет Фигма".

Верстка пиксель- в пиксель это дебилизм и кода больше намного. Главное, чтобы сайт был в PageSPeed высоким баллом. Верно, друзья ?

Так а просто послать нельзя?

Я тоже "немного" перфекционист, но совсем ни мазохист...

поставил бы 100 лайков будь это возможно

ПП - это для мастеров, не каждому это по силам.

У меня сейчас такая ситуация и я хочу уволится с работы!!! Уже сил никаких нету!!

Привет, ...как я тебя понимаю... да, НАКИПЕЛО, и такое бывает. Но, всё сказано правильно, каждое слово от начала и до конца. Согласен. Ставлю ЛАЙК!!!!!!!!!!

Не плохой варик кидать этот видос заказчику) Мнение со стороны как ни как. А то если самому, то ещё подумает: "неумёха отнекивается"..

Уже представил, как с самоуверенной миной, доказываю заказчику, что PP говно!

Чет я напрягся) Стажировку прохожу в конторе, где pixel perfect используют (по крайней мере принимают стажировочную верстку вроде), может конечно это потому, что мы новички...

Отлично все разложил!

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

Спасибо за видео! Часто такое бывает что в макете одинаковые элементы с разными отступами. Мне попадаются дизайнеры которые редко рисуют всплывающие элементы, так что лучьше сделать правильно по своему, и объяснить заказчику.

Очень полезно и интересно! Спасибо!

Согласен с каждым словом!

Так получается автор не пиксель перфект опроверг, а то, что верстальщику надо исправлять ошибки дизайнера. А макет при этом верстаем всё равно как пиксель перфект. Т.е. если везде отступ 35 пикселей, а в одном из мест он не 35, а 33, потому что дизайнер ошибся, то мы в том месте исправляем на 35. Но это и есть пиксель перфект с исправлением ошибок дизайнера. Мы же не делаем на глаз, вместо 35, 34 пикселя или 38 пикселей, потому что так захотелось.

здесь был Макс)

Ага, на разных макетах одного проекта бывает по разному и размеры и цвета, и какой брать. Нее, это бред заказчика.

Походу проблема не в верстке, а в дизайнере, раз он не может нормально все отступы и кейсы предусмотреть, либо же проблема в заказчике :)

Спасибо!

можно ведь сначала сверстать по пиксельно, а потом совместить с адаптивной

Пользуетесь Pixel Perfect

Такое часто в вакансиях пишут

а где про ошибки верстки сайтов ?

смешно

а если адаптивность делать с помощью вот этого? win_w = $(window).width(); win_h = $(window).height(); что вы по этому поводу думаете?

А как можно сделать с пиксел перфект быстрее можете сказать?

ну верстка например с допуском до 5px уже ведь не считается perfect??? Заказчик может на такое соглашаться?

Автор, вернись в свой 2010. Если верстальщик мудак, он как ни верстай все равно плохо сделает. Или четко по макету - и ни единого ховер эффекта у ссылок/кнопок. Или вообще начхает на макет и сделает кривую байду на свой лад - ужас перфекциониста. Pixel Perfect зачастую подразумевает точность до 5px и не подразумевает динамику. Что все на него так взъелись? На данный момент все макеты в Figma делаются, а там сложно напортачить с отступами. Есть кратность, есть симметрия, есть адаптив. Я считаю, накладывать картинку на финальную верстку и подгонять отступы - хороший тон, а если не хочется этого делать, то вы или очень ленивый, или вовсе не верстальщик, идите углубляйтесь в PHP/Python или что-то подобное, не связанное с визуализацией.

Как дизайнер предлагаю ввести плавающий термин пиксель перфект, например +-5пикселей итд..А вообще логику дизайна не все (единицы) понимают вот и результат после верстки неуд, вот из за этого и просят пиксель перфект. Как вариант, повторяющиеся элементы согласовать и делать идентичными а не повторяющиеся пиксель перфект и все будет гуд.

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