Browser-, Kunden- und Agenturmythen

1. Timo Wirth, Director Frontend | Berlin | Juni 2012, aperto AG

2. Kunde sein
2

3. Kunde sein
Seitenwechsel: 2 Projektmanager, dürfen
sich heute für 5 Minuten als Kunden
ausleben.
Wer möchte
Kunde sein?
3

4. Kunde sein
Als Diskussionspartner bräuchten wir
noch 2 Projektmanager.
Wer möchte
PM sein?
4

5. Szenario 1: Internet Explorer 7
Kunde
Du bist Kunde, du zahlst viel Geld und willst das beste, coolste, abgefahrenste
Design, was man heutzutage so machen kann.
Stichwörter: HTML5, CSS3, jQuery
Der Standardbrowser deines Unternehmens ist Internet Explorer 7 und du willst,
dass dein Chef über das Design der neuen Website staunt und du als
Verantwortlicher für die Website toll darstehst.
5

6. Szenario 1: Internet Explorer 7
PM
Kleiner Tipp: Internet Explorer 7 ist aus dem Jahr 2006 und sehr weit weg davon
entfernt ein moderner Browser zu sein. Von HTML5 und CSS3 hat er noch nichts
gewusst.
6

7. Szenario 2: runde Ecken, moderne Browserstrategie
Kunde
Es wurde vorher explizit eine moderne Browserstrategie vereinbart. Es ist kurz vor
Livegang und dein Chef, der einen Internet Explorer 8 verwendet beschwert sich,
dass die Ecken bei ihm nicht rund sondern eckig sind - das ist hässlich – „Regeln Sie
das mit der Agentur!“
7

8. Szenario 2: runde Ecken, moderne Browserstrategie
PM
Es wurde vorher explizit eine moderne Browserstrategie vereinbart. Die Website
sieht klasse aus, wurde fabelhaft umgesetzt und steht kurz vor Livegang. Das Projekt
war sehr wirtschaftlich. Durch die moderne Browserstrategie war die Frontend-
Entwicklung schneller und das Backend weniger kompliziert als sonst.
8

9. Was haben wir gerade gehört?
Viele unausgesprochene, falsche
Erwartungen und Mythen.
9

10. Mythen entkräften
Browser-, Kunden- und Agenturmythen

11. Mythos: Gleich aussehen
Eine Website muss in allen Browsern gleich aussehen.

12. Das Gegenteil ist richtig.
Sieht eine Website in allen Browsern
gleich aus, dann ist was schiefgelaufen

13. Das Gegenteil ist richtig.
Sieht eine Website in allen Browsern
• Design ist nicht zeitgemäß, viele moderne Möglichkeiten zur
gleich aus, dann ist was schiefgelaufen
Gestaltung werden nicht genutzt. Auf bestimmte Funktionen
und Animationen wurde verzichtet.
• Moderne, zeitsparende Möglichkeiten zur Gestaltung per
CSS bleiben ungenutzt.
• Es wird viel Zeit und Geld in Hacks und Workarounds
gesteckt
• Das Markup / HTML ist kompliziert
• Die Backend-Templates umfangreicher als sie sein müssten.

14. Web ist nicht Print

15. 15

16. 100%
Kontrolle im Print-Design:
Layout, Typo, Farben, Druckmaschine,
Papiersorte und Papierqualität
16

17. 17

18. Web
Designen für das Unbekannte.
18

19. 19

20. 20

21. Unterschiedliche Betriebssysteme,
webfähige Endgeräte, unterschiedliche
Steuerungselemente und unterschiedliche
Browser …
21

22. gut, leistungsfähig und modern
veraltert
22

23. Bei den Veralterungsgraden gibt extreme
Unterschiede
23

24. Und die mobilen:
klein, aber extrem modern
24

25. Web ist nicht Print
Eine Website muss viel mehr können als
Flyer, ein Buch oder Broschüre
Auffindbarkeit: Inhalte müssen über Google zu finden zu sein.
Plattformübergreifend: Sie muss auf den unterschiedlichsten
Browsern und Betriebssystemen laufen
25

26. Nutzer möchten mit einer Website mehr tun:
Schrift Bookmarken Text
vergrößern und Links kopieren
verschicken
Inhalte per RSS Inhalte Per Twitter,
abonnieren oder ausdrucken Facebook, Google
auf persönliche Plus
Seiten einbetten weiterempfehlen
26

27. Webprojekte verlaufen anders als
Printprojekte.
> Webprojekte sind nie fertig
> Design ist im Fluss
27

28. Wie begegnen wir dem Unbekannten?
Websites sollten für Nutzer und für Änderungen
gestaltet sein und sich dem Gerät, Browser und den
Bedürfnissen entsprechend anpassen können.
28

29. 29

