Is every position in percentages when you support different aspect ratios? Or do you do if-else statements for each aspect ratio and put absolute positions? What are the pros and cons of each?


No, it isn't. Two reasons:

  1. You have to deal with different aspect ratios, so percentages would lead to stretched images.

  2. On low resolutions, pixel perfect alignment is necessary to avoid blur.

Unless you program specifically for a very limited number of devices, the if-else approach you suggested simply won't work, because there are dozens of resolutions today and there will be more in the future.*

So what we're doing is the percentage approach, except way more complicated. If you look at modern frameworks for UI development, they allow you to specify margins and padding in terms of percent, pixels, and inches on screen (which occasionally doesn't work). They also allow relative spacing i.e. "place this element exactly between those two elements".

On top of this you use the if/else approach to switch between a few layouts depending on the aspect ratio (horizontal and vertical being two big ones).

*In gaming specifically, the fixed if/else approach is unfortunately still very common.

| improve this answer | |
  • \$\begingroup\$ "...so percentages would lead to stretched images" But I'm talking about positioning and not sizes. I'm not using a game engine (if that helps). Also, I made a mistake of using "multiple screen sizes" instead of "different aspect ratios". I've editted my question. \$\endgroup\$ – Zik Mar 27 '17 at 10:36
  • \$\begingroup\$ @Zik And if you position the left upper corner in percentages and the right upper corner in percentages, you have stretching. If you don't want that, you need some logic to determine how far the left and right upper corner should be apart, which will be based on pixels, inches, and/or relative positions of other objects. \$\endgroup\$ – Peter Mar 27 '17 at 10:44
  • \$\begingroup\$ @Zik Don't forget about the pixel perfect alignment. Different resolutions at same aspect ratio still sometimes require special attention. Same for different screen sizes at identical resolution (FullHD on a 30" screen vs FullHD on a phone). \$\endgroup\$ – Peter Mar 27 '17 at 10:50
  • \$\begingroup\$ I don't get what you mean by stretching. If I put an image at 10% of the screen in the upper left corner and an image at 90% in the upper right, wouldn't they always be 80% apart from each other? Also, does it matter if I'm using pixel art vs a different type of art? Thanks by the way. \$\endgroup\$ – Zik Mar 27 '17 at 11:00
  • \$\begingroup\$ "Does it matter if I'm using pixel art vs a different​ type of art?" Yes. See "What makes scaling pixel art different from other images?" for an introduction. \$\endgroup\$ – DMGregory Mar 27 '17 at 13:13

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.