SlideShare a Scribd company logo
1 of 108
CHRISTOPHER SCHMITT             @teleject




ADAPTIVE IMAGES
IN RESPONSIVE WEB DESIGN

            CSS DEV CONF 2012
[cssdevconf] Adaptive Images in RWD
WHY DON’T WE ASK
THE 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 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
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
FEATURE TESTING
vs. BROWSER SNIFFING

1

2

3
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2

3
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 WIDTH
GIVES US FRAME,
NOT THE CANVAS
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3
72            PPI
HAS SERVED US WELL
                (cc) flic.kr/p/6tjjRP
72 points-per-inch =
72 pixels-per-inch
96            PPI
IF A WINDOWS USER
72 points-per-inch
x [1+(1/3)]
= 96 PPI
“RETINA” DISPLAYS
          300ppi at 12 inches from the eyes
                                              78μm




                                              78μm
goo.gl/zpkFy
240

    144

72 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
240 PPI
240 PPI
72 PPI
RETINA DISPLAYS =
LARGER IMAGES,
LARGER FILE SIZES
FEATURE TESTING
vs. BROWSER SNIFFING

1    Browser width

2    Screen resolution

3    Bandwidth
SPEED TESTS
HINDER 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 image




https://github.com/adamdbradley/foresight.js
Speed test image



              +50k

https://github.com/adamdbradley/foresight.js
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
IMG
GIMME THAT OLD SCHOOL

1

2

3
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2

3
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
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>
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <picture> and/or srcset

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/
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,
            banner-phone-HD.jpeg 100w 2x">
  </h1>


http://www.whatwg.org/specs/web-apps/current-work/multipage/
           embedded-content-1.html#attr-img-srcset
IMG
GIMME THAT OLD SCHOOL

1    .htaccess

2    <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 TO
FIND OUT RESPONSIVE
PATH 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



              +50k

https://github.com/adamdbradley/foresight.js
LESS THAN 4G MEANS
MOBILE IMAGES LEFT
IN PLACE
BETWEEN 4G &
300 Kbps MEANS
REGULAR DESKTOP
IMAGES SWAPPED IN
FAST SPEED & HIGH
DENSITY, RETINA
IMAGES SWAPPED IN
https://github.com/crdeutsch/hisrc/tree/v2
2 TRICK PONY
CSS IS CORE.
WE USE CSS MEDIA
QUERIES 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/
AAAAACH5BAEAAAAALAAAAAABAAE
AAAICRAEAOw==',

   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
WORKAROUNDS &
TRICKS

1

2

3


          (cc) flic.kr/p/64fGf6
WORKAROUNDS &
TRICKS

1   background-size: auto

2

3


                    (cc) flic.kr/p/64fGf6
http://fittextjs.com/
[cssdevconf] Adaptive Images in RWD
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 &
TRICKS

1   background-size: auto

2   SVG

3


                    (cc) flic.kr/p/64fGf6
Native SVG




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

17+   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 check
var 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 &
TRICKS

1   background-size: auto

2   SVG

3   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 RWD




http://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>
WORKAROUNDS &
TRICKS

1   background-size: auto

2   SVG

3   font-based solutions

4   compressed JPEGs
                     (cc) flic.kr/p/64fGf6
