Wer ist die Flitzpiepe da überhaupt?

• Sven Wolfermann (35)
• Freelancer für moderne Webentwicklung
  (HTML5, CSS3, Responsive Webdesign) aus Berlin
• CSS3 Adventskalender 2010/2011
• schreibt Artikel für das T3N-, PHP- und
  Webstandards-Magazin (new: Screengui.de)
• mobile Geek

• Twitter: @maddesigns
• Web: http://maddesigns.de

Responsive Webdesign

• Flexible Spaltenraster, die auf Prozentwerten basieren
• Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an
• CSS3 um Gerätegröße abzufragen und Inhalte anzupassen

flexible Medieninhalte

keine statische Breitenangaben

img, embed, object, video {
  max-width: 100%;
}
        

Für Medien muss im CSS eine flexible Breite gesetzt werden, die Höhe soll sich automatisch in Relation anpassen.

img, embed, object, video {
   max-width: 100%; /* max. original px width */
   height: auto;
/* width: auto; */
}
        

Responsive Images

• Problem ist, dass sich Bilddatenmengen nicht dynamisch anpassen
• Große Bilder werden zwar verkleinert dargestellt, laden aber unnötige Datenmengen
• <img>-Tag ist nicht dafür ausgelegt
• ein responsives Bildformat gibt es nicht
• Polyfills müssen her

Bilder größter Anteil bei Websites

Größenübersicht deviceoptimierter Bilder

Asset Loading

Tests des Ladeverhalten mobiler Browser

Lösungsansätze für Bildgrößenproblematik

CSS3-Ansatz von Nicolas Gallagher

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg">

Umsetzung auf CSS-Basis

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Nachteil: lädt 2 Bilder

Responsive Images

Ansatz der Filament Group

<img src="small.jpg?full=large.jpg">

https://github.com/filamentgroup/Responsive-Images

wird nicht mehr empfohlen, <picture> / bzw. picturefill wird empfohlen

Responsive Images

Die aktuell einfachste und beste Lösung meiner Meinung nach ist die <noscript>-Lösung mit HTML5 data-Attributen

<noscript data-large="Koala-large.jpg"
          data-small="Koala-small.jpg" data-alt="Koala">
          <img src="Koala-small.jpg" alt="Koala" />
</noscript>
        

Vorteil: Assets die im <noscript>-Tag eingebunden sind, werden nicht vom Browser in den DOM eingefügt (und geladen), wenn JavaScript aktiviert ist. Ressourcen werden also nicht doppelt geladen.

Responsive Images – <noscript>

jQuery Snippet

$('noscript[data-large][data-small]').each(function(){
  var src = screen.width >= 500 ?
  $(this).data('large') :
  $(this).data('small');
  $('<img src="' + src + '" alt="' + $(this)
  .data('alt') + '" />')
  .insertAfter($(this));
});
        

Nachteil: jQuery Abhängigkeit

<picture> Element

Aktuelle W3C-Diskussion – <picture> Element

Aufbau wie <video> Element + srcset für Retina-Images

<picture width="500" height="500">
  <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
  <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
  <source srcset="small-1.jpg 1x, small-2.jpg 2x">
  <img src="small-1.jpg" alt="">
  <p>Accessible text</p>
</picture>

Picturefill

Polyfill für den <picture> Ansatz

<div data-picture data-alt="Alttext">
  <div data-src="small.jpg"></div>
  <div data-src="medium.jpg"    data-media="(min-width: 400px)"></div>
  <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
  <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
  <noscript>
    <img src="external/imgs/small.jpg" alt="Alt">
  </noscript>
</div>
        

srcset

Vorschlag für ein neues <img> Attribut "srcset"

<img src="pear-mobile.jpeg"
     srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
     alt="The pear is juicy.">
              

CSS Retina-Support für background-images

/* Safari 6, Chrome supports background-image: -webkit-image-set(); */
background-image: -webkit-image-set(
                  url(cloud-sd.png) 1x, url(cloud-hd.png) 2x);

Clown Car Technique

Media Queries innerhalb SVG

<img src="file.svg" alt="responsive image">

Nachteil: SVG erst ab Android 4

Clown Car Technique

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
 <title>Clown Car Technique</title>
 <style>
  svg { background-size: 100% 100%; background-repeat: no-repeat;
  }
 @media screen and (max-width: 400px) {
  svg {background-image: url(images/small.png");}
 }
 @media screen and (min-width: 401px) and (max-width: 700px) {
  svg {background-image: url(images/medium.png);}
 }
 @media screen and (min-width: 701px) and (max-width: 1000px) {
  svg {background-image: url(images/big.png);}
 }
 @media screen and (min-width: 1001px) {
  svg {background-image: url(images/huge.png);}
 }
 </style>
</svg>
        

Adaptive Images

adaptive-images.com Script einbinden

Cookie-Snippet so früh wie möglich im <head>

<head>
 <script>
  document.cookie='resolution='+Math.max(screen.width,screen.height)+';
  path=/';
 </script>
 …
</head>

PHP-Script anpassen (global Breakpoints)

$resolutions = array(1382, 992, 768, 480, 320);
            

.htaccess anpassen

<IfModule mod_rewrite.c>
#Enable URL rewriting
RewriteEngine On

Options +FollowSymlinks
#Adaptive Images
#don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache
#further directories that shouldn't use AI
RewriteCond %{REQUEST_URI} !cssimages
#Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
RewriteRule ^.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L]
. . .

</IfModule>
              

Responsive Images Service – ReSRC.it

Lösungsvarianten für Bildausschnitte – Focal Point

Bildinhalte anders fokussieren

Responsive Image CDN-Lösung http://www.cdnconnect.com/

Retina – hochauflösende Bilder

CSS abhängig von der Pixeldichte

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* Retina-specific stuff here */
}

Icon Fonts == Dingbats on dope

Vorteil:

• Farben und Größe der Icons kann leicht mit CSS angepasst werden
• zusätzlich können CSS-Effekte, wie text-shadow für die Darstellung genutzt werden

Icon Fonts

kostenloser Service icomoon.io

nachgezählt? Es waren nur 10 Techniken in 20min ;)

weitere interessante Links

8 Guidelines and 1 Rule for Responsive Images

Sensible jumps in responsive image file sizes

Responsive Images for Ruby on Rails

Riloadr – cross-browser framework-independent responsive images loader

Danke für die Aufmerksamkeit!

Sven Wolfermann | maddesigns

http://maddesigns.de