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

Привет. В этом видео я расскажу вам 6 причин моей ненависти к Pixel Perfect. Для тех кто не знает как пользоваться pixel perfect кратко поясню. В плагин Pixel Perfect вы помещаете свой макет в формате Png и делается своего рода попиксельная верстка сайта по макету psd. Мое мнение, что подходит такая верстка сайтов для новичков и только. Если вы начинающий верстальщик, то использование этого плагина поможет вам увидеть ошибки верстки сайтов. Но не все так однозначно. В этом видео я расскажу почему Проверка верстки сайта с помощью pixel perfect это плохая идея. Для того чтобы отобразить адаптивность вам потребуется несколько макетов и pixel perfect верстка вам в этом не поможет. Некоторыми заказчиками может проводится оценка верстки с помощью этого плагина. И это не совсем корректно. В видео я подробно об этом расскажу.

[@prosto_razrabotka]

Не забудьте заглянуть сюда: ❓ Запись на консультацию - 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/

[@ЕвгенийДёмин-е7д]

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

[@romandemin8601]

Евгений, вы фрилансер? Какая здесь статистика: каких заказчиков больше - тех кому нужен PP или адекватных?

[@ЕвгенийДёмин-е7д]

@@romandemin8601 где "здесь"? Чаще заказчик не упарывается в ПП, но есть и такие

[@romandemin8601]

@@ЕвгенийДёмин-е7д Извини, не чётко сформулировал.

[@Грант1147]

Спасибо) тебе так же желаю таких заказчиков)

[@newplayer2826]

жиза

[@evgeniust6328]

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

[@roxone314]

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

[@robinzon___4178]

Солидарен !

[@undefined-n5v]

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

[@sauronin2058]

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

[@iamname8758]

Если макет, хороший то это не сложно

[@АндрейСтавицкий-ю3п]

@@iamname8758 скорее если макет простой.

[@gingerred2383]

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

[@Harrogath12]

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

[@КостяКреон]

Хороша идея.... "как и Маша, но жаль, что не наша!"

[@АлександрЩербаков-у4е]

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

[@Istanislav1]

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

[@prosto_razrabotka]

Ага, немного решил поэксперементировать -)

[@volodymyrgachkovsky7256]

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

[@gyros9162]

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

[@codernd]

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

[@КостяКреон]

...так, погодить надо!

[@murshi2343]

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

[@vovnet]

Наоборот - это причины для увеличения стоимости.

[@undefined-n5v]

@@vovnet Нет таких денег чтобы компенсировать такие приколы. Ну, на самом деле есть, конечно, но ни один заказчик их не готов будет заплатить.

[@mushnikov35]

это точно! заведомо он тебе говорит что будет жопа при сдаче и полную стоимость ты не увидишь ! А если это фриланс то получишь херовый отзыв вот 100%

[@VVV_Ulsk]

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

[@k.o.t.o.f.e.y]

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

[@Beast8833]

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

[@wickedtorpedo75]

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

[@dumantorbaev8675]

Почему бы эти отступы не сделать через pading? Тогда ничего не будет схлопываться

[@АлександрЛанцов-д7о]

Зачем допускать схлопывание margin-ов? За этим ведь не так сложно следить. На крайний случай, есть padding.

[@АлександрМарт-ж9ц]

скорее он будет 35, так как margin будет тот который просто больше, да и имелось в виду, скорей всего то что, установить один отступ в 35, а не 15 и 20 у блоков

[@eugenenovikov671]

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

[@АлександрЛанцов-д7о]

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

[@АнатолійБогомол-ь2ю]

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

[@StepanVorobiov]

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

[@StepanVorobiov]

+ Причина номер 7: этот долбаный ПП выедает глаза (когда потаращишься в эти разницы в 1-2 пикселя) + Причина номер 8: на эту фигню уходит времени чуть ли не в два раза больше

[@profesor08]

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

[@robinzon___4178]

Так, это значит надо забить на этот плагин и больше не думать о нём?

[@profesor08]

@@robinzon___4178 я не про плагин.

[@robinzon___4178]

@@profesor08 теперь понял о чём ты )

[@questionsanswer6293]

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

[@ВладимирЗлатомрезов]

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

[@АлексейПрокопьев-к5г]

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

[@Совет2015]

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

[@kontiray8842]

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

[@КостяКреон]

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

[@ДмитрийКуренков-л3м]

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

[@nikomunikabelen8540]

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

[@zenithsleep999]

то же самая проблема сейчас,ПП -капкан хренов

[@ВладиславШаманов-и8о]

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

[@УкрВебПрограмування]

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

