Die Sache mit den Bildern

Transkript

1 Die Sache mit den Bildern S Grafiken im mobilen Webdesign S S Contao NRW Day 2014 S 1

2 Janosch Oltmanns seit 2011 bei DMA Interaction Developer Desktop & Mobile Buchautor: Web-Apps erstellen mit CMS-Daten HTML5 Content-Management-Systeme Datenaustausch JS/CSS-Frameworks PhoneGap 2

3 Bilder im mobilen Webdesign 3

4 1 Anforderungen 4

5 2 Hintergrund-Grafiken 5

6 3 Bilder im Content 6

7 4 Performance 7

8 5 und Contao? 8

9 Anforderungen 9

10 Auflösung Auflösung Viewport Art-Direct. Dateityp 10

11 Viewport-Größe Auflösung Viewport Art-Direct. Dateityp 11

12 Bildausschnitte Auflösung Viewport Art-Direct. Dateityp 12

13 Dateiformate Auflösung Viewport Art-Direct. Dateityp 13

14 Anforderungen Bilder 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

15 Hintergrund-Grafiken 15

16 Status quo 16

17 Hintergrund-Grafiken 17

18 Hintergrund-Grafiken 18

19 Hintergrund-Grafiken 19

20 Hintergrund-Grafiken 20

21 Hintergrund-Grafiken Steuerbar über CSS Media Queries Device-Größe Viewport-Größe Pixel-Dichte Verwendung unterschiedlicher Grafiken möglich Auflösung Viewport Art-Direct. Dateityp 21

22 Hintergrund-Grafiken 22

23 Hintergrund-Grafiken Steuerbar ü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 Auflösung Viewport Art-Direct. Dateityp 23

24 ! 24

25 Bilder im Content 25

26 Status quo 26

27 Bilder im Content 27

28 Bilder im Content 28

29 Bilder im Content Vorteile 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 Auflösung Viewport Art-Direct. Dateityp 29

30 Retina.js 30

31 Retina.js Nachteile Für alle Geräte wird das gleiche Bild verwendet große Dateien für Smartphones Abhängigkeit von JavaScript Ressourcen Auflösung Viewport Art-Direct. Dateityp 31

32 Adaptive Images 32

33 Adaptive Images Nachteile 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 Auflösung Viewport Art-Direct. Dateityp 33

34 Focal Point 34

35 Focal Point Nachteile kein Einfluss auf die zu ladende Datei Ressourcen Auflösung Viewport Art-Direct. Dateityp 35

36 36

37 Neue Elemente und Attribute 37

38 Attribut: srcset 38

39 Attribut: srcset 39

40 Ausgabe abhängig vom Display 40

41 Attribut: srcset Auflösung Viewport Art-Direct. Dateityp 41

42 Ausgabe abhängig vom Viewport 42

43 Attribut: srcset 43

44 Attribut: srcset 44

45 Attribut: srcset Auflösung Viewport Art-Direct. Dateityp 45

46 Attribut: sizes 46

47 Attribut: sizes 47

48 Attribut: srcset/sizes 48

49 Attribut: srcset/sizes 49

50 Attribut: srcset/sizes 50

51 Attribut: srcset/sizes 51

52 Attribut: srcset/sizes Auflösung Viewport Art-Direct. Dateityp 52

53 Element: <picture> 53

54 <picture>-element 54

55 Art Direction Das Motiv verändern 55

56 <picture>-element 56

57 <picture>-element 57

58 <picture>-element inkl. IE-Support Auflösung Viewport Art-Direct. Dateityp 58

59 Verschiedene Dateiformate 59

60 <picture>-element Auflösung Viewport Art-Direct. Dateityp 60

61 Kombination 61

62 <picture>-element Auflösung Viewport Art-Direct. Dateityp 62

63 <picture>-element Auflösung Viewport Art-Direct. Dateityp 63

64 Browser-Support 64

65 Browser-Support: srcset caniuse.com/#feat=srcset 65

66 Browser-Support: <picture> caniuse.com/#feat=picture 66

67 Picturefill 67

68 Picturefill JavaScript-Polyfill für das <picture>-element und die neuen Attribute Entwickelt und betreut von der filament group ( filamentgroup.com/) 68

69 Nutzen!!! 69

70 Performance 70

71 Performance Die 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

72 und Contao? 72

73 und Contao? 73

74 und Contao? 74

75 und Contao? 75

76 und Contao? 76

77 und Contao? 77

78 und Contao? 78

79 und Contao? 79

80 und Contao? Ab Version

81 Macht euch mit der neuen Syntax bekannt denkt an die Performance nutzt die neuen Möglichkeiten! 81

82 Ressourcen multipage/embedded-content.html#the-source-elementwhen-used-with-the-picture-element multipage/embedded-content.html#the-picture-element

83 DMA GmbH Janosch Oltmanns