0

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.

1

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.

0

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:

  • Thank you, I am looking for this relative common sizes, which ones are the best? I know that is impossible to have perfect pixel design for 100% devices. – Kevin Mamaqi Apr 28 '16 at 10:31
  • Honestly, I don't think it matters. Personally, I don't even bother checking the size. As long as it's roughly desktop size, tablet size and mobile size... – Cai Apr 28 '16 at 10:34
  • updated my answer with some sources of actual devices sizes. – Cai Apr 28 '16 at 10:37

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.