30. Mythos: pixelgenau
Eine Website kann überall pixelgenau
Aufwand.
gleich aussehen. Es ist nur mehr Aufwand.r
30

31. Auch wenn wir wollten:
Ein Website kann nicht in allen Browsern
gleich aussehen

32. Eine pixelgenaue Umsetzung ist schon allein auf
Grund des Schriftrenderings der verschiedenen
Betriebssysteme nicht möglich.
32

33. http://www.kontain.com/fi/entries/13601/how-do-fonts-work-in-different-browsers/
.
33

34. http://css-tricks.com/font-rendering-differences-firefox-
vs-ie-vs-safari/
34

35. Das wird mit modernen Browsern, Webfonts und
Schattierungen nicht besser.
35

36. 36

37. Muss eine Website in allen Browsern
gleich aussehen?

40. Im Gegenteil:
Eine Website sollte in modernen Browsern besser
aussehen.
40

41. Ein User sieht die Website meist in nur
einem Browser.
4

42. Mythos: Photoshop
Die Website wird im Browser exakt so
aussehen, wie in Photoshop/ Fireworks.

43. Das wird nie der Fall sein.
Auch ein Flyer oder eine Broschüre
sieht gedruckt anders.
43

44. 44

45. Der Browser ändert alles

46. Eine lebendige Website im Browser, die aus dem
Internet geladen wird, ist etwas völlig anderes wie eine
statisches Bild in Photoshop.
Der Browser als neuer Kontext ändert alles.
46

47. Fokus
47

48. Interaktion

49. Maßnahmen, um den Kunden nicht zu enttäuschen
1. Früher interdisziplinär im Browser gestalten
2. Kunden in die Designentwicklung involvieren.
49

50. Mythos: Alle anderen
Alle andere Websites sehen doch auch
überall gleich aus. Die anderen kriegen das
doch auch hin.

51. Sehen sie nicht.
Es fällt uns nur nicht auf. Weil wir meist nur mit einem
Browser surfen.
51

52. Youtube Google Chrome 17.
Berlin / 2010 / Aperto stellt sich vor 52

53. Youtube Internet Explorer 8.
Berlin / 2010 / Aperto stellt sich vor 53

54. Youtube Internet Explorer 7.
Berlin / 2010 / Aperto stellt sich vor 54

55. Twitter Chrome 17
Berlin / 2010 / Aperto stellt sich vor 55

56. Twitter Internet Explorer 9
Berlin / 2010 / Aperto stellt sich vor 56

57. Twitter Internet Explorer 8
Berlin / 2010 / Aperto stellt sich vor 57

58. Yahoo Internet Explorer 8

59. Yahoo Chrome
59

60. Mythos: Schlecht aussehen
Mit diesen modernen Methoden sieht
meine Website in älteren Browsern
schlecht und hässlich aus.

61. Eine Website sollte in jedem Browser gut aussehen -
in Relation zu seinem Alter und
Gestaltungsmöglichkeiten
Ziel: das Beste aus jedem Browser herausholen
61

62. Aussehen ist wichtig, aber …
.
62

63. Die User Experience ist das Entscheidende.
63

64. Sei kein Poser.
Fake nicht dein Aussehen.
64

65. Checkboxen Internet Explorer 7
65

66. Stylische Checkboxen
66

67. Ladezeiten für Checkbox-Ersetzung
16 sec
0,3 Sekunden
67

68. Nachhaltiges Markenerlebnis
Was hinterlässt einen stärkeren Eindruck?
68

69. Runde Ecken, Schatten und Verlauf
Runde Ecken, Schatten und Verlauf
69

70. Lange Ladezeiten, ruckelige Animationen
70

71. Fehlermeldungen und gelegentliche Abstürze
71

72. Woran werden sie die Nutzer erinnern?
72

73. Mythos: Statistik
Die meisten normalen Menschen, die nicht
in Internetberufen tätig sind, haben doch
Internet Explorer.

74. Computerbild sei dank
Deutschland ist das Firefox-Land
74

75. 75

76. 76

77. 77

78. Privat vs. dienstlich
Je privater die Leute surfen, desto
weniger mit Microsoft.
78

79. Immer wieder sonntags
Seit dem 18. März ist Google Chrome
jeden Sonntag weltweit der beliebteste
Browser.
Quelle: http://gs.statcounter.com/press/chrome-is-worlds-number-one-browser-for-a-day 79

80. 80

81. Privat vs. dienstlich
Achtung Statistik:
• Woher kommen die Zahlen?
• Wer hat sie erhoben?
• Wie hoch ist die Grundgesamtheit /
Stichprobe?
• National oder international?
• Betrachtet man Browser Versionen oder nur die
Browserhersteller?
81

82. Was interessieren mich die anderen
Generell ist es wichtig, die
Browserstatistik der Website anzugucken,
die wir relaunchen.
82

