Taking the Responsive Web to Windows 8

First: About Me

Front-End Developer

Responsive, mobile, progressive enhancement

We live with a multitude of devices - I like my work actually work on them all

Develop hybrid apps for multiple mobile platforms

Developing for Windows 8 since before it was released

Do not work for Microsoft

Four apps in the Windows Store

Assumptions and Perspective

• Point of view from a web developer
• Focus on native app development
• Focus on style and basic interactions and touching on WinJS
• Discussion of techniques that worked for myself and my team
• I do not have an inside perspective from Microsoft

What is Responsive Web Design?

Goal is to optimize for various devices with one codebase

Flexible Media

Flexible Grids

Media Queries

Plus More*

Multi Device World

We browse the internet on small screens, laptops, 27" monitors, TVs, and more

We do this interchangeably... start reading on the computer and then finish it on a tablet on the couch.

One codebase helps to tie the different optimizations together with a common design and theme

Flexible Media

Everything is about adapting, so our images, video, and content should be flexible

Thanks to max-width our images can scale without growing past the original dimensions

Ethan Marcotte

FitVids.js

Flexible Grids

vs. a fixed canvas

With responsive, we design in percentages and other relative units

Still design with grids for vertical and horizontal flow

Yet leverage percentages to keep designs fluid

A List Apart

Media Queries

Percentages are great for starting, but sometimes our content breaks

Query against a feature (such as screen width) and apply new rules

@media all and (min-width: 50em) { /* apply different styles */ }

What works well on a small mobile screen might be better served differently on a laptop sized screen

Also used in art direction

Time

A Rabbit Hole

Responsive has been a strong word in recent years

People can make it mean almost anything

Comes down to making a web for everyone

Could also be defined as "web design"

What are Windows Store apps?

Native apps running on Windows 8+

Multiple language options for development

Certain look and feel

WinControls

Ways to Make a Windows Store App

C++, C#, VB.NET with XAML

JavaScript with HTML and CSS

WinJS library

Look and Feel

Focus on Content

Horizontally driven

Segoe UI and Segoe UI Symbol

Boxes. Lots of them.

Support for touch, stylus, mouse, and keyboard

WinControls

Several key controls that differentiate Windows Store apps from the web or other platforms

These are largely defined with WinControls

They move content offscreen, provide new navigation models

Using them will make your app feel like it belongs

Triggered by user or programmatically

App Bar

Windows strives to focus on content

Contextual and global menus are off screen by default

Primarily used through app and nav bars

Example: Bing News

• Swipe from the bottom or top edges
• Right click
• Win + Z

Settings Flyout

Another location for offscreen content is in a flyout

"Charms" on the right edge of the screen lead you to the app's Settings

Leads to settings or other extra information on the right edge

• Swipe from the right edge of the screen and tap Settings
• Move the mouse to the bottom- or top-right corner and click Settings
• Win + I

ListView

Common way to organize data

Typically a horizontally scrolling list of grouped data (but can also be vertical)

Feels like a simplified Start Screen

Cross Slide

Less common with Windows 8.1 (but I still like it)

Touch-specific gesture that allows a user to select or move an item in a list

Flicking a ListView item up or down selects it

Dragging it up or down further will break it out of its place and allow for reordering

Start Screen used to support this, 8.1 now uses a press-and-hold model

However, 8.1 (belatedly) introduced the cross slide to the ListView control

Semantic Zoom

Two views to represent the same data

"Zoomed In" - detailed items in a list

"Zoomed Out" - groupings of items

• Pinch
• Click the little box in the bottom right corner
• Ctrl + Mousewheel
• Ctrl + +/-

Snap View

Specific to the OS, any app can be "snapped" to show more than one app side by side

By default, snapped can be anything between 500px and the device width in Windows 8.1 (up from 320px)

Height remains the same

• Drag from the top edge down and to the desired side
• Move the mouse to the top, then click and drag down
• Win + . + Left/Right

Responsive + Windows 8

Potential Areas

