browserstrategien und progressive enhancement
DESCRIPTION
Browser-, Kunden- und AgenturmythenTRANSCRIPT
![Page 1: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/1.jpg)
Timo Wirth, Director Frontend | Berlin | Juni 2012, aperto AG
![Page 2: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/2.jpg)
2
Kunde sein
![Page 3: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/3.jpg)
3
Seitenwechsel: 2 Projektmanager, dürfen
sich heute für 5 Minuten als Kunden
ausleben.
Kunde sein
Wer möchte
Kunde sein?
![Page 4: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/4.jpg)
4
Als Diskussionspartner bräuchten wir
noch 2 Projektmanager.
Kunde sein
Wer möchte
PM sein?
![Page 5: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/5.jpg)
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
![Page 6: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/6.jpg)
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
![Page 7: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/7.jpg)
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
![Page 8: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/8.jpg)
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
![Page 9: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/9.jpg)
9
Was haben wir gerade gehört?
Viele unausgesprochene, falsche
Erwartungen und Mythen.
![Page 10: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/10.jpg)
Mythen entkräften
Browser-, Kunden- und Agenturmythen
![Page 11: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/11.jpg)
Mythos: Gleich aussehen
Eine Website muss in allen Browsern gleich aussehen.
![Page 12: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/12.jpg)
Sieht eine Website in allen Browsern
gleich aus, dann ist was schiefgelaufen
Das Gegenteil ist richtig.
![Page 13: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/13.jpg)
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.
![Page 14: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/14.jpg)
Web ist nicht Print
![Page 15: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/15.jpg)
15
![Page 16: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/16.jpg)
16
100%
Kontrolle im Print-Design:
Layout, Typo, Farben, Druckmaschine,
Papiersorte und Papierqualität
![Page 17: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/17.jpg)
17
![Page 18: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/18.jpg)
18
Web
Designen für das Unbekannte.
![Page 19: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/19.jpg)
19
![Page 20: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/20.jpg)
20
![Page 21: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/21.jpg)
21
Unterschiedliche Betriebssysteme,
webfähige Endgeräte, unterschiedliche
Steuerungselemente und unterschiedliche
Browser …
![Page 22: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/22.jpg)
22
gut, leistungsfähig und modern
veraltert
![Page 23: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/23.jpg)
23
Bei den Veralterungsgraden gibt extreme
Unterschiede
![Page 24: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/24.jpg)
24
Und die mobilen:
klein, aber extrem modern
![Page 25: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/25.jpg)
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
![Page 26: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/26.jpg)
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
![Page 27: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/27.jpg)
27
Webprojekte verlaufen anders als
Printprojekte.
> Webprojekte sind nie fertig
> Design ist im Fluss
![Page 28: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/28.jpg)
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.
![Page 29: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/29.jpg)
29
![Page 30: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/30.jpg)
30
Mythos: pixelgenau
Aufwand. Eine Website kann überall pixelgenau
gleich aussehen. Es ist nur mehr Aufwand.r
![Page 31: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/31.jpg)
Auch wenn wir wollten:
Ein Website kann nicht in allen Browsern
gleich aussehen
![Page 32: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/32.jpg)
32
Eine pixelgenaue Umsetzung ist schon allein auf
Grund des Schriftrenderings der verschiedenen
Betriebssysteme nicht möglich.
![Page 33: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/33.jpg)
33
http://www.kontain.com/fi/entries/13601/how-do-fonts-work-in-different-browsers/
.
![Page 34: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/34.jpg)
34
http://css-tricks.com/font-rendering-differences-firefox-
vs-ie-vs-safari/
![Page 35: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/35.jpg)
35
Das wird mit modernen Browsern, Webfonts und
Schattierungen nicht besser.
![Page 36: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/36.jpg)
36
![Page 37: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/37.jpg)
Muss eine Website in allen Browsern
gleich aussehen?
![Page 38: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/38.jpg)
![Page 39: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/39.jpg)
![Page 40: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/40.jpg)
40
Im Gegenteil:
Eine Website sollte in modernen Browsern besser
aussehen.
![Page 41: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/41.jpg)
4
1
Ein User sieht die Website meist in nur
einem Browser.
![Page 42: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/42.jpg)
Mythos: Photoshop
Die Website wird im Browser exakt so
aussehen, wie in Photoshop/ Fireworks.
![Page 43: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/43.jpg)
43
Das wird nie der Fall sein.
Auch ein Flyer oder eine Broschüre
sieht gedruckt anders.
![Page 44: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/44.jpg)
44
![Page 45: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/45.jpg)
Der Browser ändert alles
![Page 46: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/46.jpg)
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.
![Page 47: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/47.jpg)
47
Fokus
![Page 48: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/48.jpg)
Interaktion
![Page 49: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/49.jpg)
49
1. Früher interdisziplinär im Browser gestalten
2. Kunden in die Designentwicklung involvieren.
Maßnahmen, um den Kunden nicht zu enttäuschen
![Page 50: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/50.jpg)
Mythos: Alle anderen
Alle andere Websites sehen doch auch
überall gleich aus. Die anderen kriegen das
doch auch hin.
![Page 51: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/51.jpg)
51
Sehen sie nicht.
Es fällt uns nur nicht auf. Weil wir meist nur mit einem
Browser surfen.
![Page 52: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/52.jpg)
52 Berlin / 2010 / Aperto stellt sich vor
Youtube Google Chrome 17.
![Page 53: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/53.jpg)
53 Berlin / 2010 / Aperto stellt sich vor
Youtube Internet Explorer 8.
![Page 54: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/54.jpg)
54 Berlin / 2010 / Aperto stellt sich vor
Youtube Internet Explorer 7.
![Page 55: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/55.jpg)
55 Berlin / 2010 / Aperto stellt sich vor
Twitter Chrome 17
![Page 56: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/56.jpg)
56 Berlin / 2010 / Aperto stellt sich vor
Twitter Internet Explorer 9
![Page 57: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/57.jpg)
57 Berlin / 2010 / Aperto stellt sich vor
Twitter Internet Explorer 8
![Page 58: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/58.jpg)
Yahoo Internet Explorer 8
![Page 59: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/59.jpg)
59
Yahoo Chrome
![Page 60: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/60.jpg)
Mythos: Schlecht aussehen
Mit diesen modernen Methoden sieht
meine Website in älteren Browsern
schlecht und hässlich aus.
![Page 61: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/61.jpg)
61
Eine Website sollte in jedem Browser gut aussehen -
in Relation zu seinem Alter und
Gestaltungsmöglichkeiten
Ziel: das Beste aus jedem Browser herausholen
![Page 62: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/62.jpg)
62
Aussehen ist wichtig, aber …
.
![Page 63: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/63.jpg)
63
Die User Experience ist das Entscheidende.
![Page 64: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/64.jpg)
64
Sei kein Poser.
Fake nicht dein Aussehen.
![Page 65: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/65.jpg)
65
Checkboxen Internet Explorer 7
![Page 66: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/66.jpg)
66
Stylische Checkboxen
![Page 67: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/67.jpg)
67
Ladezeiten für Checkbox-Ersetzung
16 sec
0,3 Sekunden
![Page 68: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/68.jpg)
68
Was hinterlässt einen stärkeren Eindruck?
Nachhaltiges Markenerlebnis
![Page 69: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/69.jpg)
69
Runde Ecken, Schatten und Verlauf
Runde Ecken, Schatten und Verlauf
![Page 70: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/70.jpg)
70
Lange Ladezeiten, ruckelige Animationen
![Page 71: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/71.jpg)
71
Fehlermeldungen und gelegentliche Abstürze
![Page 72: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/72.jpg)
72
Woran werden sie die Nutzer erinnern?
![Page 73: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/73.jpg)
Mythos: Statistik
Die meisten normalen Menschen, die nicht
in Internetberufen tätig sind, haben doch
Internet Explorer.
![Page 74: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/74.jpg)
74
Deutschland ist das Firefox-Land
Computerbild sei dank
![Page 75: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/75.jpg)
75
![Page 76: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/76.jpg)
76
![Page 77: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/77.jpg)
77
![Page 78: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/78.jpg)
78
Je privater die Leute surfen, desto
weniger mit Microsoft.
Privat vs. dienstlich
![Page 79: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/79.jpg)
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
![Page 80: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/80.jpg)
80
![Page 81: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/81.jpg)
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
![Page 82: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/82.jpg)
82
Generell ist es wichtig, die
Browserstatistik der Website anzugucken,
die wir relaunchen.
Was interessieren mich die anderen
![Page 83: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/83.jpg)
Mythos: Referenzbrowser
Dann nehmen eben Internet Explorer 8 als
Referenzbrowser. Dort muss die Website
gut, wie im Design aussehen.
![Page 84: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/84.jpg)
84
Kann man machen, aber …
![Page 85: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/85.jpg)
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.
![Page 86: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/86.jpg)
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
![Page 87: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/87.jpg)
87
TV
![Page 88: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/88.jpg)
88
HD-TV
![Page 89: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/89.jpg)
Mythos: Kunde
Der Kunde macht das nie mit. Er will dass
die Website überall gleich aussieht.
![Page 90: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/90.jpg)
90
Progressive Enhancement ist ein völlig alltägliches
Prinzip. Welches wir alle ständig erleben. Kunden
verstehen das oft besser als wir annehmen.
![Page 91: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/91.jpg)
91
neuer = besser = mehr können
![Page 92: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/92.jpg)
92
![Page 93: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/93.jpg)
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.
![Page 94: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/94.jpg)
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.
![Page 95: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/95.jpg)
95
Für den Internet Explorer ist eine gute lesbare, schnell
ladene und sauber strukturierte, einspaltige Version
besser als das:
![Page 96: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/96.jpg)
96
![Page 97: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/97.jpg)
97
Wir schließen keine Nutzer aus.
![Page 98: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/98.jpg)
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.
![Page 99: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/99.jpg)
99
Internet Explorer 6 2001
Browser
verbesserte die
Unterstützung von CSS 1
![Page 100: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/100.jpg)
Das Handy 2001
100
![Page 101: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/101.jpg)
Der erste iPod wurde am 23. Oktober 2001 vorgestellt
101
![Page 102: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/102.jpg)
Nummer eins Song in Deutschland: No Angels, Daylight in Your Eyes
102
![Page 103: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/103.jpg)
Amazon.de 2001
103
![Page 104: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/104.jpg)
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.
![Page 105: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/105.jpg)
105
Internet Explorer 8 März 2009
Browser
Besteht Acid 2 Test
Acid 3: 20 von 100
Kein HTML5
![Page 106: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/106.jpg)
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)
![Page 107: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/107.jpg)
107
Firefox Version 13: seit 15. Juni
Alle 6 Wochen eine neue Version
Firefox 14: am17. Juli
Browser
![Page 108: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/108.jpg)
108
Chrome Version 20: 29. Juni
Alle 6 Wochen eine neue Version
Version 21: ~ Juli
Browser
![Page 109: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/109.jpg)
109
![Page 110: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/110.jpg)
110
![Page 111: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/111.jpg)
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.
![Page 112: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/112.jpg)
Wer hat Angst vor neuen Browsern? Niemand
![Page 113: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/113.jpg)
113
Und wenn er kommt?
Dann freuen wir uns.
Neue Browser-Versionen
![Page 114: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/114.jpg)
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.
![Page 115: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/115.jpg)
Mythos: Hacks
Mit Hilfe von Hacks und Workarounds kann
die Website im Internet Explorer so
aussehen wie in Firefox und Chrome.
![Page 116: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/116.jpg)
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
![Page 117: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/117.jpg)
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
![Page 118: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/118.jpg)
118
Besser Techniken benutzen, die der Browser kann, umso eine
stabile und verlässliche User-Experience zu erreichen.
Hacks & Workarounds
![Page 119: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/119.jpg)
119 Berlin / 2010 / Aperto stellt sich vor
Apple iPhone Internet Explorer 7: Slideshow ohne Animation:
http://www.apple.com/iphone/
![Page 120: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/120.jpg)
Weniger Code = weniger Bugs
![Page 121: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/121.jpg)
Mythos: Weniger fürs Geld
Weniger Browser fürs gleiche Geld, das ist
doch ein schlechter Deal.
![Page 122: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/122.jpg)
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
![Page 123: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/123.jpg)
Bevor es jetzt gleich zu Ende ist:
Was ist jetzt eigentlich Progressive
Enhancement genau?
![Page 124: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/124.jpg)
Progressive Enhancement: Definition
124
Stufe 1: Die Website ist auf einem solidem
semantischen HTML-Fundament gebaut.
Stufe 2: Design / CSS
Stufe 3: Animation / Javascript.
![Page 125: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/125.jpg)
http://www.alistapart.com/articles/understandingprogressiveenhancement/
![Page 126: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/126.jpg)
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
![Page 127: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/127.jpg)
127
Das Prinzip ist nicht bloß aus Rücksicht formuliert,
also im Blick zurück, sondern auch im Blick nach vorn.
![Page 128: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/128.jpg)
128
Ein solides HTML-Fundament bietet auch für
zukünftige Geräte bessere Möglichkeiten.
![Page 129: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/129.jpg)
Wie gehen wir jetzt mit diesen
Möglichkeiten und Problemen um?
![Page 130: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/130.jpg)
130
Moderne Browserstrategie 1
![Page 131: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/131.jpg)
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.
![Page 132: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/132.jpg)
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
![Page 133: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/133.jpg)
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
![Page 134: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/134.jpg)
134
Früher interdisziplinär
zusammenarbeiten 2
![Page 135: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/135.jpg)
135
Kunden informieren und in den
Gestaltungsprozess involvieren 3
![Page 136: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/136.jpg)
136
Im Browser designen 4
![Page 137: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/137.jpg)
137
![Page 138: Browserstrategien und Progressive Enhancement](https://reader034.vdocuments.us/reader034/viewer/2022051514/549c950aac7959ba2a8b4777/html5/thumbnails/138.jpg)
138
Welche Fragen gibt es?
Fragen?