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
160
Crafting Delightful Experiences
udayms
2
370
Designing Mobile Solutions - Emerging Markets
udayms
0
150
Usability & Prototyping
udayms
3
250
UI Engineering - Rebooted
udayms
1
170
What drives the world
udayms
1
79
Effective UI Development using Adobe Flex
udayms
1
150
Prototyping (with Cute Puppies)
udayms
1
110

Other Decks in Technology

See All in Technology
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
第1回 国土交通省 データコンペ参加者向け勉強会③ - Snowflake x estie編 -
estie
0
130
TanStack Routerに移行するのかい しないのかい、どっちなんだい！ / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
110
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160

Featured

See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Building Your Own Lightsaber
phodgson
103
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Ruby is Unlike a Banana
tanoku
97
11k
Unsuck your backbone
ammeep
668
57k
Making Projects Easy
brettharned
115
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Designing Experiences People Love
moore
138
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k

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