Desktop, Tablet and Mobile Phone Best Pixel Size for Artboards in Photoshop


I activated the Photoshop Artboards and I'm starting to use three, one for desktop, one for tablets and the other one for mobile. The problem is that until now I've always used 1366x700 for desktop with a 12 grid layout (That's because of my screen size), and now, when I select the Iphone artboard it is too big and 16px font doesn't look ok on it, nor do the images.

I'm wondering what is the best size for each artboard in order to cover a wide range of devices.

4/28/2016 10:13:00 AM

These are just guidelines, but I hope it helps:

  • Mobile: around 320pts
  • Tablet: Around 768pts (portrait)
  • Browsers: 1024+ pts

There are a couple of notions behind this, so, to make sure I don't give these dimensions in a vacuum:

I measure them in pts. A Retina screen has different px dimensions for the same physical size, but it will have the same points measurements no matter the pixel density (used for positioning elements and sizing fonts). More on that here if you're interested. Having the right density is good for previewing on the device, but you have to make sure you don't lose track of the actual measurements that developers will use.

Mostly, you should use one of these dimensions and start your design and layout where you're comfortable. You can decide on breakpoints when that layout starts to break, instead of going with the dimensions first and then having to "shoehorn" layout changes into predefined breakpoints.

If you use artboards, I suggest doing everything at 1x dimensions (1px = 1pt), then doing the scaling to 2x and/or 3x in production.

6/27/2016 4:08:00 PM