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,

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

Use colour, contrast and size

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;
 display: -ms-flexbox;
Floats done the right way.

Multi column layout


JavaScript Libraries
Will probably contain unnecessary compatibility code.

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
 - 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
 - Mozilla Developer Reference

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