Responsive Enhancement

Sven Wolfermann | maddesigns

Bullshit Bingo?

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?

PE? Yeah, kind of.


M&M Peanut

An escalator can never break – it can only become stairs.
Mitch Hedberg
(a comedian, not a web developer)

Responsive Web Design

RWD Origin

first website

Web native features

Responsive Webdesign

solves many things

resizing browser

Picard Facepalm 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 :/


has some issues

Guy Podjarny's RWD performance tests

sites have nearly same weight on mobile as on desktop

go mobile first!

Mobile first == Smartphone first

HTML5 input fields

Android Chrome vs iOS7

test native input styles

Performance is our biggest issue


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
and 'addEventListener'
do hot stuff!


Client side feature detection

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


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) {
} else {
  // no native support; maybe try a fallback?


Another Sample: datepicker

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

  nope: ['jquery.datepicker.js', 'jquery.datepicker.css'],
  complete: function () {
      dateFormat: 'yy-mm-dd'

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

Conditional loading

Conditional loading could become an important part of the content-first responsive design approach
Jeremy Keith (2011)

Conditional loading

Conditional loading

Conditional loading – Ajax-include pattern


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


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


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

init with jQuery:


Conditional loading – Modernizr.load

Modernizr loads scripts and CSS based on media queries

  test:"only screen and (min-width: 1051px)"),
  yep: '/js/large.js'
  test:"only screen and (min-width: 600px) and (max-width: 1050px)"),
  yep: '/js/medium.js'
  test:"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

Conditional Loading in Foundation Framework

Map Example

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


RequiredJS Logo

simple explained require.js is about three things:


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

Client meets server

Modernizr Server

Client features for the server

    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 ...

Responsive Web Design + Server Side Components



Device Detection

Device Detection Problems

screenshot device detection failed

RESS in the wild? -> Adaptive Images

Adaptive Images

Responsive Images
a topic for itself…

Responsive Images Art Direction