83. Mythos: Referenzbrowser
Dann nehmen eben Internet Explorer 8 als
Referenzbrowser. Dort muss die Website
gut, wie im Design aussehen.

84. Kann man machen, aber …
84

85. Das Design muss ständig auf die Machbarkeit in
einem nicht mehr aktuellen Browser (IE8 erschienen
März 2009) überprüft werden.
Das Design ist rückwärtsgewandt.
Die Mehrheit der Nutzer sehen die Website schlechter
als sie aussehen müsste.
85

86. In der Zukunft liegt das Glück
Unsere Strategie ist zukunftsfähig statt rückwärtsgewandt.
Das Design verbessert sich automatisch: Aktualisieren
Nutzer ihren Browser von Internet Explorer 8 auf Version
sieht die Website dementsprechend besser aus – ohne
Anpassungen.
Internet Explorer 10 kommt in diesem Jahr.
86

87. TV
87

88. HD-TV
88

89. Mythos: Kunde
Der Kunde macht das nie mit. Er will dass
die Website überall gleich aussieht.

90. Progressive Enhancement ist ein völlig alltägliches
Prinzip. Welches wir alle ständig erleben. Kunden
verstehen das oft besser als wir annehmen.
90

91. neuer = besser = mehr können
91

92. 92

93. Mythos: nur neue Browser
Progressive Enhancement bedeutet, es
werden nur die neuen Browser unterstützt.
Auf älteren Browsern sieht die Website
schlecht aus und läuft schlecht oder gar
nicht.

94. Wenn wir Progressive Enhancement Techniken
einsetzen, sind uns ältere Browser nicht egal. Ganz
im Gegenteil.
Das Design, die Funktionen und die Animationen
werden an die Fähigkeiten des Browser angepasst.
Nichts ist kaputt oder funktioniert schlecht.
So entsteht für auch für Nutzer, egal welchen Browser
sie verwenden, immer ein gutes Nutzungserlebnis.
94

95. Für den Internet Explorer ist eine gute lesbare, schnell
ladene und sauber strukturierte, einspaltige Version
besser als das:
95

96. 96

97. Wir schließen keine Nutzer aus.
97

98. Mythos: Browserunterschiede
Browser sind doch Browser. Programme,
die Websites anzeigen. Außer bei den
Features können die Unterschiede da doch
so groß nicht sein.

99. Browser
Internet Explorer 6 verbesserte die
Unterstützung von CSS 1
2001
99

100. Das Handy 2001
100

101. Der erste iPod wurde am 23. Oktober 2001 vorgestellt
101

102. Nummer eins Song in Deutschland:
No Angels, Daylight in Your Eyes
102

103. Amazon.de 2001
103

104. Browser
Internet Explorer 7 Mangelhafte
Unterstützung von
2006 modernen Webstandards
So stellt Internet Explorer
7 den Acid2-Test nur sehr
fehlerhaft dar.
Acid3-Test:
14 von 100 Punkten.
104

105. Browser
Internet Explorer 8 Besteht Acid 2 Test
Acid 3: 20 von 100
März 2009
Kein HTML5
105

106. Browser
Internet Explorer 9 CSS 2.1 vollständig
 Runde Ecken
März 2011
Kein CSS3
Besteht Acid3-Test
(außer bei der
Darstellung)
106

107. Browser
Firefox
Version 13: seit 15. Juni
Alle 6 Wochen eine neue Version
Firefox 14: am17. Juli
107

108. Browser
Chrome
Version 20: 29. Juni
Alle 6 Wochen eine neue Version
Version 21: ~ Juli
108

109. 109

110. 110

111. Mythos: Angst für zukünftigen Browsern
Wenn neue Browser-Versionen
erscheinen, bedeutet das immer neue
Bugs und neue Kosten.
Wir müssen zusätzlich optimieren.

112. Wer hat Angst vor neuen Browsern?
Niemand

113. Neue Browser-Versionen
Und wenn er kommt?
Dann freuen wir uns. 
113

114. Wir kennen die nächsten
Browser (Beta-Versionen,
Nightly Builds).
Browser werden besser.
Bessere Funktionen,
funktionieren selbstständig.
Wenn keine schmutzigen Hacks
verwendet wurden, funktioniert
die neue Website einwandfrei.
114

115. Mythos: Hacks
Mit Hilfe von Hacks und Workarounds kann
die Website im Internet Explorer so
aussehen wie in Firefox und Chrome.

116. Hacks & Workarounds
Nein.
Ältere Browsern können neuere Technologien nicht
per Hacks nachgerüstet werden.
Insbesondere wenn es um HTML5-Technologien,
Animationen, Ajax-Requests oder um CSS3-Techniken
geht.
116

