Download - Responsive Enhancement
![Page 1: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/1.jpg)
Responsive EnhancementSven Wolfermann | maddesigns
![Page 2: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/2.jpg)
![Page 3: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/3.jpg)
Bullshit Bingo?
![Page 4: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/4.jpg)
Responsive Bingo
ResponsiveWebdesign
Performance Retina Desktop
Mobile firstProgressive
EnhancementContent Strategy Smartphone
Android Content First iOS Flexible
Tablet Responsive Images Conditional Loading Media Queries
![Page 5: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/5.jpg)
Did you mean Progressive Enhancement?
![Page 6: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/6.jpg)
PE? Yeah, kind of.
http://alistapart.com/article/understandingprogressiveenhancement
![Page 7: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/7.jpg)
![Page 8: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/8.jpg)
An escalator can neverbreak – it can only becomestairs.
—Mitch Hedberg (a comedian, not a web developer)
“”
![Page 9: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/9.jpg)
Responsive Web Design
A List Apart article by Ethan Marcotte
![Page 10: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/10.jpg)
![Page 11: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/11.jpg)
first website
http://info.cern.ch/hypertext/WWW/TheProject.html
![Page 12: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/12.jpg)
Web native features
no pixel perfectionunknown browser featuresInteractionyou can't control the flow of content
····
![Page 13: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/13.jpg)
Responsive Webdesign
solves many things
one URL, one code base, one deploymentall contents available (if not hidden)Future friendly
···
![Page 14: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/14.jpg)
![Page 15: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/15.jpg)
![Page 16: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/16.jpg)
moto.oakley.com
·
Oakley's monster page of baubles
85.4MB page weight
471 HTTP requests
2 minutes 45 seconds until loading screen replacedwith content
4 minutes 10 seconds until onLoad event
·
·
·
·
![Page 17: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/17.jpg)
85.4MB, 471 requests!
THIS IS NOT RWD!
![Page 18: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/18.jpg)
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
![Page 19: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/19.jpg)
RWD
has some issues
site tend to be too large for mobilesome content is hard to adapt: images, tables, ads, ...IE8 doesn't understand media queries
···
![Page 20: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/20.jpg)
Guy Podjarny's RWD performance tests
sites have nearly same weight on mobile as on desktopReal World RWD Performance – Take 2
![Page 21: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/21.jpg)
go mobile first!
![Page 22: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/22.jpg)
Mobile first == Smartphone first
![Page 23: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/23.jpg)
HTML5 input fields
Android Chrome vs iOS7
test native input styles http://nativeformelements.com/
![Page 24: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/24.jpg)
Beyond Squishy: The Principles of Adaptive Design
![Page 25: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/25.jpg)
Performance is our biggest issue
![Page 26: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/26.jpg)
Performance
Reduce image payload (the biggest effect)Reduce JavaScript and CSS payloadFurther optimize based on feature detection
···
Lightening Your Responsive Website Design With RESS
![Page 27: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/27.jpg)
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
![Page 28: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/28.jpg)
Modernizr
Client side feature detection
Modernizr is a JavaScript library that detects HTML5 & CSS3features in the user's browser.http://modernizr.com/
![Page 29: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/29.jpg)
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?}
![Page 30: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/30.jpg)
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 nativedatepickers
![Page 31: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/31.jpg)
Conditional loading
![Page 32: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/32.jpg)
Conditional loadingcould become animportant part of thecontent-first responsivedesign approach
—Jeremy Keith (2011)
“
”
Conditional Loading for Responsive Designs
![Page 33: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/33.jpg)
Conditional loading
http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote-11.png
![Page 34: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/34.jpg)
Conditional loading
http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote3.png
![Page 35: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/35.jpg)
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
![Page 36: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/36.jpg)
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
![Page 37: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/37.jpg)
Conditional Loading in Foundation Framework
Map Example
Display a static map image by defaultDisplay 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
![Page 38: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/38.jpg)
RequireJS
simple explained require.js is about three things:
Dependency managementModularityDynamic script loading
can load modules on click – example: video gallery module (loadmarkup and video asset on click)
···
![Page 39: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/39.jpg)
Client meets server
![Page 40: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/40.jpg)
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: 1geolocation: 1crosswindowmessaging: 1indexeddb: 0hashchange: 1...
https://github.com/jamesgpearce/modernizr-server
![Page 41: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/41.jpg)
RESSResponsive Web Design + Server Side Components
![Page 43: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/43.jpg)
Browser-Sniffing
![Page 44: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/44.jpg)
Device Detection
![Page 45: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/45.jpg)
Device Detection Problems
databases are old just a second laterupdates are slownot reliable
·
··
WTFmobile
![Page 47: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/47.jpg)
Adaptive Images
![Page 48: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/48.jpg)
Responsive Images a topic for itself…
Responsive Images [german]
![Page 49: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/49.jpg)
Responsive Images Art Direction
A List Apart article about Responsive Webdesign
![Page 50: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/50.jpg)
![Page 51: Responsive Enhancement](https://reader033.vdocument.in/reader033/viewer/2022051400/54c7bfd34a7959395c8b4579/html5/thumbnails/51.jpg)
Thanks for your attention!
Sven Wolfermann | maddesignsTwitter: @maddesignsWeb: http://maddesigns.de