Handling resolutions and aspect ratios of common mobile devices

Here is short list of resolutions of common mobile devices useful for web, application and game developers and designers creating content for mobile devices.

Aspect ratios and resolutions

Aspect ratio Resolutions Example Devices
4:3 320×240 Android devices
1024×768 iPad 1, iPad 2
2048×1536 iPad 3
3:2 480×320 iPhone 3GS and lower, Android devices
960×640 iPhone 4, iPhone 4S
16:10 800×480 Android devices, WindowsPhone7
1280×800 Android tablets like Google Nexus 7, Samsung Galaxy Tab 10.1, Motorola Xoom, Asus Eee Pad Transformer
17:10 1024×600 Android tablets like Samsung Galaxy Tab 7
16:9 640×360 Symbian3 devices like Nokia C7
854×480 Android devices, MeeGo N9
1136×640 iPhone 5

Using assets with atlases for mobile devices

Texture atlas is a image file that contains sub-image (assets). It allows to render textures by modifying the texture coordinates of the object’s uvmap on the atlas, pointing to the part of the image that holds a texture. Main advantages of using atlases are:

  • rendering optimisation (CPU) as one image is already stored in memory,
  • lowering number of connections which usually reduces the time of downloading assets (web development).

In game development (especially tile-based games) texture atlases are very commonly used to reduce draw calls which improves overall performance of the game allowing higher FPS (Frame Per Seconds) rate, providing better experience for the player.

Depending on target devices, it is good practice to prepare couple or more atlases storing references to the same assets in different sizes and pointing application or game to selected atlas depending on the dimensions of user device. For example, going back to game development, depending on screen size user could store 3 atlases:

  • SD – for ipods, low res iphones for small resolution devices up to 960×640 px
  • HD – for iphone retina, ipad, android phones and devices with resolution up to 1024×768 px
  • UD (ultra def) – for ipad retina and big screen devices, with higher resolution (ex.: 2048×1536 px )

Well known approach that is used by web developers and designers, and listed as a good practice , is to design interface going from smallest target device screen size to the biggest screen size. That is especially common with responsive websites and applications. Now… as it works perfectly for interface design and UI design it might seem quite intuitive to prepare assets and atlases in the same way, it would be wrong to do so!

While targeting devices with different screen definitions, it is important to start with assets for the highest definition device going downwards. Why? Once the hi-res asset is prepared it is very easy to scale it down, without worrying about "pixelation".

And so following three definition from above example, we could create biggest assets and then scale them down adjusting pixel size while replacing atlas inside the game to keep the right size within the game.

Published by IndieForger