CHRISTOPHER SCHMITT             @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN            CSS DEV CONF 2012
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...
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Upcoming SlideShare
Loading in...5
×

[cssdevconf] Adaptive Images in RWD

3,843

Published on

Published in: Technology
2 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,843
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
17
Embeds 0
No embeds

No notes for slide

[cssdevconf] Adaptive Images in RWD

  1. 1. CHRISTOPHER SCHMITT @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CSS DEV CONF 2012
  2. 2. WHY DON’T WE ASKTHE BROWSER? (cc) flic.kr/p/vUBHv
  3. 3. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  4. 4. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  5. 5. 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
  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://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv
  7. 7. FEATURE TESTINGvs. BROWSER SNIFFING123
  8. 8. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  9. 9. 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
  10. 10. 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/
  11. 11. 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) { ... }
  12. 12. (cc) flic.kr/p/8Lo5Gk
  13. 13. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  14. 14. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  15. 15. 72 PPIHAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  16. 16. 72 points-per-inch =72 pixels-per-inch
  17. 17. 96 PPIIF A WINDOWS USER
  18. 18. 72 points-per-inchx [1+(1/3)]= 96 PPI
  19. 19. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μmgoo.gl/zpkFy
  20. 20. 240 14472 PPI
  21. 21. “ [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
  22. 22. 72 PPI
  23. 23. 240
  24. 24. 240 PPI
  25. 25. 240 PPI
  26. 26. 72 PPI
  27. 27. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  28. 28. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  29. 29. SPEED TESTSHINDER SPEED,USER EXPERIENCE (cc) flic.kr/p/4DziUN
  30. 30. “ 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
  31. 31. “ 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
  32. 32. Speed test imagehttps://github.com/adamdbradley/foresight.js
  33. 33. Speed test image +50khttps://github.com/adamdbradley/foresight.js
  34. 34. 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
  35. 35. IMGGIMME THAT OLD SCHOOL123
  36. 36. IMGGIMME THAT OLD SCHOOL1 .htaccess23
  37. 37. 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
  38. 38. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" /> 4+ 8+
  39. 39. “ ...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/
  40. 40. http://adaptive-images.com/
  41. 41. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  42. 42. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture> and/or srcset3
  43. 43. 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/
  44. 44. <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/
  45. 45. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  46. 46. @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
  47. 47. IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture>3 HiSRC
  48. 48. 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>
  49. 49. 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>
  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. SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
  52. 52. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection-android
  53. 53. Check pixel density...$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  54. 54. Force speed test +50khttps://github.com/adamdbradley/foresight.js
  55. 55. LESS THAN 4G MEANSMOBILE IMAGES LEFTIN PLACE
  56. 56. BETWEEN 4G &300 Kbps MEANSREGULAR DESKTOPIMAGES SWAPPED IN
  57. 57. FAST SPEED & HIGHDENSITY, RETINAIMAGES SWAPPED INhttps://github.com/crdeutsch/hisrc/tree/v2
  58. 58. 2 TRICK PONY
  59. 59. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  60. 60. http://mediaqueri.es/
  61. 61. 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) { ... }
  62. 62. Single pixel GIF
  63. 63. Single pixel GIF
  64. 64. Single pixel GIF
  65. 65. Single pixel GIF
  66. 66. 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/
  67. 67. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+
  68. 68. Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http://example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+
  69. 69. 2 APPROACHES,1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  70. 70. 2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN https://github.com/teleject/hisrc
  71. 71. WORKAROUNDS &TRICKS123 (cc) flic.kr/p/64fGf6
  72. 72. WORKAROUNDS &TRICKS1 background-size: auto23 (cc) flic.kr/p/64fGf6
  73. 73. http://fittextjs.com/
  74. 74. 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+
  75. 75. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 (cc) flic.kr/p/64fGf6
  76. 76. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  77. 77. PNG 16kb SVG 7kb17+ 9+ 11.6+ 5+ 9+
  78. 78. 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>
  79. 79. 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
  80. 80. http://raphaeljs.com/
  81. 81. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions (cc) flic.kr/p/64fGf6
  82. 82. “ ...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.”
  83. 83. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  84. 84. http://css-tricks.com/examples/IconFont/
  85. 85. 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>
  86. 86. WORKAROUNDS &TRICKS1 background-size: auto2 SVG3 font-based solutions4 compressed JPEGs (cc) flic.kr/p/64fGf6
  87. 87. IMGGIMME THAT NEW SCHOOL123
  88. 88. IMGGIMME THAT NEW SCHOOL1 simple design for users23 #rwdimg
  89. 89. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 #rwdimg
  90. 90. IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 same, several formats #rwdimg
  91. 91. #rwdimg
  92. 92. #rwdimg
  93. 93. #rwdimg
  94. 94. #rwdimg
  95. 95. #rwdimg
  96. 96. #rwdimg
  97. 97. #rwdimg
  98. 98. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  99. 99. <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
  100. 100. #rwdimg
  101. 101. THANK YOU!CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmSThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×