[@АлексейГундин-э9о]

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

[@atlasua2021]

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

[@alexperemey6046]

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

[@deazlylol]

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

[@DmitriyDev]

Расскажите подробнее с какими трудностями встретились ?

[@Oreo_Raccoon]

вы в студии работаете верстальщиком? С чем конкретно столкнулись? было бы интересно услышать о "подводных камнях" )

[@romandemin8601]

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

[@whilefordo]

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

[@СашоКутуков]

Гений 🤩

[@1081bad]

Лайк не глядя

[@TheTexPro]

Спасибо!

[@ВладимирЗлатомрезов]

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

[@prosto_razrabotka]

И где тут адаптивность?! Вы всего лишь сохранили значения в переменные...

[@ВладимирЗлатомрезов]

@@prosto_razrabotka потом их можно делить с помощью того же js и подставлять в значения ширины блоков.

[@_Fantom_.]

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

[@placid3495]

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

[@osintervalproject5636]

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

[@meowmeowmeowmeow000]

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

[@Niakita]

пиксел перфект больше описание подхода к вёрстке, а плагин просто так называется чтобы понятно сразу будо чдчего он

[@alexneo5458]

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

[@trampsport]

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

[@prosto_razrabotka]

Я думаю, как договоритесь. Но я диалог сразу прерывал, как только появлялось требование по pixel perfect.

[@mushnikov35]

@@prosto_razrabotka Согласен, это такая морока угодить заказчику да еще если он истеричный и экономит на всем и при этом хочет конфетку, задавать кучу модификаторов и делать дополнительные обертки это просто жесть... проверено на себе ! (((

[@undefined-n5v]

@@prosto_razrabotka вся суть видео могла уместиться в этой фразе :D

[@Max-kr4ie]

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

[@adiletkgz4953]

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

[@Mike37373]

@@FamilyB-u4s я не понял, а ты понял чтоли что он написал ?

[@_Fantom_.]

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

[@ЗейналШаусейнов]

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

[@znatnodobre]

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

[@prosto_razrabotka]

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

[@sovist_tvoia]

😁

[@TheTexPro]

нет

[@dbuzeninka8005]

Неа )) тем более в каждом браузере все равно будут отличия и по цветам и по метрике.

[@vladtroshin421]

в гробу видал этот Pixel Perfect, не разу за всю жизнь не видел человека который бы пиксель в пиксель замарачивался с проверкой, обычно заказчики вообще не понимают ничего в web и им все равно как и что там сверстано ...., а на крайний случай всегда есть "position: absolute" )))))

[@dmitriikulbaka1862]

Лишь однажды взял грех на душу... С тех пор святую воду держу поближе дабы окропить демонов при встрече и низвергнуть в ад. Вспомнил тот проект аж передернуло. P.S. Дизайн мягко говоря был кривой. Да потом ещё выяснилось что прислали другую версию (не ту что заказчик одобрил).

[@ВладиславШаманов-и8о]

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

[@ТёмныйУголок-г3х]

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

[@ГражданинХороший-ы1н]

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

[@Vulpes_91]

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

[@КузнецИгорец]

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

[@freestylehd4322]

"Повторяющиеся элементы согласовывать" - Считаю, что в целях экономии времени и исключения человеческого фактора этого делать не нужно. Вот договорится дизайнер с верстальщиком, а потом в спешке сделает страницу, на которой блок будет немного отличаться от таких же блоков на других страницах. Я предлагаю вот что: Дизайнеры переходят на Figma (или аналог со схожим функционалом) и реализуют повторяющиеся блоки строго через компоненты.

[@АлександрЛанцов-д7о]

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

[@alexperemey6046]

Уже ничего предлагать не нужно, РР подразумевает отличие на 1-3 рх.

[@alexperemey6046]

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

[@УкрВебПрограмування]

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

[@svet0v]

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

[@artemzhuravlev7334]

смешно

[@drakeno5015]

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

[@Oreo_Raccoon]

Хэй ,Кожевник, ты зашел не в ту дверь..Кожевная мастерская двумя этажами ниже..

[@АзаматШарафутдинов-к2ь]

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

[@АлександрЛанцов-д7о]

Вы серьезно? Даже я как UX/UI Дизайнер понимаю, что такой подгон элементов через position или margin/padding выльется в более сложную поддержку проекта на длинной дистанции. Вы это тоже должны прекрасно понимать. Если дизайнер интерфейсов кричит и требует только пиксель перфект, то стоит задуматься, дизайнер интерфейсов ли он самом деле (может от просто граф. дизайнер который перешел в веб и не удосужился изучить основы верстки).