Die Pest - philosophische Betrachtungen zur Webentwicklung

Die Pestphilosophische Betrachtungen zur Webentwicklung

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

Jens Grochtdreis

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.

‣ Ursprung: griechische Mythologie

‣ Bei Camus: „ständige Revolte gegen die Sinnlosigkeit der Welt“

Und was hat das mit dem Web zu tun?

Funktioniert das auch im IE?

Bremsfaktor IE

http://home.snafu.de/wumpus/rdfmu46.jpg

IE bis Version 8 moderne Browser

http://www.home-cinema-news.de/bilder/news/d_000474_01_de.jpg

Der IE ist der schwarz-weiss Fernseher des Web

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: 1,1%

‣ Chrome: 0,5%

Webhits 11.April 2010

Webmasterpro 11.April 2010

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

Auf einmal nur 5%?

Vermutung

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.

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

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Wen interessieren Browser?

Nur Entwickler!

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Wen interessieren Browser?

Peter-Paul Koch (@ppk)

„Hell is other browsers!“

J.P. Sartre

„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

‣ PC, Notebook

‣Handy, PDA

‣Spielkonsole

‣TV

‣Assistive Technologien

‣ Betriebssysteme

‣ Browser

‣ Browserversionen

‣ Indiv. Konfiguration

‣ Monitorauflösungen

‣ Umgebungslicht

‣ mobiler Zugriff

‣ Zugriffsgeschwindigkeit (DSL?)

‣ existieren Plugins?

‣ Javascript an oder aus?

‣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!

Flexibilität ist wichtig

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 HTML und Bilder erschweren die Wartung, Pflege und Anpassung

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

http://www.vertexwerks.com/tests/sidebox/

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

Runde Ecken - The ThrashBox

http://www.vertexwerks.com/tests/sidebox/

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

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

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

Rom, die Frisur hält

‣ Auch für Bilder!

‣ Auch auf Verläufen!

‣ Auch in em oder %!

‣ Schatten für Bilder

‣ maximale Flexibilität!

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 zusätzlicher Request

‣ wie groß muss das Sprite werden, wenn die Seite flexibel sein soll?

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!

‣ Die eine Box bekommt nichts von der Höhe der anderen mit.

‣ Javascript ist ein sicheres Hilfsmittel.

‣ Rate mal, wer display: table nicht kennt!

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

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

http://www.positioniseverything.net/articles/onetruelayout/equalheight

moderne Browser

IE6 und 7

Gleich hohe Boxen

http://yaml.de

.equalize > div { display:table-cell; float:none; margin:0; overflow:hidden; vertical-align:top;}

.equalize, .equalize .subcolumns { overflow:visible; display:table; table-layout:fixed; }

für moderne Browser und IE ab Version 8

moderne Browser

IE6 und 7

Gleich hohe Boxen

/* 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, .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize .c50l, .equalize .c62l,.equalize .c66l,.equalize .c75l { 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://www.positioniseverything.net/articles/onetruelayout/equalheighthttp://yaml.de

für IE bis Version 7

http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html

Gleich hohe Boxen

unproblematisch

problematisch

Problematisch: Semantik

‣zwei komplett getrennte Containerblöcke.

‣Kein inhaltlicher Zusammenhang.

‣Schlecht für Screenreader und Suchmaschinen.

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!

Gut: in Alternativen denken!

http://snipurl.com/2c1yl

Flexibilität ist Stärke

Die Flexibilität des Internet ist seine Stärke.Akzeptiert es! Macht Euch locker!

Jens Grochtdreishttp://grochtdreis.de

http://twitter.com/Flockehttp://webkrauts.de

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/