• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[convergese] Adaptive Images in Responsive Web Design
 

[convergese] Adaptive Images in Responsive Web Design

on

  • 4,277 views

 

Statistics

Views

Total Views
4,277
Views on SlideShare
4,264
Embed Views
13

Actions

Likes
11
Downloads
0
Comments
1

3 Embeds 13

https://twitter.com 7
http://elearning.tadelformacion.com 3
http://www.verious.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I'm curious Christopher why you allow someone to save this slide show?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [convergese] Adaptive Images in Responsive Web Design [convergese] Adaptive Images in Responsive Web Design Presentation Transcript

    • CHRISTOPHER SCHMITT @telejectADAPTIVE IMAGESIN RESPONSIVE WEB DESIGN CONVERGESE 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/ (cc) flic.kr/p/vUBHv
    • 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
    • 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
    • “ Based on feedback from users, testers and engineers you will contact large as well as smaller Web sites and advise them on how to improve their code for maximum compatibility and device independence.” http://my.opera.com/chooseopera/blog/2010/06/09/ work-for-opera-as-a-web-opener (cc) flic.kr/p/vUBHv
    • FEATURE TESTINGvs. BROWSER SNIFFING123
    • FEATURE TESTINGvs. BROWSER SNIFFING1 Browser width23
    • 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
    • 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/
    • 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) { ... }
    • (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 78μmgoo.gl/zpkFy
    • 240 14472 PPI
    • “ [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
    • 72 PPI
    • 240
    • 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.” (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.”“ But, Christopher, you only have to test it once.” (cc) flic.kr/p/4DziUN
    • 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 }, // polyfill isSlowConnection = connection.type == 3 || connection.type == 4 | /^[23]g$/.test(connection.type);http://davidbcalhoun.com/2010/using-navigator-connection-android
    • 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: 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+
    • 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 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>
    • 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
    • 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 like and ✆, and you don’t need a specific font’s version... just copy and paste them into your HTML.”
    • 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://example.com/cloud/save/"> <span data-icon="C" aria-hidden="true"></span> Save to Cloud</a>
    • IMGGIMME THAT OLD SCHOOL123
    • IMGGIMME THAT OLD SCHOOL1 .htaccess23
    • 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
    • Filament .htaccess<script src="responsiveimgs.js"></script><img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" /> 4+ 8+
    • “ ...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/
    • http://adaptive-images.com/
    • ADD .HTACCESS, JS,PHP 5, GD lib*, &THEN <IMG>
    • IMGGIMME THAT OLD SCHOOL1 .htaccess2 <picture>3
    • 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/
    • <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/
    • <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/
    • ADD IF-ELSE HTML, JS,BORROW <VIDEO>, &THEN <IMG>
    • 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="hisrc.js"></script><script> $(document).ready(function(){ $(".hisrc img").hisrc(); });</script>
    • 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>
    • 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>
    • SERIES OF CHECKS TOFIND OUT RESPONSIVEPATH FOR IMAGES...
    • DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST...http://davidbcalhoun.com/2010/using-navigator-connection-android
    • Check pixel density...$.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
    • 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 and (min-width: 600px) { ... }@media screen and (min-width: 768px) { ... }@media screen and (min-width: 910px) { ... }
    • 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/responsive- content-images-using-a-spacer-png-and-background-image/
    • Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: data:image/gif;base64,R0lGODlhAQABAIAAAMz/AAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==, 17+ 9+ 11.6+ 5+ 8+
    • Single pixel GIF$.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: http://example.com/spg.gif, 17+ 9+ 11.6+ 5+ 6+
    • 2 APPROACHES,1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
    • 2 APPROACHES,1 SIMPLE SOLUTION.HEART WEB DESIGN https://github.com/teleject/hisrc
    • IMGGIMME THAT NEW SCHOOL123
    • IMGGIMME THAT NEW SCHOOL1 simple design for users2 browser, server handshake3 same, several formats
    • #rwdimg
    • THANK YOU!CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS