Design mobile layouts using physical resolution or logical resolution?

Question

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 1334 document, 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?

Answer 1

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 375x667 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.

Answer 2

It depends a lot on what exactly you are doing, what your expectations are and your specific workflow.

When I design for mobile devices (or desktop for that matter) in Photoshop, be that for a website or a native app, it is always a mockup. I don't export any assets from that layout. The layout will all be recreated in code and any specific assets will be placed in Photoshop as smart objects from an external file and they will either be vector or created at the correct size.

If you are designing a layout in Photoshop then slicing that layout and extracting assets directly from that PSD, then you should definitely be working at actual pixel sizes. But as you said, font sizes, margins etc. all need to be recalculated when implemented in code, which adds an extra layer of work (and the possibility of errors). If like me, your PSD is just a mockup or guide, and your assets are created separately, then it is easier to work at virtual pixel sizes, but you need to keep in mind that you are basically working on a lower resolution mockup.

I mostly do all design and development myself so I don't need to worry about communicating this to a developer but the same applies if you are handing your files over to a developer, everyone just needs to be clear on the workflow before you begin (or at least before handing over files).

Answer 3

The recommended apporach would be designing at the logical resolution, as it is easier to export assets scaled to different sizes when you start from 1x.

Here's a video explaining as to why: https://vimeo.com/169809377