Как правильно делать дизайн и верстать под retina дисплей?

На днях у нас с дизайнером произошла заминка. Он мне прислал макет сайта, я его сверстал пиксель в пиксель. Под виндой на обычном мониторе все выглядет отлично! Но дизайнер начал качать права, что у него на маке все в два раза больше чем чем он рисовал. Т.е. он отрывает исходник psd в фотошопе на 100%, октрывает сайт и разница у них во всех размеров ( шрифтах, блоков, отступов и т.п.) ровна в два раза больше.
Из-за чего такое получается? Кто накосячил, из-за чего на маке шаблон не сходиться с сайтом? Что делать, что бы такого в дальнейшем избежать?
  • Вопрос задан
  • 22171 просмотр
Пригласить эксперта
Ответы на вопрос 4
rsvetlitskiy
@rsvetlitskiy
UX/UI designer, researcher and almost a developer.
  • Забыть о фиксированных величинах, то есть про px и использовать % по максимуму.
  • Использовать svg вместо png, или увеличивать размер png
  • Применяя media queries определять экраны с высокой плотностью пикселей и заменять изображения на увеличенные в 2 раза. Можно для этих целей применить javaScript, можно заюзать retina.js
Ответ написан
sashock
@sashock
UX/UI Designer
Дизайнер накосячил — нарисовал макет сайта под ретину. Весь веб должен рисоваться под обычное разрешение и только специальная графика (если нужно): иконки, иллюстрации рисуются либо в двух разрешениях (обычном и 2x) либо сразу в SVG. Ну и выше уже ответили, в зависимости от типа экрана в верстке подсовывать соотв. графику.
Ответ написан
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Рекомендовано к прочтению .
А дизайнеру передай, что он @#?!&, так макеты не сравнивают.
Ответ написан
Комментировать
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Скажи дизайнеру, что рисовать сайт для ретины - это значит отказываться от 90% посетителей. Мало у кого есть дорогущий мак. Да и на работе в большинстве офисов стоят дешевые мониторы, даже без фул-хд.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы