Die Pest
philosophische Betrachtungen zur Webentwicklung

               Jens Grochtdreis
Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 11 Jahre Arbeit im und fürs Web
‣ Gründer der Webkraut...
Die Pest?
Sisyphos




http://www.cartooncommerz.de/aussteller/sisyphos.jpg
Sisyphosarbeit

‣ Aufgaben, die trotz größter Mühe so gut wie nie
  beendet werden können, nennen wir Sisyphosarbeit.
 ‣ U...
Und was hat das mit dem
     Web zu tun?
Funktioniert das
auch im IE?
Bremsfaktor IE
Der IE ist der schwarz-weiss
    Fernseher des Web
           IE bis Version 8                    moderne Browser




http...
IE ≠ modern




http://css3generator.com/
http://www.findmebyip.com/litmus/#target-selector
Abteilung:
So lüge ich mit Statistik
Der IE6 stirbt nicht!




http://snipurl.com/vzokk
Der IE6 stirbt nicht!
‣ Webhits.de, 4. Mai 2010

‣ IE insges.: 63%
‣ IE6: 38,8%

‣ Firefox: 30,5%

‣ Safari: 3,4%
‣ Opera:...
Webhits 11.April 2010




Webmasterpro 11.April 2010
Auf einmal nur 5%?




http://mashable.com/2010/06/01/ie6-below-5-percent/
Vermutung
Vermutung

‣ Nach 2001 entstanden viele Intranet-Applikationen, die
  genau auf den IE6 zugeschnitten wurden.
‣ Man hatte ...
Das Internet ist zu
dynamisch für langlebige
      Software!
Der Fortschritt richtet sich
 nach dem Langsamsten
wegen dessen Verbreitung.
self-fullfilling prophecy
               Die sich selbsterfüllende
               Prophezeiung ist eine
               Vorh...
Wen interessieren Browser?



http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
Nur Entwickler!
Wen interessieren Browser?




http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
„Hell is other browsers!“
                  Peter-Paul Koch (@ppk)




   „Die Hölle, das sind die anderen“
              ...
Nur wer vergleicht, kann
Unterschiede entdecken
http://stuffandnonsense.co.uk/
Ein normaler Konsument
  vergleicht aber keine
 Browserdarstellungen.
Und gehst Du zum Browser,
 vergiss die Peitsche nicht.
             In Anlehnung an F. Nietzsche
Feindliche Umgebung




http://www.gtalbot.org/BrowserBugsSection/
http://www.findmebyip.com/litmus/#target-selector
Ich weiss, daß ich
  nicht(s) weiss!
   Sokrates (durch Platon)
http://goo.gl/XV2n   http://goo.gl/hl0f
Screenshot von einem EeePC, 800x480px
Unsicherheiten
‣ Endgeräte                  ‣ Browser
  ‣ PC, Notebook               ‣ Browserversionen
  ‣ Handy, PDA    ...
Flexibilität ist wichtig
‣ Wir können nicht mehr sicher vorhersagen, wie
 jemand unsere Seite sieht/liest.
‣ Deshalb: eine...
Um der Flexibilität gerecht zu
werden und zukunftsfähig zu sein,
 müssen wir ein neues Denken
         entwickeln.
Unser Layout ist nur eine
      Empfehlung!
Wenn einige Browserhersteller der
     technischen Entwicklung
 hinterherhinken sollte das nicht
       unser Problem sein.
Moderne Layouts für den IE
    haben KOSTEN!
Kosten

‣ Zeit für Recherche, Tests und Implementierung
‣ Nicht jede Lösung taugt für jeden Anwendungsfall
‣ Zusätzliches ...
Runde Ecken




http://grochtdreis.de/
Zwei Welten:
IE und moderne Browser
Runde Ecken




http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Runde Ecken - The ThrashBox
                                            <div class="sidebox">
                            ...
Runde Ecken - The ThrashBox



                              <div class="sidebox">
                                  <div ...
Wartungshölle

‣ Für jede Farbe eine eigene Grafik (auch für
  hover bei Links!)
‣ Runde Ecken auf Verläufen oder Transpare...
Runde Ecken für moderne
          Browser
