What should be ideal size of your App?

Posted by ongraph · July 10, 2016 · 4 Min read

Table of contents

Everyone wants their app to be compatible with all devices available in different screen sizes and densities. Hence some developers load different asset resolutions and it results into horrible results not only to lower spec devices but also upon the higher resolution screens. Within low spec devices, an app often gets crash when it attempts to load too many large texture resources unless it does not include much in the way of graphics. You must avoid or even forget about this tactic while designing and developing your applications since it ultimately ruin all your efforts and time. Follow standard ratio of size and aspect ratio as your app development strategy that ensure you own app which has a one-size that fits to all.

 

To help you clear your concept for a one-size-fits-to-all size and aspect ratio, we are describing different aspects in details below:

 

1. Design:

 

Design is the first and foremost stage you decide what resolution you should choose for the app. But its an internal app resolution you have to decide rather than a screen resolution. You can create a stage at that size and then can scale it to fit that area on any screen. This app resolution is called basewidh/baseheight.

 

 

  • If you design your app to a “resolution” of 480 * 320 (classic iPhone resolution, and ratio of 3:2), do create art design files at least 4* that resolution (1920 * 640).
  • Design a ‘fixed’ screen layout, and consider this 3*2 ratio design to be the area that will always be visible on your screen, no matter what.
  • If your base grid area (at 480 * 320) would be 10*10 pixels, if you are setting up your grid (in photoshop), then you can set the grid to be 40&40 pixels in the hi-res design file.
  • The grid still represents 10 pixel units in ‘app coordinate space’.

 

These are the coordinates that can be used as code to set art asset positions.

 

2. Coordinates:

 

To make your approach much easier, you can use the centre of the screen as 0,0, not top left. The art asset that occupied place in the base design at the top left would be positioned in the app space at -240, -160 and makes calculations easier and simpler.

 

3. Scaling of Design

 

Scaling is the compatibility, hence it is important to test the scalability of the  design on to any screen to ensure its compatibility on the varied devices screens. Once you know the screen size, you can use its real ratio to determine how to scale your app. You need a screen size to determine the base dimensions that are always be what you entered. The other will be slightly larger or smaller in order to accommodate for any extra screen area.

 

Example: One a 600*320 screen, your starling stage would be 600 * 320. At screen with a resolution of 1200 * 640, would also have a stage size of 600 * 320.

 

 

4. Dynamic Layout:

 

On the hypothetical 600 * 320 / 1200 * 640 screens, remember to keep your app coordinate space (eg starling stage dimensions) were 600 * 320 on both. It assures that your design will be exact for vertical space, but will need padding horizontally. If it’s a game, you need to draw more horizontal width of your game’s camera area. For a UI, you will attain a more horizontal width to fill. For the ipad (any screen dpi in fact), stage space was 480 * 360, so this time, you have to padd the vertical area a bit.

 

I have drafted this article as per my best knowledge and experience. You can also share your experiences that what ideal size you choose for your apps when need to develop via your comments below.

Share this Article