Mobile layout grid dimensions?

Question

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?

Answer 1

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.

Answer 2

As DA01 said, if you're designing for mobile devices, in fact these days the same principal should be applied to ALL screens, you simply don't know what screen size, resolution, or even zoom ratio the user may be on so you need to work with a responsive grid. Twitter bootstrap provides a grid framework with both PSD files and code which might be a good starting point: http://twitter.github.com/bootstrap/ or alternatively http://cssgrid.net/

There are lots of other options though if you search for "Responsive Grid Framework".

Here are some good articles to explain the theory including Ethan Marcotte's (who developed the concept): http://alistapart.com/article/responsive-web-design http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ and a good site for inspiration/practical examples of how sites can work: http://mediaqueri.es/