Mobile Design

Mobile Design

Slides from my 1 Day workshop conducted at Microsoft, Hyderabad.

2f890006636505e78f8f38d68ca46859?s=128

Uday Shankar

April 24, 2012
Tweet

Transcript

  1. Mobile Applications Design & Delivering Experiences Uday M. Shankar Microsoft,

    Hyderabad ~ 13 July 2011 July 13, 2011 1 acrossthinlines.com | technopoint.info
  2. July 13, 2011 acrossthinlines.com | technopoint.info 2 facebook | twitter

    |about.me | linkedin | G+
  3. July 13, 2011 acrossthinlines.com | technopoint.info 3 Client/Server Mainframe Web

    Applications Reach Global Rich Text UI Integrated media GUI 1992 1998 2004+ Rich Internet Applications 2007+ Rich Experience Applications
  4. July 13, 2011 acrossthinlines.com | technopoint.info 4

  5. July 13, 2011 acrossthinlines.com | technopoint.info 5

  6. FACTORS THAT INFLUENCE MOBILE UI Compact Screen Size July 13,

    2011 acrossthinlines.com | technopoint.info 6 h"p://paperpencilpixel.wordpress.com/2011/07/08/things-­‐to-­‐know-­‐before-­‐ge?ng-­‐into-­‐applica@on-­‐user-­‐interface/  
  7. FACTORS THAT INFLUENCE MOBILE UI Limited Memory July 13, 2011

    acrossthinlines.com | technopoint.info 7 h"p://paperpencilpixel.wordpress.com/2011/07/08/things-­‐to-­‐know-­‐before-­‐ge?ng-­‐into-­‐applica@on-­‐user-­‐interface/  
  8. FACTORS THAT INFLUENCE MOBILE UI Only one application at a

    time July 13, 2011 acrossthinlines.com | technopoint.info 8 h"p://paperpencilpixel.wordpress.com/2011/07/08/things-­‐to-­‐know-­‐before-­‐ge?ng-­‐into-­‐applica@on-­‐user-­‐interface/  
  9. FACTORS THAT INFLUENCE MOBILE UI Only one view at a

    time July 13, 2011 acrossthinlines.com | technopoint.info 9 h"p://paperpencilpixel.wordpress.com/2011/07/08/things-­‐to-­‐know-­‐before-­‐ge?ng-­‐into-­‐applica@on-­‐user-­‐interface/  
  10. FACTORS THAT INFLUENCE MOBILE UI Minimal Onscreen assistance July 13,

    2011 acrossthinlines.com | technopoint.info 10 h"p://paperpencilpixel.wordpress.com/2011/07/08/things-­‐to-­‐know-­‐before-­‐ge?ng-­‐into-­‐applica@on-­‐user-­‐interface/  
  11. July 13, 2011 acrossthinlines.com | technopoint.info 11

  12. MOBILE APPLICATION TYPES Native Applications July 13, 2011 acrossthinlines.com |

    technopoint.info 12
  13. MOBILE APPLICATION TYPES Web Applications July 13, 2011 acrossthinlines.com |

    technopoint.info 13
  14. MOBILE APPLICATION TYPES Hybrid Applications July 13, 2011 acrossthinlines.com |

    technopoint.info 14
  15. MOBILE APPLICATIONS iosinspires.me July 13, 2011 acrossthinlines.com | technopoint.info 15

  16. July 13, 2011 acrossthinlines.com | technopoint.info 16

  17. July 13, 2011 acrossthinlines.com | technopoint.info 17

  18. July 13, 2011 acrossthinlines.com | technopoint.info 18

  19. July 13, 2011 acrossthinlines.com | technopoint.info 19

  20. July 13, 2011 acrossthinlines.com | technopoint.info 20

  21. July 13, 2011 acrossthinlines.com | technopoint.info 21

  22. July 13, 2011 acrossthinlines.com | technopoint.info 22

  23. July 13, 2011 acrossthinlines.com | technopoint.info 23

  24. MOBILE UI PATTERNS mobile-patterns.com July 13, 2011 acrossthinlines.com | technopoint.info

    24
  25. July 13, 2011 acrossthinlines.com | technopoint.info 25

  26. July 13, 2011 acrossthinlines.com | technopoint.info 26

  27. July 13, 2011 acrossthinlines.com | technopoint.info 27

  28. July 13, 2011 acrossthinlines.com | technopoint.info 28

  29. July 13, 2011 acrossthinlines.com | technopoint.info 29

  30. July 13, 2011 acrossthinlines.com | technopoint.info 30

  31. July 13, 2011 acrossthinlines.com | technopoint.info 31

  32. July 13, 2011 acrossthinlines.com | technopoint.info 32 1980   1989

      1996   1997   1999   2008   ENQUIRE HTML 1.0 HTML 2.0 HTML 3.2 HTML 4 HTML 5.0 HTML 4.0
  33. July 13, 2011 acrossthinlines.com | technopoint.info 33

  34. July 13, 2011 acrossthinlines.com | technopoint.info 34

  35. July 13, 2011 acrossthinlines.com | technopoint.info 35

  36. July 13, 2011 acrossthinlines.com | technopoint.info 36

  37. July 13, 2011 acrossthinlines.com | technopoint.info 37

  38. July 13, 2011 acrossthinlines.com | technopoint.info 38

  39. HTML till now… July 13, 2011 acrossthinlines.com | technopoint.info 39

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <head> <title>HTML 5</title> </head> <body> <p>Hello world</p> </body>
  40. HTML now… July 13, 2011 acrossthinlines.com | technopoint.info 40 <!DOCTYPE

    html> <title>HTML 5</title> <p>Hello world</p> Validator?   Head?   Body?  
  41. SUPPORT DETECTION diveintohtml5.org/detect.html July 13, 2011 acrossthinlines.com | technopoint.info 41

  42. July 13, 2011 acrossthinlines.com | technopoint.info 42

  43. HTML5 ELEMENTS simon.html5.org/html-elements July 13, 2011 acrossthinlines.com | technopoint.info 43

  44. UNDERSTANDING THE SEMANTICS diveintohtml5.org/semantics.html July 13, 2011 acrossthinlines.com | technopoint.info

    44
  45. July 13, 2011 acrossthinlines.com | technopoint.info 45

  46. HTML 4 <!DOCTYPE html> July 13, 2011 acrossthinlines.com | technopoint.info

    46 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/ DTD/xhtml1-transitional.dtd"> HTML5
  47. HTML 4 <script> // Code here. </script> July 13, 2011

    acrossthinlines.com | technopoint.info 47 <script type="text/javascript"> /* <![CDATA[ */ // Code here. /* ]]> */ </script> HTML5
  48. HTML 4 <style> // Code here. </style> July 13, 2011

    acrossthinlines.com | technopoint.info 48 <style type="text/css"> // Code here. </style> HTML5
  49. HTML 4 <link rel="stylesheet" href="file.css" /> July 13, 2011 acrossthinlines.com

    | technopoint.info 49 <link rel="stylesheet" href="file.css" type="text/css" media="all" /> HTML5
  50. HTML 4 <link rel="stylesheet" href="file.css" /> July 13, 2011 acrossthinlines.com

    | technopoint.info 50 <link rel="stylesheet" href="file.css" type="text/css" media="all" /> HTML5
  51. July 13, 2011 acrossthinlines.com | technopoint.info 51

  52. SVG raphaeljs.com July 13, 2011 acrossthinlines.com | technopoint.info 52

  53. HTML4 FORM ELEMENTS <input type="date" /> <input type="datetime" /> <input

    type="email" /> <input type="month" /> <input type="number" /> <input type="range" /> <input type="tel" /> <input type="time" /> <input type="url" /> July 13, 2011 acrossthinlines.com | technopoint.info 53 <select><option>... <textarea></textarea> <input type="checkbox" /> <input type="file" /> <input type="radio" /> <input type="text" /> HTML5 FORM ELEMENTS
  54. HTML5 Form Elements in Browser July 13, 2011 acrossthinlines.com |

    technopoint.info 54
  55. HTML5 Form Elements in Hand-held July 13, 2011 acrossthinlines.com |

    technopoint.info 55
  56. LOCAL STORAGE diveintohtml5.org/storage.html July 13, 2011 acrossthinlines.com | technopoint.info 56

  57. HTML5 TESTING GROUND html5test.com July 13, 2011 acrossthinlines.com | technopoint.info

    57
  58. July 13, 2011 acrossthinlines.com | technopoint.info 58

  59. July 13, 2011 acrossthinlines.com | technopoint.info 59

  60. July 13, 2011 acrossthinlines.com | technopoint.info 60

  61. July 13, 2011 acrossthinlines.com | technopoint.info 61

  62. WEB FONTS google.com/webfonts July 13, 2011 acrossthinlines.com | technopoint.info 62

  63. HTML5 + CSS3 TEMPLATE html5boilerplate.com July 13, 2011 acrossthinlines.com |

    technopoint.info 63
  64. July 13, 2011 acrossthinlines.com | technopoint.info 64

  65. July 13, 2011 acrossthinlines.com | technopoint.info 65

  66. July 13, 2011 acrossthinlines.com | technopoint.info facebook.com/across.thin.lines twitter.com/acrossthinlines facebook.com/teknopoint twitter.com/teknopoint

    facebook.com/uxnext.in