0
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öch...
Kunde seinAls Diskussionspartner bräuchten wirnoch 2 Projektmanager.                      Wer möchte                      ...
Szenario 1: Internet Explorer 7KundeDu bist Kunde, du zahlst viel Geld und willst das beste, coolste, abgefahrensteDesign,...
Szenario 1: Internet Explorer 7PMKleiner Tipp: Internet Explorer 7 ist aus dem Jahr 2006 und sehr weit weg davonentfernt e...
Szenario 2: runde Ecken, moderne BrowserstrategieKundeEs wurde vorher explizit eine moderne Browserstrategie vereinbart. E...
Szenario 2: runde Ecken, moderne BrowserstrategiePMEs wurde vorher explizit eine moderne Browserstrategie vereinbart. Die ...
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 z...
Web ist nicht Print
15
100%Kontrolle im Print-Design:Layout, Typo, Farben, Druckmaschine,Papiersorte und Papierqualität                          ...
17
WebDesignen für das Unbekannte.                               18
19
20
Unterschiedliche Betriebssysteme,webfähige Endgeräte, unterschiedlicheSteuerungselemente und unterschiedlicheBrowser …    ...
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...
Nutzer möchten mit einer Website mehr tun:Schrift            Bookmarken    Textvergrößern         und Links     kopieren  ...
Webprojekte verlaufen anders alsPrintprojekte.> Webprojekte sind nie fertig> Design ist im Fluss                          ...
Wie begegnen wir dem Unbekannten?Websites sollten für Nutzer und für Änderungengestaltet sein und sich dem Gerät, Browser ...
29
Mythos: pixelgenauEine Website kann überall pixelgenauAufwand.gleich aussehen. Es ist nur mehr Aufwand.r                  ...
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....
http://www.kontain.com/fi/entries/13601/how-do-fonts-work-in-different-browsers/.                                         ...
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/                                                 ...
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 P...
Fokus        47
Interaktion
Maßnahmen, um den Kunden nicht zu enttäuschen1. Früher interdisziplinär im Browser gestalten2. Kunden in die Designentwick...
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.                                   ...
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 ...
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.st...
80
Privat vs. dienstlichAchtung Statistik:• Woher kommen die Zahlen?• Wer hat sie erhoben?• Wie hoch ist die Grundgesamtheit ...
Was interessieren mich die anderenGenerell ist es wichtig, dieBrowserstatistik der Website anzugucken,die wir relaunchen. ...
Mythos: ReferenzbrowserDann nehmen eben Internet Explorer 8 alsReferenzbrowser. Dort muss die Websitegut, wie im Design au...
Kann man machen, aber …                          84
Das Design muss ständig auf die Machbarkeit ineinem nicht mehr aktuellen Browser (IE8 erschienenMärz 2009) überprüft werde...
In der Zukunft liegt das GlückUnsere Strategie ist zukunftsfähig statt rückwärtsgewandt.Das Design verbessert sich automat...
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 bess...
neuer = besser = mehr können                               91
92
Mythos: nur neue BrowserProgressive Enhancement bedeutet, eswerden nur die neuen Browser unterstützt.Auf älteren Browsern ...
Wenn wir Progressive Enhancement Technikeneinsetzen, sind uns ältere Browser nicht egal. Ganzim Gegenteil.Das Design, die ...
Für den Internet Explorer ist eine gute lesbare, schnellladene und sauber strukturierte, einspaltige Versionbesser als das...
96
Wir schließen keine Nutzer aus.                                  97
Mythos: BrowserunterschiedeBrowser sind doch Browser. Programme,die Websites anzeigen. Außer bei denFeatures können die Un...
BrowserInternet Explorer 6   verbesserte die                      Unterstützung von CSS 12001                             ...
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...
BrowserInternet Explorer 8   Besteht Acid 2 Test                      Acid 3: 20 von 100März 2009                      Kei...
BrowserInternet Explorer 9   CSS 2.1 vollständig                       Runde EckenMärz 2011                      Kein CSS...
BrowserFirefoxVersion 13: seit 15. JuniAlle 6 Wochen eine neue VersionFirefox 14: am17. Juli                              ...
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.W...
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 selb...
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...
Hacks & WorkaroundsJaes gibt Hacks und Workarounds (z.B. für runde Ecken,Schatten, Transparenzen etc.)aberHacks & Workarou...
Hacks & WorkaroundsBesserTechniken benutzen, die der Browser kann, umso einestabile und verlässliche User-Experience zu er...
Apple iPhone Internet Explorer 7: Slideshow ohne Animation:         http://www.apple.com/iphone/Berlin / 2010 / Aperto ste...
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 derNu...
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 ei...
http://www.alistapart.com/articles/understandingprogressiveenhancement/
Progressive Enhancement: DefinitionFolge: Alle Inhalten funktionieren immer und überall,die Website sieht immer dem Leistu...
Das Prinzip ist nicht bloß aus Rücksicht formuliert,also im Blick zurück, sondern auch im Blick nach vorn.                ...
Ein solides HTML-Fundament bietet auch fürzukünftige Geräte bessere Möglichkeiten.                                        ...
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 Websi...
Ältere Browser sind uns trotzdem wichtigNutzer von älteren Browsern, die moderneWebtechnologien nicht vollständig unterstü...
Aktueller Browsertext aperto aktuelle Version zu Beginn der CSS-Entwicklung aktuelle Version zu Beginn der CSS-Entwicklung...
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
Browserstrategien und Progressive Enhancement
Browserstrategien und Progressive Enhancement
Upcoming SlideShare
Loading in...5
×

