dajnz
@dajnz
Frontend и backend web-разработчик

Как правильно применять требование «pixel-perfect» к отзывчивой верстке?

Здравствуйте, уважаемые верстальщики, фронтендеры и специалисты в этой области!

Есть дизайн-макет страницы, например в двух экземплярах: для мобильных устройств и для десктопов, требуется сделать отзывчивую верстку. При этом, в различных руководствах рекомендуется делать верстку пиксель-в-пиксель (pixel perfect), т.е. реальная страничка не должна особо разнится с скриншотом дизайн-макета (не более 5 пикс. разницы, по рекомендациям).
Правильно ли я понимаю, что отзывчивая верстка должна соответствовать требованию pixel-perfect только на разрешениях клиентской области браузера, равных ширине того макета, с которым собственно и идет сравнение (например, 1300 пикс, если наш дизайн-макет для десктопа такой ширины)?
Если да, то как быть в случае, когда заказчик, требующий pixel-perfect отзывчивую верстку, пытается проверить ее на соответствие дизайн-макету на промежуточных разрешениях экрана, когда наша отзывчивая верстка подстраивается под эти разрешения, и уже априори не будет pixel-perfect?

Заранее всем спасибо за пояснения.
  • Вопрос задан
  • 2151 просмотр
Решения вопроса 2
teotlu
@teotlu
Навёрстываю упущенное
Для начала стоит объяснить заказчику, что такое вообще Pixel Perfect. Он думает, что это идеальное соответствие вёрстки нарисованной дизайнером картинке?
Зря он так думает.
1) Шрифты рендерятся в браузере не так же, как в графических редакторах. Более того, в разных браузерах они рендерятся по-разному.
2) Я не видел ни одного, НИ ОДНОГО дизайна, где дизайнер не допустил бы хотя бы миниатюрной ошибки. Скажем, есть разделители между элементами списка новостей, но пункты разной высоты, и если всё это сверстать и задать правильные отступы, то при наложении хотя бы один разделитель не попадает точь-в-точь туда же, где он на картинке. Или какая-нибудь иконка по логике дизайна находится по центру, а в дизайне съехала на несколько пикселей. И таких моментов много, просто это самые частые из того, что бывает.

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

Или вот есть резиновый сайт, да. Надо просто объяснить заказчику, что пропорции играют важную роль. Что отступы именно в процентах, "потому что ...". А отступы в процентах уже означают то, что на переходных разрешениях соответствия макету не будет. Просто нужно общаться с заказчиком. Объяснять причины своих действий. И всё.
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Это значит, что должно быть похоже на эталон на тестируемых разрешениях. Скажем если дизайнер нарисовал 3 макета, один под мобилы, второй под планшеты и третий гигантский под мониторы. То проверка и будет производится на этих эталонных экранах. Переходные различия между разрешениями - это нормальная ситуация.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
4elovek5rassy
@4elovek5rassy
Designer
Вообще pixel-perfect это просто когда объекты, особенно при ресайзе, идут по возможности пиксель в пиксель, а не размываются.
Выставляется в фотошопе или иллюстраторе привязка объектов к пикселям в настройках и потом можно менять размер и сохранять файл в разных размерах.
59c60a1a56124c018b54b758b321d552.png

может он и хотел проверить как меняются иконки и кнопки на разных размерах?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы