Responsive mobile     design     Kirill Grouchnikov    Android, Google Inc.
background• Android 3.0 - 02/2011• Android 3.2 - 07/2011• Android 4.0 - 11/2011• Market 3.0 - 07/2011• Google Play 3.5 - 0...
this talk is not about Layouts 101• FrameLayout• LinearLayout• RelativeLayout• ...
and not even about Layouts 202• android:layout_alignBaseline• android:layout_alignWithParentIfMissing• android:fillViewport...
this talk is abouteffective use of screen estate for displaying your content
examples
app details page
app details page                   locked                   scrolling
app details page
app details page                   locked                   scroll-to-snap                   scrolling
my apps + app details       two screens
my apps + app details      combined view
my apps + app details                        locked                        scrolling     master   details
same content,  same hierarchyadapting to context
responsive mobile     design
http://cognition.happycog.com/“desktop” version       “mobile” version
http://cognition.happycog.com/
http://owltastic.com
http://colly.com
http://stephencaver.com
same content*,        same hierarchyadapting to context* the first two sites above omit some content under small widths
what about mobile*?* given the context of the talk, “mobile” means “native Android”
device variety              Experia Pro 3.7”                      Flyer 7”                     Sony Tablet S 9.4”Archos 2....
device orientation1024*600    600*1024
canvas-based apps“show more” of the infinite canvas
text-based hierarchies      reflow or combine
Android resource system   http://developer.android.com/guide/topics/resources/providing-resources.htmlphysical size of the...
~ CSS3 media queries             http://www.w3.org/TR/css3-mediaqueries/• width, height, device-width, device-height• orie...
main differencewidth, height, device-width, device-heightCSS pixels ~ dipems ~ sp
new resource selectors    in Android 3.2    http://developer.android.com/guide/practices/screens_support.html• width dp. F...
granularityof control
start from content
no more “tablet-optimized” layouts
what separates a tablet   from a phone*? * “I know it when i see it” is not an answer supported by aapt
same content,  same hierarchyadapting to context
switching point“desktop” version                 “mobile” version            @media screen and (max-width: 480px)
switching point“phone” version   “tablet” version
switching pointhow much space do i need for a two-column layout?
switching pointlayout/myapps.xmllayout-w800dp/myapps.xml
multiple switching points         http://hicksdesign.co.uk     4                      2       1
multiple switching pointslayout/myapps.xmllayout-w600dp/myapps.xmllayout-w1000dp*/myapps.xml  * onwards to -w10000dp on th...
different switching points layout-w800dp/myapps.xml                     layout-w1000dp/details.xml    * From older release...
unified switching pointslayout-w800dp/myapps.xml         layout-w800dp/details.xml   * Unified in Google Play 3.5
switching point how to preserve content hierarchy? where do content blocks go? what is locked and what scrolls?
switching point     why show permissions?
margin point
margin pointwhat is the optimal “consuming” experience?
margin pointwhat is the optimal “consuming” experience?
margin pointXoom: 1280*800dpswitch point = 800dpmargin point = 1000dp
does everything go into -wNNNdp?
purchase dialogsparse content - use DialogWhenLarge
purchase dialogtheme defined in values-sw600dp
font sizessame sp values look too smallwe use larger values on bigger screens
font sizessizes defined in values-sw600dp
recap              Experia Pro 3.7”                      Flyer 7”                     Sony Tablet S 9.4”Archos 2.8”       ...
recap1                  2                     3                  4    switch point          switch point       margin poin...
synchronized scrolling
synchronized scrolling* * follow the light blue button
synchronized scrolling                 locked                 scroll-to-snap                 scrolling
synchronized scrolling                 scroll-to-snap                 scrolling
responsive mobile     design
effective use of screen estate for displaying your content
same content,  same hierarchyadapting to context
Q&A• gplus.to/kirillcool• pushing-pixels.org• kirillcool@yahoo.com• android-developers.blogspot.com
Upcoming SlideShare
Loading in...5
×

Responsive mobile design

18,532

Published on

