Responsive app design

497 views
402 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
497
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive app design

  1. 1. Responsive App Design Tan Chun Siong Developer Evangelist
  2. 2. It takes around 5 seconds of load time for users to lose interest in your website.Well if you are impatient like me, it takes around 2 seconds
  3. 3. Responsiveness is notjust about goingfaster and faster
  4. 4. Presentationis an important aspect ofResponsiveness
  5. 5. User Controlsare an important aspect ofResponsiveness
  6. 6. What’s under the hoodis an important aspect ofResponsiveness
  7. 7. Responsive ApplicationPresentation User Controls Backend Performance JavaScript
  8. 8. Responsive ApplicationPresentation UX Backend Performance +
  9. 9. Devices comes with inDifferent Form Factors
  10. 10. Users can operate inDifferentOrientation Landscape Portrait
  11. 11. Applications can operate inDifferent View-State Full Screen-Landscape Snapped
  12. 12. 1. Show me the demo
  13. 13. On <div class="itemtemplate"> <link> and + <script> with WinJS API reference </div> @media screen and (-ms-view-state: fullscreen-portrait) @media screen and (-ms-view-state: snapped)Responsive App Design
  14. 14. Responsive ApplicationPresentation User Control Backend Performance +
  15. 15. Responsive ApplicationPresentation User Control Backend Windows 8 / HTML5 Performance Building Blocks + + Don Norman’s Design of Everyday Things
  16. 16. Don Norman’s DesignPrinciplesVisibility – Can I see it?Feedback – What have I done?Affordance – How do I to use it?Mapping – Where am I and where can Igo?Constraint – What can I not do?Consistency– Have I seen this before?
  17. 17. VisibilityFeedback ListView ListView Nothing selected Multiple selection + Visible App Bar
  18. 18. Don Norman’s DesignPrinciplesVisibility – Can I see it?Feedback – What have I done?Affordance – How do I use it?Mapping – Where am I and where can Igo?Constraint – What can I not do?Consistency– Have I seen this before?
  19. 19. AffordanceMapping
  20. 20. Don Norman’s DesignPrinciplesVisibility – Can I see it?Feedback – What have I done?Affordance – How do I to use it?Mapping – Where am I and where can Igo?Constraint – What can I not do?Consistency– Have I seen this before?
  21. 21. AffordanceConstrainsToggle Switch with constraints, HTML Select control with Affordance
  22. 22. Don Norman’s DesignPrinciplesVisibility – Can I see it?Feedback – What have I done?Affordance – How do I to use it?Mapping – Where am I and where can Igo?Constraint – What can I not do?Consistency– Have I seen this before?
  23. 23. ConsistencyListView Control offering consistency
  24. 24. Consistency Windows 8 Touch Language
  25. 25. 2. Show me the demo
  26. 26. Responsive ApplicationPresentation User Control Backend Windows 8 Performance Building Blocks + + Don Norman’s Design of JavaScript Everyday Things
  27. 27. Performance withJavaScript inHTML5
  28. 28. Generic Concepts in HTML53. Process in background 1. Minimize connections 2. Decrease bandwidth 4. Store locallyExisting performance features in HTML5 works in Windows 8
  29. 29. Tricks on Existing HTML5 + JavaScript 1. Minimize number of connections  HTTP caching  Reuse Connection (connection:close)  Use CDN 2. Decrease data bandwidth bit.ly/HTML5Performance  Compression via encoding  Minification 3. Move Processes to background  Web Worker  Async Callback 4. Store resources locally  Local storage
  30. 30. Tricks on Windows 8 HTML5 + JavaScript 1.Use Windows 8 ListView 2.Use Windows Animation Library over CSS Animation and Transition
  31. 31. ListView Control } Built on top of JavaScript and CSS3 Animation & Transitions
  32. 32. 3. Show me the demo
  33. 33. App Navigation ScreenWeb HTML HTML HTML ScreenWindows 8App HTML HTML HTML
  34. 34. 4. Show me the demo
  35. 35. Windows Animation LibraryApp navigationAnimate content within a viewRevealing or hiding supplemental UICollectionsSelection
  36. 36. Responsive App DesignPresentation User Control Backend Windows 8 Performance Building Blocks + + Don Norman’s JavaScript Design of Everyday Things
  37. 37. Windows 8 Hands-On LabDates: 12 May(Sat) 18 May (Fri) and 26 May(Sat)Time: 9:30am to 5:00pmLocation: NTUC Trade Union HouseRegister: bit.ly/win8handsonlabs

×