2. Zweitag // Gründungsstory 02.11.2011
Fluid Images
Der naive Ansatz
In dem bekannten Buch „Responsive Web Design“ werden Fluid Images inkl. IE Hacks angepriesen.
❖ max-width: 100%
img, ❖ Browser-Verhalten:
embed,
object, ❖ Bild wird ggf. auf Größe seines
video { Containers runterskaliert
max-width: 100%;
}
❖ Kein Hochskalieren
❖ Krisselig in IE7
❖ Marcottes Gegenmittel:
http://alistapart.com/
❖ 60 Zeilen JavaScript articles/fluid-images/
❖ proprietärer Filter
progid:DXImageTransform.
Microsoft.AlphaImageLoader
Monster on Rails // Adaptive Images 2 11.01.2012
3. Zweitag // Gründungsstory 02.11.2011
„CSS Media Query for Mobile is
Fool‘s Gold“
Optimierung
für kleinere Bildschirme, schwachere
CPUs und schlechtes Netz kann nicht
mehr Code sein.
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Monster on Rails // Adaptive Images 3 11.01.2012
4. Zweitag // Gründungsstory 02.11.2011
„Fluid Images for Mobile is
Fool‘s Gold“
Optimierung
für kleinere Bildschirme, schwachere
CPUs und schlechtes Netz kann nicht
Skalierung großer Bilder sein.
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Monster on Rails // Adaptive Images 4 11.01.2012
5. Zweitag // Gründungsstory 02.11.2011
CSS Media Query for Mobile is Fool‘s Gold
You cannot hide!
Bilder einfach per display: none zu verstecken bedeutet nicht, dass sie nicht geladen werden.
❖ Hiding Images
❖ Either for replacing by smaller
ones or hiding them completely
@media screen and (max-width: 480px) {
img {
display: none;
}
}
Monster on Rails // Adaptive Images 5 11.01.2012
6. Zweitag // Gründungsstory 02.11.2011
CSS Media Query for Mobile is Fool‘s Gold
You cannot hide!
Bilder einfach per display: none zu verstecken bedeutet nicht, dass sie nicht geladen werden.
❖ Hiding Images
❖ Either for replacing by smaller
ones or hiding them completely
@media screen and (max-width: 480px) {
img {
display: none;
}
}
❖ iPhone still downloads them
❖ Same for CSS background-images
Monster on Rails // Adaptive Images 5 11.01.2012
7. Zweitag // Gründungsstory 02.11.2011
CSS Media Query for Mobile is Fool‘s Gold
You cannot hide!
Bilder einfach per display: none zu verstecken bedeutet nicht, dass sie nicht geladen werden.
❖ Hiding Images
❖ Either for replacing by smaller
ones or hiding them completely
@media screen and (max-width: 480px) {
img {
display: none;
}
}
❖ iPhone still downloads them
❖ Same for CSS background-images
❖ Some hacks currently work on iPhone
❖ e.g. hide parent of element with CSS bg-image
Monster on Rails // Adaptive Images 5 11.01.2012
8. Zweitag // Gründungsstory 02.11.2011
Let the Games begin!
❖ Client-seitig
❖ Dynamic Base Tag
❖ Image src per JavaScript setzen
❖ Client-seitig + Server-seitig
❖ JavaScript + Cookies + .htaccess Rewrite Rules
❖ Server-seitig
❖ Device Detection
Monster on Rails // Adaptive Images 6 11.01.2012
9. Zweitag // Gründungsstory 02.11.2011
Client-seitige Erkennung
Dynamic Base Tag
Das dynamische Setzen es <base> Tags verhindert nicht das Laden von falschen Bildern.
❖ HTML Element
❖ Teil des <head>
❖ Legt Basis-URL von relativen URLs im
Dokument fest
❖ Nutzung für Adaptive Images:
❖ Bilder in gewünschten Größen in
versch. Ordnern vorhalten
❖ nach JS Größenerkennung Base-Pfad
entsprechend setzen
❖ Nachteil
➡ Race Conditions
Monster on Rails // Adaptive Images 7 11.01.2012
10. Zweitag // Gründungsstory 02.11.2011
Client-seitige Erkennung
Image src per JavaScript setzen
Platzhalter funktionieren nicht ohne JavaScript und Bildsubstitution führt zu Race Conditions.
❖ Platzhalter
❖ 1x1px - Bild nach JS-Erkennung durch echtes Bild ersetzen
➡ keine Bilder ohne JS
➡ schlechte Wartbarkeit (alle Bilder nur in JS)
❖ Kleine Bilder ggf. durch große Ersetzen
❖ Im Zweifel wird zumindest ein kleines Bild angezeigt
❖ Angabe der großen Bild-URL in data-large
❖ Oder durch Namenskonvention
➡ Race Conditions
Monster on Rails // Adaptive Images 8 11.01.2012
11. Zweitag // Gründungsstory 02.11.2011
Client-seitige Erkennung
Wie Race Conditions vermeiden?
Dies ist die Tagline, die die Kernaussage der Folie in einem Satz auf den Punkt bringt.
❖ Noscript Tag
<noscript data-large='Koala.jpg' data-small='Koala-small.jpg' data-alt='Koala'>
<img src='Koala.jpg' alt='Koala' />
</noscript>
$('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));
});
❖ Nicht Teil des DOM-Baums, wenn JS an → keine Race Conditions
❖ Standardbild als Fallback wenn JS aus
➡ Unsemantisch
➡ Auswirkung auf Suchmaschinen unklar
➡ Beschränkte JS-Engines unterstützen keine DOM-Inserts
Monster on Rails // Adaptive Images 9 11.01.2012
12. Zweitag // Gründungsstory 02.11.2011
Client-seitige + Server-seitige Erkennung
JavaScript + Cookies + .htaccess Rewrite Rules
Cookies & URL-Rewrite-Regeln sind eine gute Methode, helfen jedoch nicht beim 1. Request
❖ 1. Request
❖ Auflösung per Javascript erkennen
❖ Auflösung in Cookie schreiben
❖ Bei Folge-Requests
❖ Cookie auslesen & .htaccess Rewrites auf Bild-URL anwenden
RewriteEngine On
RewriteCond %{HTTP_COOKIE} rwd-device=desktop
RewriteCond %{QUERY_STRING} desktop=([^&]+)
RewriteRule .* %1 [L]
➡ Race Condition im 1. Request
➡ Client muss Cookies akzeptieren
Monster on Rails // Adaptive Images 10 11.01.2012
13. Zweitag // Gründungsstory 02.11.2011
Server-seitige Erkennung
Device Detection
Über User-Agent-Strings können Geräte erkannt und Eigenschaften abgeleitet werden.
❖ Server-seitig keine Introspektion
❖ Jedoch: User-Agent String
❖ Beispiele:
❖ "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/
535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7"
❖ Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
(KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3
❖ Ansätze: Image Resizing Service
(per HTTP)
OpenSource „Datenbank“
(XML-Datei)
Monster on Rails // Adaptive Images 11 11.01.2012
14. Zweitag // Gründungsstory 02.11.2011
Server-seitige Erkennung
Sencha.io Src
Sencha.io Src ist ein Image-Resizing-Service, der auf Server-seitige Device-Erkennung setzt.
❖ Image Resizing Service
❖ Features
❖ Skalieren auf Device-Auflösung
❖ Skalieren auf Fenster-Größe
❖ via JS + Cookie (Race Conditions)
http://www.sencha.com/learn/
❖ Orientation Detection how-to-use-src-sencha-io/
❖ via JS + Cookie (Race Conditions)
❖ Skalieren relativ zur Device-Auflösung / Fenstergröße
❖ px reduzieren, px addieren, prozentual
❖ Untersch. Maximalgrößen für Desktop & Mobile
❖ Dateiformat, Kompression, Inline Images, Caching, Sharding
Monster on Rails // Adaptive Images 12 11.01.2012
15. Zweitag // Gründungsstory 02.11.2011
Server-seitige Erkennung
WURFL
WURFL ist eine Open Source XML-Datei, in der Device-Eigenschaften gesammelt werden.
❖ Wireless Universal Resouce FiLe
❖ Sammelt Eigenschaften zu http://wurfl.sourceforge.net/
User-Agent Strings
❖ Hierarchische Abbildung von
Geräten & Browsern
❖ Unterversionen / Folgeversionen
❖ Fallback-Mechanismus für
unbekannte Geräte
❖ APIs für Java, .NET & PHP
Monster on Rails // Adaptive Images 13 11.01.2012
16. Zweitag // Gründungsstory 02.11.2011
Server-seitige Erkennung
Device Detection nutzen & erweitern
Aufbau und Nutzung von „Device Knowledge“ ist Voraussetzung für gutes Responsive Design.
❖ Musterbeispiel: Yiibu
❖ Projekt von Mobile-Experten für browser.nokia.com
❖ 1. Request:
❖ Starten mit Basisprofil
❖ 3rd Party Device Detection Datenbank (WURFL, DeviceAtlas)
❖ Anreichern um eigenes Wissen („Tacit Knowledge“)
❖ Schreiben in Cookie („Profil“)
❖ Weitere Requests: http://www.slideshare.net/yiibu/
adaptation-why-responsive-design-
❖ Mitlieferung des Profils actually-begins-on-the-server
❖ Alle Anpassungen geschehen Server-seitig
Monster on Rails // Adaptive Images 14 11.01.2012
