Aspekte moderner Frontendentwicklung Technikwürze 148

Technikwirt zu einhundertachtundvierzig. Mein Name ist Marcel Böttcher. Hallo aus München. München ist gerade noch mein letzter Zwischenstopp, bevor es nach Hannover wieder geht. Ich komme gerade vom zweiten Barcamp in Stuttgart, einem sehr, sehr spannenden und gehaltvollen Barcamp. Besonders der Sonntag hat mir sehr gefallen und eine der Sessions, die mir sehr gefallen hat, hat gehalten Jens Grochtrejst zum Thema Aspekte moderner Frontendentwicklung.

Und das ist auch Inhalt unserer heutigen Sendung. Insofern möchte ich gar nicht länger aufhalten und wünsche viel Spaß mit Jens.

Grundlage all dessen, was wir tun, oder die, die, die grundlegende, der grundlegende Gedanke all dessen, was wir tun, sollte in meinen Augen sein, dass, dass wir Flexibilität, im Kopf haben. Denn, wir wissen definitiv nicht, wie die Webseite, die wir gestalten, die wir programmieren, die wir, schreiben, beim Endnutzer ankommt. Wir können eine, eine Vermutung, äußern. Die Vermutung wird schätzungsweise bei achtzig bis neunzig Prozent der Menschen auch ankommen, aber auch nur schätzungsweise.

Wir haben schon hier im Raum unterschiedlichste Rechnerarten, Betriebssysteme, Rechnergrößen. Damit fängt es schon mal an. Wir haben, unterschiedlichste, Arten der Nutzung, Arten der, der Einschränkungen der Nutzung. Eine, eine Einschränkung wäre zum Beispiel, wenn, wenn jemand von uns mit unseren Notebooks, rausgeht, im Café sitzt, und die Sonne von hinten scheint. Der Kontrast auf der Webseite ist relativ gering.

Wenn wir jetzt unsere Webseite so aufgebaut haben, wie es viele Grafiker gerne haben, hellgrauen Text auf weißem Hintergrund, dann, können wir definitiv nichts mehr lesen. Wenn wir dazu genötigt sind, hohe Kontraste, uns einzustellen, weil, weil wir in irgendeiner Form eine Sehschwäche haben, dann kann es sein, dass das Layout auch komplett zerschossen wird.

Etwas, was man, schön, simulieren kann, indem man bei Windows mal Kontrastmodi einstellt und dann, auf einmal hat man nur noch weiße Schrift und schwarzen Hintergrund. Macht das mal bei eurer Seite und wundert euch darüber, was ihr alles nicht seht. Man kann natürlich jetzt sagen, das betrifft eh keinen. Ja klar, kann man sagen, aber, dieses Medium Internet, hat ja einen wirklich, genialen Vorteil, den kein and-anderes Medium, das wir kennen, bietet.

Wir können Inhalte, transportieren, in einer uns bekannten Form, ja? Wir können Insa-- Internet transportieren und derjenige, der die Inhalte empfängt, kann sie sich so anschauen, wie er es gerne möchte, beziehungsweise wie er es gerne, wie er es braucht. Etwas, was ich mit einer Zeitung natürlich nicht kann. Also eine schöne, Art, Bekanntschaften zu schließen im Flugzeug ist natürlich die Zeit zu lesen, ja? Da nehme ich die Zeit, schlage sie einmal auf und schon hat man zwei neue Freunde.

Man kann, die gleichen Inhalte auf einem iPhone lesen und niemand ist davon, betroffen oder auf so einem Netbook und niemand ist davon betroffen.

Ich kann, ich kann diese, ich kann Inhalte, die ich übers Internet, bekomme, kann ich, neu zusammenmixen. Ich kann sie mir so aufbereiten, wie ich es brauche. Und das ist ein Vorteil, den ich, denke, den wir immer im Hinterkopf behalten sollten und, ein Vorteil, den wir, den wir auch nutzen sollten und den wir weitergeben sollten. Wenn wir das nicht tun, dann können wir auch gleich, Printprodukte, erzeugen.

Und, deswegen ist all das, wovon ich jetzt rede, eigentlich, mit dem Hintergedanken gesteuert, dass wir die Vorteile, die Stärken des Internets ausnutzen, und zu, und für uns nutzen und für den, für den Endkonsumenten nutzen. Und noch ein Wort zum Endkonsumenten: Natürlich ist in erster Linie unser Kunde unser Endkonsument, aber er ist es ja nicht in Wahrheit. Das muss man den Kunden eigentlich auch mal klar machen. Das ist mal eine Beratungsaufgabe.

Es ist zwar schön, wenn ihm die Seite gefällt, wenn ihm Lila auf Rosa gefällt. Das ist alles ganz schön. Oder was ich auch immer wieder gerne sehe, roter Text auf blauem Untergrund. Ist sehr beliebt, kann nur kein Mensch richtig lesen.

Und wenn dann die Schrift auf zehn oder elf Pixel nachher ist, dieses Flimmern, kriegst du über Stunden nicht raus aus dem Auge. Also man muss dann auch den Kunden eigentlich beraten und sagen: „Das ist ja schön, dass du das magst, aber ich gebe dir Brief und Siegel drauf. Deine Kunden und um die geht es dir ja, die können damit nichts anfangen." Also noch mal auf Null zurück und drüber nachdenken.

Das ist eine Beratungsleistung, die in der Vergangenheit, glaube ich, sehr selten gemacht wurde, aber die wir, die wir ernst nehmen sollten. Ein Beispiel dafür, warum Flexibilität wichtig ist. Ich kann euch auch diverse andere noch zeigen. Das ist mal, mit meinem ersten Netbook, auch eine Aufnahme gemacht, also mit einem IE-PC. Auflösung achthundert mal vierhundertachtzig.

Ja, ich wollte also einfach mal bei, bei Neckermann gucken. Kannst du vergessen. Jetzt kann man natürlich als Neckermann sagen: Ja, eBook-Nutzer, iPC-Nutzer, sind nicht unsere Zielgruppe. Weit gefehlt. Ich mein, das sind die Leute, die sich freiwillig für 'ne kleine Möhre, mit der du nicht viel machen kannst, Geld ausgeben, ne? Also du wirst das-- Man ist eingeschränkt in, in dem, was man tun kann, aber, man ist hochmotiviert eigentlich.

Und, wer schon freiwillig, vierhundert Euro für 'n Computer ausgibt, mit dem man, eingeschränkte Dinge nur tun kann, der ist eigentlich auch motiviert, bei Neckermann, Otto oder sonst wem, zu bestellen. Wenn dann aber Neckermann 'n Framaset mehr hinbaut, bei dem, da das Ergebnis dann ist, dass i..., mindestens die Hälfte des Bildschirms nur aus Browser,, Suchfeld, Navigation und vor allen Dingen total wichtig dem Logo der Firma besteht, ja, ich mein, dann, dann kann ich damit nichts anfangen.

Ich bin aber eventuell genau in, in der finanzkräftigen Zielgruppe dieser Firma, möchte jetzt Geld ausgeben, sitze dummerweise, irgendwo in 'nem Café, möchte jetzt aber gerne was bestellen. Warum schließen die mich aus? Warum ma, machen die ihre Webseite nicht so, dass sie flexibel ist, dass sie auch auf, 'nem kleinen, Monitor anschaubar ist, dass sie auch auf 'nem iPhone anschaubar ist?

Also spätestens das, Thema iPhone wird bei den, Jungs ziehen, denn, ein iPhone kann mit Framesets auch nicht so wahnsinnig viel anfangen. Und dann kriegen sie ja Angst, weil die dreizehn Leute, die mit, 'nem iPhone da draufgehen, sind für die ja viel wichtiger als die dreihundert, die mit 'nem iPC draufgehen. Ist immer 'ne Frage des Marketings, glaub ich. Ja, Webseiten sind Dokumente. Das ist zum einen eine Wahrheit, zum anderen, na ja, stimmt das nicht mehr so hundertprozentig.

Aber all das, womit wir umgehen, ist darauf ausgerichtet, dass Webseiten Dokumente sind. HTML ist mal entwickelt worden, um Dokumente zu strukturieren, um Dokumente auszutauschen, um wissenschaftliche Dokumente auszutauschen. Das sieht man daran, dass HTML eine sehr, semantisch arme Sprache ist, einfache Sprache ist. Und, die Sachen, die wir heute mit dem, die wir heute im Internet abbilden, sind in der Urzeit, als HTML entwickelt wurde, noch nicht mal ansatzweise gedacht worden.

Und wir können im Prinzip das, was wir heute tun, nur mit Mühe und Not, mit HTML abbilden. Das ist leider so. Denn, denkt euch einfach nur mal 'ne, 'ne, 'ne inhaltsstarke Seite wie Spiegel de, Welt de, diese ganzen Nachrichtenseiten und bildet da mal 'ne vernünftige In, Überschriftenstruktur. Eine Überschriftenstruktur, die auch, weil das, nur, nur Informationsschnipsel sind, die auch auf Unterseiten, funktionieren.

Denn der gleiche Informationsschnipsel wird ja nicht zwei, dreimal angelegt, sondern der wird nur einmal angelegt. HTML war mal dafür gedacht, dass man halt eine große Überschrift, über der Seite hat und dann gibt's, da gibt's einfache logische, Strukturierungen so runter, aber so funktionieren ja Seiten heute eigentlich gar nicht mehr. Noch viel schlimmer wird's bei Applikationen. Überlegt mal, welche Kontrollelemente uns, HTML bietet. Doch eigentlich gar nichts. So gut wie gar nichts.

Bietet HTML 'n Slider? Nö. 'n Datumsauswahlfeld? Nö. 'n Schließen-Button? 'n Vergrößern-Button? Nö. Alle, alle Kontrollelemente, die für uns in irgendeiner Form bei Applikationen wichtig sind, die gibt's nicht. Die müssen wir faken. Die faken wir, im HTML mit JavaScript. Das ist der Grund, warum HTML5 entwickelt wird oder das ist einer der wesentlichen Gründe, warum HTML5 entwickelt wird.

Und das ist einer der Gründe, warum es heute noch nicht einsatzfähig ist und warum wir, warum's zwar total toll ist, dass jeder darüber schreiben und lesen will, aber es eigentlich, Zeitverschwendung ist, es sei denn, man möchte sich gerne theoretisch mit HTML auseinandersetzen. Denn bis wir das Ganze einsetzen können, das dauert. Bis Redmond, in Redmond dann auch tatsächlich die Spezifikation angekommen ist, abgenickt ist und jeder sie verstanden hat, der IE-Programmierer, pfff, das dauert.

Und was, was hilft es uns was hilft es uns, wenn wir 'ne neue Technik haben und, mindestens die Hälfte der Nutzer sie nicht, anwenden können, weil der Hersteller des, des, des am meisten verwendeten Browsers es einfach nicht umsetzt? Was hilft es uns? Mir, mir hilft es null, dass, dass die WebKit-Programmierer da schon dreizehn Jahre weiter sind und, irgendwelche, Spielereien implementieren. Das ist nett, das ist toll. Das-- Damit kann man dann auch den Praxistest machen.

Das ist alles ganz niedlich. Ich nutze ja selber auch, Chrome, also ich nutze WebKit. Das ist aber praxisirrelevant.

Das ist--

Das ist unwichtig.

Man kann ja auch durchaus mit der Technik das Progressive Enhancement rangehen.

Ja, aber für, für, für dreizehn, für dreizehn Nutzer.

In unserer älterer Browser gibt's eben die abgeschmeckte Version.

Richtig, dazu komme ich auch gleich. Dazu komme ich auch gleich, aber das, das hat alles so seine, seine Stolpersteine. Also Webseiten sind zwar Dokumente, aber eigentlich in, in der Realität sind sie's ja nicht mehr. Nur in HTML müssen wir uns eigentlich diese Dokumenten,, diese Dokumentendenke zu eigen machen und dementsprechend müssen wir uns erst mal drüber Gedanken machen: Wie strukturieren wir denn unsere Webseite?

Also der, der häufigste Fehler, der denke ich, der gemacht wird, ist, man bekommt 'nen, der, der Kunde bekommt gleich 'ne, 'ne Malerei hingelegt. So soll eure Seite aussehen. Wenn wir Glück haben, hat der Grafiker sich vorher drüber Gedanken gemacht, dass das unterschiedliche, Seitenelemente sind, unterschiedliche Strukturen, vielleicht oder also unterschiedliche Eigenschaften von Text. Wenn wir Glück haben. Wenn wir Pech haben, dann nicht.

Und dann müssen wir, das ist ja eigentlich der Normalweg, dass, dass wir Frontentwickler, die, d-der am Ende der Nahrungskette sind, wir müssen dann mit dem, was, uns der Grafiker hingelegt hat und was am besten dann schon mit dem Kunden abgesprochen ist, bevor wir überhaupt wissen, dass es da 'n Job gibt, müssen dann versuchen, das Beste daraus zu machen Und dann beginnt eigentlich die wirkliche, die wirkliche Arbeit.

Das heißt, wir müssen uns überlegen, was ist das jetzt eigentlich strukturell? Und dann müssen wir wirklich auch anfangen, die, die Struktur zu übernehmen. Ich, ich sehe viel zu viele Seiten, bei denen es dann heißt, wie hier in meinem Beispiel, Div Class Headline und am besten noch Div Class Headline, Leerschritt, Leerschritt, H2. Das heißt, der-- das, das gibt es bei, bei Stern, das ist so bei Stern.de.

Das heißt, der, der Entwickler, der hatte so einen gewissen Hauch von Ahnung, dass es da ein, ein Element gibt, das H2 heißt. Und ich frage mich: Wer hat ihm bitte schön verboten, dann statt dieses Konstruktes H2 einfach zu schreiben? Warum? Warum? Warum machen sie das nicht? Also erst mal darüber nachdenken, was ist das und dann auszeichnen. Und zwar unabhängig davon, wie das nachher aussehen soll. Denn als Erstes, strukturiere ich und dann schaue ich mir an, wie das Ganze auszusehen hat.

Und dann kann ich immer noch mit CSS, loslegen und das Ganze, anders anmalen, als man glaubt, dass es ist. Und Semantik hört sich in diesem Fall hochtrabender an als es ist. Aber es bedeutet einfach nur, dass man sich Gedanken über seine Arbeit macht und Gedanken darüber macht, was dort dargestellt wird.

Also auch da wieder der Spruch: Denken ist durchaus erlaubt und erst bestimmen wir, was etwas ist, also welche Art von Überschrift, und dann bestimmen wir, wie das Ganze aussehen soll., immer wieder gerne gesehen, Newsseiten, bei denen die Überschriften von, von Artikeln eine H1 sind.

Das ist, wie man jetzt schon seit mindestens zwei Jahren weiß, eigentlich eine ganz, ungeschickte Idee, weil Google über die letzten Jahre herausgefunden hat, dass die meisten in einer H1 das Logo ihrer Firma oder den Namen der Firma packen. Das ist dann einfach so gelebte Praxis. Das mag, das mögen wir nicht gut finden oder man, man kann einen Grund dafür finden. Es ist gelebte Praxis, heißt aber für Google im Umkehrschluss, dass alles, was in H1 ist, gar nicht so wichtig sein kann.

Also wird das Ganze von Google nicht als so wahnsinnig wichtig,, gekennzeichnet. Ergo sollte ich damit, sollte ich versuchen, meine, eigentliche Inhaltsstruktur, die, die für mich wirklich wichtig ist, mit einer H2 beginnen zu lassen. Und ich denke, das kann man auch richtig gut, eigentlich immer gut hinbekommen. Und nun kommt es auch so hin, dass man dann vielleicht eine H1 oder vielleicht vier, fünf H1 auf einer Seite hat, aber die eigentlich wirklich wichtige Überschrift erst bei H2 beginnt.

Es ist eine, eine beliebte Diskussion, wie viel H1 sollen auf einer, auf einer Seite sich befinden. Habe ich auch gestern schon mit diversen Leuten drüber geredet. Es gibt, seit, zwei, drei Tagen auch bei Einfach für alle, einen schönen Artikel von Tomas Caspers zu dem Thema. Ich bin da noch nicht richtig entschieden. Ich bin, ich habe da noch, noch nicht für mich die, die endgültige, Lösung gefunden. Aber ich möchte euch zwei Sachen zu bedenken geben.

Zum einen, es gibt, es gibt ja genügend Leute, die sich darüber Gedanken machen zum Glück, wie man für, zum Beispiel Screenreader eine Seite auch strukturieren kann, dass sie für Screenreader gut zugänglich ist. Wie wäre es denn, wenn dann einfach die Bereiche einer Seite, so was wie Navigation, Content, und, Funktionsspalte oder wie man es nennen möchte, dann mit einer H1 ausgezeichnet sind, sodass man als, mit Screenreadern sehr einfach nur durchtappen kann zu den einzelnen Funktionsspalten.

