Как правильно делать дизайн и верстать под retina дисплей?
На днях у нас с дизайнером произошла заминка. Он мне прислал макет сайта, я его сверстал пиксель в пиксель. Под виндой на обычном мониторе все выглядет отлично! Но дизайнер начал качать права, что у него на маке все в два раза больше чем чем он рисовал. Т.е. он отрывает исходник psd в фотошопе на 100%, октрывает сайт и разница у них во всех размеров ( шрифтах, блоков, отступов и т.п.) ровна в два раза больше.
Из-за чего такое получается? Кто накосячил, из-за чего на маке шаблон не сходиться с сайтом? Что делать, что бы такого в дальнейшем избежать?
UX/UI designer, researcher and almost a developer.
Забыть о фиксированных величинах, то есть про px и использовать % по максимуму.
Использовать svg вместо png, или увеличивать размер png
Применяя media queries определять экраны с высокой плотностью пикселей и заменять изображения на увеличенные в 2 раза. Можно для этих целей применить javaScript, можно заюзать retina.js
Я в основном все это и использовал, а выражение "пиксель в пиксель" подразумевал, что на ширине 1200px заданной в макете у тебя полностью совпадал сайт с дизайном.
Если взять конкретный пример, но шрифт у меня указан в rem относительно px взятых из макета. На обычном дисплее они выглядят идентично, а на маке этот шрифт в два раза больше чем в макете.
Если я все правильно понял, то дизайнеру надо было рисовать весь дизайн сайта в два раза большей и тогда бы они выглядели одинаково на ретине.
А можно глупый вопрос, мелочь, но я ее не пойму, для ретины нужно сохранять одно и то же изображение в двух разрешениях? И как вычисляется плотность экрана, чтобы потом разрешение писать ?
LB777: разве на ретине всё должно было выглядеть не в два раза меньше? Или так браузеры на маке работают, что там увеличение по дефолту идёт, а в Вашем случае оно как раз всё портит?
Дизайнер накосячил — нарисовал макет сайта под ретину. Весь веб должен рисоваться под обычное разрешение и только специальная графика (если нужно): иконки, иллюстрации рисуются либо в двух разрешениях (обычном и 2x) либо сразу в SVG. Ну и выше уже ответили, в зависимости от типа экрана в верстке подсовывать соотв. графику.
Скажи дизайнеру, что рисовать сайт для ретины - это значит отказываться от 90% посетителей. Мало у кого есть дорогущий мак. Да и на работе в большинстве офисов стоят дешевые мониторы, даже без фул-хд.
Средний
