Your SlideShare is downloading. ×
#REFRESHPITT 2013ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGNCHRISTOPHER SCHMITT @teleject
CHRISTOPHER SCHMITT@teleject
@telejecthttp://CSSsummit.com/
@telejecthttp://cssdevconf.com/
@telejecthttp://dwmgbook.com/
@telejecthttp://nonbreakingspace.tv/
WHY DON’T WE ASKTHE BROWSER?(cc) flic.kr/p/vUBHv
alert("User-agent header sent: " + navigator.userAgent);
alert("User-agent header sent: " + navigator.userAgent);
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)(cc) flic.kr/p/vUBHvhttp://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.3(cc) fli...
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 approachvar myWidth = 0, myHeight = 0;if( typeof( window.innerWidth ) == number ) {//Non-IEmyWidth = window.in...
The jQuery approach// returns width of browser viewport$(window).width();// returns height of browser viewport$(window).he...
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
72PPIHAS SERVED US WELL(cc) flic.kr/p/6tjjRP
72 points-per-inch =72 pixels-per-inch
96PPIIF A WINDOWS USER
72 points-per-inchx [1+(1/3)]= 96 PPI
78μmgoo.gl/zpkFy78μm“RETINA” DISPLAYS300ppi at 12 inches from the eyes
[In 2013, Intel sees theirproduct line] offer a higherresolution experience than atop-of-the-line 1080p HDTV.”“http://lilip...
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
(cc) flic.kr/p/4DziUNSPEED TESTSHINDER SPEED,USER EXPERIENCE
Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“(cc) flic.kr/p/4DziUN
Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“But, Christopher, you ...
Speed test imagehttps://github.com/adamdbradley/foresight.js
Speed test image+50khttps://github.com/adamdbradley/foresight.js
Native speed test// @Modernizrs network-connection.jsconnection = navigator.connection || {type: 0 }, // polyfillisSlowConn...
IMGGIMME THAT OLD SCHOOL123
1 .htaccess23IMGGIMME THAT OLD SCHOOL
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 toknow what resolution theclient’s device is, so it can’tsend the appropriately sizedembeded imag...
http://adaptive-images.com/
ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
1 .htaccess2 <picture> and/or srcset3GIMME THAT OLD SCHOOLIMG
media queries in HTML<video controls><source type="video/mp4" src="video/windowsill_small.mp4"media="all and (max-width: 4...
<picture> patch<picture alt="A giant stone face at The Bayon temple in Angkor Thom,Cambodia"><!-- <source src="small.jpg">...
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,banner-phone.jpeg 100w,banne...
1 .htaccess2 <picture> and/or srcset3 HiSRCGIMME THAT OLD SCHOOLIMG
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="halloween-x2....
Set, forget it HiSRC<div class="hisrc"><img src="halloween-mobile-1st.png"data-1x="halloween-x1.png"data-2x="halloween-x2....
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
$.hisrc.defaults = {useTransparentGif: true,http://www.w3.org/community/respimg/2012/04/06/responsive-content-images-using...
$.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAAL...
$.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: http://example.com/spg.gif,6+5+9+ 11.6+17+Single pixel GIF
WORKAROUNDSTRICKS123&(cc) flic.kr/p/64fGf6
WORKAROUNDSTRICKS1 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: url(.....
WORKAROUNDSTRICKS1 background-size: auto2 SVG3&(cc) flic.kr/p/64fGf6
SVG
Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
PNG 16kbSVG 7kb9+5+9+ 11.6+17+
Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMidmeet"><title>Clown...
Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMidmeet"><title>Clown...
Modernizr checkif(!Modernizr.svg){var images =document.getElementsByTagName("img");for(var i = 0; i < images.length; i++){...
WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf6
...if you use <metacharset="utf-8"> (you shouldbe for HTML5), you’re addingcommon Unicode characterslike and ✆, and you do...
Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
http://css-tricks.com/examples/IconFont/
http://fontello.com/
http://icomoon.io
Font-based icons<style>[data-icon]:before {font-family: icon-font;content: attr(data-icon);}</style><a href="http://exampl...
WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf64 compressed JPEGs
iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250...
iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250...
iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250...
iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250...
(cc) flic.kr/p/64fGf6
446kb < 8,755.2kb(cc) flic.kr/p/64fGf60% vs 100%
Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge51...
Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge51...
<picture> Patch<picture alt="A giant stone face at The Bayon temple in Angkor Thom,Cambodia"><!-- <source src="small.jpg">...
<img src="rock-climber.jpg" alt="" />One Image, One IMG
(cc) flic.kr/p/64fGf6EXTREMELYCOMPRESSED PROBLEMS
IMGGIMME THAT NEW SCHOOL123
IMGGIMME THAT NEW SCHOOL123simple design for users#rwdimg1
IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshake#rwdimg2
IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshakesame, several formats#rwdimg3
#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...
#rwdimg
THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
[refreshpitt] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in...5
×

[refreshpitt] Adaptive Images in Responsive Web Design

668

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
668
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "[refreshpitt] Adaptive Images in Responsive Web Design"

  1. 1. #REFRESHPITT 2013ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGNCHRISTOPHER SCHMITT @teleject
  2. 2. CHRISTOPHER SCHMITT@teleject
  3. 3. @telejecthttp://CSSsummit.com/
  4. 4. @telejecthttp://cssdevconf.com/
  5. 5. @telejecthttp://dwmgbook.com/
  6. 6. @telejecthttp://nonbreakingspace.tv/
  7. 7. WHY DON’T WE ASKTHE BROWSER?(cc) flic.kr/p/vUBHv
  8. 8. alert("User-agent header sent: " + navigator.userAgent);
  9. 9. alert("User-agent header sent: " + navigator.userAgent);
  10. 10. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/(cc) flic.kr/p/vUBHv
  11. 11. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  12. 12. Mozilla/5.0 (Macintosh; Intel MacOS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko)Version/5.1.5 Safari/534.55.3(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  13. 13. 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
  14. 14. FEATURE TESTINGvs. BROWSER SNIFFING123
  15. 15. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  16. 16. A scripting approachvar myWidth = 0, myHeight = 0;if( typeof( window.innerWidth ) == number ) {//Non-IEmyWidth = window.innerWidth;myHeight = window.innerHeight;} else if( document.documentElement &&( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {//IE 6+ in standards compliant modemyWidth = document.documentElement.clientWidth;myHeight = document.documentElement.clientHeight;}http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
  17. 17. 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/
  18. 18. 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) { ... }
  19. 19. (cc) flic.kr/p/8Lo5Gk
  20. 20. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  21. 21. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  22. 22. 72PPIHAS SERVED US WELL(cc) flic.kr/p/6tjjRP
  23. 23. 72 points-per-inch =72 pixels-per-inch
  24. 24. 96PPIIF A WINDOWS USER
  25. 25. 72 points-per-inchx [1+(1/3)]= 96 PPI
  26. 26. 78μmgoo.gl/zpkFy78μm“RETINA” DISPLAYS300ppi at 12 inches from the eyes
  27. 27. [In 2013, Intel sees theirproduct line] offer a higherresolution experience than atop-of-the-line 1080p HDTV.”“http://liliputing.com/2012/04/intel-retina-laptop-desktop-displays-coming-in-2013.html
  28. 28. 72 PPI
  29. 29. 240
  30. 30. 240 PPI
  31. 31. 240 PPI
  32. 32. 72 PPI
  33. 33. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  34. 34. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  35. 35. (cc) flic.kr/p/4DziUNSPEED TESTSHINDER SPEED,USER EXPERIENCE
  36. 36. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“(cc) flic.kr/p/4DziUN
  37. 37. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“But, Christopher, you onlyhave to test it once.”“(cc) flic.kr/p/4DziUN
  38. 38. Speed test imagehttps://github.com/adamdbradley/foresight.js
  39. 39. Speed test image+50khttps://github.com/adamdbradley/foresight.js
  40. 40. Native speed test// @Modernizrs network-connection.jsconnection = navigator.connection || {type: 0 }, // polyfillisSlowConnection = connection.type == 3|| connection.type == 4| /^[23]g$/.test(connection.type);http://davidbcalhoun.com/2010/using-navigator-connection-android
  41. 41. IMGGIMME THAT OLD SCHOOL123
  42. 42. 1 .htaccess23IMGGIMME THAT OLD SCHOOL
  43. 43. 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 Imageshttps://github.com/filamentgroup/Responsive-Images
  44. 44. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />8+4+
  45. 45. ...the server has no way toknow what resolution theclient’s device is, so it can’tsend the appropriately sizedembeded images.”“http://mattwilcox.net/archive/entry/id/1053/
  46. 46. http://adaptive-images.com/
  47. 47. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  48. 48. 1 .htaccess2 <picture> and/or srcset3GIMME THAT OLD SCHOOLIMG
  49. 49. 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/
  50. 50. <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 initialsource element. --><noscript><img src="small.jpg" alt="A giant stone face at The Bayontemple in Angkor Thom, Cambodia"></noscript></picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
  51. 51. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  52. 52. @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
  53. 53. 1 .htaccess2 <picture> and/or srcset3 HiSRCGIMME THAT OLD SCHOOLIMG
  54. 54. 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
  55. 55. 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>
  56. 56. 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>
  57. 57. 2 TRICK PONY
  58. 58. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  59. 59. http://mediaqueri.es/
  60. 60. 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) { ... }
  61. 61. Single pixel GIF
  62. 62. Single pixel GIF
  63. 63. Single pixel GIF
  64. 64. Single pixel GIF
  65. 65. $.hisrc.defaults = {useTransparentGif: true,http://www.w3.org/community/respimg/2012/04/06/responsive-content-images-using-a-spacer-png-and-background-image/Single pixel GIF
  66. 66. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==,8+5+9+ 11.6+17+Single pixel GIF
  67. 67. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: http://example.com/spg.gif,6+5+9+ 11.6+17+Single pixel GIF
  68. 68. WORKAROUNDSTRICKS123&(cc) flic.kr/p/64fGf6
  69. 69. WORKAROUNDSTRICKS1 background-size: auto23&(cc) flic.kr/p/64fGf6
  70. 70. http://fittextjs.com/
  71. 71. 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;}9+5+9+ 11.6+17+
  72. 72. WORKAROUNDSTRICKS1 background-size: auto2 SVG3&(cc) flic.kr/p/64fGf6
  73. 73. SVG
  74. 74. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  75. 75. PNG 16kbSVG 7kb9+5+9+ 11.6+17+
  76. 76. Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMidmeet"><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);}}@media screen and (min-width: 1001px) {svg {background-image: url(images/huge.png);}}</style></svg>https://github.com/estelle/clowncar
  77. 77. Clown Car SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMidmeet"><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);}}@media screen and (min-width: 1001px) {svg {background-image: url(images/huge.png);}}</style></svg>https://github.com/estelle/clowncar
  78. 78. Modernizr checkif(!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
  79. 79. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf6
  80. 80. ...if you use <metacharset="utf-8"> (you shouldbe for HTML5), you’re addingcommon Unicode characterslike and ✆, and you don’tneed a specific font’s version...just copy and paste them intoyour HTML.”“
  81. 81. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  82. 82. http://css-tricks.com/examples/IconFont/
  83. 83. http://fontello.com/
  84. 84. http://icomoon.io
  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. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf64 compressed JPEGs
  87. 87. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion
  88. 88. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion!" ←↑
  89. 89. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion! ↙" ← ←↗ ↑ ↖↑ ↖
  90. 90. iCloud iOS 5 OSX Lion iPad 2 iPhoneOSThe world’s most advanced desktopoperating system advances even further.With over 250 new features includingMulti-Touch gestures, Mission Control,full-screen apps, and Launchpad, OS XLion takes the Mac further than ever.Learn MoreX Lion↑ ↗← " "↙ ! ↘! ↘
  91. 91. (cc) flic.kr/p/64fGf6
  92. 92. 446kb < 8,755.2kb(cc) flic.kr/p/64fGf60% vs 100%
  93. 93. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge512x768 1x 503kbLarge640x960 2x 746kbLarge320x480 1x 223kbMedium500x750 2x 485kbMedium250x375 1x 145kb
  94. 94. Size Type Dimensions Display Px Density File SizeExtreme 2276x1400 1x & 2x 446kbExtraLarge1024x1536 2x 1,745kbExtraLarge512x768 1x 503kbLarge640x960 2x 746kbLarge320x480 1x 223kbMedium500x750 2x 485kbMedium250x375 1x 145kb
  95. 95. <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 initialsource element. --><noscript><img src="small.jpg" alt="A giant stone face at The Bayontemple in Angkor Thom, Cambodia"></noscript></picture>http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-without-the-overhead/
  96. 96. <img src="rock-climber.jpg" alt="" />One Image, One IMG
  97. 97. (cc) flic.kr/p/64fGf6EXTREMELYCOMPRESSED PROBLEMS
  98. 98. IMGGIMME THAT NEW SCHOOL123
  99. 99. IMGGIMME THAT NEW SCHOOL123simple design for users#rwdimg1
  100. 100. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshake#rwdimg2
  101. 101. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshakesame, several formats#rwdimg3
  102. 102. #rwdimg
  103. 103. #rwdimg
  104. 104. #rwdimg
  105. 105. #rwdimg
  106. 106. #rwdimg
  107. 107. #rwdimg
  108. 108. #rwdimg
  109. 109. #rwdimg<link rel="shortcut icon" href="/assets/favicon.ico" />
  110. 110. #rwdimg<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" />
  111. 111. #rwdimg
  112. 112. THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×