responsive enhancement
DESCRIPTION
Responsive Webdesign is much more than squishing containers and setting breakpoints. Performance is often a big problem. How to achieve performance with progressive enhancement, conditional loading and RESS. Original Slideshow: http://maddesigns.de/responsive-enhancement/TRANSCRIPT
Responsive EnhancementSven Wolfermann | maddesigns
Bullshit Bingo?
Responsive Bingo
ResponsiveWebdesign
Performance Retina Desktop
Mobile firstProgressive
EnhancementContent Strategy Smartphone
Android Content First iOS Flexible
Tablet Responsive Images Conditional Loading Media Queries
Did you mean Progressive Enhancement?
PE? Yeah, kind of.
http://alistapart.com/article/understandingprogressiveenhancement
An escalator can neverbreak – it can only becomestairs.
—Mitch Hedberg (a comedian, not a web developer)
“”
Responsive Web Design
A List Apart article by Ethan Marcotte
first website
http://info.cern.ch/hypertext/WWW/TheProject.html
Web native features
no pixel perfectionunknown browser featuresInteractionyou can't control the flow of content
····
Responsive Webdesign
solves many things
one URL, one code base, one deploymentall contents available (if not hidden)Future friendly
···
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
·
·
·
·
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 mobilesome 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 desktopReal World RWD Performance – Take 2
go mobile first!
Mobile first == Smartphone first
HTML5 input fields
Android Chrome vs iOS7
test native input styles http://nativeformelements.com/
Beyond Squishy: The Principles of Adaptive Design
Performance is our biggest issue
Performance
Reduce image payload (the biggest effect)Reduce JavaScript and CSS payloadFurther 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 & CSS3features 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 nativedatepickers
Conditional loading
Conditional loadingcould become animportant part of thecontent-first responsivedesign approach
—Jeremy Keith (2011)
“
”
Conditional Loading for Responsive Designs
Conditional loading
http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote-11.png
Conditional loading
http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote3.png
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 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
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)
···
Client meets server
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
RESSResponsive Web Design + Server Side Components
Browser-Sniffing
Device Detection
Device Detection Problems
databases are old just a second laterupdates are slownot reliable
·
··
WTFmobile
Adaptive Images
Responsive Images a topic for itself…
Responsive Images [german]
Responsive Images Art Direction
A List Apart article about Responsive Webdesign
Thanks for your attention!
Sven Wolfermann | maddesignsTwitter: @maddesignsWeb: http://maddesigns.de