Published in: Technology, News & Politics
1 Comment
26 Likes
Statistics
Notes
  • Nice presentation on the responsive design for mobile and tablets.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,532
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
379
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Responsive mobile design

  1. 1. Responsive mobile design Kirill Grouchnikov Android, Google Inc.
  2. 2. background• Android 3.0 - 02/2011• Android 3.2 - 07/2011• Android 4.0 - 11/2011• Market 3.0 - 07/2011• Google Play 3.5 - 03/2012
  3. 3. this talk is not about Layouts 101• FrameLayout• LinearLayout• RelativeLayout• ...
  4. 4. and not even about Layouts 202• android:layout_alignBaseline• android:layout_alignWithParentIfMissing• android:fillViewport• ...
  5. 5. this talk is abouteffective use of screen estate for displaying your content
  6. 6. examples
  7. 7. app details page
  8. 8. app details page locked scrolling
  9. 9. app details page
  10. 10. app details page locked scroll-to-snap scrolling
  11. 11. my apps + app details two screens
  12. 12. my apps + app details combined view
  13. 13. my apps + app details locked scrolling master details
  14. 14. same content, same hierarchyadapting to context
  15. 15. responsive mobile design
  16. 16. http://cognition.happycog.com/“desktop” version “mobile” version
  17. 17. http://cognition.happycog.com/
  18. 18. http://owltastic.com
  19. 19. http://colly.com
  20. 20. http://stephencaver.com
  21. 21. same content*, same hierarchyadapting to context* the first two sites above omit some content under small widths
  22. 22. what about mobile*?* given the context of the talk, “mobile” means “native Android”
  23. 23. device variety Experia Pro 3.7” Flyer 7” Sony Tablet S 9.4”Archos 2.8” Galaxy Note 5.2” Galaxy Tab 8.9”
  24. 24. device orientation1024*600 600*1024
  25. 25. canvas-based apps“show more” of the infinite canvas
  26. 26. text-based hierarchies reflow or combine
  27. 27. Android resource system http://developer.android.com/guide/topics/resources/providing-resources.htmlphysical size of the devicedisplay density
  28. 28. ~ CSS3 media queries http://www.w3.org/TR/css3-mediaqueries/• width, height, device-width, device-height• orientation, aspect-ratio• resolution
  29. 29. main differencewidth, height, device-width, device-heightCSS pixels ~ dipems ~ sp
  30. 30. new resource selectors in Android 3.2 http://developer.android.com/guide/practices/screens_support.html• width dp. For example, -w600p• height dp. For example, -h600dp• smallest width dp*. For example, -sw600dp * “survives” device orientation
  31. 31. granularityof control
  32. 32. start from content
  33. 33. no more “tablet-optimized” layouts
  34. 34. what separates a tablet from a phone*? * “I know it when i see it” is not an answer supported by aapt
  35. 35. same content, same hierarchyadapting to context
  36. 36. switching point“desktop” version “mobile” version @media screen and (max-width: 480px)
  37. 37. switching point“phone” version “tablet” version
  38. 38. switching pointhow much space do i need for a two-column layout?
  39. 39. switching pointlayout/myapps.xmllayout-w800dp/myapps.xml
  40. 40. multiple switching points http://hicksdesign.co.uk 4 2 1
  41. 41. multiple switching pointslayout/myapps.xmllayout-w600dp/myapps.xmllayout-w1000dp*/myapps.xml * onwards to -w10000dp on the Android JumboTron closest to you
  42. 42. different switching points layout-w800dp/myapps.xml layout-w1000dp/details.xml * From older releases of Android Market
  43. 43. unified switching pointslayout-w800dp/myapps.xml layout-w800dp/details.xml * Unified in Google Play 3.5
  44. 44. switching point how to preserve content hierarchy? where do content blocks go? what is locked and what scrolls?
  45. 45. switching point why show permissions?
  46. 46. margin point
  47. 47. margin pointwhat is the optimal “consuming” experience?
  48. 48. margin pointwhat is the optimal “consuming” experience?
  49. 49. margin pointXoom: 1280*800dpswitch point = 800dpmargin point = 1000dp
  50. 50. does everything go into -wNNNdp?
  51. 51. purchase dialogsparse content - use DialogWhenLarge
  52. 52. purchase dialogtheme defined in values-sw600dp
  53. 53. font sizessame sp values look too smallwe use larger values on bigger screens
  54. 54. font sizessizes defined in values-sw600dp
  55. 55. recap Experia Pro 3.7” Flyer 7” Sony Tablet S 9.4”Archos 2.8” Galaxy Note 5.2” Galaxy Tab 8.9”
  56. 56. recap1 2 3 4 switch point switch point margin point 600dp 800dp 1000dp expand fixed
  57. 57. synchronized scrolling
  58. 58. synchronized scrolling* * follow the light blue button
  59. 59. synchronized scrolling locked scroll-to-snap scrolling
  60. 60. synchronized scrolling scroll-to-snap scrolling
  61. 61. responsive mobile design
  62. 62. effective use of screen estate for displaying your content
  63. 63. same content, same hierarchyadapting to context
  64. 64. Q&A• gplus.to/kirillcool• pushing-pixels.org• kirillcool@yahoo.com• android-developers.blogspot.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×