Und genau diese, Überschriften, die, die ich als Sehender nicht benötige, weil ich sie ja direkt erfasse, dann, ausgeblendet werden, also ich nicht sehen kann. Aber bitte nicht mit Display none ausblen, ausblenden. Ganz wichtiger Tipp, denn, lustigerweise, interpretieren Screenreader auch CSS und sagen sich Display none soll nicht dargestellt werden, also lese ich sie auch nicht vor.

Ist unlogisch, aber genauso wie der Internet Explorer sechs nicht logisch ist und wir, uns da an unsere Workarounds ge-gewöhnt haben, sollten wir uns auch da an die Workarounds gewöhnen. Also, wenn wir etwas ausblenden wollen und wir möchten aber, dass es gerade für Screenreader da ist, nicht mit Display none, sondern, einfach absolut positionieren, so zehntausend EM oder so was nach links außen, also mit minus tausend EM oder minus fünftausend EM einfach rausschmeißen und gut ist.

Das, das ist für Screenreader, okay. Google hat, hat damit auch keine Probleme. Und wenn ich die Seite strukturiere, ist es nachher eigentlich erst mal egal, wie das Ganze aussieht. Deswegen, das habe ich eben schon angesprochen, erst mal strukturieren und danach kann man ja immer noch darüber nachdenken, wie das Ganze auszusehen hat. Also niemand sagt mir, dass eine H2, größer sein soll in der Darstellung als eine H3.

Wer jetzt einfach mal, ohne CSS, ohne irgendetwas eine Seite sich, eine Seite-- Mal gucken, ob ich das hier demnächst habe.

Der Web De, der Web Locker installiert hat, Strg, Shift, S drücken.

Mh, ja, nee, ich wollte, ich wollte das eigentlich noch da. Das sind einfach mal von ganz alten Browsern ohne jegliches, Styling, kurze Texte dargestellt und wir sehen ein Styling. Und so eine schöne Frage, die ich jedem, Neueinsteiger stellen würde, wäre: Wie sieht ein Listenelement aus? Oder wie sieht ein, wie sieht eine Überschrift zweiten Grades aus? Und wenn mir dann jemand kommt mit, fett und vierundzwanzig, Pixel, dann sage ich: Nimm dir mal ein Buch. H2 sieht nicht aus. H2 ist H2.

Listenelement sieht nicht aus. Listenelement ist erst mal Listenelement. Das, was wir da sehen, das ist CSS. Jeder Browser kommt mit einem eigenen CSS mit. Das heißt, wenn wir anfangen wollen, etwas so zu gestalten, sollten wir uns von der, sollten wir uns von der, von dem Gedanken lösen, dass dieses Element in irgendeiner Form aussieht. Nein, es sieht nicht aus. Es ist etwas. Es hat eine Bedeutung. Und wie es aussieht, das weise ich dem Element zu.

Der Browser kommt mit seinen eigenen Vorstellungen oder kommt jeder Browser mit seinen eigenen Vorstellungen. Da können wir auch die unterschiedlichsten Varianten vom Internet Explorer nebeneinander halten und jede IE-Version, zeigt die Überschrift in einer anderen Art mit einem anderen Abstand. Ihr seht das hier bei dem Screenshot. Der Abstand der, der Überschrift nach oben oder nach unten divergiert zwischen, IE sechs und Firefox eins.

Ja toll, wenn ich, wenn ich so was nicht, nullee, dann habe ich meine Späße. Das heißt, ich kümmere mich um die Struktur und um dann mit, und dann ohne Sto, Störung mit, mit der Optik loslegen zu können, muss ich eigentlich erst mal alles reseten. Und das Einfachste und, durchaus nicht, nicht mehr so richtig Empfehlenswerteste ist da oben in der zweiten Zeile Sternchen. Also alle Elemente Sternchen, Margin null, Padding null, Font Size ein EM und dann kann man loslegen.

Dann gibt's keine Abstände mehr, dann gibt's keine, gibt's keine Innenabstände, keine Außenabstände mehr. Da gibt's nur noch eine einheitliche Schriftgröße. Wir machen, setzen, Schrift auf, auf normal, nichts mehr mit fett und dann sieht alles gleich aus. Wer so was macht und sich 'ne, 'ne komplette Webseite ansieht, der hat, sieht nur noch einen einzigen Textwust vor sich. Prima, super. Und dann fangen wir an zu gestalten.

Eric Meyer hat dann, irgendwann mal einen sehr interessanten Artikel rausgebracht und den Reset ein bisschen, bisschen sehr viel komple-komplexer gemacht als einfach nur so ein Sternchen, weil er sagt, das Problem, liegt vor allen Dingen bei Formularelementen. Denn Formularelemente sind bei HTML nicht richtig vernünftig durchdekliniert und beschrieben. Und es kommt noch hinzu, Formularelemente werden ganz unterschiedlich von Browser zu Browser, interpretiert.

Fickelfox, Firefox, bringt seine eigenen Formularelemente mit. Das war's dann aber auch schon. Opera, Safari und Internet Explorer nehmen die, ich glaub, bei, bei Opera bin ich mir nicht sicher, aber Safari und Internet Explorer nehmen die Formularelemente, die das Betriebssystem ihm zur Verfügung stellt. Und das sind andere. Die sehen anders aus. Wenn ich jetzt mit, einfach mit dieser, Sternchen-Methode losgehe, kann es zu, Abweichungen kommen, die mir nicht so richtig gut gefallen.

Deswegen kann ich euch nur empfehlen: Schaut mal bei Eric Meyer, meyerweb.com, nach und, schaut euch mal den Reset an. Der ist zwar ein bisschen groß, aber, es lohnt sich, damit mal auseinanderzusetzen. Ja. Also noch mal zu den Überschriften hier. Ich finde das eigentlich eine ganz wichtige Geschichte, weil das für mich, zeigt, dass man sich mal auch wirklich, länger Gedanken über das machen, sollte, was man da tut.

Warum eigentlich soll man nur so, fetzerisch in den Raum gestellt, soll man eigentlich nur eine einzige H1 auf eine Seite nehmen oder vielleicht maximal zwei? Warum eigentlich? HTML ist in Analogie zu, zu Print mal entstanden. Wir laufen aber eigentlich bei moderner Webentwicklung immer mit dem Mantra herum, dass wir eine Analo, Analogie von, Internet zu Print ablehnen. Und eigentlich stimmt das ja auch.

Denn erst, wenn's das erste animierte Banner auf einer Tageszeitung gibt, gebe ich zu, dass es 'ne, dass es 'ne, ne Gleichheit oder dass es 'ne Ähnlichkeit zwischen Print, und, und Internet gibt. Und wenn dann ich dann noch die Tageszeitung resizen kann und dabei der Text mitzist, ne, dann haben wir eine Gleichheit. Wird nie passieren. Natürlich nicht.

Und wenn's keine Gleichheit zwischen den Medien gibt, höchstens in manchen Punkten 'ne Ähnlichkeit, warum soll ich dann eigentlich mit den gleichen Gedanken der Strukturierung von Inhalten auch auf das Internet zugehen? Warum eigentlich? Denn solche komplexen, Seiten wie 'ne, 'ne News-Seite habe ich ja kaum im Print.

Eigentlich ist ja die Übersch, die, die, die Startseite vom Süddeutschen oder von der Welt ist ja nicht vergleichbar mit, mit dem Titelblatt von, von, von so einer Zeitung, sondern vielleicht mit dem Inhaltsverzeichnis von Spiegel. Das heißt, wir müssen eigentlich mit ganz anderen-- wir müssten schon wieder mit anderen Analogien, arbeiten, als sie uns auf den ersten Blick, entgegenkommen. Und wir müssen vielleicht auch einfach unsere eigene, unsere eigene Denkwelt, bekommen.

Und ich finde es nicht gut, bei solchen Gedanken erst mal nur auf Suchmaschinen, Google zu gucken, sondern erst mal, was ist jetzt eigentlich in meinen Augen richtig logisch? Womit komme ich gut in der Entwicklung klar? Und dann kann ich im zweiten Schritt immer noch gucken: Muss ich meinen Ansatz vielleicht ein bisschen modifizieren wegen Google? Denn ich mache die Webseite nicht für Google. Echt nicht.

