2. 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
/
8. 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/
/
9. RWD
solves many things
· one URL, one code base, one deployment
· all contents available (if not hidden)
· Future friendly
/
10. 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
11. 85.4MB, 471 HTTP requests!
THIS IS NOT RWD!
Oakley's monster page of baubles
/
12. 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
/
13. 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)
/
14. Guy Podjarny's RWD performance tests
sites have nearly same weight on mobile as on desktop
Real World RWD Performance – Take 2
/
16. 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
/
18. 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
/
19. Modernizr
Client side feature detection
Modernizr is a JavaScript library that detects HTML5 & CSS3 features in
the user's browser.
http://modernizr.com/
/
20. Modernizr
throw in <head>
<head>
<script src="modernizr.js"></script>
</head>
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?
}
/
21. 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 <html>
<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">
/
22. 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
/
26. 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
/
27. 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 ;)
/
33. 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
/
35. 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;
}
/
41. 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();
/
42. Client meets Server
use cookie info in code
Setting a file path based on window.innerWidth
<?php
// grab the cookie value
$screenWidth = $_COOKIE['RESS'];
// set the img path var
if ($screenWidth <= 320) {
$imgPath = "320";
} else if ($screenWidth < 960) {
$imgPath = "640";
} else {
$imgPath = "960";
}
// print out our image link
print "<img src='/rwd/images/".$imgPath."/car.jpg' alt='Car' />";
?>
http://www.netmagazine.com/tutorials/getting-started-ress
/
43. Client meets Server
use cookie info in code
<?php
if ($RESS["width"] >= 320 && $RESS["width"] <= 640) {
?>
<div class="mobile-ad max-320">
<?php include "/ads/320.php"?>
</div>
<?php } ?>
/
44. 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
/
47. “ In a nutshell, RESS combines adaptive
layouts with server side component
(not full page) optimization. So a single
set of page templates define an entire
Web site for all devices but key
components within that site have
device-class specific implementations
that are rendered server side. ”
—Luke Wroblewski @lukew
http://www.lukew.com/ff/entry.asp?1392
/
49. Advantages of RESS
· Easier to navigate: The navigation structure can be customized for the
different tasks.
· Less page bloat: Instead of relying on display: none; or visibility:
hidden; to hide page elements for mobile devices, removed from the
HTML or CSS.
· Faster load time: Unnecessary CSS/JavaScript can be removed from
the HTML
/
50. Disadvantages of RESS
· More server resources: Dynamically building the HTML will increase
the load on the server.
· Caching: A need for a better caching mechanism
· Requires device detection: Mobile users will need to be detected.
Device detection is unreliable.
/
51. RESS in the wild? -> Adaptive Images
http://adaptive-images.com/
/
53. Adaptive Images
· Add .htaccess and adaptive-images.php to your document-root
folder.
· Add one line of JavaScript into the <head> of your site.
· Add your CSS Media Query values into $resolutions in the PHP file.
/
54. Adaptive Images
1. The HTML starts to load in the browser and a snippet of JS in the <head> writes a
session cookie, storing the visitor's screen size in pixels.
2. The browser then encounters an <img> tag and sends a request to the server for that
image. It also sends the cookie, because that’s how browsers work.
3. Apache receives the request for the image and immediately has a look in the website's
.htaccess file, to see if there are any special instructions for serving files.
4. There are! The .htaccess says "Dear server, any request you get for a JPG, GIF, or
PNG file please send to the adaptive-images.php file instead."
/
55. Adaptive Images
5. The PHP file looks for a cookie and finds that the user has a maximum screen size of
480px.
6. It compares the cookie value with all $resolution sizes that were configured, and
decides which matches best. In this case, an image maxing out at 480px wide.
7. It then has a look inside the /ai-cache/480/ folder to see if a rescaled image already
exists.
8. We'll pretend it doesn’t - the PHP then goes to the actual requested URI to find the
original file.
9. It checks the image width. If that's smaller than the user's screen width it sends the
image.
10. If it's larger, the PHP creates a down-scaled copy and saves that into the
/ai-cache/480/ folder ready for the next time it's needed, and sends it to the user.
http://adaptive-images.com/
/
58. Detector (PHP RESS library)
combines UA-parsing and feature testing
· includes User Agent parser – record any useful information (like OS or
device name)
· includes Modernizr Server
no need for commercial device detection libraries
add your own feature tests and store the results using Modernizr's
addTest() API
/
59. Detector
1.· HTTP request hits server
2.· Detector compares User-Agent with database
3.· if known, classify device and get back content
4.· if not, Modernizr makes feature detection, stores cookie
5.· reloads site, gives back specified content
6.· stores UA-String/features combination for later use
How Detector works
/
60. Detector device families
The default install of Detector will categorize browsers into one of three
families.
// families.json
{
"tablet": {
"isTablet": true
},
"mobile-advanced": {
"isMobile": true,
"features": ["cssanimations","localstorage","deviceorientation"]
},
"mobile-basic": {
"isMobile": true
},
"desktop": {
"isComputer": true
}
}
/
61. Detector sample
switch ads, basic sample
if ($ua->family == 'mobile-basic') {
include "/ads/simple.php";
} elseif ($ua->family == 'mobile-advanced') {
include "/ads/responsive-ads.php";
} else {
include "/ads/desktop.php";
}
Detector video sample
if ($ua->video->h264 || $ua->video->webm) {
print $html5Embed; // YouTube's <iframe> code
} else {
print $simpleLink;
}
/
64. RESS – further reading
Templating with Detector & Mustache for RESS
Is Adaptive Web Design Or RESS Better Than Responsive Design For
SEO?
Adaptation: Why responsive design actually begins on the server
/
66. Client Hints
Client Hints is a new proposal by Ilja Grigorik and will allow clients to
indicate a list of device and agent specific preferences. Spec Draft
(request)
GET /img.jpg HTTP/1.1
User-Agent: Awesome Browser
Accept: image/webp, image/jpg
CH: dpr=2.0
(response)
HTTP/1.1 200 OK
Server: Awesome Server
Content-Type: image/jpg
Content-Length: 124523
Vary: CH
(image data)
Automating DPR switching with Client-Hints
/
67. Client Hints
For example, given the following request header:
CH: dh=598, dw=384, dpr=2.0
The server knows that the client's screen height is 598px, width is
384px, as measured by density independent pixels on the device, and
that the device pixel ratio is 2.0.
/