Wednesday, September 5, 2012

APP204 From Web to Windows - Designing Modern Windows 8 Apps using HTML 5, CSS & JavaScript

Presenter: Gus Pickering, Sam Langley and Zach Hitchcock

Application Experience Review (AER) was used for early apps. Highly recommended to go through if you can.

Expression Encoder for screen captures.

Include a privacy policy and a support email address.

Typically use 7+ for the age limit unless there is a reason to set it lower.

No more browser compatibility issues (with JavaScript Windows Apps). If it works for me, it'll work for everyone.


The Windows UI Design Language
 - Learn the language
 - Put users first - content before chrome
 - Know your content
 - Use the grid wisely
 - Good typography is very powerful


The Grid
Fundamental to organise information.
Many different ways to imply a grid, color, size, proximity, shape,

Interaction
Animation enhances comprehension
Stay Simple, but clever


Information Architecture

User Experience
Make your hit areas bigger
Snapped view is important
Include portrait (unless good reasons not to)
Use semantic zoom

Design
Use colour, contrast and size

Panning
Windows UI is a horizontal world
Don't forget about portrait.


Skeuomorphism - making things look like their real  world counterpart.
Offers a shallow learning curse for users but you are also modelling the constraints
Use spatial dimensions not available in the real world.
But sometimes a button needs to be lickable.

Media queries make the browser engine do the hard work.


CSS3 Layout and Typography
Grid Layout
 display: -ms-grid;
Flexbox
 display: -ms-flexbox;
Floats done the right way.

Multi column layout

Exclusions
-ms-wrap-flow:both

JavaScript Libraries
Underscore
Will probably contain unnecessary compatibility code.

Test
Use a second portrait monitor test orientation.



Learning JavaScript as a programming language
JavaScript: The Good Parts. Douglas Cockford.

Avoid: Sams Tech Yourself JavaScript in 24 Hours

Useful Tools:

Visual Studio 2012
 - JavaScript Console, DOM Exporer, Simulator
Fiddler,
 - Composer - send Get/Put requests to a URL Manually put in values, 
- AutoResponder - fiddler intercepts and responds with your predefined response
Javascript libraries
 - Underscore.js - Give functions similar to linq queies in JavaScript
JavaScript
 - Mozilla Developer Reference

Be disciplined with conventions and testing to avoid issues due to lack of typing system. Write defensive code for type checking.