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 9742-6670oltmanns@dma.do

www.dma.do/oltmanns

@dmadortmund@JanoschOltmanns