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 1334 pixels 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?