Browserstrategien und Progressive Enhancement

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

2

Kunde sein

3

Seitenwechsel: 2 Projektmanager, dürfen

sich heute für 5 Minuten als Kunden

ausleben.

Kunde sein

Wer möchte

Kunde sein?

4

Als Diskussionspartner bräuchten wir

noch 2 Projektmanager.

Kunde sein

Wer möchte

PM sein?

5

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.

Szenario 1: Internet Explorer 7

6

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.

Szenario 1: Internet Explorer 7

7

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!“

Szenario 2: runde Ecken, moderne Browserstrategie

8

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.

Szenario 2: runde Ecken, moderne Browserstrategie

9

Was haben wir gerade gehört?

Viele unausgesprochene, falsche

Erwartungen und Mythen.

Mythen entkräften

Browser-, Kunden- und Agenturmythen

Mythos: Gleich aussehen

Eine Website muss in allen Browsern gleich aussehen.

Sieht eine Website in allen Browsern

gleich aus, dann ist was schiefgelaufen

Das Gegenteil ist richtig.

Sieht eine Website in allen Browsern

gleich aus, dann ist was schiefgelaufen

• Design ist nicht zeitgemäß, viele moderne Möglichkeiten zur

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.

Das Gegenteil ist richtig.

Web ist nicht Print

15

16

100%

Kontrolle im Print-Design:

Layout, Typo, Farben, Druckmaschine,

Papiersorte und Papierqualität

17

18

Web

Designen für das Unbekannte.

19

20

21

Unterschiedliche Betriebssysteme,

webfähige Endgeräte, unterschiedliche

Steuerungselemente und unterschiedliche

Browser …

22

gut, leistungsfähig und modern

veraltert

23

Bei den Veralterungsgraden gibt extreme

Unterschiede

24

Und die mobilen:

klein, aber extrem modern

25

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

Web ist nicht Print

26

Nutzer möchten mit einer Website mehr tun:

Schrift

vergrößern

Inhalte

ausdrucken

Text

kopieren

Bookmarken

und Links

verschicken

Inhalte per RSS

abonnieren oder

auf persönliche

Seiten einbetten

Per Twitter,

Facebook, Google

Plus

weiterempfehlen

27

Webprojekte verlaufen anders als

Printprojekte.

> Webprojekte sind nie fertig

> Design ist im Fluss

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.

29

30

Mythos: pixelgenau

Aufwand. Eine Website kann überall pixelgenau

gleich aussehen. Es ist nur mehr Aufwand.r

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.

33

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

.

34

http://css-tricks.com/font-rendering-differences-firefox-

vs-ie-vs-safari/

35

Das wird mit modernen Browsern, Webfonts und

Schattierungen nicht besser.

36

Muss eine Website in allen Browsern

gleich aussehen?

40

Im Gegenteil:

Eine Website sollte in modernen Browsern besser

aussehen.

4

1

Ein User sieht die Website meist in nur

einem Browser.

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.

44

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.

47

Fokus

Interaktion

49

1. Früher interdisziplinär im Browser gestalten

2. Kunden in die Designentwicklung involvieren.

Maßnahmen, um den Kunden nicht zu enttäuschen

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.

52 Berlin / 2010 / Aperto stellt sich vor

Youtube Google Chrome 17.

53 Berlin / 2010 / Aperto stellt sich vor

Youtube Internet Explorer 8.

54 Berlin / 2010 / Aperto stellt sich vor

Youtube Internet Explorer 7.

55 Berlin / 2010 / Aperto stellt sich vor

Twitter Chrome 17

56 Berlin / 2010 / Aperto stellt sich vor

Twitter Internet Explorer 9

57 Berlin / 2010 / Aperto stellt sich vor

Twitter Internet Explorer 8

Yahoo Internet Explorer 8

59

Yahoo Chrome

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

62

Aussehen ist wichtig, aber …

.

63

Die User Experience ist das Entscheidende.

64

Sei kein Poser.

Fake nicht dein Aussehen.

65

Checkboxen Internet Explorer 7

66

Stylische Checkboxen

67

Ladezeiten für Checkbox-Ersetzung

16 sec

0,3 Sekunden

68

Was hinterlässt einen stärkeren Eindruck?

Nachhaltiges Markenerlebnis

69

Runde Ecken, Schatten und Verlauf

Runde Ecken, Schatten und Verlauf

70

Lange Ladezeiten, ruckelige Animationen

71

