CHRISTOPHER SCHMITT

@teleject

ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

PARIS WEB
1
@teleject

CHRISTOPHER SCHMITT

2
@teleject

3
@teleject

http://nonbreakingspace.tv/
4
@teleject

http://cssdevconf.com/
5
@teleject

http://artifactconf.com/
6
7
8
9
10
11
y

x

12
13
14
15
WHY DON’T WE ASK
THE BROWSER?
(cc) flic.kr/p/vUBHv
16
alert("User-agent header sent: " + navigator.userAgent);

17
alert("User-agent header sent: " + navigator.userAgent);

18
Mozilla/1.0 (Win3.1)
http://www.useragentstring.com/

(cc) flic.kr/p/vUBHv
19
Mozilla/1.0 (Win3.1)
Mozilla/1.22 (compatible;
MSIE 2.0; Windows 95)
http://www.useragentstring.com/

(cc) flic.kr/p/vUBHv
...
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
htt...
Mozilla/5.0 (Macintosh; Intel Mac
OS X 10_7_3) AppleWebKit/
534.55.3 (KHTML, like Gecko)
Version/5.1.5 Safari/534.55.3
htt...
http://telejec.tv/12uYOC4
23
FEATURE TESTING
vs. BROWSER SNIFFING

1
2
3

24
FEATURE TESTING
vs. BROWSER SNIFFING

1

Browser width

2
3

