Design for web on a retina display

You want a web design that maxes out at 1920px, so you make your PS canvas that width. But when you zoom in to 200% to get the PS page to match the browser size it looks bad, especially the text, right? Text in Photoshop is raster. Text in a browser is not. Zooming in in Photoshop is enlarging pixels. A web browser is filling one "CSS pixel" with four times as many retina screen pixels as it "paints" the page if it is at "Actual Size." And you can zoom in on a web page all day long and the fonts totally scale.

I think it could be useful to approach this question from a Web Dev / Design point of view and try to find out exactly what the browser is doing with our web design.

Lets start by VISUALLY confirming (and understanding) that Photoshop definitely has a 1:1 pixel relationship with a Retina screen. I have a 27" Retina monitor. Apple specs tell me that this screen is 5120px wide. If I set the PS ruler to pixels, zoom to 100%, open it full screen and get rid of all the tools bars (there is still some PS chrome in the way, namely, the left ruler and the right scroll bar) the PS ruler also reads 5120px. 1:1.

Now lets see, literally, what the browser says. I develop in Chrome so I'll use that. I'm going to put the browser in full screen mode, open up the console in dev tools and run the following JavaScript:

console.log(window.innerWidth);

And I get... 2560px? What? That's half the actual width of my screen.

Ok what if I call this:

console.log(screen.width);

That should definitely give me 5120px right? It's going to measure screen width. Nope. It still returns 2560.

And... how about this call:

console.log(window.devicePixelRatio);

That returns... 2. A ha. Starting to make sense.

So, what is going on? Browsers use "Device Independent Pixels" for unit measurement inside the browser window. This is what allows you to set pixel values for say, font-size, in your CSS that will be relatively consistent from an iMac to a Nexus5 to a Galaxy Note 3 to whatever other exotic piece of hardware a browser might get used on in the wild. The device pixel ratio determines how a Device Independent Pixel will map to the device based on its screen resolution.

Because in Web Design we often think of everything in terms of pixels, including white space, it might be useful to think of CSS pixel values (such as: padding: 30px;) more as coordinates that the browser's graphic API (Skia, in the case of Chrome) uses to render (paint) and layout a webpage.

You probably were not working at a 1:1:1, Photoshop to browser to monitor, resolution ratio on your previous monitor either. But it was close enough to 1:1 to not make a major difference. 2:1 makes a major difference and you are now noticing it.

Anyway, the answer is to make your web design mockups in Photoshop the same ratio as the device pixel ratio of the device screen you are using. 2 to 1 will do it for any Mac Retina screen: iMac, MBP, iPhone, etc. If you normally design for 1920px wide, then 3840px wide in photoshop will make your mockup look as close to the same size as the way the browser will render it. Unfortunately you have to double everything else in PS as well, including column widths, font sizes, gutters, etc. This complicates handing off your design specs to a developer to get pixel perfect alignment. But that was already complicated, right?

Double the dimensions of your jpegs (because the browser can't add pixels to the image files the way it can to a font) and start using svg for icons whenever possible.

Oh and set the screen resolution in System Preferences back to the default.

Hope this helps.

2) What size and dpi should the project have?

DPI doesn't matter on the web. It's all just absolute pixels.

3) What view / scaling should I use? Cause 200% looks blurry to me.

It will always be this way. You simply can't design all assets to look sharp even at the most insane resolutions. That's pretty much it. Content will always be scaled and resized as needed. There simply is no way to accomodate all devices and resolutions. Browsers do it all the time and there's nothing wrong with that. It's perfectly okay to scale decorative elements or background images/ videos as long as critical elements like buttons remain reasonably sharp, accessible and functional, but even those are often scaled up from smaller graphics. And of course you always have to balance data rates agains quality, too. Doesn't do you much good to wait endlessly for a high-res image to load on a mobile device. For the most part it reall has nothing to do with Photoshop or designing the graphics. That's web stuff and you have to read up on responsive/ adaptive designs, media queries and how to use alternate layouts and resources depending on the detected resolutions. Even your old approach of using a HD res is fishy. In this day and age there simply is no fixed reference resolution. You can only set your own values and "nail" the design so it looks good, but beyond that you really have to delve into the web stuff. You basically design a version somewhere in the middle and then decide which elements need to scale up or down and which ones need to be designed to stay always sharp and be loaded based on the situation.

Mylenium