[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
IMG
GIMME THAT NEW SCHOOL

1

2

3
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2

3

           #rwdimg
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3

           #rwdimg
IMG
GIMME THAT NEW SCHOOL

1    simple design for users

2   browser, server handshake

3   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="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
#rwdimg
THANK YOU!
CHRISTOPHER SCHMITT                                    @teleject


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

More Related Content

What's hot

[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0Amir Zmora
 
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webMaximiliano Firtman
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) betaKirk Yamamoto
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...Patrick Lauke
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14Matthias Lau
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?Remy Sharp
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraWalter Ebert
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaÖnder Ceylan
 
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011Robert Nyman
 

What's hot (18)

[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design[peachpit] Adaptive Images in Responsive Web Design
[peachpit] Adaptive Images in Responsive Web Design
 
[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design[wvbcn] Adaptive Images in Responsive Web Design
[wvbcn] Adaptive Images in Responsive Web Design
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
WebRTC Standards & Implementation Q&A - getDisplayMedia 1.0
 
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile webFINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14The Big Picture: Responsive Images in Action #scd14
The Big Picture: Responsive Images in Action #scd14
 
HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?HTML5: friend or foe (to Flash)?
HTML5: friend or foe (to Flash)?
 
Mehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFraMehr Performance für WordPress - WPFra
Mehr Performance für WordPress - WPFra
 
Puppeteer can automate that! - Frontmania
Puppeteer can automate that! - FrontmaniaPuppeteer can automate that! - Frontmania
Puppeteer can automate that! - Frontmania
 
HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011HTML5 APIs - The New Frontier 2011
HTML5 APIs - The New Frontier 2011
 

Viewers also liked

Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013Carlos Pardeza
 
RKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing UpdateRKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing UpdateRKJ Partners, LLC
 
Diana laura hernández cortéz
Diana laura hernández cortéz Diana laura hernández cortéz
Diana laura hernández cortéz Diana Cortéz
 
Optimización de potencia contratada
Optimización de potencia contratadaOptimización de potencia contratada
Optimización de potencia contratadaVega Phil
 
IBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelanteIBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelanteAngel Villar Garea
 
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...AIDA_Americas
 
Isis Open House Conference May2010
Isis Open House Conference May2010Isis Open House Conference May2010
Isis Open House Conference May2010Friso de Jong
 
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
Reasons Why Entrepreneurship Makes You A Better Person | Carl KruseCarl Kruse
 
Intro to Model United Nations
Intro to Model United NationsIntro to Model United Nations
Intro to Model United NationsYEF
 
Sabana, pradera y desierto tropical
Sabana, pradera y desierto tropicalSabana, pradera y desierto tropical
Sabana, pradera y desierto tropicalacanamero
 
Berlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEWBerlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEWNico Mercker-Sague
 

Viewers also liked (20)

Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing MotivacionalLibros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
Libros de Autoayuda Gratis: Arte y Estilo de Marketing Motivacional
 
Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013Cuadrantes juegos deportivos san roque 2013
Cuadrantes juegos deportivos san roque 2013
 
RKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing UpdateRKJ Partners - U.S. Middle Market Financing Update
RKJ Partners - U.S. Middle Market Financing Update
 
Tech Age of Acceleration
Tech Age of AccelerationTech Age of Acceleration
Tech Age of Acceleration
 
Diana laura hernández cortéz
Diana laura hernández cortéz Diana laura hernández cortéz
Diana laura hernández cortéz
 
Boysstate 2013 v2
Boysstate 2013 v2Boysstate 2013 v2
Boysstate 2013 v2
 
Computacion 1
Computacion 1Computacion 1
Computacion 1
 
Optimización de potencia contratada
Optimización de potencia contratadaOptimización de potencia contratada
Optimización de potencia contratada
 
IBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelanteIBM Flash Systems, un paso adelante
IBM Flash Systems, un paso adelante
 
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
Construyendo Resiliencia en los Humedales de la Provincia Datem del Marañón d...
 
Isis Open House Conference May2010
Isis Open House Conference May2010Isis Open House Conference May2010
Isis Open House Conference May2010
 
Williams lombrozo2010
Williams lombrozo2010Williams lombrozo2010
Williams lombrozo2010
 
Hoja de vida jersson suarez
Hoja de vida jersson suarezHoja de vida jersson suarez
Hoja de vida jersson suarez
 
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
Reasons Why Entrepreneurship Makes You A Better Person | Carl Kruse
 
El plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalizaciónEl plan de la banca de inversión en la internacionalización
El plan de la banca de inversión en la internacionalización
 
Present amoreno 032016
Present amoreno 032016Present amoreno 032016
Present amoreno 032016
 
Intro to Model United Nations
Intro to Model United NationsIntro to Model United Nations
Intro to Model United Nations
 
Sabana, pradera y desierto tropical
Sabana, pradera y desierto tropicalSabana, pradera y desierto tropical
Sabana, pradera y desierto tropical
 
Berlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEWBerlin_TMT-Sector_Market OVERVIEW
Berlin_TMT-Sector_Market OVERVIEW
 
El menu
El menuEl menu
El menu
 

Similar to [cssdevconf] Adaptive Images in RWD

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[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 DesignChristopher Schmitt
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[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 DesignChristopher Schmitt
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"WebVisions
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopbetabeers
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 WorkshopDavid Manock
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013Bastian Grimm
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...IT Event
 

Similar to [cssdevconf] Adaptive Images in RWD (20)

[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design[HEWEBFL] Adaptive Images in Responsive Web Design
[HEWEBFL] Adaptive Images in Responsive Web Design
 
[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] Adaptive Images in Responsive Web Design[cssdevconf] Adaptive Images in Responsive Web Design
[cssdevconf] 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
 
[psuweb] Adaptive Images in Responsive Web Design
[psuweb] Adaptive Images in Responsive Web Design[psuweb] Adaptive Images in Responsive Web Design
[psuweb] 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
 
[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design[drupalcampatx] Adaptive Images in Responsive Web Design
[drupalcampatx] Adaptive Images in Responsive Web Design
 
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"Christopher Schmitt, "Adaptive Images for Responsive Web Design"
Christopher Schmitt, "Adaptive Images for Responsive Web Design"
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
The specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktopThe specs behind the sex, mobile-friendly layout beyond the desktop
The specs behind the sex, mobile-friendly layout beyond the desktop
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Responsive design
Responsive designResponsive design
Responsive design
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
 
Web Apps
Web AppsWeb Apps
Web Apps
 

More from Christopher Schmitt

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductChristopher Schmitt
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't CodeChristopher Schmitt
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't CodeChristopher Schmitt
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGsChristopher Schmitt
 
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 

More from Christopher Schmitt (12)

Keeping Colors from Killing Your Product
Keeping Colors from Killing Your ProductKeeping Colors from Killing Your Product
Keeping Colors from Killing Your Product
 
[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code[artifactconf] Github for People Who Don't Code
[artifactconf] Github for People Who Don't Code
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
GitHub for People Who Don't Code
GitHub for People Who Don't CodeGitHub for People Who Don't Code
GitHub for People Who Don't Code
 
[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs[sxsw2013] Extremely Compressed JPEGs
[sxsw2013] Extremely Compressed JPEGs
 
[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3[amigos] HTML5 and CSS3
[amigos] HTML5 and CSS3
 
[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design[convergefl] Adaptive Images in Responsive Web Design
[convergefl] Adaptive Images in Responsive Web Design
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

[cssdevconf] Adaptive Images in RWD

  • 1. CHRISTOPHER SCHMITT @teleject ADAPTIVE IMAGES IN RESPONSIVE WEB DESIGN CSS DEV CONF 2012
  • 3. WHY DON’T WE ASK THE BROWSER? (cc) flic.kr/p/vUBHv
  • 5. Mozilla/1.0 (Win3.1) Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) http://www.useragentstring.com/ (cc) flic.kr/p/vUBHv
  • 6. 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
  • 7. 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
  • 9. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 3
  • 10. 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
  • 11. 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/
  • 12. 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) { ... }
  • 14. BROWSER WIDTH GIVES US FRAME, NOT THE CANVAS
  • 15. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3
  • 16. 72 PPI HAS SERVED US WELL (cc) flic.kr/p/6tjjRP
  • 17. 72 points-per-inch = 72 pixels-per-inch
  • 18. 96 PPI IF A WINDOWS USER
  • 20. “RETINA” DISPLAYS 300ppi at 12 inches from the eyes 78μm 78μm goo.gl/zpkFy
  • 21. 240 144 72 PPI
  • 22. [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
  • 24. 240
  • 28. RETINA DISPLAYS = LARGER IMAGES, LARGER FILE SIZES
  • 29. FEATURE TESTING vs. BROWSER SNIFFING 1 Browser width 2 Screen resolution 3 Bandwidth
  • 30. SPEED TESTS HINDER SPEED, USER EXPERIENCE (cc) flic.kr/p/4DziUN
  • 31. 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
  • 32. 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
  • 34. Speed test image +50k https://github.com/adamdbradley/foresight.js
  • 35. 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
  • 36. IMG GIMME THAT OLD SCHOOL 1 2 3
  • 37. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 3
  • 38. 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
  • 39. Filament .htaccess <script src="responsiveimgs.js"></script> <img src="sample-content/running-sml.jpg? full=sample-content/running-lrg.jpg" /> 4+ 8+
  • 40. ...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/
  • 42. ADD .HTACCESS, JS, PHP 5, GD lib*, & THEN <IMG>
  • 43. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> and/or srcset 3
  • 44. 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/
  • 45. <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/
  • 46. ADD IF-ELSE HTML, JS, BORROW <VIDEO>, & THEN <IMG>
  • 47. @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
  • 48. IMG GIMME THAT OLD SCHOOL 1 .htaccess 2 <picture> 3 HiSRC
  • 49. 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>
  • 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. 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>
  • 52. SERIES OF CHECKS TO FIND OUT RESPONSIVE PATH FOR IMAGES...
  • 53. DO NATIVE SPEED TEST FOR MOBILE DEVICES FIRST... http://davidbcalhoun.com/2010/using-navigator-connection-android
  • 54. Check pixel density... $.hisrc.devicePixelRatio = 1; if(window.devicePixelRatio !== undefined) { $.hisrc.devicePixelRatio = window.devicePixelRatio }; https://gist.github.com/2428356
  • 55. Force speed test +50k https://github.com/adamdbradley/foresight.js
  • 56. LESS THAN 4G MEANS MOBILE IMAGES LEFT IN PLACE
  • 57. BETWEEN 4G & 300 Kbps MEANS REGULAR DESKTOP IMAGES SWAPPED IN
  • 58. FAST SPEED & HIGH DENSITY, RETINA IMAGES SWAPPED IN https://github.com/crdeutsch/hisrc/tree/v2
  • 60. CSS IS CORE. WE USE CSS MEDIA QUERIES FOR DESIGN
  • 62. 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) { ... }
  • 67. 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/
  • 68. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'data:image/ gif;base64,R0lGODlhAQABAIAAAMz/ AAAAACH5BAEAAAAALAAAAAABAAE AAAICRAEAOw==', 17+ 9+ 11.6+ 5+ 8+
  • 69. Single pixel GIF $.hisrc.defaults = { useTransparentGif: true, transparentGifSrc: 'http:// example.com/spg.gif', 17+ 9+ 11.6+ 5+ 6+
  • 70. 2 APPROACHES, 1 SIMPLE SOLUTION. https://github.com/teleject/hisrc
  • 71. 2 APPROACHES, 1 SIMPLE SOLUTION. HEART WEB DESIGN https://github.com/teleject/hisrc
  • 72. WORKAROUNDS & TRICKS 1 2 3 (cc) flic.kr/p/64fGf6
  • 73. WORKAROUNDS & TRICKS 1 background-size: auto 2 3 (cc) flic.kr/p/64fGf6
  • 76. 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+
  • 77. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 (cc) flic.kr/p/64fGf6
  • 79. PNG 16kb SVG 7kb 17+ 9+ 11.6+ 5+ 9+
  • 80. 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>
  • 81. jQuery check var checkBrowser = $('html').hasClass('lt-ie9'); <div class="svgswap"> <img src="example.svg" data-svgswap="example.png"> </div> https://github.com/teleject/svg-swap
  • 83. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions (cc) flic.kr/p/64fGf6
  • 84. ...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.”
  • 87. 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>
  • 88. WORKAROUNDS & TRICKS 1 background-size: auto 2 SVG 3 font-based solutions 4 compressed JPEGs (cc) flic.kr/p/64fGf6
  • 94. IMG GIMME THAT NEW SCHOOL 1 2 3
  • 95. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 3 #rwdimg
  • 96. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 #rwdimg
  • 97. IMG GIMME THAT NEW SCHOOL 1 simple design for users 2 browser, server handshake 3 same, several formats #rwdimg
  • 105. <link rel="shortcut icon" href="/assets/favicon.ico" /> #rwdimg
  • 106. <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
  • 108. THANK YOU! CHRISTOPHER SCHMITT @teleject http://goo.gl/gSYmS The Non Breaking Space Podcast - http://nonbreakingspace.tv/