Study group 70 480 - Implementing an adaptive user interface

Implementing an Adaptive User Interface

StudyGroup 70-480: Programming in HTML5 with JavaScript and CSS3

Author: Maciej Zbrzezny

AgendaThis module describes how to create HTML5 pages that can dynamically detect and adapt to different devices and form factors. Supporting Multiple Form Factors (The need to

detect device capabilities and react to different form factors in a Web application).

Creating an Adaptive User Interface (Adapting Page Layout To Fit a Different Form Factor)

Creating a Print-Friendly Stylesheet

Adaptive SystemIn computer science, the term “adaptive system” refers to a process in which an interactive system adapts its behavior to individual users based on information acquired about its user(s), the context of use and its environment.

Examples Of Adaptive Systems (GPS)

The day and night interfaces in the GARMIN Zumo 660 adapt the interface color so the user isn’t blinded with a bright light.

http://uxdesign.smashingmagazine.com/2012/12/10/creating-an-adaptive-system-to-enhance-ux/

Example – Google Instant

Example – Adaptive UI

http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

Variety of devices

Tons of internet-connected devices out there

Nearly all of them have browsers.

diversity: Mac laptops, Windows workstations, iPhones, iPads, Kindles, Android phones

Touch input, scroll wheels, keyboards, voice input, devices with pressure sensitivity,

TVs, smart watches, toasters and refrigerators, and many more

http://www.flickr.com/photos/brad_frost/6164723945/in/set-72157627712478230/

Device Targeting- challenges

challenges solutions

Size (small screen / big screen)

Form factor / ratio / portait / landscape

Touchable / no touchable Static / Dynamic Multicolor / mono Some devices rotate! Difficulty of data input Browser inconsistency

Flexibility Different output Different layout Different

style/theme/skin

Different CSS

for different

device/media

Device Targeting - solution

Different CSS for different device/media

= Media Queries

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />

Variety media types all — for all the media types below braille — for braille tactile feedback devices embossed — for paged braille printers handheld — for handheld devices like mobile

phones print — for printed material projection — for projected presentations screen — for color computer screens speech — for speech synthesizers tty — for teletypes, terminals, and other devices

with limited display capabilities tv — for televisions and television like devices

3 ways to include media queries @media in css file — @media screen and

(max-width: 1200px) {css here} link element — < link rel="stylesheet"

href="my-style.css" media="screen and (max-width: 1200px)" / >

@import in .css — @import url(“my-style.css”) screen and (max-width: 1200px)

More than media, those are queries@media screen and (max-width: 1200px)

and (orientation: landscape){ css here} @media not projection and (min-width: 1000px) css here}

Media queries - features width - width of display area/viewport (min/max) height - height of display area/viewport (min/max) device-width - width of device rendering surface (min/max) device-height - height of device rendering surface (min/max) orientation - portrait or landscape aspect-ratio - ratio of display’s width to height (16:9, 4:3) (min/max) device-aspect-ratio - ratio of device rendering surface width to height

(16:9, 4:3) (min/max) color - number of bits per color component of the output device

(min/max) color-index - number of entries in the color lookup table of the output

device (min/max) monochrome - number of bits per pixel in a monochrome frame buffer

(0 for non-monochrome devices) (min/max) resolution - resolution of the output device (pixel density; 72dpi,

300dpi) (min/max) scan - progressive or scan for tv devices grid - grid or bitmap (phone display with one fixed font; tty terminal)

Media queries disadvantages All devices get the same JavaScript, CSS, and

assets (images, videos), resulting in longer than necessary load times.

All devices get the same initial DOM, potentially forcing developers to write overly complicated CSS.

Little flexibility to specify custom interactions tailored to each device.

Not supported on some browsers (IE<=8, Symbian browsers, Blackberry < OS 6.0, Netfront, WP7 pre-Mango, etc)

Other things to remeber - Webapps need more than media queries (1) Form factor detection Browser detection Function detection

Form factor-specific (web) apps Form factors detection, approaches:

Server-side detection Client-side detection (Redirect to a device-type-specific URL

that contains the version for this device type. Dynamically load the device type-specific assets.)

Sample classifications: small screens + touch (mostly phones) large screens + touch (mostly tablets) large screens + keyboard/ mouse (mostly desktops/ laptops)

Example detection strategy: if (hasTouch) { if (isSmall) { device = PHONE; } else { device = TABLET; } } else { device = DESKTOP; }

device.js, FormFactor.JS http://www.html5rocks.com/en/tutorials/detection/index.h

tml

Features detectiondetectCanvas() ? showGraph() : showTable();

function detectCanvas() { var canvas = document.createElement(" canvas"); return canvas.getContext ? true : false; } Browsers will let you create

unknown DOM elements. The only way to know if the canvas is legitimate is to test if it actually behaves like a canvas.