Also so schön ich das mit der Suchmaschinenoptimierung, so wichtig ich das auch finde, aber ich mache die nicht für Google. Ich mache die für Menschen und ich mache die Strukturierung. Also de, dem Menschen ist es eigentlich scheißegal nachher, ob da ein Tabellenlayout dahinter ist im Normalfall.

Normal Sehende, die nicht auf irgendwelche Zusatztools angewiesen sind, die werden normal, die werden wahrscheinlich keinen Unterschied, erkennen, ob ich ein Tabellenlayout oder kein Tabellenlayout von mir habe. Klar. Und Google ist es im Prinzip auch egal. Wenn es Google nicht egal wäre, dann wären, achtundneunzig Prozent aller Webseiten nicht in Google drin. Wer baut denn bitte, moderne Webseiten ohne Tabellenlayout? Das ist leider, das ist leider immer noch die Minderheit. Leider.

Weiß nicht.

Ja. Gab's letztens erst so 'ne schöne Studie von Opera. Und wenn sie's machen, schaut euch Stern.de an, die sind vor, vor zwei Wochen oder drei Wochen haben die gelauncht.

Voll aus den Icons da.

Ja, okay, die Icons sind, sind die eine Geschichte. Also du siehst den Text vor lauter Icons nicht mehr. So 'ne Iconsuppe, so 'ne graue. Ja, aber die, die haben YAML genutzt, haben also, tabellenfreies Layout. Aber das mit der Semantik, das ist bei denen noch nicht durchgedrungen. Also so Überschriften und, was man so auszeichnen kann, ist noch nicht so richtig pri, prima bei denen gelaufen.

Wie, wie schätzt du das ein, woran das liegt? Also ich mein, das-

Schlechte Ausbildung.

Also ich, -

Bequemlichkeit.

Denkt ihr, dass es vielleicht daran liegt, dass einfach für diese großen Konzerne da, immer die gleichen Firmen letztendlich, irgendwie dahinterstehen?

Nee. Na ja, aber auch die gleiche Firma, weil's die gleiche Agentur ist. Sag mir bitte die Agentur, auch 'ne größere, bei der über, zehn Jahre oder sagen wir mal 'ne Nummer, nehmen wir mal nur fünf Jahre, immer exakt das gleiche Team für den gleichen Kunden arbeitet. Innerhalb von fünf Jahren hat das Team schon dreimal gewechselt. Wer hat bei, wer hat bei Agenturen 'n längeren, längeren, Bleibehorizont als zwei oder drei Jahre?

Wer sechs Jahre bei 'ner Agentur ist, der wird doch schon zum Inventar. Das ist ja leider so. Es ist ja leider so.

Es sind ja einfache-- Also was ich halt nicht verstehe, ist, es sind ja einfache Dinge. Und, was du vorhin beschrieben hast, find ich ganz interessant, weil ich das auch oft, da steht dann Div und dann steht da, ID H2 oder Class H2. Das sind ja ganz einfache Dinge. Man könnte das ja einfach durch, durch, durch Standards einfach. Das ist das, was, was ich nicht verstehe.

Genau, das, und das, das, fasziniert mich ja auch. Also ich, ich mach das jetzt schon seit zehn Jahren mit im Internet und ich hab vor, ich hab vielleicht 2001 oder 2000, bis 2001 oder 2002, Tabellenlayouts gemacht. Und mal ganz ehrlich, ich hab mit Tabellenlayouts aufgehört, weil ich-

Okay, dann geh wieder. Ich hab damit aufgehört, weil ich ein fauler Sack bin. Weil ich nämlich keine Lust hatte, immer diesen, dieses eine Ein-Pixel-Gif zu finden, das ich dann anklicken musste in Dreamweaver, um den Abstand noch mal um drei oder vier Pixel breiter zu bekommen. Ja? Und dann hab ich irgendwann mal entdeckt: Ah, es gibt ja CSS. Da brauche ich ja nur die ID oder die Klasse anzusprechen und schieb das Ganze einfach um die gewünschte Pixelzahl nach rechts.

Das ist doch viel einfacher, als diese blöden Ein-Pixel-Gif zu finden und vielleicht noch mal 'ne Tabelle in 'ne Tabelle zu schachteln und noch 'ne Tabelle und, dann, verbinden wir noch irgendwelche Zellen. Das war Faulheit. Das war pure Faulheit. Und es hatte nachher für mich den Effekt und ich glaube, jeder, der damit ernsthaft anfängt, wird das dann auch irgendwann,, merken, dass er auf einmal begriffen hat, was er da tat.

Weil es nicht mehr einfach nur, Tabellengeschachtel war, sondern ich hatte auf einmal eine Überschrift. Ah, wenn ich in den Quellcode gucke, brauche ich gar nicht, den Browser nebenher zu halten, sondern ich sehe: Ah, das ist 'ne Überschrift. Das ist 'ne Liste.

Und dann kann ich nebenher auch mein, mein, mein CSS entwickeln und brauche gar nicht so richtig mir das Ganze anzuschauen, sondern, sondern kann schon anfangen, so die, die, die wichtigsten Grund, Layouts-,, Informationen zu schreiben und es funktioniert.

Also ich hab auch erst vor Kurzem 'n Refactoring gemacht für 'n Tabellenlayout. Und ich mach das eigentlich überhaupt nicht. Und da ist mir auch bewusst geworden, was das, welche Komplexität das annimmt, wenn da zwanzig Tabellen ineinander verschachtelt sind. Und ich hab das letztendlich auch komplett dann rausgefl IPt.

Ja. Gut, gehen wir mal von den Überschriften ein bisschen weg. Noch so 'n paar kleine Hinweise. Wir sind ja jetzt auch 'n bisschen eng in der Zeit. In einer Agentur hab ich so was mal gesehen, das oberste, 'ne anklickbare Box. Das wird's mit HTML5 geben, das gibt's aber jetzt noch nicht. Also bitte, bitte, wenn ihr eine Box unbedingt klickbar machen la, wollt, versucht das entweder über den Inhalt der Box oder macht's mit JavaScript. Aber bitte nicht einen Link um ein Div herumpacken.

Das geht nun absolut nicht. Wir haben, also der Link ist 'n Inline-Element und in einem Inline-Element darf sich kein Block-Element befinden. Das ist-

Validiert auch wohl nicht so, ne?

Ja, gut, das ist, ist-- Ja, aber diejenigen, die das schreiben, die schreiben Validierung auch mit W und mit zwei L und denken, und denken, das ist 'n Teil der Schweiz. Also

Oh Gott, ehrlich.

Und was ich auch immer wieder gerne sehe, sind dann so Spans und Divs als Allzweckwaffe zu nutzen. Auch sehr beliebt, Span um einen Absatz herum. Sehr beliebt im Zusammenhang mit irgendwelchen Content-Management-Systemen. Ich baue in meinen, in mein Template 'n Span ein und da kommt 'n, 'n, 'n Textfeld rein und natürlich schreibst du dann irgendwann mal auch Absätze. Und dann, ja, was soll das? Ich mein, dadurch, dass ich, Span Display Block mache, wird daraus kein Block-Element.

Braucht kein Mensch. Also wenn ich schon unbedingt 'n Wrapper brauche um irgendwas herum, dann nehm ich halt 'n Div. Aber erst mal drüber nachdenken, ob ich diesen Wrapper überhaupt benötige.

In dem Fall oben könnte man auch einfach das I-Element als Block, Blocklevel darstellen lassen. Sieht gleich aus.

Also es ist, ja, nee, das, bei dem oberen geht nicht.

Also nee, ich meine ohne das Div drin.

Ja, okay. Ja, aber, hm, du weißt ja nicht, wie toll dieses ganze, dieser ganze Effekt scheinen soll. Da soll dann wahrscheinlich noch irgendwie die, die Border außen rum, fast animiert sein, wollt ich schon sagen, aber,, hm? Du weißt halt nicht genau, wie der Block angeklickt werden können soll. Aber theoretisch hast du recht, könnte man auch den Link, als Block-Element nutzen. Immer wieder gern gesehen, Boxen, die nebeneinander stehen, die sollen die gleiche Höhe haben.

