Use a mixture of user agent detection and browser feature detection or a device detection library to enhance your responsive website.
Text of RESS – Responsive Webdesign and Server Side Components
RESS RWD and Server Side Components Sven Wolfermann | maddesigns
Sven Wolfermann (36) Freelancer for modern web development (HTML5, CSS3, jQuery) from Berlin CSS3 Adventskalender 2010/2011 wrotes articles and post for T3N-, PHP- and Webstandards-Magazin (new: Screengui.de) mobile Geek Twitter: @maddesigns Web: http://maddesigns.de /
www vs. m. desktop vs mobile /
desktop vs. mobile dividing pages large site (feature rich) vs. small size (performant) /
desktop vs tablet vs mobile dividing more pages? large site vs. tablet vs. small size vs. car vs. fridge vs. watch vs. /
Responsive Web Design A List Apart article by Ethan Marcotte /
A List Apart is responsive too now
Responsive Web Design Flexible grids, based on percentage units Variable image and video sizes images fit into grid CSS3 media queries image source: http://macrojuice.com/ /
RWD 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
85.4MB, 471 HTTP requests! THIS IS NOT RWD! Oakley's monster page of baubles /
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 RWD (basically) /
Guy Podjarny's RWD performance tests sites have nearly same weight on mobile as on desktop Real World RWD Performance Take 2 /
RWD is more Beyond Squishy: The Principles of Adaptive Design
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 /
Browser Feature Detection /
Testing browser features with Vanilla JS Cutting the mustard 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 throw in 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 Modernizr can load different files based on tests Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); Modernizr.load is not part of the "development" version Modernizr adds classes to /
Modernizr Another Sample: datepicker load jQuery datepicker library for browsers that don't have native datepickers /
Conditional loading window.matchMedia Returns a new MediaQueryList object representing the parsed results of the specified media query string. if (window.matchMedia("(min-width: 40em)").matches) { /* load secondary stuff */ } matchMedia Polyfill Modernizr.load and Picturefill uses matchMedia for example MDN Window.matchMedia /
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 ;) /
Conditional loading pairing CSS & JS holding CSS and JavaScript Breakpoints in sync var size = window.getComputedStyle(document.body,':after') .getPropertyValue('content'); if (size == 'large') { // Load some more content. } Conditional CSS /
Conditional loading Ajax-include pattern Replace: Latest Articles Before: Latest Articles After: Latest Articles init with jQuery: $("[data-replace],[data-before],[data-after]").ajaxInclude(); An Ajax-Include Pattern for Modular Content /
Browser-Sniffing
Browser-Sniffing remember the old days? Not? You lucky guy! UA-string history Browser-Sniffing went wrong /
Browser-Sniffing is hard and unreliable For example, Safari user agent string on an iOS7 iPhone: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/546.10 (KHTML, like Gecko) Version/6.0 Mobile/7E18WD Safari/8536.25 often browsers aims other browsers detecting the "right" user agent is complicated Parsing UA string is not a regex job UA-Detection libraries /
What?! UA-Sniffing is wild guessing
This is NOT a "mobile" detection! if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("mobile_redirect=false") == -1) { window.location = "http://m.yoursite.com/"; } } more like this // Check if UA is mobile (from http://detectmobilebrowsers.com/) if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry |blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris |kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)? |phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian |treo|up.(browser|link)|vodafone|wap|windows (ce|phone) |xda|xiino/i.test(agent) { isUAMobile = true; } /
Device Detection /
Device Detection Libraries WURFL (Java/.NET/PHP) free * Scientiamobile (Java/.NET/PHP) commercial * Device Atlas (Java/.NET/PHP) commercial Netbiscuits' Device Library commercial 51degrees (.NET, C, Java, PHP) free limited / commercial Open DDR (Java/.net) Open Source Mobile Detect (PHP) Open Source * / free with restricted license
Device Detection Libraries Problems updates are slow not reliable /
Client meets server /
Client meets Server set browser width cookie with JS RESS = {}; RESS.writeCookie = function (name, value) { //cookie code } //Store width in a cookie RESS.storeSizes = function () { //Get screen width var width = window.innerWidth; // Set a cookie with the client side capabilities. RESS.writeCookie("RESS", "width." + width); } RESS.storeSizes(); /
Client meets Server use cookie info in code Setting a file path based on window.innerWidth http://www.netmagazine.com/tutorials/getting-started-ress /
