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
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.
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
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
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
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
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
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
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
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
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
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.
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
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.
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
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
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
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