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