Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Design

Uday Shankar
April 24, 2012
Technology
3
230

Mobile Design

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

Uday Shankar

April 24, 2012
Tweet

More Decks by Uday Shankar

See All by Uday Shankar
Design - What differentiates the useful from usable & delightful
udayms
3
290
Front End Teams under Design Leaderhip
udayms
0
150
Crafting Delightful Experiences
udayms
2
360
Designing Mobile Solutions - Emerging Markets
udayms
0
140
Usability & Prototyping
udayms
3
230
UI Engineering - Rebooted
udayms
1
160
What drives the world
udayms
1
71
Effective UI Development using Adobe Flex
udayms
1
140
Prototyping (with Cute Puppies)
udayms
1
110

Other Decks in Technology

See All in Technology
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.3k
ユーザーストーリーのレビューを自動化したみたの
bun913
1
380
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
360
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
400
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
180
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.4k
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
64
18k
Postman v10リリース後を振り返る
nagix
0
170
生産性向上チームの紹介
cybozuinsideout
PRO
1
830
ServiceNow Knowledge Learning Rise up
manarobot
0
190
LLM とプロンプトエンジニアリング／チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
250
VS CodeでAWSを操作しよう
smt7174
7
1.5k

Featured

See All Featured
How to train your dragon (web standard)
notwaldorf
72
5.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Into the Great Unknown - MozCon
thekraken
10
990
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Build your cross-platform service in a week with App Engine
jlugia
225
17k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Typedesign – Prime Four
hannesfritz
36
2.1k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
The Mythical Team-Month
searls
215
42k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Code Review Best Practice
trishagee
54
15k

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