browserstrategien und progressive enhancement
DESCRIPTION
Browser-, Kunden- und AgenturmythenTRANSCRIPT
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?