Browserstrategien und Progressive Enhancement

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

Kunde sein 2

Kunde seinSeitenwechsel: 2 Projektmanager, dürfensich heute für 5 Minuten als Kundenausleben. Wer möchte Kunde sein? 3

Kunde seinAls Diskussionspartner bräuchten wirnoch 2 Projektmanager. Wer möchte PM sein? 4

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

Szenario 1: Internet Explorer 7PMKleiner Tipp: Internet Explorer 7 ist aus dem Jahr 2006 und sehr weit weg davonentfernt ein moderner Browser zu sein. Von HTML5 und CSS3 hat er noch nichtsgewusst. 6

Szenario 2: runde Ecken, moderne BrowserstrategieKundeEs wurde vorher explizit eine moderne Browserstrategie vereinbart. Es ist kurz vorLivegang 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 Siedas mit der Agentur!“ 7

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

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

Mythen entkräftenBrowser-, Kunden- und Agenturmythen

Mythos: Gleich aussehenEine Website muss in allen Browsern gleich aussehen.

Das Gegenteil ist richtig.Sieht eine Website in allen Browserngleich aus, dann ist was schiefgelaufen

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.

Web ist nicht Print

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

WebDesignen für das Unbekannte. 18

Unterschiedliche Betriebssysteme,webfähige Endgeräte, unterschiedlicheSteuerungselemente und unterschiedlicheBrowser … 21

gut, leistungsfähig und modernveraltert 22

Bei den Veralterungsgraden gibt extremeUnterschiede 23

Und die mobilen:klein, aber extrem modern 24

Web ist nicht PrintEine Website muss viel mehr können alsFlyer, ein Buch oder BroschüreAuffindbarkeit: Inhalte müssen über Google zu finden zu sein.Plattformübergreifend: Sie muss auf den unterschiedlichstenBrowsern und Betriebssystemen laufen 25

Nutzer möchten mit einer Website mehr tun:Schrift Bookmarken Textvergrößern und Links kopieren verschickenInhalte per RSS Inhalte Per Twitter,abonnieren oder ausdrucken Facebook, Googleauf persönliche PlusSeiten einbetten weiterempfehlen 26

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

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

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

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

Eine pixelgenaue Umsetzung ist schon allein aufGrund des Schriftrenderings der verschiedenenBetriebssysteme nicht möglich. 32

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

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

Das wird mit modernen Browsern, Webfonts undSchattierungen nicht besser. 35

Muss eine Website in allen Browsern gleich aussehen?

Im Gegenteil:Eine Website sollte in modernen Browsern besseraussehen. 40

Ein User sieht die Website meist in nureinem Browser. 4

Mythos: PhotoshopDie Website wird im Browser exakt soaussehen, wie in Photoshop/ Fireworks.

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

Der Browser ändert alles

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

Fokus 47

Interaktion

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

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

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

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

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

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

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

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

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

Yahoo Internet Explorer 8

Yahoo Chrome 59

Mythos: Schlecht aussehenMit diesen modernen Methoden siehtmeine Website in älteren Browsernschlecht und hässlich aus.

Eine Website sollte in jedem Browser gut aussehen -in Relation zu seinem Alter undGestaltungsmöglichkeitenZiel: das Beste aus jedem Browser herausholen 61

Aussehen ist wichtig, aber …. 62

Die User Experience ist das Entscheidende. 63

Sei kein Poser.Fake nicht dein Aussehen. 64

Checkboxen Internet Explorer 7 65

Stylische Checkboxen 66

Ladezeiten für Checkbox-Ersetzung16 sec 0,3 Sekunden 67

Nachhaltiges MarkenerlebnisWas hinterlässt einen stärkeren Eindruck? 68

Runde Ecken, Schatten und VerlaufRunde Ecken, Schatten und Verlauf 69

Lange Ladezeiten, ruckelige Animationen 70

Fehlermeldungen und gelegentliche Abstürze 71

Woran werden sie die Nutzer erinnern? 72

Mythos: StatistikDie meisten normalen Menschen, die nichtin Internetberufen tätig sind, haben dochInternet Explorer.

Computerbild sei dankDeutschland ist das Firefox-Land 74

Privat vs. dienstlichJe privater die Leute surfen, destoweniger mit Microsoft. 78

Immer wieder sonntagsSeit dem 18. März ist Google Chromejeden Sonntag weltweit der beliebtesteBrowser.Quelle: http://gs.statcounter.com/press/chrome-is-worlds-number-one-browser-for-a-day 79

Privat vs. dienstlichAchtung 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

Was interessieren mich die anderenGenerell ist es wichtig, dieBrowserstatistik der Website anzugucken,die wir relaunchen. 82

Mythos: ReferenzbrowserDann nehmen eben Internet Explorer 8 alsReferenzbrowser. Dort muss die Websitegut, wie im Design aussehen.

Kann man machen, aber … 84

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