Ich, es gibt, es gibt mehrere unterschiedlichste Versionen, so was zu lösen. Also Boxen, die nebeneinander stehen und die nicht in der Tabelle sind, die wissen voneinander nichts. Die haben keine gemeinsame Höhe, die, die wissen von ihrer Existenz nichts. Wenn ich jetzt also mehrere kleine Teaser Boxen nebeneinander habe und ich möchte aber, dass, dass die, die gleiche Höhe bekommen, dass die mit dem gleichen, mit der gleichen Umrandung zum Beispiel, enden, dann habe ich ein echtes Problem.

Ich gehe bei so was mittlerweile sehr gerne einfach zu, zu JavaScript über. Da muss man den ganzen halt mit, jQuery oder irgendeinem, irgendeiner Mittel der eigenen Wahl nachhelfen, weil das, weil alle anderen, Lösungen nicht, nicht universell prima einsetzbar sind, und, den Code auch nicht unbedingt leichter lesbar machen. Es gibt, es gibt auch andere Lösungen.

Es gibt, wenn wir jetzt nicht gerade mit, mit Boxumrandungen arbeiten, sondern vielleicht nur mit Hintergrundfarben, dann können wir auch, mit, Four Columns arbeiten. Also wir umfassen einfach den, die, die unterschiedlichen Boxen mit 'nem weiteren Container. Der wird immer durch den längsten Container ausgedehnt und wir geben dem umgebenden Container ein Hintergrundbild, das dann die, die unterschiedlichen Boxen, hinterlegt. Das kann man machen.

Das, funktioniert mit Farben ganz gut, aber da haben wir wieder ein Problem mit unseren, Boxumrandungen. Ich kann bei so was wirklich euch nur raten, im Wesentlichen auf, JavaScript dann zu vertrauen, also per JavaScript die, die Höhe der, der nächsten Box auszurechnen und den anderen Boxen dann zuzuweisen. Es gibt einfach Sachen, die mit, CSS schwer bis gar nicht möglich sind.

Und bevor man jetzt anfängt, CSS tierisch zu ver-vergewaltigen, sollte man den Nachteilen von CSS dann lieber mit den Vorteilen von Ja--, von, von JavaScript be, begegnen. Ich mache so was mit jQuery und, mal ehrlich, die drei Prozent oder zwei Prozent, die dann JavaScript ausgeschaltet haben, die sehen dann zwar keine gleich hohen Boxen, aber die können den Inhalt noch sehen. Da kommen wir zu dem, zu dem Thema, Progressive Enhancement. Es gibt einfach Sachen, die können Browser nicht.

Es gibt Sachen, die können manche Browser nicht, so unsere beliebtesten. Und man kann Lösungen finden, die halt in diesem Browser nicht funktionieren oder die in diesem Browser nur mit JavaScript funktionieren und, die aber so gelöst sind, dass wenn JavaScript nicht existiert, der Inhalt trotzdem zugänglich ist und auch noch aussieht. Also dann, dann ist es halt so. Das ist wie mit Fernsehern.

Also ich kann mich noch gut an die Zeit erinnern, als, das offiziell das Schwarz-Weiß-Fernsehen abgeschafft wurde. Vorher, hieß es in der Sportschau immer die mit den, dunklen Hosen, ist der Verein, die mit den hellen Hosen ist der Verein. Und irgendwann haben sie dann gemerkt, es gibt genügend Far, Farbfernseher und sie haben, die Kommentatoren haben nicht mehr mitgesagt die mit den schwarzen Hosen, die mit den weißen Hosen. Und ich finde, an so 'ner, an so 'ner Wegscheide sind wir derzeit.

Wir haben noch die Schwar, die Schwarz-Weiß-Fernseher, also Internet Explorer sechs, und durchaus auch vielleicht noch so jemand, der vielleicht einen Firefox eins oder Firefox, zwei nutzt. Und wir haben die, die Farbe haben. Wir haben die, die Farbe und HD haben. Und niemand möchte mir doch erzählen, dass es heute extra Fernsehsender gibt, die nur, also richtig, richtig teure, große Fernsehsender gibt, die nur für den einen Fernseher und nur für den anderen Fernseher und nur für den Fernseher.

So was machen wir aber die ganze Zeit. Schon ein bisschen seltsam, wie wir uns derzeit, wie wir unser, unseren Job so machen. Ja, eine wohl letzte Sache möchte ich noch mal, möchte ich euch noch mit auf den Weg geben. Floats sind ja eine beliebte Möglichkeit, um, Layouts aufzu, dröseln. Sind, die haben, Floats haben ihre großen Vorteile und haben auch ihre ganz großen Nachteile, speziell in Kombination mit dem Internet Explorer sechs. Da sind sie eine Quelle ewiger Freude.

Und ich kann euch nur raten bei Floats-- Also es gibt zum Beispiel ein sehr gutes, es gibt einen sehr guten Artikel bei Smashing Magazine über, über Floats. Ist schon ein bisschen älter, aber sehr schöne Übe, Übersicht. Aber der Punkt hier, der Double Margin Bug ist, ist eine der ekligsten Sachen, der aber total simpel, dem total simpel zu begegnen ist. Und das empfehle ich jedem von euch. Wenn ihr etwas floatet, schreibt immer, immer dazu Display Inline.

In dem Moment, wo etwas gefloatet wird, wird es automatisch zu einem Block Element. Und zwar so lange, wie es floatet. Auch wenn ich Display Inline dazu schreibe, bleibt es ein Block Element. Aber der Internet Explodierer sechs, verdoppelt dummerweise, wenn ich Display Inline nicht dazu schreibe, die Margin in Float Richtung. Wenn ich also ein Element nach links floate und ich gebe dem eine Margin left von zehn Pixel, dann denkt sich der Internet Explorer sechs: „Ist ja nett.

Ist toll, dass du da in Richtung Float bist. Ich geb dir noch einen drauf. Machen wir mal zwanzig draus. Ich bin heute ein Kumpel."

Der scheint kreativ.

Der ist sehr kreativ. Ja, ja. Ich weiß auch nicht, was die geraucht haben, als sie das programmiert haben. Und diesen, diesen Fehler der, der Margin Verdoppelung kann man dadurch, beheben, indem man einfach Display Inline dazu schreibt. Merkt euch einfach Float immer in Kombination mit Display Inline, solange ihr die nächsten drei, vier Jahre noch den Internet Explorer sechs berücksichtigen müsst.

Das werden wir sicherlich noch tun die nächsten vier Jahre und danach können wir es wieder vergessen. Und wenn wir es nicht vergessen, ist auch nicht schlimm, weil es tut niemandem weh. Ja, das waren so die wichtigsten Sachen, die ich jetzt noch rüberbringen wollte.

Was hältst du von Clearing mit, Auto, Overflow Auto? Das geht ja am meisten.

Ach so, Clearing ist auch ein schöner, Stichpunkt.

Weil du hattest vorher dieses Clearing ohne zusätzliches-

Ja, genau.

Was nämlich in so einer Form nicht stimmt, weil du schreibst zusätzliches Markup, du verteilst nämlich eine Klasse im HTML.

Ja, genau. Und mit Overflow kriegst du es auch markup. Also es ist kein markup, was semantisch bedeutungsvoll ist.

Nö, musst du natürlich. Klar. Ja, aber du musst noch nicht mal die Klasse schreiben. Das ist natürlich, es ist ja 'ne, ist ja einfach nur Faulheit, dass ich die, oder es ist eigentlich auch guter Stil, dass ich das Ganze auf eine einzige Klasse konzentriere. Ich kann aber auch das Clearing, ohne, ohne, also das hier, dieses clearest, das kann ich natürlich auch für jedes Element genau so schreiben. Dann habe ich kein zusätzliches Markup. Ich hätte aber zusätzliches CSS.

Zusätzliches Markup ist, wäre jetzt 'n eigenen, eigenes Div einzufügen.

Ja, klar.

Clearing mit Overflow finde ich jetzt nicht so den, finde ich nicht unproblematisch. Das hat immer mal wieder so, Nebenwirkungen, die wir nicht haben wollen. Vor allen Dingen, wenn ich, auch gerne, sicherstellen möchte, dass mein, mein Layout nach unten ausdehnbare bleibt und ist. Das, da das Ganze mit dem clearest wunderbar funktioniert, nutze ich das auch nicht. Also, das, das Clearing von Floats, nur ganz kurz: Das Clearing von Floats funktioniert im Internet Explorer automatisch.

Da muss ich schon sagen, das ist total klasse, dass die, dass die Kumpels in Redmond auch Fehler machen. Das ist für uns einfach äußerst praktisch. Also, es, es wird einfach gecleart, ganz automatisch. Manchmal wünschte ich mir, die anderen Browser hätten genau das auch. Manchmal sind Fehler auch ganz praktisch und vielleicht ist die Spezifikation ja nicht so der Brüller.

