SlideShare a Scribd company logo
1 of 27
Implementing an Adaptive User
                          Interface
StudyGroup 70-480: Programming in HTML5 with JavaScript and CSS3
                                          Author: Maciej Zbrzezny
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,
                             http://www.flickr.com/photos/brad_frost/616
   TVs, smart watches, toasters
                             4723945/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
   Static / Dynamic                    style/theme/skin
   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.ht
    ml
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

More Related Content

Viewers also liked

Computer Hardware
Computer HardwareComputer Hardware
Computer Hardwareritaester
 
Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...
Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...
Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...FTourism & Marketing
 
Preston Chaplin Photography
Preston Chaplin PhotographyPreston Chaplin Photography
Preston Chaplin Photographypchaplin
 
Destinations and Tourism Marketing Turistico 23
Destinations and Tourism Marketing Turistico 23Destinations and Tourism Marketing Turistico 23
Destinations and Tourism Marketing Turistico 23FTourism & Marketing
 
Octombrie parizian sub emblema interculturalitatii - articol scris de Nicole...
Octombrie parizian sub emblema interculturalitatii  - articol scris de Nicole...Octombrie parizian sub emblema interculturalitatii  - articol scris de Nicole...
Octombrie parizian sub emblema interculturalitatii - articol scris de Nicole...deleanului
 
Prepeliţele ca sursă de profit
Prepeliţele ca sursă de profitPrepeliţele ca sursă de profit
Prepeliţele ca sursă de profiteComunitate.ro
 
Destination tourism marketing turistico n 22
Destination tourism marketing turistico n 22Destination tourism marketing turistico n 22
Destination tourism marketing turistico n 22FTourism & Marketing
 
Hyman Charme 09 11 09 Final 1
Hyman Charme 09 11 09 Final 1Hyman Charme 09 11 09 Final 1
Hyman Charme 09 11 09 Final 1guest7f6f4c6
 
Nurwulan Anova Baru
Nurwulan Anova BaruNurwulan Anova Baru
Nurwulan Anova Baruguestbed2c6
 
Persoonlijk & Uniek!
Persoonlijk & Uniek!Persoonlijk & Uniek!
Persoonlijk & Uniek!Mirjam
 
Ceramica neagră de marginea – O marcă românească de succes
Ceramica neagră de marginea – O marcă românească de succesCeramica neagră de marginea – O marcă românească de succes
Ceramica neagră de marginea – O marcă românească de succeseComunitate.ro
 
сопроводительное письмо
сопроводительное письмосопроводительное письмо
сопроводительное письмоKaterina Krivtsova
 
Assemblea_Nazionale_UNPLI_Loano_Four_Tourism
Assemblea_Nazionale_UNPLI_Loano_Four_TourismAssemblea_Nazionale_UNPLI_Loano_Four_Tourism
Assemblea_Nazionale_UNPLI_Loano_Four_TourismFTourism & Marketing
 
A Specter Legacy Prologue
A Specter Legacy PrologueA Specter Legacy Prologue
A Specter Legacy PrologueKelyns
 

Viewers also liked (17)

Presentation2
Presentation2Presentation2
Presentation2
 
Computer Hardware
Computer HardwareComputer Hardware
Computer Hardware
 
Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...
Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...
Corso di formazione "Informazione e Accoglienza 2.0 per operatori Info Point"...
 
Preston Chaplin Photography
Preston Chaplin PhotographyPreston Chaplin Photography
Preston Chaplin Photography
 
Destinations and Tourism Marketing Turistico 23
Destinations and Tourism Marketing Turistico 23Destinations and Tourism Marketing Turistico 23
Destinations and Tourism Marketing Turistico 23
 
Octombrie parizian sub emblema interculturalitatii - articol scris de Nicole...
Octombrie parizian sub emblema interculturalitatii  - articol scris de Nicole...Octombrie parizian sub emblema interculturalitatii  - articol scris de Nicole...
Octombrie parizian sub emblema interculturalitatii - articol scris de Nicole...
 
Prepeliţele ca sursă de profit
Prepeliţele ca sursă de profitPrepeliţele ca sursă de profit
Prepeliţele ca sursă de profit
 
Present to be forms
Present to be formsPresent to be forms
Present to be forms
 
Destination tourism marketing turistico n 22
Destination tourism marketing turistico n 22Destination tourism marketing turistico n 22
Destination tourism marketing turistico n 22
 
Hyman Charme 09 11 09 Final 1
Hyman Charme 09 11 09 Final 1Hyman Charme 09 11 09 Final 1
Hyman Charme 09 11 09 Final 1
 
Nurwulan Anova Baru
Nurwulan Anova BaruNurwulan Anova Baru
Nurwulan Anova Baru
 
Persoonlijk & Uniek!
Persoonlijk & Uniek!Persoonlijk & Uniek!
Persoonlijk & Uniek!
 
Ceramica neagră de marginea – O marcă românească de succes
Ceramica neagră de marginea – O marcă românească de succesCeramica neagră de marginea – O marcă românească de succes
Ceramica neagră de marginea – O marcă românească de succes
 
Can Pres Eng2
Can Pres Eng2Can Pres Eng2
Can Pres Eng2
 
сопроводительное письмо
сопроводительное письмосопроводительное письмо
сопроводительное письмо
 
Assemblea_Nazionale_UNPLI_Loano_Four_Tourism
Assemblea_Nazionale_UNPLI_Loano_Four_TourismAssemblea_Nazionale_UNPLI_Loano_Four_Tourism
Assemblea_Nazionale_UNPLI_Loano_Four_Tourism
 