.box {
    border: 2px solid #eee;
    border-radius: 0.6em;
    -moz-border-rad...
Rom, die Frisur hält
‣ Auch für Bilder!
‣ Auch auf Verläufen!
‣ Auch in em oder %!



‣ Schatten für Bilder

‣ maximale Fl...
Bei der Geburt getrennt




  FF 3.5 Win     IE 8
Noch einmal: die „Kosten“

‣ 4 Bilder
 ‣ Farbänderungen, Anpassungen evtl. Schatten
 ‣ Anpassung der Rundungen
‣ mind. 1 z...
Müssen Webseiten überall
                gleich aussehen?




http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Kosten von Layoutwünschen
Wir denken in traditionellen
 Analogien für eine neue
       Umgebung.
Gleich hohe Boxen




http://grochtdreis.de/
Mit einer Tabelle kein
      Problem!
Ohne Layouttabellen

‣ Die Elemente einer Seite haben keine
  Beziehung zueinander, es sei denn, es sind
  Kindelemente!
 ...
Gleich hohe Boxen
<!-- start: 3*33% Subcolumns -->
<h2>Aus meinem Weblog</h2>
<div id="teaser" class="subcolumns">
   <div...
Das DOM

                   div#teaser.subcolumns

                div.c33l    div.c33l   div.c33r

                div.su...
Gleich hohe Boxen
         für moderne Browser und IE ab Version 8
  moderne Browser
                 .equalize > div {   ...
Gleich hohe Boxen
                                     für IE bis Version 7
  moderne Browser
/* Fix for:"Linking to ancho...
Gleich hohe Boxen

                                                                  unproblematisch




                 ...
Problematisch: Semantik

                ‣ zwei komplett getrennte
                 Containerblöcke.
                ‣ Kei...
Problemfall unterer Rand

‣ Für den IE bis Version 7 kommt ein großer
  Innenabstand mit gleichgroßem negativem
  Aussenab...
Gut: in Alternativen denken!
Flexibilität ist Stärke



                Die Flexibilität des Internet ist seine Stärke.
                     Akzeptiert...
Jens Grochtdreis
                                                      http://grochtdreis.de
                             ...
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
Nächste SlideShare
Wird geladen in …5
×

Die Pest - philosophische Betrachtungen zur Webentwicklung

2.294 Aufrufe

Veröffentlicht am

Vortrag auf der Webinale 2010 in Berlin.

Veröffentlicht in: Technologie, Business
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.294
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
425
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Die Pest - philosophische Betrachtungen zur Webentwicklung

  1. 1. Die Pest philosophische Betrachtungen zur Webentwicklung Jens Grochtdreis
  2. 2. Jens Grochtdreis ‣ Frontendentwickler ‣ 10 Jahre Agenturerfahrung ‣ 11 Jahre Arbeit im und fürs Web ‣ Gründer der Webkrauts ‣ Blogger ‣ Autor des PHPMagazins, PHPUser, Webstandards-Magazins, T3N ‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT
  3. 3. Die Pest?
  4. 4. Sisyphos http://www.cartooncommerz.de/aussteller/sisyphos.jpg
  5. 5. Sisyphosarbeit ‣ Aufgaben, die trotz größter Mühe so gut wie nie beendet werden können, nennen wir Sisyphosarbeit. ‣ Ursprung: griechische Mythologie ‣ Bei Camus: „ständige Revolte gegen die Sinnlosigkeit der Welt“
  6. 6. Und was hat das mit dem Web zu tun?
  7. 7. Funktioniert das auch im IE?
  8. 8. Bremsfaktor IE
  9. 9. Der IE ist der schwarz-weiss Fernseher des Web IE bis Version 8 moderne Browser http://home.snafu.de/wumpus/rdfmu46.jpg http://www.home-cinema-news.de/bilder/news/d_000474_01_de.jpg
  10. 10. IE ≠ modern http://css3generator.com/
  11. 11. http://www.findmebyip.com/litmus/#target-selector
  12. 12. Abteilung: So lüge ich mit Statistik
  13. 13. Der IE6 stirbt nicht! http://snipurl.com/vzokk
  14. 14. Der IE6 stirbt nicht! ‣ Webhits.de, 4. Mai 2010 ‣ IE insges.: 63% ‣ IE6: 38,8% ‣ Firefox: 30,5% ‣ Safari: 3,4% ‣ Opera: 1,1% ‣ Chrome: 0,5%
  15. 15. Webhits 11.April 2010 Webmasterpro 11.April 2010
  16. 16. Auf einmal nur 5%? http://mashable.com/2010/06/01/ie6-below-5-percent/
  17. 17. Vermutung
  18. 18. Vermutung ‣ Nach 2001 entstanden viele Intranet-Applikationen, die genau auf den IE6 zugeschnitten wurden. ‣ Man hatte vielleicht den Eindruck, die technische Entwicklung höre auf. ‣ Microsoft befeuert dieses Missverständnis mit der Garantie sehr langer Supportmodelle.
  19. 19. Das Internet ist zu dynamisch für langlebige Software!
  20. 20. Der Fortschritt richtet sich nach dem Langsamsten wegen dessen Verbreitung.
  21. 21. self-fullfilling prophecy Die sich selbsterfüllende Prophezeiung ist eine Vorhersage, die sich deshalb erfüllt, weil sich der Vorhersagende, meist unbewusst, so verhält, dass sie sich erfüllen muss. http://de.wikipedia.org/wiki/Selbsterf%C3%BCllende_Prophezeiung http://blogs.sitepointstatic.com/images/tech/121-ie6-mod-orange.jpg
  22. 22. Wen interessieren Browser? http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
  23. 23. Nur Entwickler!
  24. 24. Wen interessieren Browser? http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
  25. 25. „Hell is other browsers!“ Peter-Paul Koch (@ppk) „Die Hölle, das sind die anderen“ J.P. Sartre
  26. 26. Nur wer vergleicht, kann Unterschiede entdecken
  27. 27. http://stuffandnonsense.co.uk/
  28. 28. Ein normaler Konsument vergleicht aber keine Browserdarstellungen.
  29. 29. Und gehst Du zum Browser, vergiss die Peitsche nicht. In Anlehnung an F. Nietzsche
  30. 30. Feindliche Umgebung http://www.gtalbot.org/BrowserBugsSection/
  31. 31. http://www.findmebyip.com/litmus/#target-selector
  32. 32. Ich weiss, daß ich nicht(s) weiss! Sokrates (durch Platon)
  33. 33. http://goo.gl/XV2n http://goo.gl/hl0f
  34. 34. Screenshot von einem EeePC, 800x480px
  35. 35. Unsicherheiten ‣ Endgeräte ‣ Browser ‣ PC, Notebook ‣ Browserversionen ‣ Handy, PDA ‣ Indiv. Konfiguration ‣ Spielkonsole ‣ Monitorauflösungen ‣ TV ‣ Umgebungslicht ‣ Assistive Technologien ‣ mobiler Zugriff ‣ Zugriffsgeschwindigkeit (DSL?) ‣ Betriebssysteme ‣ existieren Plugins? ‣ Javascript an oder aus?
  36. 36. Flexibilität ist wichtig ‣ Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. ‣ Deshalb: einen für möglichst viele gangbaren Weg beschreiten ‣ Erst der Inhalt, dann das Layout! ‣ Der Inhalt ist das Wichtigste!
  37. 37. Um der Flexibilität gerecht zu werden und zukunftsfähig zu sein, müssen wir ein neues Denken entwickeln.
  38. 38. Unser Layout ist nur eine Empfehlung!
  39. 39. Wenn einige Browserhersteller der technischen Entwicklung hinterherhinken sollte das nicht unser Problem sein.
  40. 40. Moderne Layouts für den IE haben KOSTEN!
  41. 41. Kosten ‣ Zeit für Recherche, Tests und Implementierung ‣ Nicht jede Lösung taugt für jeden Anwendungsfall ‣ Zusätzliches HTML und Bilder erschweren die Wartung, Pflege und Anpassung
  42. 42. Runde Ecken http://grochtdreis.de/
  43. 43. Zwei Welten: IE und moderne Browser
  44. 44. Runde Ecken http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
  45. 45. Runde Ecken - The ThrashBox <div class="sidebox"> <div class="boxhead"><h2>Test Headline</h2></div> <div class="boxbody"> <p>This is a short sample paragraph.</p> <p>And another one.</p> </div> </div> .sidebox { background: url(sbbody-r.gif) no-repeat bottom right; } .boxhead { background: url(sbhead-r.gif) no-repeat top right; } .boxhead h2 { background: url(sbhead-l.gif) no-repeat top left; } .boxbody { background: url(sbbody-l.gif) no-repeat bottom left; } http://www.vertexwerks.com/tests/sidebox/
  46. 46. Runde Ecken - The ThrashBox <div class="sidebox"> <div class="boxhead"><h2>Test Headline</h2></div> <div class="boxbody"> <p>This is a short sample paragraph.</p> <p>And another one.</p> </div> </div> http://www.vertexwerks.com/tests/sidebox/
  47. 47. Wartungshölle ‣ Für jede Farbe eine eigene Grafik (auch für hover bei Links!) ‣ Runde Ecken auf Verläufen oder Transparenzen sind ganz übel als Grafik ‣ Jede Änderung und Anpassung geschieht in Photoshop/Fireworks ‣ Viele Requests ‣ Keine Skalierung
  48. 48. Runde Ecken für moderne Browser .box { border: 2px solid #eee; border-radius: 0.6em; -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; } /* Ohne die folgende Zeile ragen die Ecken der Überschrift aus der Box raus. Der gleiche Radius darf es auch nicht sein, sonst entsteht eine Lücke. Es scheint immer die Hälfte sein zu müssen. */ .box h3 { border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; -moz-border-radius-topleft: 0.3em; -moz-border-radius-topright: 0.3em; -webkit-border-top-left-radius: 0.3em; -webkit-border-top-right-radius: 0.3em; }
  49. 49. Rom, die Frisur hält ‣ Auch für Bilder! ‣ Auch auf Verläufen! ‣ Auch in em oder %! ‣ Schatten für Bilder ‣ maximale Flexibilität!
  50. 50. Bei der Geburt getrennt FF 3.5 Win IE 8
  51. 51. Noch einmal: die „Kosten“ ‣ 4 Bilder ‣ Farbänderungen, Anpassungen evtl. Schatten ‣ Anpassung der Rundungen ‣ mind. 1 zusätzlicher Request ‣ wie groß muss das Sprite werden, wenn die Seite flexibel sein soll?
  52. 52. Müssen Webseiten überall gleich aussehen? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  53. 53. Kosten von Layoutwünschen
  54. 54. Wir denken in traditionellen Analogien für eine neue Umgebung.
  55. 55. Gleich hohe Boxen http://grochtdreis.de/
  56. 56. Mit einer Tabelle kein Problem!
  57. 57. Ohne Layouttabellen ‣ Die Elemente einer Seite haben keine Beziehung zueinander, es sei denn, es sind Kindelemente! ‣ Die eine Box bekommt nichts von der Höhe der anderen mit. ‣ Javascript ist ein sicheres Hilfsmittel. ‣ Rate mal, wer display: table nicht kennt!
  58. 58. Gleich hohe Boxen <!-- start: 3*33% Subcolumns --> <h2>Aus meinem Weblog</h2> <div id="teaser" class="subcolumns"> <div class="c33l"> <div class="subcl equalise eins"> <h3><a href="toller-link.html">Überschrift</a></h3> <p>Kurzbeschreibung bzw. Anriss des Inhalts</p> <p class="weiter"><a href="#">Den ganzen Artikel lesen.</a></p> </div> </div> <div class="c33l"> <div class="subc equalise zwei"> <!-- wie oben --> </div> </div> <div class="c33r"> <div class="subcr equalise drei"> <!-- wie oben --> </div> </div> </div> <!-- end: 3*33% Subcolumns -->
  59. 59. Das DOM div#teaser.subcolumns div.c33l div.c33l div.c33r div.subcl div.subc div.subcr h3 p p.weiter h3 p p.weiter h3 p p.weiter
  60. 60. Gleich hohe Boxen für moderne Browser und IE ab Version 8 moderne Browser .equalize > div { .equalize, .equalize .subcolumns { display:table-cell; overflow:visible; float:none; display:table; margin:0; table-layout:fixed; overflow:hidden; } vertical-align:top; IE6 und 7 } http://yaml.de http://www.positioniseverything.net/articles/onetruelayout/equalheight
  61. 61. Gleich hohe Boxen für IE bis Version 7 moderne Browser /* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */ * html .equalize, * html .equalize .subcolumns { overflow:visible; display:block; } .equalize, .equalize .subcolumns { overflow:hidden; display:block; } /* transform CSS tables back into floats */ .equalize .c20l,.equalize .c40l,.equalize .c60l,.equalize .c80l, IE6 und 7 .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize .equalize .c62l,.equalize .c66l,.equalize .c75l { .c50l, float:left; display:inline; padding-bottom:32767px; margin-bottom:-32767px; } .equalize .c20r,.equalize .c40r,.equalize .c60r,.equalize .c80r, .equalize .c25r,.equalize .c33r,.equalize .c38r,.equalize .c50r, .equalize .c62r,.equalize .c66r,.equalize .c75r { float:right; margin-left:-5px; display:inline; padding-bottom:32767px; margin-bottom:-32767px; } http://yaml.de http://www.positioniseverything.net/articles/onetruelayout/equalheight
  62. 62. Gleich hohe Boxen unproblematisch problematisch http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
  63. 63. Problematisch: Semantik ‣ zwei komplett getrennte Containerblöcke. ‣ Kein inhaltlicher Zusammenhang. ‣ Schlecht für Screenreader und Suchmaschinen.
  64. 64. Problemfall unterer Rand ‣ Für den IE bis Version 7 kommt ein großer Innenabstand mit gleichgroßem negativem Aussenabstand zum Einsatz. ‣ Dadurch ist eine untere Linie unmöglich!
  65. 65. Gut: in Alternativen denken!
  66. 66. Flexibilität ist Stärke Die Flexibilität des Internet ist seine Stärke. Akzeptiert es! Macht Euch locker! http://snipurl.com/2c1yl
  67. 67. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/

×