responsive app design
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/1.jpg)
Responsive App Design
Tan Chun SiongDeveloper Evangelist
![Page 2: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/2.jpg)
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
![Page 3: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/3.jpg)
Responsiveness is
not just about going
faster and faster
![Page 4: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/4.jpg)
Presentation is an important aspect of
Responsiveness
![Page 5: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/5.jpg)
User Controls are an important aspect of
Responsiveness
![Page 6: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/6.jpg)
What’s under the hoodis an important aspect of
Responsiveness
![Page 7: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/7.jpg)
Responsive Application
Presentation User Controls Backend Performance
JavaScript
![Page 8: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/8.jpg)
Responsive Application
Presentation UX Backend Performance
+
![Page 9: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/9.jpg)
Devices comes with in
Different Form Factors
![Page 10: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/10.jpg)
Users can operate in
Different Orientation
Landscape Portrait
![Page 11: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/11.jpg)
Applications can operate in
Different View-State
Full Screen-Landscape Snapped
![Page 12: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/12.jpg)
1. Show me the demo
![Page 13: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/13.jpg)
On
<div class="itemtemplate">
@media screen and (-ms-view-state: fullscreen-portrait)
@media screen and (-ms-view-state: snapped)
+
<link> and <script> with WinJS API reference
Responsive App Design
</div>
![Page 14: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/14.jpg)
Responsive Application
Presentation User Control Backend Performance
+
![Page 15: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/15.jpg)
Responsive Application
Presentation User Control Backend Performance
+
Don Norman’s Design of Everyday
Things
Windows 8 / HTML5Building Blocks
+
![Page 16: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/16.jpg)
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?
Don Norman’s Design Principles
![Page 17: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/17.jpg)
VisibilityFeedback
ListView Nothing selected
ListView Multiple selection + Visible App
Bar
![Page 18: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/18.jpg)
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?
Don Norman’s Design Principles
![Page 19: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/19.jpg)
AffordanceMapping
![Page 20: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/20.jpg)
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?
Don Norman’s Design Principles
![Page 21: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/21.jpg)
AffordanceConstrains
Toggle Switch with constraints, HTML Select control with Affordance
![Page 22: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/22.jpg)
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?
Don Norman’s Design Principles
![Page 23: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/23.jpg)
Consistency
ListView Control offering consistency
![Page 24: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/24.jpg)
Windows 8 Touch Language
Consistency
![Page 25: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/25.jpg)
2. Show me the demo
![Page 26: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/26.jpg)
Responsive Application
Presentation User Control Backend Performance
+
Don Norman’s Design of Everyday Things
Windows 8Building Blocks
+
JavaScript
![Page 27: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/27.jpg)
Performance with JavaScript in HTML5
![Page 28: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/28.jpg)
Generic Concepts in HTML5
3. Process in background
4. Store locally
1. Minimize connections2. Decrease bandwidth
Existing performance features in HTML5 works in Windows 8
![Page 29: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/29.jpg)
Tricks on Existing HTML5 + JavaScript1. Minimize number of connections
HTTP caching
Reuse Connection (connection:close)
Use CDN
2. Decrease data bandwidth
Compression via encoding
Minification
3. Move Processes to background
Web Worker
Async Callback
4. Store resources locally
Local storage
bit.ly/HTML5Performance
![Page 30: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/30.jpg)
Tricks on Windows 8 HTML5 + JavaScript
1.Use Windows 8 ListView2.Use Windows Animation Library
over CSS Animation and Transition
![Page 31: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/31.jpg)
ListView Control
}Built on top of
JavaScript
and
CSS3Animation & Transitions
![Page 32: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/32.jpg)
3. Show me the demo
![Page 33: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/33.jpg)
App Navigation
Web
Windows 8App
HTML HTML
HTML
HTML HTML HTML
Screen
Screen
![Page 34: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/34.jpg)
4. Show me the demo
![Page 35: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/35.jpg)
Windows Animation Library
App navigationAnimate content within a viewRevealing or hiding supplemental UICollectionsSelection
![Page 36: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/36.jpg)
Presentation Backend Performance
+
JavaScript
User Control
Don Norman’s Design of Everyday
Things
Windows 8Building Blocks
+
Responsive App Design
![Page 37: Responsive app design](https://reader035.vdocuments.us/reader035/viewer/2022062617/54ba00204a795944218b464b/html5/thumbnails/37.jpg)
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