Responsive Enhancement

Sven Wolfermann | maddesigns

Responsive Bingo

Responsive Webdesign	Performance	Retina	Desktop
Mobile first	Progressive Enhancement	Content Strategy	Smartphone
Android	Content First	iOS	Flexible
Tablet	Responsive Images	Conditional Loading	Media Queries

Did you mean
Progressive Enhancement?

An escalator can never break – it can only become stairs.

Mitch Hedberg
(a comedian, not a web developer)

Web native features

no pixel perfection
unknown browser features
Interaction
you can't control the flow of content

Responsive Webdesign

solves many things

one URL, one code base, one deployment
all contents available (if not hidden)
Future friendly

moto.oakley.com

85.4MB page weight
471 HTTP requests
2 minutes 45 seconds until loading screen replaced with content
4 minutes 10 seconds until onLoad event

Oakley's monster page of baubles

85.4MB, 471 requests!

THIS IS NOT RWD!

moto.oakley.com fail

ok, ok, Oakley does it better now:
JUST 14.2MB, 291 request (more than 70MB less)

with mobile user-agent? 6.7MB, 114 requests :/

Oakley's Moto diet

RWD

has some issues

site tend to be too large for mobile
some content is hard to adapt: images, tables, ads, ...
IE8 doesn't understand media queries

Guy Podjarny's RWD performance tests

sites have nearly same weight on mobile as on desktop

Real World RWD Performance – Take 2

HTML5 input fields

Android Chrome vs iOS7

test native input styles http://nativeformelements.com/

Performance

Reduce image payload (the biggest effect)
Reduce JavaScript and CSS payload
Further optimize based on feature detection

Lightening Your Responsive Website Design With RESS

Cutting the mustard

The BBC test the browser support like this

if('querySelector' in document
  && 'localStorage' in window
  && 'addEventListener' in window) {
    // bootstrap the javascript application
  }

if browser supports
'querySelector',
'localStorage'
and 'addEventListener'
do hot stuff!

BBC Responsive News – Cutting the mustard

Modernizr

Client side feature detection

Modernizr is a JavaScript library that detects HTML5 & CSS3 features in the user's browser.

http://modernizr.com/

Modernizr

Modernizr adds classes to <html> based on their tests

<html class="js flexbox canvas canvastext webgl no-touch geolocation 
postmessage hashchange history boxshadow cssanimations csscolumns 
cssgradients csstransforms csstransforms3d csstransitions fontface 
video audio localstorage svg inlinesvg">

Modernizr features test: geolocation

Modernizr.geolocation // true or false

if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(show_map);
} else {
  // no native support; maybe try a fallback?
}

Modernizr

Another Sample: datepicker

<script src="modernizr.js"></script>

<script>
Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['jquery.datepicker.js', 'jquery.datepicker.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    });
  }
});
</script>

load jQuery datepicker library for browsers that don't have native datepickers

Conditional loading could become an important part of the content-first responsive design approach

Jeremy Keith (2011)

Conditional Loading for Responsive Designs

Conditional loading – Ajax-include pattern

Replace:

<a href="..." data-replace="/url/path/fragment.html">Latest Articles</a>

Before:

<a href="..." data-before="/url/path/fragment.html">Latest Articles</a>

After:

<a href="..." data-after="/url/path/fragment.html">Latest Articles</a>

init with jQuery:

$("[data-replace],[data-before],[data-after]").ajaxInclude();

An Ajax-Include Pattern for Modular Content

Conditional loading – Modernizr.load

Modernizr loads scripts and CSS based on media queries

Modernizr.load([
 {
  test: Modernizr.mq("only screen and (min-width: 1051px)"),
  yep: '/js/large.js'
 },
 {
  test: Modernizr.mq("only screen and (min-width: 600px) and (max-width: 1050px)"),
  yep: '/js/medium.js'
 },
 {
  test: Modernizr.mq("only screen and (min-width: 320px) and (max-width: 599px)"),
  yep: '/js/small.js'
 }
]);

you can use EM in media queries too ;)

Modernizr.load is not part of the "development" version

Modernizr.load won't be part of Modernizr 3.0, falls back to yepnopejs.com

Conditional Loading in Foundation Framework

Map Example

Display a static map image by default
Display an interactive map for large screens

<div data-interchange="[partials/static_map.html, (default)],
                       [views/interactive_map.html, (large)]">
Loading map...
</div>

Using Interchange to Load the Right HTML for the Right Browser

RequireJS

simple explained require.js is about three things:

Dependency management
Modularity
Dynamic script loading

can load modules on click – example: video gallery module (load markup and video asset on click)

Modernizr Server

Client features for the server

<?php
    include('modernizr-server.php');
    print 'The server knows:';
    foreach($modernizr as $feature=>$value) {
        print "
 $feature: "; print_r($value);
    }
?>

The server knows:
canvas: 1
geolocation: 1
crosswindowmessaging: 1
indexeddb: 0
hashchange: 1
...

https://github.com/jamesgpearce/modernizr-server