1. Responsive App Design
Tan Chun Siong
Developer Evangelist

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. Responsiveness is not
just about going
faster and faster

4. Presentation
is an important aspect of
Responsiveness

5. User Controls
are an important aspect of
Responsiveness

6. What’s under the hood
is an important aspect of
Responsiveness

7. Responsive Application
Presentation User Controls Backend
Performance
JavaScript

8. Responsive Application
Presentation UX Backend
Performance
+

9. Devices comes with in
Different Form Factors

10. Users can operate in
Different
Orientation
Landscape Portrait

11. Applications can operate in
Different View-State
Full Screen-Landscape Snapped

12. 1. Show me the demo

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. Responsive Application
Presentation User Control Backend
Performance
+

15. Responsive Application
Presentation User Control Backend
Windows 8 / HTML5 Performance
Building Blocks
+
+
Don Norman’s
Design of Everyday Things

16. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I to use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?

17. Visibility
Feedback
ListView ListView
Nothing selected Multiple selection + Visible App Bar

18. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?

19. Affordance
Mapping

20. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I to use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?

21. Affordance
Constrains
Toggle Switch with constraints, HTML Select control with Affordance

22. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I to use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?

23. Consistency
ListView Control offering consistency

24. Consistency
Windows 8 Touch Language

25. 2. Show me the demo

26. Responsive Application
Presentation User Control Backend
Windows 8 Performance
Building Blocks
+
+
Don Norman’s Design of JavaScript
Everyday Things

27. Performance with
JavaScript in
HTML5

28. Generic Concepts in HTML5
3. Process in background
1. Minimize connections
2. Decrease bandwidth
4. Store locally
Existing performance features in HTML5 works in Windows 8

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. Tricks on Windows 8 HTML5 + JavaScript
1.Use Windows 8 ListView
2.Use Windows Animation Library
over
CSS Animation and Transition

31. ListView Control
}
Built on top of
JavaScript
and
CSS3
Animation &
Transitions

32. 3. Show me the demo

33. App Navigation
Screen
Web
HTML HTML HTML
Screen
Windows 8
App HTML
HTML HTML

34. 4. Show me the demo

35. Windows Animation Library
App navigation
Animate content within a view
Revealing or hiding supplemental UI
Collections
Selection

36. Responsive App Design
Presentation User Control Backend
Windows 8 Performance
Building Blocks
+
+
Don Norman’s JavaScript
Design of Everyday Things

37. Windows 8 Hands-On Lab
Dates: 12 May(Sat) 18 May (Fri) and 26 May
(Sat)
Time: 9:30am to 5:00pm
Location: NTUC Trade Union House
Register: bit.ly/win8handsonlabs