25
A scripting approach
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = win...
The jQuery approach
// returns width of browser viewport
$(window).width();
// returns height of browser viewport
$(window...
CSS media queries
// default, mobile-1st CSS rules devices go here
@media screen and (min-width: 480px) { ... }
@media scr...
(cc) flic.kr/p/8Lo5Gk
29
BROWSER WIDTH
GIVES US FRAME,
NOT THE CANVAS
30
FEATURE TESTING
vs. BROWSER SNIFFING

1

Browser width

2

Screen resolution

3

31
72

PPI

HAS SERVED US WELL

(cc) flic.kr/p/6tjjRP
32
72 points-per-inch =
72 pixels-per-inch
33
96

PPI

IF A WINDOWS USER
34
72 points-per-inch
x [1+(1/3)]
= 96 PPI
35
“RETINA” DISPLAYS
300ppi at 12 inches from the eyes

goo.gl/zpkFy

78μm

78μm
36
37
“

[In 2013, Intel sees their
product line] offer a higher
resolution experience than a
top-of-the-line 1080p HDTV.”

http:...
72 PPI

39
240

40
240 PPI

41
240 PPI

42
72 PPI

43
44
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
45
FEATURE TESTING
vs. BROWSER SNIFFING

1

Browser width

2

Screen resolution

3

Bandwidth

46
SPEED TESTS
HINDER SPEED,
USER EXPERIENCE
(cc) flic.kr/p/4DziUN
47
“

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/4...
“

Testing for speed of an
internet connection is like
stepping in front of a car to see
how fast it is.”

“

But, Christo...
Speed test image

https://github.com/adamdbradley/foresight.js

50
Speed test image

+50k
https://github.com/adamdbradley/foresight.js

51
Native speed test
// @Modernizr's network-connection.js
connection = navigator.connection || {
type: 0 }, // polyfill
isSlo...
FEATURE TESTING
vs. BROWSER SNIFFING

1

Browser width

2

Screen resolution

3

Bandwidth

53
IMG

GIMME THAT OLD SCHOOL

1
2
3

54
IMG

GIMME THAT OLD SCHOOL

1

.htaccess

2
3

55
Filament .htaccess
# Responsive Images
# Mobile-First images that scale responsively and responsibly
# Copyright 2010, Sco...
Filament .htaccess
<script src="responsiveimgs.js"></script>
<img src="sample-content/running-sml.jpg?
full=sample-content...
“

...the server has no way to
know what resolution the
client’s device is, so it can’t
send the appropriately sized
embed...
http://adaptive-images.com/
59
ADD .HTACCESS, JS,
PHP 5, GD lib*, &
THEN <IMG>
60
IMG

GIMME THAT OLD SCHOOL

1

.htaccess

2

<picture> and/or srcset

3

61
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="small.jp...
ADD IF-ELSE HTML, JS,
BORROW <VIDEO>, &
THEN <IMG>
64
@srcset standard?
<h1><img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x,
banner-phone.jpeg 100w,
...
https://www.webkit.org/blog/2910/improved-support-forhigh-resolution-displays-with-the-srcset-image-attribute/
66
IMG

GIMME THAT OLD SCHOOL

1

.htaccess

2

<picture> and/or srcset

3

HiSRC

67
Set, forget it HiSRC
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.7.2/jquery.min.js"></script>
<script src...
Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween...
Set, forget it HiSRC
<div class="hisrc">
<img src="halloween-mobile-1st.png"
data-1x="halloween-x1.png"
data-2x="halloween...
SERIES OF CHECKS TO
FIND OUT RESPONSIVE
PATH FOR IMAGES...
71
DO NATIVE SPEED
TEST FOR MOBILE
DEVICES FIRST...
http://davidbcalhoun.com/2010/using-navigator-connection-android

72
Check pixel density...
$.hisrc.devicePixelRatio = 1;
if(window.devicePixelRatio !==
undefined) {
$.hisrc.devicePixelRatio =...
Force speed test

+50k
https://github.com/adamdbradley/foresight.js

74
LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE
75
BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
76
FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2

77
http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
78
24+
http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
79
ALL SOLUTIONS HAVE
2x HTTP REQUESTS
+ JAVASCRIPT
http://css-tricks.com/whichresponsive-images-solutionshould-you-use/
80
WORKAROUNDS &
TRICKS in CONTEXT

1
2
3
(cc) flic.kr/p/64fGf6
81
WORKAROUNDS &
TRICKS

1

background-size: 100%

2
3
(cc) flic.kr/p/64fGf6
82
http://fittextjs.com/
83
background-size: 100%
<a href="example.com/link">Download on Github</a>
.download a {
padding: .095em .8em;
background: ur...
WORKAROUNDS &
TRICKS in CONTEXT

1

background-size: auto

2

SVG

3
(cc) flic.kr/p/64fGf6
85
SVG

86
87
88
Native SVG

http://caniuse.com/#search=SVG%20in%20HTML%20img%20element

89
PNG 16kb
SVG 7kb
17+

9+

11.6+

5+

9+
90
http://petercollingridge.appspot.com/svg-optimiser
91
https://github.com/svg/svgo-gui
92
https://github.com/svg/svgo-gui
93
Modernizr check
if(!Modernizr.svg){
var images =
document.getElementsByTagName("img");
for(var i = 0; i < images.length; i...
WORKAROUNDS &
TRICKS in CONTEXT

1

background-size: auto

2

SVG

3

font-based solutions
(cc) flic.kr/p/64fGf6
95
“

...if you use <meta
charset="utf-8"> (you should
be for HTML5), you’re adding
common Unicode characters
like and ✆, and...
97
98
99
Font-based RWD

http://ilovetypography.com/2012/04/11/designing-type-systems/

100
Font-based RWD

avg file size
40kb/per font
http://ilovetypography.com/2012/04/11/designing-type-systems/

101
http://css-tricks.com/examples/IconFont/
102
http://fontello.com/
103
http://icomoon.io
104
Font-based icons
<style>
[data-icon]:before {
font-family: 'icon-font';
content: attr(data-icon);
}
</style>
<a href="http...
WORKAROUNDS &
TRICKS in CONTEXT

1

background-size: 100%

2

SVG

3

font-based solutions

4

compressed JPEGs

(cc) flic....
107
108
109
110
OS X Lion
The world’s most advanced desktop
operating system advances even further.
With over 250 new features including
M...
!

OS X Lion

"

The world’s most advanced desktop
operating system advances even further.
With over 250 new features incl...
!

↙

OS X Lion

"

The world’s most advanced desktop
operating system advances even further.
With over 250 new features i...
(cc) flic.kr/p/64fGf6
114
115
446kb < 8,755.2kb
0% vs 100%
(cc) flic.kr/p/64fGf6
116
<picture> Patch
<picture alt="A giant stone face at The Bayon temple in Angkor Thom,
Cambodia">
<!-- <source src="small.jp...
Size Type

Dimensions

Display Px Density

File Size

Extreme

2276x1400

1x & 2x

446kb

1024x1536

2x

1,745kb

512x768
...
Size Type

Dimensions

Display Px Density

File Size

Extreme

2276x1400

1x & 2x

446kb

1024x1536

2x

1,745kb

512x768
...
One Image, One IMG

<img src="rock-climber.jpg" alt="" />

120
EXTREMELY

COMPRESSED PROBLEMS

(cc) flic.kr/p/64fGf6
121
122
123
COMBO MOVES

CLOWN CAR TECHNIQUE
+ HIGHLY COMPRESSED JPEGS

(cc) flic.kr/p/64fGf6
124
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329"
preserveAspectRatio="xMidYMid meet">
<title>Clown Car Techni...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329"
preserveAspectRatio="xMidYMid meet">
<title>Clown Car Techni...
127
http://coding.smashingmagazine.com/2013/06/02/clowncar-technique-solving-for-adaptive-images-in-responsiveweb-design/
128
Combo Move: SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
375 231" preserveAspectRatio="xMidYMid meet"
tabindex...
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375
231" preserveAspectRatio="xMidYMid meet" tabindex="-1"
aria-label...
Combo Move: SVG
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}

http://codepen.io/teleject/pen/KlzBe
13...
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 400px) {
svg {
background-...
Size Type

Dimensions

Display Px Density

File Size

Extreme

2276x1400

1x & 2x

446kb

1024x1536

2x

1,745kb

512x768
...
Combo Move:
Compressed JPEG
@media screen and (min-width: 401px),
screen and (max-width: 800px) and (-webkit-min-device-pi...
@media screen and (max-width: 400px) {
svg {
width: 375px;
height: 231px; } }
@media screen and (min-width: 401px) {
svg {...
http://codepen.io/teleject/pen/KlzBe
136
http://codepen.io/teleject/pen/KlzBe
137
http://codepen.io/teleject/pen/KlzBe
138
COMBO MOVE

DON’T BLAME THE PLAYER

1

No additional HTTP request

2

# of images = 2

3

No JavaScript
http://codepen.io/...
140
141
IMG

GIMME THAT NEW SCHOOL

1
2
3
#rwdimg
142
IMG

GIMME THAT NEW SCHOOL

1

simple design for users

2
3
#rwdimg
143
IMG

GIMME THAT NEW SCHOOL

1

simple design for users

2

browser, server handshake

3
#rwdimg
144
IMG

GIMME THAT NEW SCHOOL

1

simple design for users

2

browser, server handshake

3

same, several formats
#rwdimg
145
#rwdimg
146
147
#rwdimg
148
#rwdimg
149
#rwdimg
150
Favicon

<link rel="shortcut icon" href="/assets/favicon.ico" />

#rwdimg
151
Mobile iOS Bookmarks
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="apple-touch-icon-144x144-precomposed.p...
#rwdimg
153
THANK YOU!
CHRISTOPHER SCHMITT

@teleject

The Non Breaking Space Podcast - http://nonbreakingspace.tv/

154
Upcoming SlideShare
Loading in …5
×

[parisweb] Adaptive Images in Responsive Web Design

2,640 views

Published on

Published in: Technology, Design

[parisweb] Adaptive Images in Responsive Web Design

  1. 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN PARIS WEB 1
  2. 2. @teleject CHRISTOPHER SCHMITT 2
  3. 3. @teleject 3
  4. 4. @teleject http://nonbreakingspace.tv/ 4
  5. 5. @teleject http://cssdevconf.com/ 5
  6. 6. @teleject http://artifactconf.com/ 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. y x 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv 16
  17. 17. alert("User-agent header sent: " + navigator.userAgent); 17
  18. 18. alert("User-agent header sent: " + navigator.userAgent); 18
  19. 19. Mozilla/1.0 (Win3.1) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv 19
  20. 20. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv 20
  21. 21. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv 21
  22. 22. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/ 534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3 http://webaim.org/blog/user-agent-string-history/ (cc) flic.kr/p/vUBHv 22
  23. 23. http://telejec.tv/12uYOC4 23
  24. 24. FEATURE TESTING vs. BROWSER SNIFFING 1 2 3 24
  25. 25. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3 25
  26. 26. 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 26
  27. 27. 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/ 27
  28. 28. 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) { ... } 28
  29. 29. (cc) flic.kr/p/8Lo5Gk 29
  30. 30. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS 30
  31. 31. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 31
  32. 32. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP 32
  33. 33. 72 points-per-inch = 72 pixels-per-inch 33
  34. 34. 96 PPI IF A WINDOWS USER 34
  35. 35. 72 points-per-inch x [1+(1/3)] = 96 PPI 35
  36. 36. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes goo.gl/zpkFy 78μm 78μm 36
  37. 37. 37
  38. 38. “ [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-laptopdesktop-displays-coming-in-2013.html 38
  39. 39. 72 PPI 39
  40. 40. 240 40
  41. 41. 240 PPI 41
  42. 42. 240 PPI 42
  43. 43. 72 PPI 43
  44. 44. 44
  45. 45. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES 45
  46. 46. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth 46
  47. 47. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN 47
  48. 48. “ 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 48
  49. 49. “ 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 49
  50. 50. Speed test image https://github.com/adamdbradley/foresight.js 50
  51. 51. Speed test image +50k https://github.com/adamdbradley/foresight.js 51
  52. 52. Native speed test // @Modernizr's 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 52
  53. 53. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth 53
  54. 54. IMG GIMME THAT OLD SCHOOL 1 2 3 54
  55. 55. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3 55
  56. 56. 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 Images RewriteEngine On # direct image requests to temp RewriteCond %{QUERY_STRING} full=(.*)&? RewriteRule (.*)rwd-router/.*.(jpe?g|png|gif|webp) $1%1 [L] # ignore trap for non-image requests, rewrite URL without trap segment RewriteRule (.*)rwd-router/(.*)$ $1$2 # //End Responsive Images https://github.com/filamentgroup/Responsive-Images 56
  57. 57. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+ 57
  58. 58. “ ...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/ 58
  59. 59. http://adaptive-images.com/ 59
  60. 60. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG> 60
  61. 61. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3 61
  62. 62. 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/polyfillingpicture-without-the-overhead/ 62
  63. 63. <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/polyfillingpicture-without-the-overhead/ 63
  64. 64. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG> 64
  65. 65. @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 65
  66. 66. https://www.webkit.org/blog/2910/improved-support-forhigh-resolution-displays-with-the-srcset-image-attribute/ 66
  67. 67. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3 HiSRC 67
  68. 68. 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> https://github.com/teleject/hisrc 68
  69. 69. 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> 69
  70. 70. 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> 70
  71. 71. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES... 71
  72. 72. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android 72
  73. 73. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356 73
  74. 74. Force speed test +50k https://github.com/adamdbradley/foresight.js 74
  75. 75. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE 75
  76. 76. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN 76
  77. 77. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2 77
  78. 78. http://css-tricks.com/whichresponsive-images-solutionshould-you-use/ 78
  79. 79. 24+ http://css-tricks.com/whichresponsive-images-solutionshould-you-use/ 79
  80. 80. ALL SOLUTIONS HAVE 2x HTTP REQUESTS + JAVASCRIPT http://css-tricks.com/whichresponsive-images-solutionshould-you-use/ 80
  81. 81. WORKAROUNDS & TRICKS in CONTEXT 1 2 3 (cc) flic.kr/p/64fGf6 81
  82. 82. WORKAROUNDS & TRICKS 1 background-size: 100% 2 3 (cc) flic.kr/p/64fGf6 82
  83. 83. http://fittextjs.com/ 83
  84. 84. 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+ 84
  85. 85. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6 85
  86. 86. SVG 86
  87. 87. 87
  88. 88. 88
  89. 89. Native SVG http://caniuse.com/#search=SVG%20in%20HTML%20img%20element 89
  90. 90. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+ 90
  91. 91. http://petercollingridge.appspot.com/svg-optimiser 91
  92. 92. https://github.com/svg/svgo-gui 92
  93. 93. https://github.com/svg/svgo-gui 93
  94. 94. Modernizr check if(!Modernizr.svg){ var images = document.getElementsByTagName("img"); for(var i = 0; i < images.length; i++){ var src = images[i].src.split("."); images[i].src = src[0] + ".png"; } } http://stackoverflow.com/questions/12846852/ svg-png-extension-switch 94
  95. 95. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6 95
  96. 96. “ ...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.” 96
  97. 97. 97
  98. 98. 98
  99. 99. 99
  100. 100. Font-based RWD http://ilovetypography.com/2012/04/11/designing-type-systems/ 100
  101. 101. Font-based RWD avg file size 40kb/per font http://ilovetypography.com/2012/04/11/designing-type-systems/ 101
  102. 102. http://css-tricks.com/examples/IconFont/ 102
  103. 103. http://fontello.com/ 103
  104. 104. http://icomoon.io 104
  105. 105. 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> 105
  106. 106. WORKAROUNDS & TRICKS in CONTEXT 1 background-size: 100% 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6 106
  107. 107. 107
  108. 108. 108
  109. 109. 109
  110. 110. 110
  111. 111. OS X Lion The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone 111
  112. 112. ! OS X Lion " The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. ← ↑ Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone 112
  113. 113. ! ↙ OS X Lion " The world’s most advanced desktop operating system advances even further. With over 250 new features including Multi-Touch gestures, Mission Control, full-screen apps, and Launchpad, OS X Lion takes the Mac further than ever. ← ← ↑ ↖ ↑ ↗ ↖ Learn More iCloud iOS 5 OSX Lion iPad 2 iPhone 113
  114. 114. (cc) flic.kr/p/64fGf6 114
  115. 115. 115
  116. 116. 446kb < 8,755.2kb 0% vs 100% (cc) flic.kr/p/64fGf6 116
  117. 117. <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/polyfillingpicture-without-the-overhead/ 117
  118. 118. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium 118
  119. 119. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium 119
  120. 120. One Image, One IMG <img src="rock-climber.jpg" alt="" /> 120
  121. 121. EXTREMELY COMPRESSED PROBLEMS (cc) flic.kr/p/64fGf6 121
  122. 122. 122
  123. 123. 123
  124. 124. COMBO MOVES CLOWN CAR TECHNIQUE + HIGHLY COMPRESSED JPEGS (cc) flic.kr/p/64fGf6 124
  125. 125. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} https://github.com/estelle/clowncar } @media screen and (min-width: 1001px) { 125
  126. 126. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> <title>Clown Car Technique</title> <style> svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg {background-image: url(images/small.png");} } @media screen and (min-width: 401px) and (max-width: 700px) { svg {background-image: url(images/medium.png);} } @media screen and (min-width: 701px) and (max-width: 1000px) { svg {background-image: url(images/big.png);} https://github.com/estelle/clowncar } @media screen and (min-width: 1001px) { 126
  127. 127. 127
  128. 128. http://coding.smashingmagazine.com/2013/06/02/clowncar-technique-solving-for-adaptive-images-in-responsiveweb-design/ 128
  129. 129. Combo Move: SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="the aria label is being read" role="img" title="the title attribute of the SVG is being read"> <title>Clown Car Technique</title> <style> </style> </svg> http://codepen.io/teleject/pen/KlzBe 129
  130. 130. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 231" preserveAspectRatio="xMidYMid meet" tabindex="-1" aria-label="aria label" role="img" title="title attribute"> <title>Clown Car Technique</title> <style> </style> <foreignObject> <!--[if lte IE 8]> <img src="../images/mobile-first.png" width="375" height="231" alt=""/> <![endif]--> </foreignObject> </svg> http://codepen.io/teleject/pen/KlzBe 130
  131. 131. Combo Move: SVG svg { background-size: 100% 100%; background-repeat: no-repeat; } http://codepen.io/teleject/pen/KlzBe 131
  132. 132. svg { background-size: 100% 100%; background-repeat: no-repeat; } @media screen and (max-width: 400px) { svg { background-image: url("http://s.cdpn.io/168/picMedium-375x231-@1x-72ppi.jpg"); outline: green solid 5px; } } http://codepen.io/teleject/pen/KlzBe 132
  133. 133. Size Type Dimensions Display Px Density File Size Extreme 2276x1400 1x & 2x 446kb 1024x1536 2x 1,745kb 512x768 1x 503kb 640x960 2x 746kb 320x480 1x 223kb 500x750 2x 485kb 250x375 1x 145kb Extra Large Large Medium 133
  134. 134. Combo Move: Compressed JPEG @media screen and (min-width: 401px), screen and (max-width: 800px) and (-webkit-min-device-pixelratio: 1.75) { svg { background-image: url("extremely-highlycompressed.jpg"); outline: red solid 5px; } } http://codepen.io/teleject/pen/KlzBe 134
  135. 135. @media screen and (max-width: 400px) { svg { width: 375px; height: 231px; } } @media screen and (min-width: 401px) { svg { width: 750px; height: 462px; } } svg { outline: 5px solid black; } http://codepen.io/teleject/pen/KlzBe 135
  136. 136. http://codepen.io/teleject/pen/KlzBe 136
  137. 137. http://codepen.io/teleject/pen/KlzBe 137
  138. 138. http://codepen.io/teleject/pen/KlzBe 138
  139. 139. COMBO MOVE DON’T BLAME THE PLAYER 1 No additional HTTP request 2 # of images = 2 3 No JavaScript http://codepen.io/teleject/pen/KlzBe 139
  140. 140. 140
  141. 141. 141
  142. 142. IMG GIMME THAT NEW SCHOOL 1 2 3 #rwdimg 142
  143. 143. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimg 143
  144. 144. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimg 144
  145. 145. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimg 145
  146. 146. #rwdimg 146
  147. 147. 147
  148. 148. #rwdimg 148
  149. 149. #rwdimg 149
  150. 150. #rwdimg 150
  151. 151. Favicon <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg 151
  152. 152. Mobile iOS Bookmarks <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" /> #rwdimg 152
  153. 153. #rwdimg 153
  154. 154. THANK YOU! CHRISTOPHER SCHMITT @teleject The Non Breaking Space Podcast - http://nonbreakingspace.tv/ 154

×