In der Zukunft liegt das GlückUnsere Strategie ist zukunftsfähig statt rückwärtsgewandt.Das Design verbessert sich automatisch: AktualisierenNutzer ihren Browser von Internet Explorer 8 auf Versionsieht die Website dementsprechend besser aus – ohneAnpassungen.Internet Explorer 10 kommt in diesem Jahr. 86

HD-TV 88

Mythos: KundeDer Kunde macht das nie mit. Er will dassdie Website überall gleich aussieht.

Progressive Enhancement ist ein völlig alltäglichesPrinzip. Welches wir alle ständig erleben. Kundenverstehen das oft besser als wir annehmen. 90

neuer = besser = mehr können 91

Mythos: nur neue BrowserProgressive Enhancement bedeutet, eswerden nur die neuen Browser unterstützt.Auf älteren Browsern sieht die Websiteschlecht aus und läuft schlecht oder garnicht.

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

Für den Internet Explorer ist eine gute lesbare, schnellladene und sauber strukturierte, einspaltige Versionbesser als das: 95

Wir schließen keine Nutzer aus. 97

Mythos: BrowserunterschiedeBrowser sind doch Browser. Programme,die Websites anzeigen. Außer bei denFeatures können die Unterschiede da dochso groß nicht sein.

BrowserInternet Explorer 6 verbesserte die Unterstützung von CSS 12001 99

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

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

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

BrowserInternet Explorer 9 CSS 2.1 vollständig  Runde EckenMärz 2011 Kein CSS3 Besteht Acid3-Test (außer bei der Darstellung) 106

BrowserFirefoxVersion 13: seit 15. JuniAlle 6 Wochen eine neue VersionFirefox 14: am17. Juli 107

BrowserChromeVersion 20: 29. JuniAlle 6 Wochen eine neue VersionVersion 21: ~ Juli 108

Mythos: Angst für zukünftigen BrowsernWenn neue Browser-Versionenerscheinen, bedeutet das immer neueBugs und neue Kosten.Wir müssen zusätzlich optimieren.

Wer hat Angst vor neuen Browsern? Niemand

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

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

Mythos: HacksMit Hilfe von Hacks und Workarounds kanndie Website im Internet Explorer soaussehen wie in Firefox und Chrome.

Hacks & WorkaroundsNein.Ältere Browsern können neuere Technologien nichtper Hacks nachgerüstet werden.Insbesondere wenn es um HTML5-Technologien,Animationen, Ajax-Requests oder um CSS3-Technikengeht. 116

Hacks & WorkaroundsJaes gibt Hacks und Workarounds (z.B. für runde Ecken,Schatten, Transparenzen etc.)aberHacks & Workarounds haben oftmals gravierendeNachteile: Die Entwicklung verlängert und verteuertsich. Die Website wird instabil, stürzt öfter ab und lädtlangsam. 117

Hacks & WorkaroundsBesserTechniken benutzen, die der Browser kann, umso einestabile und verlässliche User-Experience zu erreichen. 118

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

Weniger Code = weniger Bugs

Mythos: Weniger fürs GeldWeniger Browser fürs gleiche Geld, das istdoch ein schlechter Deal.

Geld besser einsetzenGeld wird für wichtige Dinge eingesetzt. In besseresDesign und Funktionen, von den die Mehrheit derNutzer profitieren.Geld wird nicht für marginale Designeffekte in altenInternet Explorern verwendet, den nur wenige Usernutzen. 122

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

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

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

Progressive Enhancement: DefinitionFolge: Alle Inhalten funktionieren immer und überall,die Website sieht immer dem Leistungsspektrum desBrowsers entsprechend gut aus und funktioniert gut.Es bleiben keine nicht oder schlecht funktionierenFunktionen übrig. 126

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

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

Wie gehen wir jetzt mit diesenMöglichkeiten und Problemen um?

1 Moderne Browserstrategie 130

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

Ältere Browser sind uns trotzdem wichtigNutzer von älteren Browsern, die moderneWebtechnologien nicht vollständig unterstützen, erhaltenein Design, welches an die Fähigkeiten ihres Browserangepasst ist.Nutzer, die Internet Explorer 6 benutzen, werden nichtausgesperrt oder sehen eine in Teilen nichtfunktionierende Website, sondern sie erhalten eininhaltlich identisches Angebot, mit universellemeinspaltigen Layout, bei dem der Fokus auf Lesbarkeit undschneller Ladezeit liegt. 132

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

2 Früher interdisziplinär zusammenarbeiten 134

3 Kunden informieren und in den Gestaltungsprozess involvieren 135

4 Im Browser designen 136

Welche Fragen gibt es? Fragen? 138

http://www.vorsprungdurchwebstandards.de	632
https://fastforward.aperto.de	436
http://hochschulmarketing-magazin.de	98
https://twimg0-a.akamaihd.net	5
http://us-w1.rockmelt.com	2
https://si0.twimg.com	2

Browserstrategien und Progressive Enhancement

by Aperto AG on Jul 10, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 1,175

Statistics

Browserstrategien und Progressive Enhancement Presentation Transcript