Fehlermeldungen und gelegentliche Abstürze

72

Woran werden sie die Nutzer erinnern?

Mythos: Statistik

Die meisten normalen Menschen, die nicht

in Internetberufen tätig sind, haben doch

Internet Explorer.

74

Deutschland ist das Firefox-Land

Computerbild sei dank

75

76

77

78

Je privater die Leute surfen, desto

weniger mit Microsoft.

Privat vs. dienstlich

79

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

Immer wieder sonntags

80

81

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?

Privat vs. dienstlich

82

Generell ist es wichtig, die

Browserstatistik der Website anzugucken,

die wir relaunchen.

Was interessieren mich die anderen

Mythos: Referenzbrowser

Dann nehmen eben Internet Explorer 8 als

Referenzbrowser. Dort muss die Website

gut, wie im Design aussehen.

84

Kann man machen, aber …

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.

86

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.

In der Zukunft liegt das Glück

87

TV

88

HD-TV

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.

91

neuer = besser = mehr können

92

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.

95

Für den Internet Explorer ist eine gute lesbare, schnell

ladene und sauber strukturierte, einspaltige Version

besser als das:

96

97

Wir schließen keine Nutzer aus.

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

Internet Explorer 6 2001

Browser

verbesserte die

Unterstützung von CSS 1

Das Handy 2001

100

Der erste iPod wurde am 23. Oktober 2001 vorgestellt

101

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

102

Amazon.de 2001

103

104

Internet Explorer 7 2006

Browser

Mangelhafte

Unterstützung von

modernen Webstandards

So stellt Internet Explorer

7 den Acid2-Test nur sehr

fehlerhaft dar.

Acid3-Test:

14 von 100 Punkten.

105

Internet Explorer 8 März 2009

Browser

Besteht Acid 2 Test

Acid 3: 20 von 100

Kein HTML5

106

Internet Explorer 9 März 2011

Browser

CSS 2.1 vollständig

Runde Ecken

Kein CSS3

Besteht Acid3-Test

(außer bei der

Darstellung)

107

Firefox Version 13: seit 15. Juni

Alle 6 Wochen eine neue Version

Firefox 14: am17. Juli

Browser

108

Chrome Version 20: 29. Juni

Alle 6 Wochen eine neue Version

Version 21: ~ Juli

Browser

109

110

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.

Wer hat Angst vor neuen Browsern? Niemand

113

Und wenn er kommt?

Dann freuen wir uns.

Neue Browser-Versionen

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.

Mythos: Hacks

Mit Hilfe von Hacks und Workarounds kann

die Website im Internet Explorer so

aussehen wie in Firefox und Chrome.

116

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.

Hacks & Workarounds

117

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.

Hacks & Workarounds

118

Besser Techniken benutzen, die der Browser kann, umso eine

stabile und verlässliche User-Experience zu erreichen.

Hacks & Workarounds

119 Berlin / 2010 / Aperto stellt sich vor

Apple iPhone Internet Explorer 7: Slideshow ohne Animation:

http://www.apple.com/iphone/

Weniger Code = weniger Bugs

Mythos: Weniger fürs Geld

Weniger Browser fürs gleiche Geld, das ist

doch ein schlechter Deal.

122

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.

Geld besser einsetzen

Bevor es jetzt gleich zu Ende ist:

Was ist jetzt eigentlich Progressive

Enhancement genau?

Progressive Enhancement: Definition

124

Stufe 1: Die Website ist auf einem solidem

semantischen HTML-Fundament gebaut.

Stufe 2: Design / CSS

Stufe 3: Animation / Javascript.

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

126

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.

Progressive Enhancement: Definition

127

Das Prinzip ist nicht bloß aus Rücksicht formuliert,

also im Blick zurück, sondern auch im Blick nach vorn.

128

Ein solides HTML-Fundament bietet auch für

zukünftige Geräte bessere Möglichkeiten.

Wie gehen wir jetzt mit diesen

Möglichkeiten und Problemen um?

130

Moderne Browserstrategie 1

131

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.

Unsere Strategie ist zukunftsfähig statt rückwärtsgewandt.

132

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.

Ältere Browser sind uns trotzdem wichtig

133

' 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

Aktueller Browsertext aperto

134

Früher interdisziplinär

zusammenarbeiten 2

135

Kunden informieren und in den

Gestaltungsprozess involvieren 3

136

Im Browser designen 4

137

138

Welche Fragen gibt es?

Fragen?