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

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/

5. Example – Google Instant

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