Responsive app design
-
Upload
tanchunsiong -
Category
Technology
-
view
306 -
download
0
description
Transcript of Responsive app design
Responsive App Design
Tan Chun SiongDeveloper Evangelist
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
Responsiveness is
not just about going
faster and faster
Presentation is an important aspect of
Responsiveness
User Controls are an important aspect of
Responsiveness
What’s under the hoodis an important aspect of
Responsiveness
Responsive Application
Presentation User Controls Backend Performance
JavaScript
Responsive Application
Presentation UX Backend Performance
+
Devices comes with in
Different Form Factors
Users can operate in
Different Orientation
Landscape Portrait
Applications can operate in
Different View-State
Full Screen-Landscape Snapped
1. Show me the demo
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>
Responsive Application
Presentation User Control Backend Performance
+
Responsive Application
Presentation User Control Backend Performance
+
Don Norman’s Design of Everyday
Things
Windows 8 / HTML5Building Blocks
+
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
VisibilityFeedback
ListView Nothing selected
ListView Multiple selection + Visible App
Bar
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
AffordanceMapping
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
AffordanceConstrains
Toggle Switch with constraints, HTML Select control with Affordance
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
Consistency
ListView Control offering consistency
Windows 8 Touch Language
Consistency
2. Show me the demo
Responsive Application
Presentation User Control Backend Performance
+
Don Norman’s Design of Everyday Things
Windows 8Building Blocks
+
JavaScript
Performance with JavaScript in HTML5
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
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
Tricks on Windows 8 HTML5 + JavaScript
1.Use Windows 8 ListView2.Use Windows Animation Library
over CSS Animation and Transition
ListView Control
}Built on top of
JavaScript
and
CSS3Animation & Transitions
3. Show me the demo
App Navigation
Web
Windows 8App
HTML HTML
HTML
HTML HTML HTML
Screen
Screen
4. Show me the demo
Windows Animation Library
App navigationAnimate content within a viewRevealing or hiding supplemental UICollectionsSelection
Presentation Backend Performance
+
JavaScript
User Control
Don Norman’s Design of Everyday
Things
Windows 8Building Blocks
+
Responsive App Design
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