Adaptive Design Standards for All Environments

The Future of Responsive
Design Standards
Standards will evolve to better adapt to our users'
needs and environments.
November 5, 2014

Brian Fegan
Associate Director of
Creative Development

How would you...
include additional HTML at larger breakpoints?
serve high resolution video based on a user's connection speed?
increase text size based on a user's distance to the screen?
adapt layouts and fonts based on a user's region?

User Agent Detection
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i))) {
$('body').addClass('mobile');
} else {
$('body').addClass('desktop');
}
.desktop .button { height:1em; }
.mobile .button { height:2em; }

Viewport CSS Classes
var $body = $('body');
$(window).resize(function(){
var width = $body.width()
if (width < 480) {
$body.addClass('mobile');
} else {
$body.addClass('desktop');
}
});
.desktop .button { height:1em; }
.mobile .button { height:2em; }

Media Queries!
@media only screen and (max-width: 480px) {
/* insert magic here */
}

Now What?
Reduce Javascript
Evolve HTML and CSS
Think Beyond the Browser

Reduce JavaScript
Managing input device
Geolocation
Retrieving additional content and images
Interfacing with SDKs and HTML5 Device APIs

Responsive Images
Adaptive Images (.htaccess, PHP)
Cookie-based solution (JS, PHP)
Pure JavaScript Replacement
$('div.img').responsiveImages( {large:'1025px', medium:'481px'} );
<div class="img" data-src-lg="lg.jpg" data-src-md="md.jpg" data-src="def.jpg"></div>
<noscript><img src="default.jpg" alt="SEO Alt Tag" /></noscript>

The <picture> Element
<picture>
<source srcset="large.jpg" media="(min-width:1025px)">
<source srcset="medium.jpg" media="(min-width:481px)">
<source srcset="small.jpg">
<img src="fallback.jpg" alt="SEO Alt Tag">
</picture>

How would you...
...include additional HTML at larger breakpoints?

AJAX
var hasSidebar = false;
var $body = $(body);
var $window = $(window);
function addSidebar() {
if ($body.hasClass('desktop')) {
hasSidebar = true;
$window.off('resize.sidebar');
$.ajax({
url: 'sidebar.html',
success: function(html) {
$('#sidebar').append(html);
}
});
}
}
$window.on('resize.sidebar', addSidebar);
addSidebar();

Link tags could work for HTML
<link href="sidebar.html" for="sidebar" rel="html" media="(min-width: 40em)">
<aside id="sidebar">...</aside>
A link tag plus media query could include an HTML file
Search engines would be able to access it

Level 4 Media Queries
scripting: enabled, none, or intitial-only
hover/any-hover: none, hover, or on-demand
pointer/any-pointer: none, coarse or fine
light-level: dim, normal or washed

Scripting Media Query

<link href="noscript.css" rel="stylesheet" media="not (scripting)">

<link href="noscript.html" for="sidebar" rel="html" media="not (scripting)">
<aside id="noscript">...</aside>

Has Touch?
if ('ontouchstart' in window) {
$('body').addClass('has-touch');
} else {
$('body').addClass('no-touch');
}
.no-touch {
/* hover styles */
}

Hover Media Query
@media only screen and (any-hover) {
/* hover styles */
}

Pointer Media Query
@media only screen and not (any-pointer) {
/* touch input styles */
}
@media only screen and (pointer:coarse) {
/* wii controller styles */
}

Ambient Light Events API
$(window).on('devicelight', function(e) {
if (e.value < 50) {
$('body').addClass('dim');
} else if (e.value < 10000) {
$('body').addClass('normal');
} else {
$('body').addClass('bright');
}
});
body.bright {
/* bright styles */
}

Light-Level Media Query
@media screen and (light-level: washed) {
/* washed styles */
}

Device & Network APIs
as Media Queries
connection-metered: none or connection-metered
connection-bandwidth: measured in Mbs
proximity: meters from sensor
user-media: none, audio, or video
network-discovery: none or network-discovery

How would you...
...serve high resolution video based on a user's connection speed?

Dirty Network Speed Check
// load a 2MB image and check the time diff
var ts = new Date().getTime();
$('<img>').attr('src','test.jpg').on('load', function(){
var diff = (new Date().getTime()) - ts;
if (diff < 1000) {
// slow
} else {
// fast
}
});

Network Information API
var connection = (navigator.connection ||
navigator.mozConnection ||
navigator.webkitConnection);
if (connection && !connection.metered && connection.bandwidth > 2) {
$('body').addClass('hi-rez');
} else
$('body').addClass('low-rez');
}

Connection Media Queries
@media screen and not connection-metered and (min-connection-bandwidth: 2Mbs) {
/* hi-rez media */
}

How would you...
...increase text size based on a user's distance to the screen?

Proximity Events API
$(window).on('deviceproximity', function(e) {
if ( (e.value / 100) > 3 ) {
$(body).addClass('distant');
} else {
$(body).addClass('near');
}
});

Proximity Media Query
@media screen and (min-proximity: 3m) {
/* far from screen styles */
}

Get User Media API
if (navigator.getUserMedia) {
navigator.getUserMedia (
{ video:true, audio:true },
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Do something with the video here, e.g. video.play()
},
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}

User Media Media Query
<link href="video.css" rel="stylesheet" media="(user-media: video)">
<link href="audio.css" rel="stylesheet" media="(user-media: audio)">

Network Service Discovery API
function showServices( services ) {
// Show a list of all the services provided
for(var i = 0, l = services.length; i < l; i++)
console.log( services[i].name + '(' + services[i].type + ')' );
}
navigator.getNetworkServices([
'zeroconf:_boxee-jsonrpc._tcp',
'upnp:urn:schemas-upnp-org:service:ContentDirectory:1'
]).then(showServices);

Network Discovery Media Query
.remote-control { display: none; }
@media screen and (network-discovery) {
.remote-control { display: block; }
}

Evolving Media Queries
region: country codes
speed: meters per second
sound-level: normal, loud, or headset

How would you...
...adapt layouts and fonts based on a user's region?

navigator.geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
console.log('Latitude: ' + position.coords.latitude);
console.log('Longitude: ' + position.coords.longitude);
// inject google maps...
// call reverse geocode service to obtain country code...
});
} else {
console.log('No geolocation for you!);
}

IP Detection Service
<script src="http://ip-detection.com/service.js"></script>
...
var country = geoip_country_code();
if (country == 'RU') {
$('head').append('<link href="russian.css" rel="stylesheet">');
}

Region Media Query

<link href="russian.css" rel="stylesheet" media="(region: RU)">

Speed Media Query
@media screen and (min-speed: 3m/s) {
/* if walking, jogging or running */
}

Sound Level Media Query
@media screen and (sound-level: loud) {
/* hide media or prompt user to plug in headphones */
}

Emotion Markup Language
@media screen and emotion and (emotion-level: happy) {
/* rainbow and unicorn styles */
}

Thank You
@feganb
brian.fegan@akqa.com
www.linkedin.com/in/feganbrian/

Adaptive Design Standards for All Environments

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Adaptive Design Standards for All Environments

Ähnlich wie Adaptive Design Standards for All Environments (20)

Adaptive Design Standards for All Environments