: 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

@Jamie315

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.

Vote Up Vote Down

@Nimeshi706

I'm assuming the iPhone artboard looks too big to you because the iPhone has a retina screen so its actual pixel size is double or triple what you expect it to be. You can reduce the artboard size to 1/2 or 1/3 and it will look the correct size (but it will be a lower resolution than you will see on an actual iPhone!)

Honestly, with the number of different devices around, there are no best sizes to design for. Photoshop files should be mockups, not pixel-perfect designs. It's impossible to design a fully responsive design using different artboards at different sizes.

Designing at different sizes in Photoshop is fine, but you need to be aware that your design is not going to translate pixel to pixel to a browser. Pick a few relatively common sizes and work with those, but be aware that it could end up being any size between those and will look different depending on which device you are viewing it on.

If you do care about actual sizes, there are a number of websites that list common device sizes, some examples:

design.google.com/devices/ viewportsizes.com/ http://mydevice.io/devices/

Vote Up Vote Down