Mobile layout grid dimensions?


I am trying to figure out what the standard grid layout is for ios6 and possibly android. I use photoshop cs6 and recently sketch 2. What dimensions should I set?

3/19/2013 3:52:00 AM

There is unfortunately no such thing as "standard grid" on Android. There are tons of Android devices on the market, all with different screen resolutions (both in terms of size in pixels and DPI pixel density).

For iOS6 there is also a whole bunch of different screen resolutions:

  • 480 × 320 (iPhone 3GS)
  • 960 × 640 (iPhone 4 and 4S, iPod 4)
  • 1136 x 640 (iPhone 5, iPod 5)
  • 1024 × 768 (iPad and iPad Mini)
  • 2048 × 1536 (iPad 3 and 4)

Also remember user may always turn their device vertically or horizontally.

So, it all means that whether you are designing a mobile website or an app, its grid always has to be responsive with no alternative.

As you draw the screens I would advice to search for devices with both highest and the lowest screen resolution your app will be able to run on, and design both separately trying to maintain 9-slice scalability of your controls.

3/19/2013 8:57:00 AM