Und für all diejenigen, die, die halt noch 'n Clearing bräuchten, also das, was man so gerne macht, einfach unter 'nem Float 'n Div zu schreiben ohne Inhalt und dem ganzen Clear both zu geben oder das Ganze mit 'nem, mit 'nem Break zu machen, das kann man sich ersparen, indem man einfach 'ne Klasse hinzufügt. Die wird normalerweise clearest genannt. Die kann man auch Schnullerbacke nennen oder tanzt den Teufel oder so was. Ist ja vollkommen wurscht. Irgendeinen Namen.

Und, der Trick, weswegen das auch im Internet Explorer überhaupt keine Nebenwirkungen hat, ist, da wird 'n, wird 'n Selektor genutzt, den der auch gar nicht kennt, existiert ja erst seit zehn Jahren. Und mit diesem Selektor, mit diesem Selektor wird dem Ele, wird nach dem Element, dem der zugewiesen ist, ein Punkt, geschrieben in, in den Quellcode. Der Punkt wird zu 'nem Blockelement gemacht, und gleichzeitig über Höhe null und Visibility, Visibility hidden das Ganze wiederum versteckt.

Und dem Element wird dann Clear both zugewiesen. Also, es ist ein Element, das nicht ausgegeben wird, nicht gerendert wird, aber da ist und dass dann die Funktion, einfach dieses, das, das, das Divs übernimmt. Das hat einfach nur den Vorteil, dass da eine Zeile Code, fehlt. Wem das, wichtig ist, der kann das tun. Wem das nicht wichtig ist, und da einfach sein Div reinschreiben möchte, weil er's dann auch sieht, der wird auch nicht gesteinigt.

Also an dem, an der einen Zeile extra Code, geht jetzt die Welt auch nicht unter. Ich finde das Ganze nur stilistisch 'n bisschen, charmanter, dem einfach 'n clearest zu, zu verabreichen. Und ich hab dann dieses, clearest einfach in meinem CSS drin. Das gehört zu dem, kleinen Set an Standardregeln, die ich immer für jedes Projekt, habe und es wird immer von einem Projekt zum anderen mitgenommen. Ist eigentlich ganz praktisch. Ja, jetzt hab ich doch mehr geredet. Gibt's noch Fragen?

Was Ressource betrifft?

Ich hätte noch 'ne Frage, und zwar vielleicht an alle:, wie macht ihr das? Also, wenn ihr CSS habt, dann müssten, muss man ja irgendwie drauf matchen. Die Sachen beschreiben sich ja gegenseitig. Wie organisiert ihr das? Also, beziehungsweise wie lang macht ihr eure Pfade? Also, organisiert ihr auch die Hauptbereiche zum Beispiel mit IDs und matched dann von dort aus immer weiter? Oder also nur mal allgemein, wie es, wie das gemacht wird und wie lang das gemacht wird. Was ist da...

Eher Klassen und lieber mehr Klassen als weniger. Also ich bin kein Freund von zu tiefen Vererbungen, weil's irgendwann einfach nur noch affig wird.

Also, du teilst dann auch auf in Bereiche und verwendest von dort dann, dann, meistens dann Direktklassen.

Mhm. Also sagen wir's mal so: Sind strukturelle Bereiche, denen gebe ich Klassen. So was wie, was weiß ich, Content und dann, eventuell so, wenn, wenn der Content mehrere Bereiche hat, verteile ich da auch noch mal Klassen und ab da mache ich's dann über Elementvererbung. Also was weiß ich, wenn ich jetzt, ein, ein Div mit, sagen wir, der Klasse Articles habe, dann mache ich ab da Articles Div P oder so.

Genau, okay.

Also, ich nehme IDs für die Bereiche.

Genau, so mache ich es.

Klassen irgendwie also nur dann, wenn es das braucht. Und ich finde, wenn ich ein normales Layout hab und ich hab jede zehn Klassen, dann hab ich irgendwas falsch gemacht und bin immer geckert. Also, dann ist irgendwas schiefgelaufen an der falschen Stelle.

Also, IDs verwende ich für gewöhnlich für die Bereiche, wo ich irgendwas mit JavaScript machen will. Ansonsten lasse ich die weg.

Nö, also für mich ist die Grundstruktur, also eine Navi ist eine ID und ein Content ist eine ID. Es ist einfach der Grundaufbau meines Layouts sind IDs.

Und so mache ich das ja auch.

Ich versuche immer, Inhaltselemente mit, Klassen zu versehen, sodass ich, wenn ich die gleichen Inhaltselemente an unterschiedlichen Seiten, auf unterschiedlichen Seiten platziere, die dann unterschiedlich teilweise aussehen, ich dann über, Seiten-IDs zum Beispiel, da Modifikationen reinbringen kann.

Aber ich hab dann das allgemein Gleiche, meinetwegen die, die Breite, des Elementes oder auch die, die Farbe von irgendwelchen Links oder Überschriften, die vielleicht abweichend ist, die ha, die habe ich dann, konzentriert in meiner Klasse und nur die Abweichungen werden dann in die Klassenkombination mit, mit der ID, verwendet.

Kann ich noch was zum Thema CSS Debugging sagen? Wie finde ich 'n Fehler im Internet Explorer und zum Firefox krieg ich ihn auch. Das ist immer meine größte Schwierigkeit.

Display

Ja, also...

Oder welche Tools kann man da einsetzen?

Ja, Folgendes. Also, das ist, das ist für mich das Tool der allerersten Wahl. Das ist, wichtig Finde ich, die, der, der IE-Tester. Der, funktioniert bis runter zu IE fünf fünf, wer es braucht. Und ansonsten, bis zu IE acht. Die kommen， die Rendering Engines kommen dann mit..

Das ist schon richtig gut, das Ding.

Anmerkung: Basiert das Ding auf Multiple IE? Ich glaube ja.

Nein, nein.

Abstürzt ständig ab.

Ja, auf jeden.

Bei mir nicht.

Also auch, aber der IE acht im IE-Tester und regulär, da sind mir da was unterschiedliche Sachen da.

Genau, das, das ist jetzt nämlich genau das Problem. Also ich habe schon des Öfteren-- Entschuldigung. Ich habe schon des Öfteren, mitbekommen, dass sowohl der Multiple IE als auch der IE-Tester, andere Ergebnisse liefern als der wirklich nativ installierte IE.

Deswegen habe ich praktisch für jeden IE, also für die, den, den sieben habe ich nativ bei mir auf der Arbeit irgendwie als, als,, Betriebssystembrowser installiert und für alle anderen habe ich mir jeweils eine VM angelegt, wo ich den halt darin teste.

Also ich, ich finde, ich finde folgende Vorgehensweise eigentlich ganz praktisch: Während, während ich etwas entwickle, gucke ich mir das Ganze in einem richtigen Browser an. Also in Firefox oder in Chrome. Ich entwickle halt derzeit auf, noch auf, auf Windows und dementsprechend gucke ich mir das jetzt nicht im Safari an.

Wenn das Ganze dann mal rund ist und dann, man dann auch schon, also eigentlich alles steht, dann muss man ja erst mal gucken, so: Wo denkt sich jetzt der Internet Explorer, dass man das anders, darstellen sollte? Und dann kann man ja schon mal, da finde ich das äußerst praktisch hier, diesen IE-Tester zu nehmen für die ersten groben Fehler, weil du da einfach nur die einzelnen, Reiter durchklicken, musst und du hast alle, hast alle IEs da.

Der IE-Tester hat den Nachteil, dass er nicht vernünftig mit einem Debugging-Tool noch, zusammenarbeiten kann. Also das, was da drin ist, finde ich, nicht so besonders toll, um es mal so zu sagen. Der IE acht kommt mit einem prima, Debugging-Tool mit, das so auf der halben Strecke zu Firebug, stecken geblieben ist und eigentlich ganz gut ist. Und man kann in dem IE acht dann zumindest auch umschalten zwischen IE acht und IE sieben, auch wenn das nur ein IE sieben Komma eins ist.

Also das ist kein Hundertprozentiger. Aber echt, wann kommt man schon auf die, zu dem Punkt, wo gerade der eine Fehler, der, das eine Problem in, in dieser, Situation angezeigt wird, der, der in dieser, in dieser Mini-Rendering-Engine steckt. Und wenn es dann, wenn es dann, auf die Fixierung geht und, letztes Debugging, dann empfehle ich jedem nur die VMs, die Microsoft selber zur Verfügung stellt.