Other things to remeber - Webapps need more than media queries (2) Viewport meta tag to set the screen width to the

device width: < meta name =" viewport" content =" width = device-width, initial-scale = 1" />

tel: URI scheme, which looks like this: < a href =" tel: + 18005550199" > 1-800-555-0199 </ a >

Relative Units - percentages and em units in our design in order to keep things as flexible as possible.

Reduce the need for images (thereby saving HTTP requests)

Flexible and fluid layouts Device capabilities

Reduce the need for images HTML special characters for simple shapes.

For example using &# 9733; to create a solid star (★) and &# 9734; to create empty stars (☆) for our ratings (it's HTML and not an image - stays crisp even on high resolution screens.

CSS gradients instead of background Data URIs instead of background images for

some of the smaller icons (for icons like search, social features and location).<img

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA

9TXL0Y4OHwAAAABJRU5ErkJggg==" >

Choosing a layout (Windows Store apps using JavaScript and HTML) Flexible Box (Flexbox) is a layout mechanism where child

elements are arranged and sized using a constraint-based system that supports both relative flexible sizing and intrinsic sizing. Flexible Box layouts can adapt to multiple screen sizes and enable digital newspaper, magazine, and other digital print media consumptive scenarios.

Grid alignment The Grid provides a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application by referencing the Grid Lines between the columns and rows, or by defining and referencing a Grid Cell, which is a rectangular space covering an intersection of columns and rows.

Multi-column layout Multi-column layouts support content flow from one column to another for an arbitrary number of columns.

Device capabilities Accelerometers and other sensors Devices come with a number

of sensors nowadays. Your app can dim or brighten the display based on ambient light, or reflow the UI if the user turns the display, or react to any physical movement. Learn more about sensors.

Geolocation Use geolocation information from standard web data or from geolocation sensors to help your users get around, locate their position on a map, or get notices about nearby people, activities, destinations. Learn more about geolocation.

Cameras Connect your users to their built-in or plugged-in cameras for chatting and conferencing, recording vlogs, taking profile pics, documenting the world around them, or whatever activity your app is great at.

Proximity gestures Let your users connect devices, by physically tapping the devices together, to light up experiences where you expect multiple users to be physically nearby (multiplayer games). Learn more about proximity gestures.

Printing - challenges Page is a very limited canvas. Another major difference between print and

the web is the capacity for interaction. The web represents a richly interactive dynamic medium while print is static; what’s on the paper is stuck there!

Navigation menus are usually one of the first things to go.

The most basic level of interaction on the web is a link. This too becomes problematic.

Printing - solutions Print Media Query @media print {} Enlarge the Content Area, Some element’s display to none

(nav, sidebar, comments), show a Print-Only Message Universal Selector and Blanket Styles * { background:

transparent; color: black; text-shadow: none; filter:none; -ms-filter: none; }

Print Friendly Links a, a:visited { text-decoration: underline; } a[ href]: after { content: " (" attr( href) ")"; } abbr[ title]: after { content: " (" attr( title) ")"; } .ir a:after, a[ href ^ =" javascript:"]: after, a[ href ^ ="#"]: after { content: ""; } /* Don't show links for images, or javascript/ internal links */

Optimizing Page Breaks: page-break-after: avoid; and p, h2, h3 { orphans: 3; widows: 3; } Image Sizing img { max-width: 100% !important; }

Page Margins @page { margin: 0.5cm;}

Follow these guidelines when designing your app layout Do use fluid layouts. Do use media queries to identify the view state

and resolution being targeted. Do use layout features to adapt to display size.

To learn more, see Guidelines for scaling to screens

Do use controls that are designed for fluid layout, like ListView.

Do consider using vector-based UI (Scalable Vector Graphics (SVG), Extensible Application Markup Language (XAML)) for application resources.

Some things to avoid when designing your app layout Don't use static layouts. Don't use absolute positioning because it

constrains your UI from responding to changes in view state and orientation.

Summary Summary Modern web development is no

longer just about desktop browsers. Users work and play in a wide range of

environments, and we can reach most of them with HTML5.

As developers, we want to adapt our apps to each environment, ensuring great user experiences and making the most of whatever capabilities are available.

The first step to environmental adaptation is environmental discovery, and that's what detection is all about.

Further reading http://www.html5rocks.com

Creating a Mobile-First Responsive Web Design Feature, Browser, and Form Factor Detection: It's Good for the

Environment A non-responsive approach to building cross-device webapps

www.vanseodesign.com: How To Use Media Queries For Device Targeting

MSDN: Design for different form factors (Windows Store apps)

Design Shack: 6 Things I Learned About Print Stylesheets From HTML5 Boilerplate

Webdesigner Depot: 10 Tips for Better Print Style Sheets Smashing Magazine:

Creating An Adaptive System To Enhance UX