Scribd Logo
Upload

Welcome to Scribd!

  • 37 views

    StudyGroup 70-480-Implementing An Adaptive User Interface

    Uploaded by

    trallala
    The document discusses implementing an adaptive user interface that can dynamically detect and adapt to different devices and form factors. It covers supporting multiple form factors by detecting device capabilities and reacting to different layouts. Examples are provided of adaptive systems like GPS interfaces and Google Instant that change based on factors like time of day or user input. Media queries and CSS are presented as solutions to create adaptive layouts for different screen sizes and devices.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    StudyGroup 70-480-Implementing An Adaptive User Interface

    Uploaded by

    trallala
    37 views27 pages
    The document discusses implementing an adaptive user interface that can dynamically detect and adapt to different devices and form factors. It covers supporting multiple form factors by detecting device capabilities and reacting to different layouts. Examples are provided of adaptive systems like GPS interfaces and Google Instant that change based on factors like time of day or user input. Media queries and CSS are presented as solutions to create adaptive layouts for different screen sizes and devices.

    Original Description:

    StudyGroup 70-480-Implementing an Adaptive User Interface

    Original Title

    StudyGroup 70-480-Implementing an Adaptive User Interface

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses implementing an adaptive user interface that can dynamically detect and adapt to different devices and form factors. It covers supporting multiple form factors by detecting device capabilities and reacting to different layouts. Examples are provided of adaptive systems like GPS interfaces and Google Instant that change based on factors like time of day or user input. Media queries and CSS are presented as solutions to create adaptive layouts for different screen sizes and devices.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    37 views27 pages

    StudyGroup 70-480-Implementing An Adaptive User Interface

    Uploaded by

    trallala
    The document discusses implementing an adaptive user interface that can dynamically detect and adapt to different devices and form factors. It covers supporting multiple form factors by detecting device capabilities and reacting to different layouts. Examples are provided of adaptive systems like GPS interfaces and Google Instant that change based on factors like time of day or user input. Media queries and CSS are presented as solutions to create adaptive layouts for different screen sizes and devices.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 27

    Implementing an Adaptive User

    Interface
    StudyGroup 70-480: Programming in HTML5 with JavaScript
    and CSS3
    Agenda
    This 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 System
    In 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/61647
    23945/in/set-72157627712478230/
    Device Targeting- challenges

    challenges solutions
     Size (small screen / big  Flexibility
    screen)
     Different output
     Form factor / ratio / portait
    / landscape  Different layout
     Touchable / no touchable  Different style/theme/skin
     Static / Dynamic
     Multicolor / mono
     Some devices rotate!
     Difficulty of data input
     Browser inconsistency
    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.html
    Features detection
    detectCanvas() ? 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

    You might also like