Microsoft stellt für den IE sechs, sieben und acht eigene VM, also Virtual Machines, nicht VMware, sondern ich weiß nicht, wie-

Virtual PC.

Virtual PC, genau.

VHD-Dateien, glaube ich.

Irgendwelche, virtuellen Maschinen zur Verfügung. Die werden, die haben immer so eine Lebensdauer von einem knappen Jahr, werden aber immer wieder aktualisiert. Und da hat man ein komplett installiertes, XP. Es gibt, glaube ich, auch Vista, mit einem nativen, Browser drin und, die kann man, da kann man dann wirklich so die, die letzte, das letzte Feintuning machen.

Und da würde ich jedem empfehlen, darin dann auch den, die, die IE Developer Toolbar drin zu installieren und die Accessibility Toolbar für den Internet-Explorerer. Die ist nämlich auch klasse, denn, all das, was ansonsten ich nur mit Firebug machen kann oder mit der Web Developer Toolbar unter Firefox, kann ich dann echt mit dieser, Accessibility Toolbar, tun. Die gibt’s auch auf Deutsch, derzeit in der Version zwei. Link habe ich leider jetzt nicht parat.

Schaut mal nach Accessibility Toolbar mit zwei C und zwei S. Ist wirklich sehr, sehr, sehr sinnvoll. Und da kann man viele hübsche Sachen tun. Und wenn es auch nur ist, dass man mit einem Klick, mal, den, JavaScript ausschaltet und nicht sich durchwuseln muss durch irgendwelche Menüs.

Du hattest doch was beim Durchschalten mit runden Ecken und CSS. Kannst du noch mal zurückgehen?

Mhm. Ja, das ist so eine Sache mit den runden Ecken. Ich bin eigentlich dafür, zu versuchen, sowohl dem Grafiker als auch dem Kunden zu erklären, dass man runde Ecken ja wohl machen kann, aber wenn man das für alle Browser brow, übergreifend machen möchte, man dann wirklich, zu, zu so einem, so einem Code Wust kommt. Also der ist halt schlecht pflegbar. Das ist wirklich schlecht pflegbar und in manchen, Situationen auch, fast nicht vernünftig zu handeln.

Und, dann kann man dem Kunden eigentlich auch mal versuchen und dem Grafiker versuchen zu erklären: Es gibt halt Browser, die sind gut und es gibt den Internet Explorer.

Und es-- Selbst der Internet Explorer in Version acht kann dummerweise, eine Regel, die es schon seit zehn Jahren gibt, knapp, kann der nicht. Aber andere können das. Und wenn das, Layout es aushält, dann zeigt doch einfach, für die richtigen, also für die modernen Browser das Ganze mit runden Ecken und gerne auch runde Ecken mit Schatten, an und die anderen, die haben dann halt keinen.

Wir haben das jetzt für Kunden erst wieder machen müssen. Es gibt zwar schöne Möglichkeiten, es gibt ein Shape Query Plugin-

Das ist gut.

-für runde Ecken, aber, Safari.

Ja, okay.

Safari und der IE, also IE macht keine runden Ecken und Safari hat in den Ecken so einen schwarzen Punkt drin oder ist statt schwarz dann transparent. Was wir zwar gemacht haben, das ist zwar vom Code ein bisschen mehr, aber, wenn die, wenn die Rundung um fünf, um die fünf Pixel geht, quasi fünf einzelne Diffs mit jeweils, jeweils ein Pixel nach links und nach rechts mehr. Das heißt, du bist halt für eine Ecke unten fünf Diffs und dann hast du deine Ecke.

Super. Also das hat man früher Tabellenlayout genannt. Ja, ich meine, wo ist der Sinn davon?

Wo ist echt der Sinn?

Wer kann, wer kann das nachher vernünftig pflegen?

Der Sinn, Sinn in der Hinsicht ist richtig, aber es funktioniert halt in allen Browsern..

Ja klar, ich meine, das ist ein Totschlagargument. Layout-Tabellen funktionieren auch in allen Browsern. Ich muss mir dann irgendwann aber auch überlegen und auch dem Kunden vermitteln, dass ich natürlich allen möglichen Kram machen kann. Natürlich kann man das alles machen. Aber die Frage ist, ob es sinnvoll ist. Es ist-- Die Frage ist, ob es sinnvoll ist für einen selber, das Ganze zu pflegen.

Dann wie ist das, wenn der Kunde irgendwann mal auf die Idee kommt, ihr seid als Agentur zwar ganz toll gewesen, aber eine andere Agentur ist noch sexier, noch billiger.

Noch rundere Ecken.

Noch runder. Schießt noch runter, so wenig. So, und dann, dann wird halt der Agentur da, das übergeben. Wie soll, wie soll die das pflegen? Du brauchst ja erst mal noch eine Doktorarbeit, um die ganzen, um diese ganzen Tricks zu verstehen. Und dann ist eine Sache, je nachdem, wie groß die, die Webseite ist. Das sind ja auch alles, Sachen, die aufs Gewicht, auf die Performance, auf die Rendering, Geschwindigkeit und auf die Requests gehen.

Ich habe noch gar nicht, von Sprites geredet, also von, von Mini, Bildelementen. Die-- Da hast du mal irgend so eine kleine Lupe, da hast du mal ein Sternchen, da hast du mal irgendwas. Das sind, das sind alles nur so Bilder von, lass es mal achthundert Byte sein. Die werden aber alle-- Da hast du einen Request. Du, du, du kannst Seiten dir angucken, die haben zweihundertachtzig Requests, von denen,, locker hundertzwanzig nur irgendwelche kleinen Kleinstdateien sind.

Ich hab, ich hab gerade mal kurz was getwittert.

Das ist ja toll. Das kannst du schon.

Ja, das kann ich schon.

Toll.

Also ich hab letztens für, für mich zumindest ein Skript gefunden, was ziemlich gut funktioniert für die. Den Rest wirklich so wie da beschrieben..

Mit runden Ecken auch.

Mit runden Ecken, genau. Also, der Schatten, auf den muss man dann wahrscheinlich leider eher verzichten. Aber wie gesagt, progressive Enhancement.

Ja, aber schaut euch diese JavaScript-Lösungen mal ganz genau an. Ich hab irgendwann mal, ich hab irgendwann mal ein jQuery-Plugin gesehen, dass dir einen Farbverlauf macht. Cross Browser.

Mmh.

Total klasse. Hab ich gedacht: Oh super, Spielerei. Kann ich meinen Grafiker mit begeistern. Und dann haben wir das Ganze mal ausprobiert und haben uns dann gewundert, warum dann auf einmal, die Seite, auf der kaum was drauf war, so lange lädt. Und dann haben wir in den Quellcode reingeguckt.

Da war dann wirklich für jede Farbinformation ein Dip von einem Pixel Breite oder Höhe, je nachdem, wie du das ausgerichtet hast, mit dem Effekt, dass dann etwa tausendzweihundert Dips na, nebeneinander geschrieben wurden in den Quellcode. Ich meine, dass das nicht das Optimum an Performance ist, das wird auch der letzte Kunde begreifen. Und, das kann man nicht machen. Das geht nicht. Und da-- Du schaust bei solchen JavaScript-Spielereien wirklich danach, wie das gemacht wird.

Nicht dass da nachher zu viele, Inhalte, eingepflegt werden, die auch so ein Browser erst mal rendern muss. Und nicht jeder, und nicht jeder, ist an so einem Rohr, in, mit, nicht nur DSL, sondern fünfzehn, fünfzehnfache, schnellste DSL-Geschwindigkeit, in irgendeinem Netzwerk.

Das Ganze basiert auf VML, wird also, also, wird also einfach, als Vektor, was, was, der Internet Explorer ja nativ unterstützt, werden die Ecken, wird die Bordering quasi ersetzt und durch einen Vektor gerendert.

Wenn das schnell geht, aber das ist auch ein Plugin im Prinzip.

Ja, klar.

Das muss dann auch erst mal angeschmissen werden. Es gibt ja, es gibt auch so, so Geschichten, bei denen, bei denen normal neuerdings, anstatt, Canvas mit, also was ja der Internet Explorer leider nicht kann, mit, Flash gearbeitet wird. Ja toll. Das muss aber auch erst mal wieder angeschmissen werden. Und auch wenn das, auch wenn das, gut funktioniert, aber es, es macht das Ganze, macht die Sache nicht schneller. Man muss, man muss schon drüber nachdenken, ob es wirklich Sinn macht.

