First, some background: All smart phones these days have what is called a “Device Pixel Ratio”. Essentially, it means that a web browser on a smart phone is going to interpret the screen resolution differently than the actual, physical resolution of the device. For example an iPhone 6 has a physical resolution of
750 x 1334pixels with a device pixel ratio of 2. This means browsers on the iPhone 6 will interpret the resolution as
375 x 667. For more background on device pixel ratio, retina screens and dppx you can read up on this in the link above or Googling for it.
The Question: when one is designing (in Photoshop or whatever) a design for a mobile layout (for example, a mobile webpage), should the document/canvas/artboard be (using iPhone 6 as example)
750 x 1334(the physical resolution) or
375 x 667(the logical resolution)?
Things to consider:
- Device has Retina screen, so serving up a 750px wide image is good, even though browser interprets the screen width at 375px. Using physical resolution Photoshop layout ensures that your images are already at 750px wide.
- With a logical resolution layout, your images will only be at 375px wide. In order to have them be ready for Retina, you will need to make each image in your layout a Smart Object, that links to 750px images.
- On a logical resolution layout, font size, margins, padding, etc will all be at their correct sizes already. When a developer looks like the Photoshop file it will be immediately obvious what the values need to be for font size, margins, paddings, etc.
- On a physical resolution layout, all the font sizes, margins, padding, etc will be TWICE the size of what they will be when the HTML and CSS is put together. This is because the size of the layout is twice as big as what shows up in a browser.
- When creating a new Photoshop file, if you choose “Artboard Size: iPhone 6” it creates a
750 x 1334document, completely ignoring the device pixel ratio.
Which is the correct approach? What is easiest for the designer to create? What is easiest for the developer to work with? Is there a middle ground?
Is there a middle ground?
Hopefully no. Or we will have to work on 3 resolutions n_n.
This means browsers on the iPhone 6 will interpret the resolution as 375 x 667.
The browsers do not interpret the resolution. They use the resolution “declared” by the device.
In general terms this is the resolution you need to use. This are the “brakepoints” of some frameworks in general. If a CSS finds a size of 375×667 px will use the proper media queries for a mobile device.
The extra resolution needs to be considered for special cases, specifically for images that needs to be specially sharp, and they are declared with the 2x media queries, for example take a look at this: https://css-tricks.com/snippets/css/retina-display-media-query/
For texts for example, the extra resolution is handled internally by the device. They use for example 16 “standard” px for the size, and use the extra pixels on the screen to make a sharper text.
Some people design on a high resolution bitmap image. I do not like much the case. For a preview on a mobil device itself will be fine, but the dimensions of the image, for reference are false.
So It is better to export an asset at 2x the resolution (that is why is important working on vectors) than to translate all the design to 1/2x.