Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
    
There is no standard grid layout. –  DA01 Mar 19 '13 at 4:16
add comment

2 Answers

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.

share|improve this answer
add comment

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/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.