Study group 70 480 - Implementing an adaptive user interface


Published on

Implementing an adaptive user interface:
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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Factor Detection At Google IO 2011, Paul Kinlan and Michael Mahemoff introduced a new concept: form factor Detection.  In short, we want to balance user experience with developer experience, and we argue there's a sweetspot here, which is a distinct user interface for each form factor. So we have a baseline app that runs everywhere, but a custom user-interface layer for all TV browsers, another for all desktop browsers, another for all smartphone browsers, and so on. We released a proof-of-concept framework, FormFactorJS, which includes indicator modules for each form factor we care about. e.g. the TV module makes use of a couple of known conventions for user agent strings inside TV browsers: formfactor.register({ tv: [ "tv", ( navigator.userAgent.indexOf(" Large Screen") > = 0 && navigator.userAgent.indexOf(" GoogleTV/") > = 0 ) ]}); Form factor detection is a useful complement to feature and browser detection. You can use it to structure your overall app architecture, with its various UI layers, and you can then tweak those UI layers further with feature and browser detection.
  • You might wonder why we need the second line. Isn't it enough to just create a canvas element? In fact, 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. That's detective work! Our canvas detection is an example of a more general pattern for feature detection: "Create a DOM element and see if it behaves like we expect". Its one of four standard feature detection techniques, nicely summed up in Mark Pilgrim's Dive Into HTML5. Knowing these patterns makes feature detection easier, but we can make it even easier than that. These days, we have library support too. The popular Modernizrlibraryhas your feature detection needs covered. Our canvas detection is as simple asModernizr.canvas, so we can just include Modernizr and say: Modernizr.canvas ? showGraph() : showTable(); Feature detection is the dominant type of detection on the web today, and for good reason. It aims to make a common app, with feature-dependent switches along the way depending on features, to accommodate for any possible combination of features offered by a particular browser. Browser detection is no longer popular, because it was mostly used to determine if the current browser supported a particular feature — something better handled by feature detection. That said, there are still cases where developers want to raise the awesome level for a particular environment, and that's where browser detection shines. Form factor detection is our intuition that it's important to build different UIs for smartphones versus desktops versus TVs, and so on. It's less important to differentiate between iPhone and Android (though you can still treat those as different form factors under this concept, should you want to customize even further). Finally, it's worth emphasizing the principle of progressive enhancement that is central to any form of detection. You will generally want to build a baseline app first, for a minimal browser. There's often a good case the app should even perform on a raw, non-JavaScript, browser like Lynx. Detection then becomes a way of augmenting this raw experience with more powerful functionality, dependent on the environment your app finds itself in. Remember the golden rule: We want our apps to be good for the environment, whatever the environment.
  • Study group 70 480 - Implementing an adaptive user interface

    1. 1. Implementing an Adaptive User InterfaceStudyGroup 70-480: Programming in HTML5 with JavaScript and CSS3 Author: Maciej Zbrzezny
    2. 2. AgendaThis module describes how to create HTML5 pagesthat can dynamically detect and adapt to differentdevices 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
    3. 3. Adaptive SystemIn computer science, the term “adaptive system” refersto a process in which an interactive system adapts itsbehavior to individual users based on informationacquired about its user(s), the context of use and itsenvironment.
    4. 4. 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. adaptive-system-to-enhance-ux/
    5. 5. Example – Google Instant
    6. 6. Example – Adaptive UI
    7. 7. 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 4723945/in/set-72157627712478230/
    8. 8. Device Targeting- challengeschallenges solutions Size (small screen / big  Flexibility screen)  Different output Form factor / ratio / portait / landscape  Different layout Touchable / no touchable  Different Static / Dynamic style/theme/skin Multicolor / mono Some devices rotate! Difficulty of data input Browser inconsistency
    9. 9. Device Targeting - solution Different CSS for different device/media = Media Queries <link rel="stylesheet" type="text/css" href="core.css" media="screen" />
    10. 10. 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
    11. 11. 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)
    12. 12. 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}
    13. 13. 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)
    14. 14. 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)
    15. 15. Other things to remeber - Webapps needmore than media queries (1) Form factor detection Browser detection Function detection
    16. 16. 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 ml
    17. 17. 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.
    18. 18. Other things to remeber - Webapps needmore 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
    19. 19. 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 (its 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).<imgsrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA9TXL0Y4OHwAAAABJRU5ErkJggg==" >
    20. 20. Choosing a layout (Windows Store appsusing 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.
    21. 21. 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.
    22. 22. 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.
    23. 23. 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: ""; } /* Dont 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;}
    24. 24. Follow these guidelines when designing yourapp 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.
    25. 25. Some things to avoid when designing yourapp layout Dont use static layouts. Dont use absolute positioning because it constrains your UI from responding to changes in view state and orientation.
    26. 26. 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 thats what detection is all about.
    27. 27. Further reading  Creating a Mobile-First Responsive Web Design  Feature, Browser, and Form Factor Detection: Its Good for the Environment  A non-responsive approach to building cross-device webapps 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