6

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?

  • 1
    The thing is, the phone is always rendering at 750x1334 (or whatever), even thought the logical pixel dimensions are different. If it truly "scaled down," there would be letterbox-bars. So anything that you rasterize ("pre-bake") should be at physical screen size. The vectors, fonts and margin sizes etc are actually scaled up. This means 14pt type is rendered at 28pt. In pen'paper days, we would illustrate at 1.5-2x size and they would reduce for publication. Very similar situation. – Yorik Jun 16 '16 at 14:24
2

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.

1

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).

  • From an introvert developer with love: It's amazing how some people can type ~250 words without saying anything useful. Your article may be summed up as: "Depends on situation; tell the dev what you need before you start." – Ярослав Рахматуллин Nov 13 '16 at 9:48
  • This isn't an article, it's an answer to a question that doesn't have a concrete answer. I'm not going to give a solid answer when there isn't one—the answer truly is "It depends". I tried to elaborate on why and in which case each would be best, from experience, rather than simply writing "neither, it depends"... would that have been better? @ЯрославРахматуллин – Cai Nov 13 '16 at 9:57
  • Thank you for elaborating. No, I guess not. What would be most useful is something like "because of a and b, it's better to do c in situation x. Also, in most cases you should consider d, e and f." – Ярослав Рахматуллин Nov 13 '16 at 10:01
  • 2
    That's what I did. I said... If you're working with a mockup, it's easier to work at virtual pixel dimensions but if you're creating actual assets work at correct pixel sizes, and keep in mind the limitations I mentioned and always be clear on the workflow with anyone else involved... – Cai Nov 13 '16 at 10:07
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.