CHRISTOPHER SCHMITT            @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN                HTML5tx 2013
CHRISTOPHER SCHMITT
WHY DON’T WE ASKTHE BROWSER?             (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)http://www.useragentstring.com/                                  (cc) flic.kr/p/vUBHv
Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)http://www.useragentstring.com/                         ...
Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://...
Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://...
FEATURE TESTINGvs. BROWSER SNIFFING123
FEATURE TESTINGvs. BROWSER SNIFFING1    Browser width23
A scripting approach        var myWidth = 0, myHeight = 0;        if( typeof( window.innerWidth ) == number ) {          /...
The jQuery approach       // returns width of browser viewport       $(window).width();       // returns height of browser...
CSS media queries// default, mobile-1st CSS rules devices go here@media screen and (min-width: 480px) { ... }@media screen...
(cc) flic.kr/p/8Lo5Gk
BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
FEATURE TESTINGvs. BROWSER SNIFFING1    Browser width2    Screen resolution3
72            PPIHAS SERVED US WELL                (cc) flic.kr/p/6tjjRP
72 points-per-inch =72 pixels-per-inch
96            PPIIF A WINDOWS USER
72 points-per-inchx [1+(1/3)]= 96 PPI
“RETINA” DISPLAYS          300ppi at 12 inches from the eyes                                              78μm            ...
240    14472 PPI
“   [In 2013, Intel sees their    product line] offer a higher    resolution experience than a    top-of-the-line 1080p HDT...
72 PPI
240
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
FEATURE TESTINGvs. BROWSER SNIFFING1    Browser width2    Screen resolution3    Bandwidth
SPEED TESTSHINDER SPEED,USER EXPERIENCE             (cc) flic.kr/p/4DziUN
“   Testing for speed of an    internet connection is like    stepping in front of a car to see    how fast it is.”       ...
“   Testing for speed of an    internet connection is like    stepping in front of a car to see    how fast it is.”“   But...
Speed test imagehttps://github.com/adamdbradley/foresight.js
Speed test image              +50khttps://github.com/adamdbradley/foresight.js
Native speed test   // @Modernizrs network-connection.js   connection = navigator.connection || {               type: 0 },...
IMGGIMME THAT OLD SCHOOL123
IMGGIMME THAT OLD SCHOOL1    .htaccess23
Filament .htaccess# Responsive Images# Mobile-First images that scale responsively and responsibly# Copyright 2010, Scott ...
Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/ru...
“   ...the server has no way to    know what resolution the    client’s device is, so it can’t    send the appropriately s...
http://adaptive-images.com/
ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
IMGGIMME THAT OLD SCHOOL1    .htaccess2    <picture> and/or srcset3
media queries in HTML<video controls>  <source type="video/mp4" src="video/windowsill_small.mp4"media="all and (max-width:...
<picture> patch  <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">      <!-- <source src="sm...
ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
@srcset standard?  <h1><img alt="The Breakfast Combo"      src="banner.jpeg"      srcset="banner-HD.jpeg 2x,            ba...
IMGGIMME THAT OLD SCHOOL1    .htaccess2    <picture>3    HiSRC
Set, forget it HiSRC<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="h...
Set, forget it HiSRC<div class="hisrc"> <img src="halloween-mobile-1st.png"   data-1x="halloween-x1.png"   data-2x="hallow...
Set, forget it HiSRC<div class="hisrc"> <img src="halloween-mobile-1st.png"   data-1x="halloween-x1.png"   data-2x="hallow...
SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
DO NATIVE SPEED          TEST FOR MOBILE          DEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection...
Check pixel density...$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) {   $.hisrc.devicePixelRatio ...
Force speed test              +50khttps://github.com/adamdbradley/foresight.js
LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE
BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN
FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2
2 TRICK PONY
CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
http://mediaqueri.es/
CSS media queries// default, mobile-1st CSS rules devices go here@media screen and (min-width: 480px) { ... }@media screen...
Single pixel GIF
Single pixel GIF
Single pixel GIF
Single pixel GIF
Single pixel GIF $.hisrc.defaults = {     useTransparentGif: true,http://www.w3.org/community/respimg/2012/04/06/responsiv...
Single pixel GIF$.hisrc.defaults = {    useTransparentGif: true,    transparentGifSrc: data:image/gif;base64,R0lGODlhAQABA...
Single pixel GIF$.hisrc.defaults = {    useTransparentGif: true,    transparentGifSrc: http://example.com/spg.gif,   17+  ...
2 APPROACHES,1 SIMPLE SOLUTION.    https://github.com/teleject/hisrc
2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN    https://github.com/teleject/hisrc
WORKAROUNDS &TRICKS123          (cc) flic.kr/p/64fGf6
WORKAROUNDS &TRICKS1   background-size: auto23                    (cc) flic.kr/p/64fGf6
http://fittextjs.com/
background-size: 100%<a href="example.com/link">Download on Github</a>.download a {   padding: .095em .8em;  background: u...
WORKAROUNDS &TRICKS1   background-size: auto2   SVG3                    (cc) flic.kr/p/64fGf6
Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
PNG 16kb           SVG 7kb17+   9+    11.6+   5+   9+
HTML5 Boilerplate<!doctype html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"lang="en"><![endif]--><!--[if IE...
jQuery checkvar checkBrowser = $(html).hasClass(lt-ie9);<div class="svgswap">  <img src="example.svg"  data-svgswap="examp...
http://raphaeljs.com/
WORKAROUNDS &TRICKS1   background-size: auto2   SVG3   font-based solutions                     (cc) flic.kr/p/64fGf6
“   ...if you use <meta    charset="utf-8"> (you should    be for HTML5), you’re adding    common Unicode characters    li...
Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
http://css-tricks.com/examples/IconFont/
Font-based icons<style> [data-icon]:before {   font-family: icon-font;   content: attr(data-icon); }</style><a href="http:...
WORKAROUNDS &TRICKS1   background-size: auto2   SVG3   font-based solutions4   compressed JPEGs                     (cc) fl...
IMGGIMME THAT NEW SCHOOL123
IMGGIMME THAT NEW SCHOOL1    simple design for users23           #rwdimg
IMGGIMME THAT NEW SCHOOL1    simple design for users2   browser, server handshake3           #rwdimg
IMGGIMME THAT NEW SCHOOL1    simple design for users2   browser, server handshake3   same, several formats           #rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
#rwdimg
<link rel="shortcut icon" href="/assets/favicon.ico" />                        #rwdimg
<link rel="apple-touch-icon-precomposed" sizes="144x144"   href="apple-touch-icon-144x144-precomposed.png" /><link rel="ap...
#rwdimg
THANK YOU!CHRISTOPHER SCHMITT                                    @teleject                http://goo.gl/gSYmSThe Non Break...
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in …5
×

[html5tx] Adaptive Images in Responsive Web Design

7,325 views

Published on

Slides from my talk at HTML5tx 2013.

Thanks to all the staff and volunteers at HTML5tx for putting on the event!

Published in: Technology

[html5tx] Adaptive Images in Responsive Web Design

  1. 1. CHRISTOPHER SCHMITT @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN HTML5tx 2013
  2. 2. CHRISTOPHER SCHMITT
  3. 3. WHY DON’T WE ASKTHE BROWSER? (cc) flic.kr/p/vUBHv
  4. 4. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  5. 5. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  6. 6. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  7. 7. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  8. 8. FEATURE TESTINGvs. BROWSER SNIFFING123
  9. 9. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  10. 10. A scripting approach var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == number ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in standards compliant mode myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; }http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  11. 11. The jQuery approach // returns width of browser viewport $(window).width(); // returns height of browser viewport $(window).height(); // returns width of HTML document $(document).width(); // returns height of HTML document $(document).height();http://api.jquery.com/width/ & http://api.jquery.com/height/
  12. 12. CSS media queries// default, mobile-1st CSS rules devices go here@media screen and (min-width: 480px) { ... }@media screen and (min-width: 600px) { ... }@media screen and (min-width: 768px) { ... }@media screen and (min-width: 910px) { ... }
  13. 13. (cc) flic.kr/p/8Lo5Gk
  14. 14. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  15. 15. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  16. 16. 72 PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  17. 17. 72 points-per-inch =72 pixels-per-inch
  18. 18. 96 PPIIF A WINDOWS USER
  19. 19. 72 points-per-inchx [1+(1/3)]= 96 PPI
  20. 20. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μmgoo.gl/zpkFy
  21. 21. 240 14472 PPI
  22. 22. “ [In 2013, Intel sees their product line] offer a higher resolution experience than a top-of-the-line 1080p HDTV.” http://liliputing.com/2012/04/intel-retina-laptop- desktop-displays-coming-in-2013.html
  23. 23. 72 PPI
  24. 24. 240
  25. 25. 240 PPI
  26. 26. 240 PPI
  27. 27. 72 PPI
  28. 28. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  29. 29. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  30. 30. SPEED TESTSHINDER SPEED,USER EXPERIENCE (cc) flic.kr/p/4DziUN
  31. 31. “ Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.” (cc) flic.kr/p/4DziUN
  32. 32. “ Testing for speed of an internet connection is like stepping in front of a car to see how fast it is.”“ But, Christopher, you only have to test it once.” (cc) flic.kr/p/4DziUN
  33. 33. Speed test imagehttps://github.com/adamdbradley/foresight.js
  34. 34. Speed test image +50khttps://github.com/adamdbradley/foresight.js
  35. 35. Native speed test // @Modernizrs network-connection.js connection = navigator.connection || { type: 0 }, // polyfill isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type);http://davidbcalhoun.com/2010/using-navigator-connection-android
  36. 36. IMGGIMME THAT OLD SCHOOL123
  37. 37. IMGGIMME THAT OLD SCHOOL1 .htaccess23
  38. 38. Filament .htaccess# Responsive Images# Mobile-First images that scale responsively and responsibly# Copyright 2010, Scott Jehl, Filament Group, Inc# Dual licensed under the MIT or GPL Version 2 licenses.# //Start Responsive ImagesRewriteEngine On# direct image requests to tempRewriteCond %{QUERY_STRING} full=(.*)&?RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L]# ignore trap for non-image requests, rewrite URL without trap segmentRewriteRule (.*)rwd-router/(.*)$ $1$2# //End Responsive Images https://github.com/filamentgroup/Responsive-Images
  39. 39. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" /> 4+ 8+
  40. 40. “ ...the server has no way to know what resolution the client’s device is, so it can’t send the appropriately sized embeded images.” http://mattwilcox.net/archive/entry/id/1053/
  41. 41. http://adaptive-images.com/
  42. 42. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  43. 43. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture> and/or srcset3
  44. 44. media queries in HTML<video controls> <source type="video/mp4" src="video/windowsill_small.mp4"media="all and (max-width: 480px), all and (max-device-width:480px)"> <source type="video/webm" src="video/windowsill_small.webm"media="all and (max-width: 480px), all and (max-device-width:480px)"> <source type="video/mp4" src="video/windowsill.mp4"> <source type="video/webm" src="video/windowsill.webm"> <!-- proper fallback content goes here --></video>http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  45. 45. <picture> patch <picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <!-- <source src="small.jpg"> --> <source src="small.jpg"> <!-- <source src="medium.jpg" media="(min-width: 400px)"> --> <source src="medium.jpg" media="(min-width: 400px)"> <!-- <source src="large.jpg" media="(min-width: 800px)"> --> <source src="large.jpg" media="(min-width: 800px)"> <!-- Fallback content for non-JS browsers. Same src as the initial source element. --> <noscript><img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript> </picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling- picture-without-the-overhead/
  46. 46. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  47. 47. @srcset standard? <h1><img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> </h1>http://www.whatwg.org/specs/web-apps/current-work/multipage/ embedded-content-1.html#attr-img-srcset
  48. 48. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture>3 HiSRC
  49. 49. Set, forget it HiSRC<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="hisrc.js"></script><script> $(document).ready(function(){ $(".hisrc img").hisrc(); });</script>
  50. 50. Set, forget it HiSRC<div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /></div>
  51. 51. Set, forget it HiSRC<div class="hisrc"> <img src="halloween-mobile-1st.png" data-1x="halloween-x1.png" data-2x="halloween-x2.jpg" alt="Celebrating Halloween in style" /></div>
  52. 52. SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
  53. 53. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection-android
  54. 54. Check pixel density...$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  55. 55. Force speed test +50khttps://github.com/adamdbradley/foresight.js
  56. 56. LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE
  57. 57. BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN
  58. 58. FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2
  59. 59. 2 TRICK PONY
  60. 60. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  61. 61. http://mediaqueri.es/
  62. 62. CSS media queries// default, mobile-1st CSS rules devices go here@media screen and (min-width: 480px) { ... }@media screen and (min-width: 600px) { ... }@media screen and (min-width: 768px) { ... }@media screen and (min-width: 910px) { ... }
  63. 63. Single pixel GIF
  64. 64. Single pixel GIF
  65. 65. Single pixel GIF
  66. 66. Single pixel GIF
  67. 67. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true,http://www.w3.org/community/respimg/2012/04/06/responsive- content-images-using-a-spacer-png-and-background-image/
  68. 68. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+
  69. 69. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http://example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+
  70. 70. 2 APPROACHES,1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  71. 71. 2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN https://github.com/teleject/hisrc
  72. 72. WORKAROUNDS &TRICKS123 (cc) flic.kr/p/64fGf6
  73. 73. WORKAROUNDS &TRICKS1 background-size: auto23 (cc) flic.kr/p/64fGf6
  74. 74. http://fittextjs.com/
  75. 75. background-size: 100%<a href="example.com/link">Download on Github</a>.download a { padding: .095em .8em; background: url(../img/arrow.png) no-repeat; background-size: 100%; margin-left: .4em; -webkit-transition: margin 0.15s ease-out; -moz-transition: margin 0.15s ease-out; text-decoration: none;} 17+ 9+ 11.6+ 5+ 9+
  76. 76. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 (cc) flic.kr/p/64fGf6
  77. 77. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  78. 78. PNG 16kb SVG 7kb17+ 9+ 11.6+ 5+ 9+
  79. 79. HTML5 Boilerplate<!doctype html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"lang="en"><![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>
  80. 80. jQuery checkvar checkBrowser = $(html).hasClass(lt-ie9);<div class="svgswap"> <img src="example.svg" data-svgswap="example.png"></div> https://github.com/teleject/svg-swap
  81. 81. http://raphaeljs.com/
  82. 82. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions (cc) flic.kr/p/64fGf6
  83. 83. “ ...if you use <meta charset="utf-8"> (you should be for HTML5), you’re adding common Unicode characters like and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.”
  84. 84. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  85. 85. http://css-tricks.com/examples/IconFont/
  86. 86. Font-based icons<style> [data-icon]:before { font-family: icon-font; content: attr(data-icon); }</style><a href="http://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud</a>
  87. 87. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions4 compressed JPEGs (cc) flic.kr/p/64fGf6
  88. 88. IMGGIMME THAT NEW SCHOOL123
  89. 89. IMGGIMME THAT NEW SCHOOL1 simple design for users23 #rwdimg
  90. 90. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 #rwdimg
  91. 91. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 same, several formats #rwdimg
  92. 92. #rwdimg
  93. 93. #rwdimg
  94. 94. #rwdimg
  95. 95. #rwdimg
  96. 96. #rwdimg
  97. 97. #rwdimg
  98. 98. #rwdimg
  99. 99. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  100. 100. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /><link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /><link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  101. 101. #rwdimg
  102. 102. THANK YOU!CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmSThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×