117. Hacks & Workarounds
Ja
es gibt Hacks und Workarounds (z.B. für runde Ecken,
Schatten, Transparenzen etc.)
aber
Hacks & Workarounds haben oftmals gravierende
Nachteile: Die Entwicklung verlängert und verteuert
sich. Die Website wird instabil, stürzt öfter ab und lädt
langsam.
117

118. Hacks & Workarounds
Besser
Techniken benutzen, die der Browser kann, umso eine
stabile und verlässliche User-Experience zu erreichen.
118

119. Apple iPhone Internet Explorer 7: Slideshow ohne Animation:
http://www.apple.com/iphone/
Berlin / 2010 / Aperto stellt sich vor 119

120. Weniger Code = weniger Bugs

121. Mythos: Weniger fürs Geld
Weniger Browser fürs gleiche Geld, das ist
doch ein schlechter Deal.

122. Geld besser einsetzen
Geld wird für wichtige Dinge eingesetzt. In besseres
Design und Funktionen, von den die Mehrheit der
Nutzer profitieren.
Geld wird nicht für marginale Designeffekte in alten
Internet Explorern verwendet, den nur wenige User
nutzen.
122

123. Bevor es jetzt gleich zu Ende ist:
Was ist jetzt eigentlich Progressive
Enhancement genau?

124. Progressive Enhancement: Definition
Stufe 3: Animation / Javascript.
Stufe 2: Design / CSS
Stufe 1: Die Website ist auf einem solidem
semantischen HTML-Fundament gebaut.
124

125. http://www.alistapart.com/articles/understandingprogressiveenhancement/

126. Progressive Enhancement: Definition
Folge: Alle Inhalten funktionieren immer und überall,
die Website sieht immer dem Leistungsspektrum des
Browsers entsprechend gut aus und funktioniert gut.
Es bleiben keine nicht oder schlecht funktionieren
Funktionen übrig.
126

127. Das Prinzip ist nicht bloß aus Rücksicht formuliert,
also im Blick zurück, sondern auch im Blick nach vorn.
127

128. Ein solides HTML-Fundament bietet auch für
zukünftige Geräte bessere Möglichkeiten.
128

129. Wie gehen wir jetzt mit diesen
Möglichkeiten und Problemen um?

130. 1 Moderne Browserstrategie
130

131. Unsere Strategie ist zukunftsfähig statt rückwärtsgewandt.
Wir möchten anspruchvolles Design entwickeln und
zeitgemäße Websites gestalten und nutzen dafür die volle
Bandbreite moderner Webtechnologien (HTML5, CSS3,
Javascript/Ecmascript5).
Unser Ziel ist es, dass die Website für den
größtmöglichen Teil der Nutzer gut aussieht und leicht
zu benutzen ist.
Wir testen das Design, CSS, HTML und alle dynamischen
Module in allen aktuellen und populären Browsern, um das
bestmögliche Ergebnis zu erreichen.
131

132. Ältere Browser sind uns trotzdem wichtig
Nutzer von älteren Browsern, die moderne
Webtechnologien nicht vollständig unterstützen, erhalten
ein Design, welches an die Fähigkeiten ihres Browser
angepasst ist.
Nutzer, die Internet Explorer 6 benutzen, werden nicht
ausgesperrt oder sehen eine in Teilen nicht
funktionierende Website, sondern sie erhalten ein
inhaltlich identisches Angebot, mit universellem
einspaltigen Layout, bei dem der Fokus auf Lesbarkeit und
schneller Ladezeit liegt.
132

133. Aktueller Browsertext aperto
' aktuelle Version zu Beginn der CSS-Entwicklung
'' aktuelle Version zu Beginn der CSS-Entwicklung und bis zu 2 Versionen darunter
''' Wir wählen eine zukunftsfähige Browserstrategie, die auf den neuesten
Webtechnologien und Progressive Enhancement basiert, aus folgenden Gründen:
• Alle modernen Möglichkeiten für zeitgemäßes Webdesign werden genutzt
• Veraltete Browser sind nicht der kleinste gemeinsame Nenner und schränken die
Weiterentwicklung des Designs und der User Experience ein
• Vereinfachung der Pflege
• Beschleunigung der Frontend-Entwicklung
• Reduktion von Programmieraufwänden und Templatekomplexität
• Minimierung der Aufwände bei Designweiterentwicklung und Re-Designs
• Schnelle Ladezeiten
• Die Website verhält sich in allen Browsern verlässlich und stabil, da nicht per
Hacks versucht wird ältere Browsern zu einer besseren Darstellung von Design
und Animation zu bringen
133

134. 2 Früher interdisziplinär
zusammenarbeiten
134

135. 3 Kunden informieren und in den
Gestaltungsprozess involvieren
135

136. 4 Im Browser designen
136

137. 137

138. Welche Fragen gibt es?
Fragen?
138