Browserstrategien und Progressive Enhancement
Upcoming SlideShare
Loading in...5
×
 

Browserstrategien und Progressive Enhancement

on

  • 5,224 views

Browser-, Kunden- und Agenturmythen

Browser-, Kunden- und Agenturmythen

Statistics

Views

Total Views
5,224
Views on SlideShare
2,451
Embed Views
2,773

Actions

Likes
9
Downloads
37
Comments
0

8 Embeds 2,773

http://www.vorsprungdurchwebstandards.de 2211
https://fastforward.aperto.de 436
http://hochschulmarketing-magazin.de 115
https://twimg0-a.akamaihd.net 5
http://us-w1.rockmelt.com 2
https://si0.twimg.com 2
https://www.google.de 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Browserstrategien und Progressive Enhancement Browserstrategien und Progressive Enhancement Presentation Transcript

    • 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
    • 15
    • 100%Kontrolle im Print-Design:Layout, Typo, Farben, Druckmaschine,Papiersorte und Papierqualität 16
    • 17
    • WebDesignen für das Unbekannte. 18
    • 19
    • 20
    • 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
    • 29
    • 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
    • 36
    • 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
    • 44
    • 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
    • 75
    • 76
    • 77
    • 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
    • 80
    • 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
    • TV 87
    • 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
    • 92
    • 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
    • 96
    • 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
    • 109
    • 110
    • 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
    • 137
    • Welche Fragen gibt es? Fragen? 138