Browserstrategien und Progressive Enhancement

6,646

Published on

Browser-, Kunden- und Agenturmythen

Published in: Design

Transcript of "Browserstrategien und Progressive Enhancement"

  1. 1. Timo Wirth, Director Frontend | Berlin | Juni 2012, aperto AG
  2. 2. Kunde sein 2
  3. 3. Kunde seinSeitenwechsel: 2 Projektmanager, dürfensich heute für 5 Minuten als Kundenausleben. Wer möchte Kunde sein? 3
  4. 4. Kunde seinAls Diskussionspartner bräuchten wirnoch 2 Projektmanager. Wer möchte PM sein? 4
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. Was haben wir gerade gehört?Viele unausgesprochene, falscheErwartungen und Mythen. 9
  10. 10. Mythen entkräftenBrowser-, Kunden- und Agenturmythen
  11. 11. Mythos: Gleich aussehenEine Website muss in allen Browsern gleich aussehen.
  12. 12. Das Gegenteil ist richtig.Sieht eine Website in allen Browserngleich aus, dann ist was schiefgelaufen
  13. 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.
  14. 14. Web ist nicht Print
  15. 15. 15
  16. 16. 100%Kontrolle im Print-Design:Layout, Typo, Farben, Druckmaschine,Papiersorte und Papierqualität 16
  17. 17. 17
  18. 18. WebDesignen für das Unbekannte. 18
  19. 19. 19
  20. 20. 20
  21. 21. Unterschiedliche Betriebssysteme,webfähige Endgeräte, unterschiedlicheSteuerungselemente und unterschiedlicheBrowser … 21
  22. 22. gut, leistungsfähig und modernveraltert 22
  23. 23. Bei den Veralterungsgraden gibt extremeUnterschiede 23
  24. 24. Und die mobilen:klein, aber extrem modern 24
  25. 25. 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
  26. 26. 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
  27. 27. Webprojekte verlaufen anders alsPrintprojekte.> Webprojekte sind nie fertig> Design ist im Fluss 27
  28. 28. 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. 29. 29
  30. 30. Mythos: pixelgenauEine Website kann überall pixelgenauAufwand.gleich aussehen. Es ist nur mehr Aufwand.r 30
  31. 31. Auch wenn wir wollten:Ein Website kann nicht in allen Browsern gleich aussehen
  32. 32. Eine pixelgenaue Umsetzung ist schon allein aufGrund des Schriftrenderings der verschiedenenBetriebssysteme nicht möglich. 32
  33. 33. http://www.kontain.com/fi/entries/13601/how-do-fonts-work-in-different-browsers/. 33
  34. 34. http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/ 34
  35. 35. Das wird mit modernen Browsern, Webfonts undSchattierungen nicht besser. 35
  36. 36. 36
  37. 37. Muss eine Website in allen Browsern gleich aussehen?
  38. 38. Im Gegenteil:Eine Website sollte in modernen Browsern besseraussehen. 40
  39. 39. Ein User sieht die Website meist in nureinem Browser. 4
  40. 40. Mythos: PhotoshopDie Website wird im Browser exakt soaussehen, wie in Photoshop/ Fireworks.
  41. 41. Das wird nie der Fall sein.Auch ein Flyer oder eine Broschüresieht gedruckt anders. 43
  42. 42. 44
  43. 43. Der Browser ändert alles
  44. 44. 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
  45. 45. Fokus 47
  46. 46. Interaktion
  47. 47. Maßnahmen, um den Kunden nicht zu enttäuschen1. Früher interdisziplinär im Browser gestalten2. Kunden in die Designentwicklung involvieren. 49
  48. 48. Mythos: Alle anderenAlle andere Websites sehen doch auchüberall gleich aus. Die anderen kriegen dasdoch auch hin.
  49. 49. Sehen sie nicht.Es fällt uns nur nicht auf. Weil wir meist nur mit einemBrowser surfen. 51
  50. 50. Youtube Google Chrome 17.Berlin / 2010 / Aperto stellt sich vor 52
  51. 51. Youtube Internet Explorer 8.Berlin / 2010 / Aperto stellt sich vor 53
  52. 52. Youtube Internet Explorer 7.Berlin / 2010 / Aperto stellt sich vor 54
  53. 53. Twitter Chrome 17Berlin / 2010 / Aperto stellt sich vor 55
  54. 54. Twitter Internet Explorer 9Berlin / 2010 / Aperto stellt sich vor 56
  55. 55. Twitter Internet Explorer 8Berlin / 2010 / Aperto stellt sich vor 57
  56. 56. Yahoo Internet Explorer 8
  57. 57. Yahoo Chrome 59
  58. 58. Mythos: Schlecht aussehenMit diesen modernen Methoden siehtmeine Website in älteren Browsernschlecht und hässlich aus.
  59. 59. Eine Website sollte in jedem Browser gut aussehen -in Relation zu seinem Alter undGestaltungsmöglichkeitenZiel: das Beste aus jedem Browser herausholen 61
  60. 60. Aussehen ist wichtig, aber …. 62
  61. 61. Die User Experience ist das Entscheidende. 63
  62. 62. Sei kein Poser.Fake nicht dein Aussehen. 64
  63. 63. Checkboxen Internet Explorer 7 65
  64. 64. Stylische Checkboxen 66
  65. 65. Ladezeiten für Checkbox-Ersetzung16 sec 0,3 Sekunden 67
  66. 66. Nachhaltiges MarkenerlebnisWas hinterlässt einen stärkeren Eindruck? 68
  67. 67. Runde Ecken, Schatten und VerlaufRunde Ecken, Schatten und Verlauf 69
  68. 68. Lange Ladezeiten, ruckelige Animationen 70
  69. 69. Fehlermeldungen und gelegentliche Abstürze 71
  70. 70. Woran werden sie die Nutzer erinnern? 72
  71. 71. Mythos: StatistikDie meisten normalen Menschen, die nichtin Internetberufen tätig sind, haben dochInternet Explorer.
  72. 72. Computerbild sei dankDeutschland ist das Firefox-Land 74
  73. 73. 75
  74. 74. 76
  75. 75. 77
  76. 76. Privat vs. dienstlichJe privater die Leute surfen, destoweniger mit Microsoft. 78
  77. 77. 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
  78. 78. 80
  79. 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
  80. 80. Was interessieren mich die anderenGenerell ist es wichtig, dieBrowserstatistik der Website anzugucken,die wir relaunchen. 82
  81. 81. Mythos: ReferenzbrowserDann nehmen eben Internet Explorer 8 alsReferenzbrowser. Dort muss die Websitegut, wie im Design aussehen.
  82. 82. Kann man machen, aber … 84
  83. 83. 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
  84. 84. 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
  85. 85. TV 87
  86. 86. HD-TV 88
  87. 87. Mythos: KundeDer Kunde macht das nie mit. Er will dassdie Website überall gleich aussieht.
  88. 88. Progressive Enhancement ist ein völlig alltäglichesPrinzip. Welches wir alle ständig erleben. Kundenverstehen das oft besser als wir annehmen. 90
  89. 89. neuer = besser = mehr können 91
  90. 90. 92
  91. 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.
  92. 92. 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
  93. 93. Für den Internet Explorer ist eine gute lesbare, schnellladene und sauber strukturierte, einspaltige Versionbesser als das: 95
  94. 94. 96
  95. 95. Wir schließen keine Nutzer aus. 97
  96. 96. Mythos: BrowserunterschiedeBrowser sind doch Browser. Programme,die Websites anzeigen. Außer bei denFeatures können die Unterschiede da dochso groß nicht sein.
  97. 97. BrowserInternet Explorer 6 verbesserte die Unterstützung von CSS 12001 99
  98. 98. Das Handy 2001 100
  99. 99. Der erste iPod wurde am 23. Oktober 2001 vorgestellt 101
  100. 100. Nummer eins Song in Deutschland:No Angels, Daylight in Your Eyes 102
  101. 101. Amazon.de 2001 103
  102. 102. 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
  103. 103. BrowserInternet Explorer 8 Besteht Acid 2 Test Acid 3: 20 von 100März 2009 Kein HTML5 105
  104. 104. BrowserInternet Explorer 9 CSS 2.1 vollständig  Runde EckenMärz 2011 Kein CSS3 Besteht Acid3-Test (außer bei der Darstellung) 106
  105. 105. BrowserFirefoxVersion 13: seit 15. JuniAlle 6 Wochen eine neue VersionFirefox 14: am17. Juli 107
  106. 106. BrowserChromeVersion 20: 29. JuniAlle 6 Wochen eine neue VersionVersion 21: ~ Juli 108
  107. 107. 109
  108. 108. 110
  109. 109. Mythos: Angst für zukünftigen BrowsernWenn neue Browser-Versionenerscheinen, bedeutet das immer neueBugs und neue Kosten.Wir müssen zusätzlich optimieren.
  110. 110. Wer hat Angst vor neuen Browsern? Niemand
  111. 111. Neue Browser-VersionenUnd wenn er kommt?Dann freuen wir uns.  113
  112. 112. 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
  113. 113. Mythos: HacksMit Hilfe von Hacks und Workarounds kanndie Website im Internet Explorer soaussehen wie in Firefox und Chrome.
  114. 114. 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
  115. 115. 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
  116. 116. Hacks & WorkaroundsBesserTechniken benutzen, die der Browser kann, umso einestabile und verlässliche User-Experience zu erreichen. 118
  117. 117. Apple iPhone Internet Explorer 7: Slideshow ohne Animation: http://www.apple.com/iphone/Berlin / 2010 / Aperto stellt sich vor 119
  118. 118. Weniger Code = weniger Bugs
  119. 119. Mythos: Weniger fürs GeldWeniger Browser fürs gleiche Geld, das istdoch ein schlechter Deal.
  120. 120. 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
  121. 121. Bevor es jetzt gleich zu Ende ist:Was ist jetzt eigentlich Progressive Enhancement genau?
  122. 122. Progressive Enhancement: Definition Stufe 3: Animation / Javascript. Stufe 2: Design / CSS Stufe 1: Die Website ist auf einem solidem semantischen HTML-Fundament gebaut. 124
  123. 123. http://www.alistapart.com/articles/understandingprogressiveenhancement/
  124. 124. 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
  125. 125. Das Prinzip ist nicht bloß aus Rücksicht formuliert,also im Blick zurück, sondern auch im Blick nach vorn. 127
  126. 126. Ein solides HTML-Fundament bietet auch fürzukünftige Geräte bessere Möglichkeiten. 128
  127. 127. Wie gehen wir jetzt mit diesenMöglichkeiten und Problemen um?
  128. 128. 1 Moderne Browserstrategie 130
  129. 129. 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
  130. 130. Ä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
  131. 131. 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
  132. 132. 2 Früher interdisziplinär zusammenarbeiten 134
  133. 133. 3 Kunden informieren und in den Gestaltungsprozess involvieren 135
  134. 134. 4 Im Browser designen 136
  135. 135. 137
  136. 136. Welche Fragen gibt es? Fragen? 138
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×