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
380
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
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
150
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
240
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
170
WACATE2024冬セッション資料（ユーザビリティ）
scarletplover
0
210
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
Turing × atmaCup #18 - 1st Place Solution
hakubishin3
0
480
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
170
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150
Oracle Cloudの生成AIサービスって実際どこまで使えるの？ エンジニア目線で試してみた
minorun365
PRO
4
280
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
310
祝！Iceberg祭開幕！re:Invent 2024データレイク関連アップデート10分総ざらい
kniino
3
290

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Rails Girls Zürich Keynote
gr2m
94
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Into the Great Unknown - MozCon
thekraken
33
1.5k

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