1

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?

  • There is no standard grid layout. – DA01 Mar 19 '13 at 4:16
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.

| improve this answer | |
  • Thanks for the answer. Understood that there isn't a grid layout that can be used across all devices, however, I am looking for some guidelines for margins etc that I can use for best practices. – user1676691 Dec 12 '14 at 6:02
0

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/

| improve this answer | |
  • Apologies, should have specified I'm looking for for native design guidelines not web. – user1676691 Dec 12 '14 at 17:43

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.