Many input methods, and some devices can support all of them

Does the horizontal nature work as well in snap and portrait as landscape?

8" tablets to 27" All-in-Ones... and beyond

Default projects and WinControl styles based in pixels

Larger devices may not always benefit by pushing content offscreen

Especially Relevant for Windows

The web we deal with daily is largely vertically driven

Widescreen monitors but we still almost exclusively scroll down for more

As such, with responsive the first media query people usually write is based on width

With Windows 8, height might be more important

Modern Internet Explorer

Internet Explorer is still a target

This is not the same browser from the first decade of the millenium

HTML 5 (and related JS) Support

The new elements devs have grown to love

Geolocation

WebGL

Pointer Events (like a more powerful version of WebKit's touch events)

CSS Support

Media Queries, CSS3 selectors, and other basics

Transforms and transitions (unprefixed)

Animations (unprefixed)

Flexbox (2012 spec in IE 10, final spec in IE 11)

Grid Layout

Regions

Multi Column Layout

JS Support

Selectors API (querySelector, etc.)

bind

classList

Comparison with Other Browsers

Hardware accelerated (independently animated) CSS

Without it, animations can feel sluggish

On many platforms, use it too much and the app will also feel sluggish

Common pattern to trigger in Webkit and others is to specify a 3D transform

Hardware accelerated (independently animated) CSS

IE does it for any 2D or 3D transform (or opacity)

If too many animations for the GPU, will revert to main "dependent" UI thread

display: none will stop animations, other ways to hide likely will not

Touch events or Pointer events

Touch events on iOS and adopted on other platforms

Never standardized officially

Pointer events are on the W3C standards path

Instead of focusing only on touch, Pointer events abstract all pointer inputs (touch, mouse, stylus, etc.)

Stabilized Flexbox

In flux for several years, the final syntax is now here

IE 11 uses this final syntax, as do the latest versions of Chrome, Firefox, Opera, and Safari

If building apps, this is safe to use. Otherwise need fallbacks

Viewport Width

(Specific to IE 10+ on Windows and Windows Phone, not apps)

By default mobile platforms largely assume sites are designed for 1024px screens

To tell the browser the site is optimized for other screen widths, a meta tag is used for most platforms

<meta name="viewport" content="width=device-width">

Viewport Width

IE 10+ (Windows Phone and Snap View) use CSS

@-ms-viewport {
  width: device-width;
}

Same effect visually as meta tag

Can also add unprefixed version for future support

Using the web to develop native apps

Single Page Application

WinJS

Promises

Sample Project

Single Page Application

Might feel familiar (potentially with big caveats)

Initial default.html file is loaded

Views are rendered and loaded into the same main content area

WinJS (by default) will manage navigation stack and handle enter/exit animations, cleanup, etc.

What is WinJS?

Framework/toolset

Not required... but provides a lot of standard Windows controls and animations

Navigation, Views, Templates

Data Binding

WinJS: Should I use it?

A lot of the underlying Windows APIs return WinJS Promises

Animation library that uses CSS animations underneath plus Promises

However, nothing preventing you from using a web framework like Backbone or Lavaca

Sometimes can feel like it is designed for a traditional Windows developer

WinJS for Traditional Windows Developers

ListView and Data Binding

ListViews seem at the surface simple: Groups of items

Set up for a ListView can be more complicated

Has to handle a lot of potential data and is optimized for it

But for a simple data set might be overkill

Promises

Manage asynchronous methods

jQuery's $.Deferred is an implementation

Also appears in various JS toolsets

WinJS offers an implementation as well

Any asynchronous WinJS call will return a Promise object

Fetching from the File System, doing an animation, rendering a template, XHR

But What are They?

The "classic" approach to asynchronous handlers is through callbacks

jQuery.ajax() expects success and error callbacks

Promises are return objects that are chainable and can bubble data up

A Promise will be either resolved (success) or rejected (error)

Specify handlers on what to do when it resolves or rejects (or what to always do)

Also can specify to only react once multiple Promises are resolved/rejected

Compare Callbacks and Promises

Data.save(
function success() {},
function error() {});

Data.save().then(
function success() {},
function error() {});

Compare Callbacks and Promises

aAsync(function success1() {
  bAsync(function success2() {
    cAsync(function success3() {
      finish();
    });
  });
});

aAsync()
  .then(function () { return bAsync(); })
  .then(function () { return cAsync(); })
  .done(function () { finish(); });

Handling a variety of screens

Small tablets, large desktops, TVs

Landscape, Portrait, Snap views

Resolution

Horizontal Nature + Unknown Widths

Columns (and some forms of flexbox) to save the day

Multicolumn layout

What we specify is a suggestion to app's rendering

article {
  column-fill: auto;
  column-width: 30em;
  column-gap: 5em;
  /* column-count: 3; you can also specify a count,
  but that's less useful when you are horizontally
  minded with unknown content lengths */
  height: 100%;
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
}

Columns

Potentially will have offscreen content

One of those times where percentages probably aren't best

Horizontally "stacked" items can benefit from fixed width items

Resolution

Currently supports scaling ratios of 1, 1.4, and 1.8

Using SVG is preferred when possible for crisp images

Bitmap images: add scaled versions with specific names

HTML:

<img src="images/myImage.jpg">

Files:

myImage.scale-100.jpg
myImage.scale-140.jpg
myImage.scale-180.jpg

Resolution

Can also use media queries for min-resolution

Common for background images

@media screen and (min-resolution: 134dpi) { /*1.4 scaling styles */ }

@media screen and (min-resolution: 172dpi) { /*1.8 scaling styles */ }

Handling different input types

What kinds of users do we have?

Tablet that is touch with an on screen keyboard

... plus a stylus

... plus a keyboard cover

Laptop with trackpad + keyboard

... plus a touchscreen

... that also disconnects from the trackpad and keyboard

Desktop with a mouse and keyboard

... plus a touchscreen

... that connects to a (non-touch) TV as a second monitor

... and many more combinations

Pointer Events

Touched on earlier

Like a combination of touch events and mouse events

pointerdown, pointermove, pointerup, pointercancel, pointerover, pointerout, pointerenter, pointerleave

PointerEvents have properties such as pointerType, button, tiltX/Y, pressure, timeStamp, currentPoint, intermediatePoints

But it's not working...

You might find that events are not firing

The key is likely a corresponding CSS property: touch-action

touch-action states what should use default interactions

If a touch action is not represented, events will fire in JavaScript

auto, none, pan-x/y, manipulation, cross-slide-x/y, pinch-zoom, double-tap-zoom

article {
  touch-action: pan-x;
  /* only swipes/drags horizontally will perform the default OS behaviors */
  /* only other gestures (like a vertical swipe or pinch) will trigger events */
}

Introducing MSGesture

Pointer Events are great, but gestures are sometimes complicated

MSGesture provides some basic gesture abstractions

Essentially built on top of Pointer Events

MSGestureStart, MSGestureEnd, MSGestureChange, MSInertiaStart, MSGestureTap, MSGestureHold

MSGestureEvents have properties such as scale, expansion, rotation, timeStamp, and variations of translation and velocity

GestureRecognizer

When MSGesture won't cut it

Dragging, tapping, right tapping, cross sliding

Complicated at first glance (and more), but powerful

Just dive in...

Other Input Types

Accelerometer

Windows.Devices.Sensors.Accelerometer.getDefault()

Geolocation via navigator.geolocation, or a Windows-specific method

var locator = new Windows.Devices.Geolocation.Geolocator();
locator.getGeolocationAsync().then(success, error);

Additional Topics

Localization

Resource files

Accessibility

ARIA labels

High Contrast

Workflow

Like to use SASS or LESS?

Like to use Grunt?

Like to use SublimeText?

You can.

The Future

Will Windows converge with Windows Phone?

Fluidity and Flexibility now set us up well for changes

Thank you