die sache mit den bildern - contao.ninja€¦ · steuerbar über css media queries device-größe...
TRANSCRIPT
Die Sache mit den Bildern
1
S Grafiken im mobilen Webdesign S
S Contao NRW Day 2014 S
Janosch Oltmanns seit 2011 bei DMA Interaction Developer – Desktop & Mobile Buchautor: Web-Apps erstellen mit CMS-Daten
2
HTML5 Content-Management-Systeme Datenaustausch JS/CSS-Frameworks PhoneGap
3
Bilder im mobilen Webdesign
Anforderungen
4
1
Hintergrund-Grafiken
5
2
Bilder im Content
6
3
Performance
7
4
…und Contao?
8
5
Anforderungen
9
10
AuflösungV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
11
Viewport-GrößeV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
12
BildausschnitteV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
13
DateiformateV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
AnforderungenBilder abhängig von der Auflösung des Gerätes verwenden
Bilder abhängig von der Abmessung des Viewports ausspielen
unterschiedliche Bildausschnitte oder Motive abhängig von der Viewport-Größe nutzen
unterschiedliche Dateiformate, je nach Fähigkeit des Browsers laden
Kombination aller Punkte
14
Hintergrund-Grafiken
15
16
Status quo
Hintergrund-Grafiken
17
Hintergrund-Grafiken
18
Hintergrund-Grafiken
19
Hintergrund-Grafiken
20
Hintergrund-GrafikenSteuerbar über CSS Media Queries
Device-Größe Viewport-Größe Pixel-Dichte
Verwendung unterschiedlicher Grafiken möglich
21Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
Hintergrund-Grafiken
22
Hintergrund-GrafikenSteuerbar über CSS Media Queries
Device-Größe Viewport-Größe Pixel-Dichte
Verwendung unterschiedlicher Grafiken möglich Nutzung verschiedener Dateitypen ist demnächst ebenfalls möglich
23Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
24
!
Bilder im Content
25
26
Status quo
Bilder im Content
27
Bilder im Content
28
29
Bilder im ContentVorteile
einfach zu Implementieren Nachteile
Für alle Geräte wird das gleiche Bild verwendet Retina-Displays werden standardmäßig nicht unterstützt „überflüssige“ Datenmenge für Smartphones
Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
30
Retina.js
31
Retina.jsNachteile
Für alle Geräte wird das gleiche Bild verwendet große Dateien für Smartphones Abhängigkeit von JavaScript
Ressourcen http://imulus.github.io/retinajs
Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
32
Adaptive Images
33
Adaptive ImagesNachteile
benötigt JavaScript zum Erkennen der Bildschirmgröße berücksichtigt nur die Bildschirmgröße lässt keine Ausspielung der Grafiken speziell für mehrspaltige Layouts abhängig der Spaltenbreiten zu
Ressourcen http://adaptive-images.com
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
Vie
wpo
rt
34
Focal Point
35
Focal PointNachteile
kein Einfluss auf die zu ladende Datei Ressourcen
http://designshack.net/articles/… http://goo.gl/qez0Yt http://www.cdnconnect.com/d… http://goo.gl/ciEmkJ
Vie
wpo
rt
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
36
37
Neue Elemente und Attribute
38
Attribut: srcset
39
Attribut: srcset
40
Ausgabe abhängig vom Display
41
Attribut: srcsetV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
42
Ausgabe abhängig vom Viewport
43
Attribut: srcset
44
Attribut: srcset
45
Attribut: srcsetV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
46
Attribut: sizes
47
Attribut: sizes
48
Attribut: srcset/sizes
49
Attribut: srcset/sizes
50
Attribut: srcset/sizes
51
Attribut: srcset/sizes
52
Attribut: srcset/sizesV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
53
Element: <picture>
54
<picture>-Element
55
Art Direction „Das Motiv verändern“
56
<picture>-Element
57
<picture>-Element
http://www.fotocommunity.de/pc/pc/display/24344628
58
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
inkl. IE-Support
59
Verschiedene Dateiformate
60
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
61
Kombination
62
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
63
<picture>-ElementV
iew
port
Aufl
ösun
g
Dat
eity
p
Art
-Dire
ct.
64
Browser-Support
65
Browser-Support: srcset
caniuse.com/#feat=srcset
66
Browser-Support: <picture>
caniuse.com/#feat=picture
67
Picturefill
PicturefillJavaScript-Polyfill für das <picture>-Element und die neuen Attribute
Entwickelt und betreut von der filament group (http://filamentgroup.com/) http://scottjehl.github.io/picturefill/
68
69
Nutzen!!!
Performance
70
PerformanceDie neuen Möglichkeiten werden dafür sorgen die Performance steigern zu können
Weitere Hinweise zur Performance-Steigerung Verringerung der http-Requests Komprimierung und Kompression von geladenen Ressourcen Caching nutzen
71
…und Contao?
72
…und Contao?
73
…und Contao?
74
…und Contao?
75
…und Contao?
76
…und Contao?
77
…und Contao?
78
…und Contao?
79
…und Contao?Ab Version 3.4.0
https://github.com/contao/core/issues/6932
80
81
…nutzt die neuen Möglichkeiten!
…denkt an die Performance…
Macht euch mit der neuen Syntax bekannt…
Ressourcenhttp://responsiveimages.org/
http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-source-element-when-used-with-the-picture-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#the-picture-element
http://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/
http://dev.opera.com/articles/responsive-images/
https://developers.google.com/speed/webp/
82
83
DMA GmbHJanosch Oltmanns +49 231 [email protected]
www.dma.do/oltmanns
@dmadortmund@JanoschOltmanns