Vortrag auf der Webinale 2010 in Berlin.

1. Die Pest
philosophische Betrachtungen zur Webentwicklung
Jens Grochtdreis

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. Die Pest?

4. Sisyphos
http://www.cartooncommerz.de/aussteller/sisyphos.jpg

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. Und was hat das mit dem
Web zu tun?

7. Funktioniert das
auch im IE?

8. Bremsfaktor IE

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. IE ≠ modern
http://css3generator.com/

11. http://www.findmebyip.com/litmus/#target-selector

12. Abteilung:
So lüge ich mit Statistik

13. Der IE6 stirbt nicht!
http://snipurl.com/vzokk

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. Webhits 11.April 2010
Webmasterpro 11.April 2010

16. Auf einmal nur 5%?
http://mashable.com/2010/06/01/ie6-below-5-percent/

17. Vermutung

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. Das Internet ist zu
dynamisch für langlebige
Software!

20. Der Fortschritt richtet sich
nach dem Langsamsten
wegen dessen Verbreitung.

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

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

24. Nur Entwickler!

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

26. „Hell is other browsers!“
Peter-Paul Koch (@ppk)
„Die Hölle, das sind die anderen“
J.P. Sartre

27. Nur wer vergleicht, kann
Unterschiede entdecken

28. http://stuffandnonsense.co.uk/

29. Ein normaler Konsument
vergleicht aber keine
Browserdarstellungen.

30. Und gehst Du zum Browser,
vergiss die Peitsche nicht.
In Anlehnung an F. Nietzsche

31. Feindliche Umgebung
http://www.gtalbot.org/BrowserBugsSection/

32. http://www.findmebyip.com/litmus/#target-selector

33. Ich weiss, daß ich
nicht(s) weiss!
Sokrates (durch Platon)

34. http://goo.gl/XV2n http://goo.gl/hl0f

35. Screenshot von einem EeePC, 800x480px

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

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

38. Um der Flexibilität gerecht zu
werden und zukunftsfähig zu sein,
müssen wir ein neues Denken
entwickeln.

39. Unser Layout ist nur eine
Empfehlung!

40. Wenn einige Browserhersteller der
technischen Entwicklung
hinterherhinken sollte das nicht
unser Problem sein.

41. Moderne Layouts für den IE
haben KOSTEN!

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

43. Runde Ecken
http://grochtdreis.de/

44. Zwei Welten:
IE und moderne Browser

45. Runde Ecken
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

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

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

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

49. 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;
}

50. Rom, die Frisur hält
‣ Auch für Bilder!
‣ Auch auf Verläufen!
‣ Auch in em oder %!
‣ Schatten für Bilder
‣ maximale Flexibilität!

51. Bei der Geburt getrennt
FF 3.5 Win IE 8

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

53. Müssen Webseiten überall
gleich aussehen?
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

54. Kosten von Layoutwünschen

55. Wir denken in traditionellen
Analogien für eine neue
Umgebung.

56. Gleich hohe Boxen
http://grochtdreis.de/

57. Mit einer Tabelle kein
Problem!

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

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

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

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

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

63. Gleich hohe Boxen
unproblematisch
problematisch
http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html

64. Problematisch: Semantik
‣ zwei komplett getrennte
Containerblöcke.
‣ Kein inhaltlicher
Zusammenhang.
‣ Schlecht für
Screenreader und
Suchmaschinen.

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

66. Gut: in Alternativen denken!

71. Flexibilität ist Stärke
Die Flexibilität des Internet ist seine Stärke.
Akzeptiert es! Macht Euch locker!
http://snipurl.com/2c1yl

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