Klar, muss, muss man ja-

Und austesten.

Was man da macht. Also ich denke, man setzt ja nicht umsonst Sprites ein und versucht irgendwie, seine CSS möglichst mit Short End Properties zu schreiben, um dann, irgendwelche Dinge zu benutzen, die die Ladezeiten wieder in die Höhe treiben. Das ist klar. Also, da muss man schon den, den Sinn und den Nutzen abwägen. Aber, wenn's nun denn unbedingt verlangt wird und auf Teufel komm raus, dann kann man natürlich auf solche Lösungen zurückgreifen. Das war das, was ich damit sagen wollte.

Ja, hast du auch vollkommen recht. Gut. Noch einer?

Ja, vielleicht noch schnell, was ich mir gerade überlege. Also da gibt's jetzt immer mehr Blogposts auch dazu, dieses Less oder da gibt's von Ruby noch ein paar andere Geschichten. Das ist so Libraries mit denen.

Sass.

Ja, Sass, genau.

Sass.

Da habe ich dann noch mal so einen Vorverarbeitungsschritt. Ich kann dann quasi, ich habe dann so Makros in CSS drin, ja, und kann halt ein bissl mehr im CSS machen und jagt es dann wie durch so einen Compiler durch und kriegt dann im CSS raus.

Ich find's halt als Entwickler toll. Und ja, vielleicht ist es auch schön, dass dann nicht jeder so den, den CSS-Code zieht, den ich mal geschrieben habe, sondern so 'ne komprimiertere Variante.

Das ist halt die Fra, wirklich die Frage, wie du arbeitest. Wenn du wirklich, di-direkt nur in der, in deiner Programmiersprache arbeitest, mit dem alles tust, und da drin auch dein CSS schreiben kannst, wüsste ich nicht, was dagegen spricht, außer dass es ein bisschen seltsam auf den ersten Blick ist. Aber ja, natürlich, es hat natürlich einen großen Vorteil, dass du irgendwelche Variablen setzen kannst.

Ja, wie zum Beispiel.

Die du durchsetzen kannst, ja. Ich persönlich arbeite nicht so. Ich persönlich, mach, mach Click Dummies ganz normal statisches HTML, und CSS. Und wenn ich dann jetzt noch anfangen wollte, extra dafür, mit einer dynamischen Sprache zu arbeiten, nur um mein CSS zu, schreiben, wär's mir persönlich sehr unangenehm. Ich könnte damit nicht umgehen. Aber wer jetzt aus der Programmierecke kommt, dem ist das vielleicht, so, sogar naheliegender. Es, es ist wirklich 'ne, 'ne, 'ne Geschmacksfrage.

Ich kann damit ni-- Ich könnte damit nicht arbeiten, glaube ich, weil sich das auch wieder anders liest.

Wobei das ist halt ganz erstaunlich. Also ich habe halt auch, also HAML gibt's ja schon seit Ewigkeiten, also auch schon seit über zwei Jahren oder so und, halt die Sass ja auch schon relativ lang. Und ich habe halt immer schon oder immer so überlegt so: Ah, macht denn das Sinn, irgendwie das überhaupt zu benutzen? Und ich habe halt eigentlich die Zeit gewartet, bis sich das so ein bisschen so breit durchsetzen kann, dass es halt irgendwie viele Leute geschrieben haben, dass sie das nutzen.

Und ich hab mir das, jetzt quasi so das erste Projekt dann halt mal gemacht, wo, ich dann die ganzen Sachen eingesetzt hab. Also jetzt halt mit dem HAML und es ist tierisch cool. Also halt allein wie, dass man halt die ganzen, die ganzen HTML-Sachen halt auch viel schneller schreiben kann. Halt einfach so, dass man da allein durch die Einrückung halt dann, also dieses-

Satz, was man halt schreibt, wie man halt Stylesheets schreibt. Das ist in dem Sinne halt keine, keine neue Sprachversion, sondern, man kann halt auch Einrückungen verwenden und so weiter. So eine gewisse Strukturierung, die man der Datei gibt. So kann man halt im Prinzip dann halt schon wieder solche Erstellungsstrukturen erstellen und das ist halt wirklich tierisch zeitersparend und echt super. Also das, also und auch die Ergebnisse, die danach herauskamen.

Also ich war am Anfang, am Anfang halt auch echt skeptisch und, also wo ich es dann einmal probiert hab, also das ist echt cool.

Was ich am spannendsten bei dem Ansatz finde, ist, dass, er zeigt mir, wohin die Reise unbedingt gehen muss bei CSS. Also bei CSS, sagen wir CSS4. Auch wenn ich das vielleicht in meiner Berufslaufbahn kaum noch erleben werde, wenn die so weiter in der Geschwindigkeit arbeiten. Aber, also ich, ich vermisse wirklich wie viele andere auch zum Beispiel die Möglichkeit, Elemente zu ka, zu kapseln.

Dass ich zum Beispiel, sagen kann, alle, alle Links oder alle Absätze, die sich in, in dem, in der ID sowieso befinden, die werden jetzt angesprochen. Dass ich, ich, ich mache da 'ne, ich mach 'ne ID Content auf und in der, in der Klammer schreibe ich jetzt nicht, die normalen, die normalen Eigenschaften der ID Content, sondern schreibe dann erst, die einzelnen Elemente oder auch, Klassen, notiere die da und nur in dem Zusammenhang, gelten die folgenden Regeln. Das wäre total genial.

'Ne Sache, also dass man sozusagen eigene Klassenstruktur oder so was bauen kann. Das wäre auch sehr viel übersichtlicher als, als der Weg, den wir derzeit bei CSS gehen müssen. Und, ich kann mir gut vorstellen, dass wir da auch noch in zehn Jahren oder in fünfzehn Jahren hinkommen. Denn, wenn ich das, W3C richtig verstehe, machen die das mit dem CSS ja jetzt modular.

Das heißt, wir kriegen jetzt so einzelne Module, die einzelne Browser implementieren, und wenn es irgendwann ein neues Modul gibt, CSS neu zu schreiben und zu interpretieren und tatsächlich auch, und das ist das Allerwichtigste, alle Browser das verstehen, dann kann ich damit arbeiten. Aber der, der Knackpunkt ist bei der Geschichte immer zweifach. Der Browserhersteller.

Aber mir nützt es nichts, dass selbst wenn jetzt der, in Redmond, Microsoft, mit, mitzögen und wirklich jetzt alles implementieren, was geht, nützt mir das alles nichts, solange es noch die letzten Installationen vom alten Internet Explorern gibt, die das halt nicht können. Was bringt es mir, wenn ich im Internet Explorer zehn wirklich alles können, was ich gerne hätte, am besten auch noch ohne Fehler.

Und es gibt aber kaum Internet Explorer zehn Installationen, dafür aber acht, neun, sieben und vielleicht noch so ein paar Krümel Internet Explorer sechs. Das hilft mir alles nichts. Das ist, das ist unser, das ist leider unser, unser Drama, in, in diesem Medium. Aber ehrlich, das macht es doch auch spannend, oder? Wenn es einfach wäre, könnte es ja jeder. Und, das denke ich, ist auch ein guter Schluss.

Vielen Dank, Jens. Das waren die Aspekte moderner Frontendentwicklung mit Jens Grochtdreis. Somit sind unsere Pflichten aus, dem Süden Deutschlands erfüllt. Ihr habt noch zwei. Zum einen kommentieren. Wir freuen uns natürlich über Feedback. Noch viel wichtiger diese Woche ist aber, dass ihr an der Podcasting-Umfrage von podcast.de teilnehmt. Wir würden nämlich einfach ganz gerne mal wissen, wie es schaut. Wie schaut es denn einfach aus in Deutschland zurzeit mit dem Podcast? Was hört ihr so?

Wie viele hört ihr und so weiter. Da gibt es auf podcast.de eine Umfrage, die wir gerne unterstützen. Am schnellsten kommt ihr da hin über bit.ly, dem URL-Shortener bit.ly Slash Umfrage null neun. Und somit mache ich mich mal so langsam wieder auf den Weg, wünsche noch eine wunderschöne Woche und bis bald.

Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de. Für ein besseres Web.

Weitere Informationen und die Links zur Sendung auf Technikwürze.de.