Your SlideShare is downloading. ×
0
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
[wcatx] Adaptive Images in Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[wcatx] Adaptive Images in Responsive Web Design

978

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. #WCATX2013ADAPTIVE IMAGESIN RESPONSIVE WEB DESIGNCHRISTOPHER SCHMITT @teleject
  • 2. CHRISTOPHER SCHMITT@teleject
  • 3. @telejecthttp://CSSsummit.com/
  • 4. @telejecthttp://cssdevconf.com/
  • 5. @telejecthttp://dwmgbook.com/
  • 6. @telejecthttp://nonbreakingspace.tv/
  • 7. WHY DON’T WE ASKTHE BROWSER?(cc) flic.kr/p/vUBHv
  • 8. alert("User-agent header sent: " + navigator.userAgent);
  • 9. alert("User-agent header sent: " + navigator.userAgent);
  • 10. Mozilla/1.0 (Win3.1)http://www.useragentstring.com/(cc) flic.kr/p/vUBHv
  • 11. Mozilla/1.0 (Win3.1)Mozilla/1.22 (compatible;MSIE 2.0; Windows 95)(cc) flic.kr/p/vUBHvhttp://www.useragentstring.com/
  • 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. 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. FEATURE TESTINGvs. BROWSER SNIFFING123
  • 15. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
  • 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. 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. 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. (cc) flic.kr/p/8Lo5Gk
  • 20. (cc) flic.kr/p/8Lo5Gk
  • 21. BROWSER WIDTHGIVES US FRAME,NOT THE CANVAS
  • 22. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3
  • 23. 72PPIHAS SERVED US WELL(cc) flic.kr/p/6tjjRP
  • 24. 72 points-per-inch =72 pixels-per-inch
  • 25. 96PPIIF A WINDOWS USER
  • 26. 72 points-per-inchx [1+(1/3)]= 96 PPI
  • 27. 78μmgoo.gl/zpkFy78μm“RETINA” DISPLAYS300ppi at 12 inches from the eyes
  • 28. [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
  • 29. 72 PPI
  • 30. 240
  • 31. 240 PPI
  • 32. 240 PPI
  • 33. 72 PPI
  • 34. RETINA DISPLAYS =LARGER IMAGES,LARGER FILE SIZES
  • 35. FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width2 Screen resolution3 Bandwidth
  • 36. (cc) flic.kr/p/4DziUNSPEED TESTSHINDER SPEED,USER EXPERIENCE
  • 37. Testing for speed of aninternet connection is likestepping in front of a car to seehow fast it is.”“(cc) flic.kr/p/4DziUN
  • 38. 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
  • 39. Speed test imagehttps://github.com/adamdbradley/foresight.js
  • 40. Speed test image+50khttps://github.com/adamdbradley/foresight.js
  • 41. 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
  • 42. IMGGIMME THAT OLD SCHOOL123
  • 43. 1 .htaccess23IMGGIMME THAT OLD SCHOOL
  • 44. 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
  • 45. Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />8+4+
  • 46. ...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/
  • 47. http://adaptive-images.com/
  • 48. ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
  • 49. 1 .htaccess2 <picture> and/or srcset3GIMME THAT OLD SCHOOLIMG
  • 50. 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/
  • 51. <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/
  • 52. ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
  • 53. @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
  • 54. 1 .htaccess2 <picture>3 HiSRCGIMME THAT OLD SCHOOLIMG
  • 55. 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>
  • 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. 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>
  • 58. 2 TRICK PONY
  • 59. CSS IS CORE.WE USE CSS MEDIAQUERIES FOR DESIGN
  • 60. http://mediaqueri.es/
  • 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. Single pixel GIF
  • 63. Single pixel GIF
  • 64. Single pixel GIF
  • 65. Single pixel GIF
  • 66. $.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
  • 67. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==,8+5+9+ 11.6+17+Single pixel GIF
  • 68. $.hisrc.defaults = {useTransparentGif: true,transparentGifSrc: http://example.com/spg.gif,6+5+9+ 11.6+17+Single pixel GIF
  • 69. 2 APPROACHES,1 SIMPLE SOLUTION.https://github.com/teleject/hisrc
  • 70. WORKAROUNDSTRICKS123&(cc) flic.kr/p/64fGf6
  • 71. WORKAROUNDSTRICKS1 background-size: auto23&(cc) flic.kr/p/64fGf6
  • 72. http://fittextjs.com/
  • 73. 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+
  • 74. WORKAROUNDSTRICKS1 background-size: auto2 SVG3&(cc) flic.kr/p/64fGf6
  • 75. SVG
  • 76. Native SVGhttp://caniuse.com/#search=SVG%20in%20HTML%20img%20element
  • 77. PNG 16kbSVG 7kb9+5+9+ 11.6+17+
  • 78. 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
  • 79. 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
  • 80. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf6
  • 81. ...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.”“
  • 82. Font-based RWDhttp://ilovetypography.com/2012/04/11/designing-type-systems/
  • 83. http://css-tricks.com/examples/IconFont/
  • 84. http://fontello.com/
  • 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. WORKAROUNDSTRICKS1 background-size: auto2 SVG3 font-based solutions&(cc) flic.kr/p/64fGf64 compressed JPEGs
  • 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. 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. 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. 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. 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↑ ↗← " "↙ ! ↘! ↘
  • 92. (cc) flic.kr/p/64fGf6
  • 93. 446kb < 8,755.2kb(cc) flic.kr/p/64fGf60% vs 100%
  • 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. 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
  • 96. <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/
  • 97. <img src="rock-climber.jpg" alt="" />One Image, One IMG
  • 98. (cc) flic.kr/p/64fGf6EXTREMELYCOMPRESSED PROBLEMS
  • 99. IMGGIMME THAT NEW SCHOOL123
  • 100. IMGGIMME THAT NEW SCHOOL123simple design for users#rwdimg1
  • 101. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshake#rwdimg2
  • 102. IMGGIMME THAT NEW SCHOOL123simple design for usersbrowser, server handshakesame, several formats#rwdimg3
  • 103. #rwdimg
  • 104. #rwdimg
  • 105. #rwdimg
  • 106. #rwdimg
  • 107. #rwdimg
  • 108. #rwdimg
  • 109. #rwdimg
  • 110. #rwdimg
  • 111. #rwdimg<link rel="shortcut icon" href="/assets/favicon.ico" />
  • 112. #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" />
  • 113. #rwdimg
  • 114. THANK YOU!CHRISTOPHER SCHMITT @telejectThe Non Breaking Space Podcast - http://nonbreakingspace.tv/

×