Your SlideShare is downloading. ×
0
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...
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
...
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
cont...
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-a...
RWD
has some issues
· site tend to be too large for mobile
· some content is hard to adapt: images, tables, ads, ...
· IE8...
Guy Podjarny's RWD performance tests

sites have nearly same weight on mobile as on desktop
Real World RWD Performance – T...
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 fe...
Browser Feature Detection
/
Testing browser features with Vanilla JS
Cutting the mustard
if('querySelector' in document
&& 'localStorage' in window
&&...
Modernizr
Client side feature detection

Modernizr is a JavaScript library that detects HTML5 & CSS3 features in
the user'...
Modernizr
throw in <head>
<head>
<script src="modernizr.js"></script>
</head>

Modernizr features test: geolocation
Modern...
Modernizr
Modernizr can load different files based on tests
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
...
Modernizr
Another Sample: datepicker
<script src="modernizr.js"></script>
<script>
Modernizr.load({
test: Modernizr.inputt...
Conditional loading
/
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 – window.matchMedia
Returns a new MediaQueryList object representing the parsed results
of the specifi...
Conditional loading – Modernizr.load
Modernizr loads scripts and CSS based on media queries
Modernizr.load([
{
test: Moder...
Conditional loading – pairing CSS & JS
holding CSS and JavaScript Breakpoints in sync
body:after {
content: 'small';
displ...
Conditional loading – pairing CSS & JS
holding CSS and JavaScript Breakpoints in sync
var size = window.getComputedStyle(d...
Conditional loading – Ajax-include pattern
Replace:
<a href="..." data-replace="latest/fragment">Latest Articles</a>

Befo...
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 ...
What?! UA-Sniffing is wild guessing
This is NOT a "mobile" detection!
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i))) {
if ...
Device Detection
/
Device Detection Libraries
· WURFL (Java/.NET/PHP) free *
· Scientiamobile (Java/.NET/PHP) commercial *
· Device Atlas (Ja...
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 ...
Client meets Server
use cookie info in code
Setting a file path based on window.innerWidth
<?php
// grab the cookie value
...
Client meets Server
use cookie info in code
<?php
if ($RESS["width"] >= 320 && $RESS["width"] <= 640) {
?>
<div class="mob...
Modernizr Server
Client features for the server
<?php
include('modernizr-server.php');
print 'The server knows:';
foreach(...
RESS

Responsive Web Design + Server Side Components

/
RESS

http://www.lukew.com/ff/entry.asp?1392

/
“ In a nutshell, RESS combines adaptive

layouts with server side component
(not full page) optimization. So a single
set ...
Sapient Nitro about RESS

http://www.youtube.com/embed/XhCXINNvmv8

/
Advantages of RESS
· Easier to navigate: The navigation structure can be customized for the
different tasks.
· Less page b...
Disadvantages of RESS
· More server resources: Dynamically building the HTML will increase
the load on the server.
· Cachi...
RESS in the wild? -> Adaptive Images

http://adaptive-images.com/

/
Adaptive Images

/
Adaptive Images
· Add .htaccess and adaptive-images.php to your document-root
folder.
· Add one line of JavaScript into th...
Adaptive Images
1. The HTML starts to load in the browser and a snippet of JS in the <head> writes a
session cookie, stori...
Adaptive Images
5. The PHP file looks for a cookie and finds that the user has a maximum screen size of
480px.
6. It compa...
Responsive Images
a topic for itself…
Responsive Images [german]

/
Detector
/
Detector (PHP RESS library)
combines UA-parsing and feature testing
· includes User Agent parser – record any useful infor...
Detector
1.· HTTP request hits server
2.· Detector compares User-Agent with database
3.· if known, classify device and get...
Detector device families
The default install of Detector will categorize browsers into one of three
families.
// families....
Detector sample
switch ads, basic sample
if ($ua->family == 'mobile-basic') {
include "/ads/simple.php";
} elseif ($ua->fa...
RESS examples
University of Notre Dame
West Virginia University
CNN
Scientiamobile

/
RESS isn't the holy grail (RWD isn't either)
RESS – further reading
Templating with Detector & Mustache for RESS
Is Adaptive Web Design Or RESS Better Than Responsive ...
One more thing!
/
Client Hints
Client Hints is a new proposal by Ilja Grigorik and will allow clients to
indicate a list of device and agent...
Client Hints
For example, given the following request header:
CH: dh=598, dw=384, dpr=2.0

The server knows that the clien...
Client Hints
ReSrc.it can handle client hints now

/
Questions?

Thanks for your attention!
Sven Wolfermann | maddesigns
http://maddesigns.de/RESS/

HTML5 slideshow by Google
...
RESS – Responsive Webdesign and Server Side Components
Upcoming SlideShare
Loading in...5
×

RESS – Responsive Webdesign and Server Side Components

4,659

Published on

Use a mixture of user agent detection and browser feature detection or a device detection library to enhance your responsive website.

Published in: Design, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,659
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "RESS – Responsive Webdesign and Server Side Components"

  1. 1. RESS RWD and Server Side Components Sven Wolfermann | maddesigns
  2. 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 /
  3. 3. www vs. m. desktop vs mobile /
  4. 4. desktop vs. mobile dividing pages large site (feature rich) vs. small size (performant) /
  5. 5. desktop vs tablet vs mobile dividing more pages? large site vs. tablet vs. small size vs. car vs. fridge vs. watch vs. … /
  6. 6. Responsive Web Design A List Apart article by Ethan Marcotte /
  7. 7. A List Apart is responsive too now
  8. 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. 9. RWD solves many things · one URL, one code base, one deployment · all contents available (if not hidden) · Future friendly /
  10. 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. 11. 85.4MB, 471 HTTP requests! THIS IS NOT RWD! Oakley's monster page of baubles /
  12. 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. 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. 14. Guy Podjarny's RWD performance tests sites have nearly same weight on mobile as on desktop Real World RWD Performance – Take 2 /
  15. 15. RWD is more Beyond Squishy: The Principles of Adaptive Design
  16. 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 /
  17. 17. Browser Feature Detection /
  18. 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. 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. 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. 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. 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 /
  23. 23. Conditional loading /
  24. 24. Conditional loading http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote-11.png
  25. 25. Conditional loading http://bradfrostweb.com/wp-content/uploads/2013/09/Keynote3.png
  26. 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. 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 ;) /
  28. 28. Conditional loading – pairing CSS & JS holding CSS and JavaScript Breakpoints in sync body:after { content: 'small'; display: none; } @media (min-width: 650px) { body:after { content: 'middle'; } } @media (min-width: 1200px) { body:after { content: 'large'; } } /
  29. 29. 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 /
  30. 30. Conditional loading – Ajax-include pattern Replace: <a href="..." data-replace="latest/fragment">Latest Articles</a> Before: <a href="..." data-before="latest/fragment">Latest Articles</a> After: <a href="..." data-after="latest/fragment">Latest Articles</a> init with jQuery: $("[data-replace],[data-before],[data-after]").ajaxInclude(); An Ajax-Include Pattern for Modular Content /
  31. 31. Browser-Sniffing
  32. 32. Browser-Sniffing remember the old days? Not? You lucky guy! UA-string history Browser-Sniffing went wrong /
  33. 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 /
  34. 34. What?! UA-Sniffing is wild guessing
  35. 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; } /
  36. 36. Device Detection /
  37. 37. 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
  38. 38. Device Detection Libraries Problems · updates are slow · not reliable /
  39. 39. Client meets server /
  40. 40. 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(); /
  41. 41. 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 /
  42. 42. 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 } ?> /
  43. 43. 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 /
  44. 44. RESS Responsive Web Design + Server Side Components /
  45. 45. RESS http://www.lukew.com/ff/entry.asp?1392 /
  46. 46. “ 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 /
  47. 47. Sapient Nitro about RESS http://www.youtube.com/embed/XhCXINNvmv8 /
  48. 48. 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 /
  49. 49. 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. /
  50. 50. RESS in the wild? -> Adaptive Images http://adaptive-images.com/ /
  51. 51. Adaptive Images /
  52. 52. 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. /
  53. 53. 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." /
  54. 54. 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/ /
  55. 55. Responsive Images a topic for itself… Responsive Images [german] /
  56. 56. Detector /
  57. 57. 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 /
  58. 58. 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 /
  59. 59. 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 } } /
  60. 60. 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; } /
  61. 61. RESS examples University of Notre Dame West Virginia University CNN Scientiamobile /
  62. 62. RESS isn't the holy grail (RWD isn't either)
  63. 63. 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 /
  64. 64. One more thing! /
  65. 65. 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 /
  66. 66. 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. /
  67. 67. Client Hints ReSrc.it can handle client hints now /
  68. 68. Questions? Thanks for your attention! Sven Wolfermann | maddesigns http://maddesigns.de/RESS/ HTML5 slideshow by Google /
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×