A Specter Legacy Prologue
A Specter Legacy PrologueA Specter Legacy Prologue
A Specter Legacy Prologue
 

More from Maciej Zbrzezny

Programowanie reaktywne na platformie windows(ITAD)
Programowanie reaktywne na platformie windows(ITAD)Programowanie reaktywne na platformie windows(ITAD)
Programowanie reaktywne na platformie windows(ITAD)Maciej Zbrzezny
 
Rozszerzalne aplikacje w .NET (czyli MAF i MEF)
Rozszerzalne aplikacje w .NET(czyli MAF i MEF)Rozszerzalne aplikacje w .NET(czyli MAF i MEF)
Rozszerzalne aplikacje w .NET (czyli MAF i MEF)Maciej Zbrzezny
 
Wprowadzenie do Reactive Extensions (RX) dla .NET
Wprowadzenie do Reactive Extensions (RX) dla .NETWprowadzenie do Reactive Extensions (RX) dla .NET
Wprowadzenie do Reactive Extensions (RX) dla .NETMaciej Zbrzezny
 
Exam: 70-511 Enhancing Usability - Windows Application
Exam: 70-511 Enhancing Usability - Windows ApplicationExam: 70-511 Enhancing Usability - Windows Application
Exam: 70-511 Enhancing Usability - Windows ApplicationMaciej Zbrzezny
 
Wprowadzenie do MEF w .NET 4.0
Wprowadzenie do MEF w .NET 4.0Wprowadzenie do MEF w .NET 4.0
Wprowadzenie do MEF w .NET 4.0Maciej Zbrzezny
 
Dostosowanie I Personalizacja Aplikacji Web
Dostosowanie I Personalizacja Aplikacji WebDostosowanie I Personalizacja Aplikacji Web
Dostosowanie I Personalizacja Aplikacji WebMaciej Zbrzezny
 

More from Maciej Zbrzezny (6)

Programowanie reaktywne na platformie windows(ITAD)
Programowanie reaktywne na platformie windows(ITAD)Programowanie reaktywne na platformie windows(ITAD)
Programowanie reaktywne na platformie windows(ITAD)
 
Rozszerzalne aplikacje w .NET (czyli MAF i MEF)
Rozszerzalne aplikacje w .NET(czyli MAF i MEF)Rozszerzalne aplikacje w .NET(czyli MAF i MEF)
Rozszerzalne aplikacje w .NET (czyli MAF i MEF)
 
Wprowadzenie do Reactive Extensions (RX) dla .NET
Wprowadzenie do Reactive Extensions (RX) dla .NETWprowadzenie do Reactive Extensions (RX) dla .NET
Wprowadzenie do Reactive Extensions (RX) dla .NET
 
Exam: 70-511 Enhancing Usability - Windows Application
Exam: 70-511 Enhancing Usability - Windows ApplicationExam: 70-511 Enhancing Usability - Windows Application
Exam: 70-511 Enhancing Usability - Windows Application
 
Wprowadzenie do MEF w .NET 4.0
Wprowadzenie do MEF w .NET 4.0Wprowadzenie do MEF w .NET 4.0
Wprowadzenie do MEF w .NET 4.0
 
Dostosowanie I Personalizacja Aplikacji Web
Dostosowanie I Personalizacja Aplikacji WebDostosowanie I Personalizacja Aplikacji Web
Dostosowanie I Personalizacja Aplikacji Web
 

Recently uploaded

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...apidays
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 

Recently uploaded (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Study group 70 480 - Implementing an adaptive user interface

  • 1. Implementing an Adaptive User Interface StudyGroup 70-480: Programming in HTML5 with JavaScript and CSS3 Author: Maciej Zbrzezny
  • 2. 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
  • 3. 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.
  • 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. http://uxdesign.smashingmagazine.com/2012/12/10/creating-an- adaptive-system-to-enhance-ux/
  • 6. Example – Adaptive UI http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile- website/
  • 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, http://www.flickr.com/photos/brad_frost/616  TVs, smart watches, toasters 4723945/in/set-72157627712478230/
  • 8. Device Targeting- challenges challenges 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. Device Targeting - solution Different CSS for different device/media = Media Queries <link rel="stylesheet" type="text/css" href="core.css" media="screen" />
  • 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. 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. 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. 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. 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. Other things to remeber - Webapps need more than media queries (1)  Form factor detection  Browser detection  Function detection
  • 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  http://www.html5rocks.com/en/tutorials/detection/index.ht ml
  • 17. 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.
  • 18. 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
  • 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 (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==" >
  • 20. 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.
  • 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. 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. 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;}
  • 24. 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.
  • 25. 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.
  • 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 that's what detection is all about.
  • 27. 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

Editor's Notes

  1. http://www.html5rocks.com/en/tutorials/detection/index.htmlForm 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&apos;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: [ &quot;tv&quot;, ( navigator.userAgent.indexOf(&quot; Large Screen&quot;) &gt; = 0 &amp;&amp; navigator.userAgent.indexOf(&quot; GoogleTV/&quot;) &gt; = 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.
  2. You might wonder why we need the second line. Isn&apos;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&apos;s detective work! Our canvas detection is an example of a more general pattern for feature detection: &quot;Create a DOM element and see if it behaves like we expect&quot;. Its one of four standard feature detection techniques, nicely summed up in Mark Pilgrim&apos;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&apos;s where browser detection shines. Form factor detection is our intuition that it&apos;s important to build different UIs for smartphones versus desktops versus TVs, and so on. It&apos;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&apos;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&apos;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.