Wir unterhalten uns heute über echte Tabellenlayouts und hängen an den Lippen von Mike Davies, der die echt gut findet – oder doch nicht? Außerdem: Reaktionen und Feedback zum Technikwürze-Redesign.

Diese Folge jetzt anhören

Layouttabellen vs. CSS

Mike Davies, Senior Web Developer für Yahoo Europa, greift den aktuellen Beitrag CSS vs. Tables – 13 Reasons why CSS is Superior in Website Design von Matt Jurmann und damit immer wiedekehrenden Argumente zahlreicher CSS Evangelisten auf und zerpflückt jeden einzelnen der 13 Punkte in der Luft. Wir klären auf, hinter welchen seiner Argumente ein Funken Wahrheit steckt, und wo viel Unsinn drin ist.

Der Artikel: The shallowness of CSS evangelism (Die Oberflächlichkeit der CSS-Evangelisten)

Die 13 Punkte des Mike Davies

  1. Faster page loading
  2. Lowered hosting costs
  3. Redesigns are more efficient
  4. Redesigns are less expensive
  5. Visual consistency maintained throughout website(s)
  6. Better for SEO
  7. Accessibility
  8. Competitive edge (job security)
  9. Quick website-wide updates
  10. Easier for teams to maintain (and individuals)
  11. Increased usability
  12. More complex layouts and designs
  13. No spacer gifs

Nicole Sullivan (Yahoo) über Amazon-Performance: Artikel 1 und Artikel 2.

Feedback zum Redesign von Technikwürze

  • Sehr großer Zuspruch, extrem viele E-Mails, Tweets und Kommentare (40).
  • Viel Feedback, viele Änderungen
  • Meta-Informationen im Titel verlinkt
  • Querverlinkung der Moderatoren
  • Übersicht aller Sendungen der Moderatoren
  • Valide Seiten
  • Typografisch, viele Änderungen (Arial statt Helvetica für XP-User)
  • Veränderungen an der Startseite
  • visited-Links im Archiv
  • Suchfunktion im Archiv
  • Zoom-Funktion bei den Kommentaren
  • Dank an Mathias Schäfer für seine Unterstützung in Sachen RegularExpression unter Javascript. Er half bei einer Funktion für die Teamseite.
  • und und und und.
Diese Folge jetzt anhören

Tags:

Dieser Beitrag wurde am Montag, 16. März 2009 um 00:00 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von Ingo Chao Ingo Chao
    am 16. März 2009, 09:57 Uhr

    Die Daten von Nicole Sullivan für Amazon, Yahoo, Google sind anekdotisch. Wir müssen Forschung betreiben, inwieweit ein Performancegewinn sich in einem anderen Nutzerverhalten umsetzt: Ab 100ms oder ab 500ms, und bezogen worauf? Wir wissen das nicht. Wenn es aber darum geht, mehr Ressourcen in Optimierung zu stecken, muss man diese Daten liefern.

  • Avatarbild von Dirk Dirk
    am 16. März 2009, 10:20 Uhr

    Hallo Ingo,

    Du hast Recht, ohne absolute Zeiten sind die Daten nicht vergleichbar. Dennoch darf man vermuten, dass sie im Rahmen der Analyse Amazon-Analyse, von der Nicole spricht, vorlagen und sie zeigen, wie sensibel solch große Projekte reagieren können, auch wenn man bei 100ms in einen Bereich kommt, der selbst bei DSL durch Schwankungen in der Bitrate beeinflusst wird.

  • Avatarbild von Friedhelm Friedhelm
    am 16. März 2009, 11:43 Uhr

    Interessante Folge. Der Artikel von Mike hat ja schon einen gewissen Wirbel verursacht, zu Recht.
    Die spannende Frage bleibt natürlich:
    Was sind denn die wirklich tragfähigen Argumente für CSS-Layouts?
    Wäre vielleicht ein Thema für eine Folgesendung, ich würde mich jedenfalls brennend dafür interessieren.

  • Avatarbild von Frank Frank
    am 16. März 2009, 12:34 Uhr

    Ich glaube ein eindeutig schlagendes Argument für oder gegen CSS-Layouts gibt es gar nicht. Das einzig schlagende Argument was mir einfällt gegen CSS-Layouts ist ein bestimmter Browser. Aber auch der ist in den Griff zu bekommen. Ich denke man sollte das von Projekt zu Projekt individuell entscheiden ob sich der Aufwand lohnt.
    Bei stark Grafiklastigen Websites, wo es darauf ankommt 100% Pixelgenau zu arbeiten und verschieden Hintergrundgrafiken genau zu platzieren, nutze ich lieber CSS-Layouts. Bei Textlastigen Websites wie Blogs, Foren oder Online-Shops setze ich lieber auf Tabellen.

  • Avatarbild von Steffen Steffen
    am 16. März 2009, 14:41 Uhr

    schön die outtakes ;)

  • Avatarbild von macx macx
    am 16. März 2009, 14:48 Uhr

    Ja, sollten wir öfters machen.

  • Avatarbild von Janek Janek
    am 16. März 2009, 16:02 Uhr

    Hi, wieder eine schöne Sendung!
    @David: Dein RSS-Feed ist wieder mal wieder kaputt. Diesmal ist es in Zeile 326, Spalte 112 das Entity „. :-)
    RSS unterstützt nur die Standard-XML-Entitys, nicht aber den vollen HTML-Entity-Satz. Warum weiß Wordpress das eigentlich nicht?
    Mein Miro ist großzügig darüber hinweggegangen, aber der Firefox mosert mal wieder und zeigt eine leere Seite an.

  • Avatarbild von macx macx
    am 16. März 2009, 16:58 Uhr

    Feed habe ich repariert. Danke!

  • Avatarbild von Francesco Francesco
    am 16. März 2009, 18:17 Uhr

    Vielen Dank für diesen äußerst interessanten und amüsanten Podcast. Hat mir auf der Zugfahrt heut um sechs Uhr morgens gute Dienste geleistet. :-)

  • Avatarbild von Markus Schlegel Markus Schlegel
    am 16. März 2009, 18:36 Uhr

    Ich habe ehrlich gesagt noch nie mit Layouttabellen gearbeitet und kann/möchte mich deshalb dazu gar nicht großartig äußern.

    Grundsätzlich kann man aber schon sagen, dass sich die Techniken (zum Glück) immer fortentwickeln und CSS-Layouting, so wie es heute zur Verfügung steht, bei weitem nicht perfekt ist. Es ist aber derzeit die beste Lösung (schon aufgrund der Semantik), so wie wahrscheinlich Layouttabellen damals die beste Lösung waren (meine Vermutung).

    Schöne Sendung.

  • Avatarbild von Martin Grandrath Martin Grandrath
    am 16. März 2009, 21:50 Uhr

    Ich habe noch einen Verbesserungsvorschlag für eure Seite im Angebot:

    Auf der Seite mit den Moderatoren wäre es sinnvoll, named anchors anzubringen, damit man auch ohne JavaScript beim jeweiligen Portrait landet und nicht erst suchen muss.

  • Avatarbild von Erik Erik
    am 17. März 2009, 00:02 Uhr

    Passt einfach so gut zum Thema: Mit “Why CSS should not be used for layout” geht Ron Garret einige real-existierende Probleme von der Gestaltung, vom Rendering her an, nicht so sehr von der Performance-Seite wie ihr. So sehr bei den Haaren herbeigeholt ist das alles nicht. Ich finde das ganze eigentlich sehr konstruktiv gesund, egal wie angegriffen sich da manch einer fühlt.

  • Avatarbild von Jule Jule
    am 17. März 2009, 10:06 Uhr

    1. Danke für Technikwürze – das macht immer wieder Spaß!
    2. Diese Folge kann ich auch mal meinem Freund vorspielen – es geht ja um Fußball.
    3. Nein, Dirk, da muss kein ironie-Tag drum ;)

  • Avatarbild von Chris Jung Chris Jung
    am 17. März 2009, 10:18 Uhr

    Naja, die CSS-Grids haben schon einige Unterschiede zu Tabellen, so sind die “Zellen” nämlich nicht in Zeilen eingeteilt, womit man wunderbare Sachen einfach anstellen kann.

    Trotzdem kann man die Zellen in einem (fast) beliebigen Rechteck gruppieren, was man auch in der Demo von 960.gs sieht.

  • Avatarbild von paul paul
    am 17. März 2009, 14:48 Uhr

    Mir hat die Folge wirklich gut gefallen; vielen Dank & weiter so.
    Schön das ihr wieder da seit!

  • Avatarbild von Eric Eggert Eric Eggert
    am 17. März 2009, 15:02 Uhr

    Zum Thema CSS-Layout-Mittel hier ein kurzer Verweis auf einen Blog-Eintrag von mir.

  • Avatarbild von Robert Robert
    am 18. März 2009, 23:56 Uhr

    Eine der besten Folgen seit langem! Macht weiter so! Ich finde einen solchen, praxisnäheren Aufbau der Sendung solltet ihr öfters machen. Mir persönlich waren einige der vorhergehenden Sendungen doch zu abstrakt.

  • Avatarbild von Fabian Steiner Fabian Steiner
    am 19. März 2009, 11:34 Uhr

    Tolle Folge! Und übrigens auch sehr gelungenes Redesign. Finds gut, dass auch CSS mal kritisch betrachtet wird. Bei einigen Zeitgenossen nimmt CSS nämlich schon fast eine religiöse Allmachtsposition ein. Nichts gegen CSS… aber kritisch hinterfragen ist immer gut. (als ob wir das nicht alle wüssten, ich weiss ;-))

  • Avatarbild von Schalkie Schalkie
    am 19. März 2009, 16:05 Uhr

    Lustiger Podcast muss ich sagen auch wenn der wirklich Mehrwert eher sehr gering war ;-)

    Man merkt allerdings das ihr keine SEO’s seid. Zum einen ist es durchaus so das Semantik schon jetzt eine Rolle bei Google spielt, Eine von viele Beispiel ist nur mal der H Tag. Zum anderen Verwurstet ihr in euren Aussage Onpage und Offpage Optimierung. Natürlich ist es so das alte Domains mit dreckigem Code besser in den Serps stehen als neue Seiten mit gutem Code einfach weil der Offpage Faktor doch recht hoch ist dennoch kann man das ja nicht als Argument gegen die SEO Freundlichkeit von CSS anführen. Vor Allem wurde auch ein schwerwiegendes Argument vergessen. Mit CSS kann ein SEO bestimmen wo er welchen Inhalt im Code platzieren möchte ohne das dies auf das Erscheinungsbild der Seite Einfluss hat.

    Auch beim Redesign muss ich noch etwas Anmerken. Wenn wir von Themes für zum Beispiel Wordpress ausgehen ist es mit CSS durchaus möglich ein komplett anderes Layout zu entwickeln ohne die index oder single.php auch nur anzuschauen. Dies trifft für Diverse andere CMS auch zu.

    Greez Schalkie

  • Avatarbild von rockpianist rockpianist
    am 19. März 2009, 21:21 Uhr

    Aha, dieses Mal hat es geklappt.
    1.) Ich habe vorhin versucht, einen Kommentar zur Sendung 123 (Yaml) einzutragen, um zu sehen ob er irgendwo als aktueller Beitrag erscheint.
    Ein Eintrag in den Yaml-Thread war aber gar nicht möglich!

    2.)
    Sehr gelungen Sendung: Soviel Unvoreingenommenheit hätte ich Euch Verfechtern der Webstandards gar nicht zugetraut. Ich finde es sehr gut, dass Ihr euch so sehr mit ALLEN Argumenten auseinandergesetzt habt.
    Ich werde trotzdem weiter tabellenfrei und mit css programmieren. Die Punkte Wartungsfreundlichkeit und Professionalität sind hier wohl ausschlaggebend!
    Gruß rp

  • Avatarbild von Christian Christian
    am 20. März 2009, 12:46 Uhr

    Interessante Sendung, die den gewünschten Zweck erfüllt hat, nämlich die eigene Meinung bzw. die Conventional Wisdom mal wieder zu hinterfragen.

    Zwei Dinge sind mir jedoch aufgefallen, die ich in die Diskussion werfen möchte:

    - Die Sache, dass manche Browser den Cache beim Schließen leeren, ist für mich kein schlagkräftiges Argument. Denn wir reden ja einerseits hier nicht von allen Browsern mit diesem Verhalten (und auch FF macht das in der Defaulteinstellung nicht so, oder? Korrigiert mich, wenn ich falsch liege), andererseits wird natürlich innerhalb der Session trotzdem gecacht und damit die Vorteile gegenüber Tabellencode ausgespielt.

    - Nachdem Ihr mal so eben die 13 Pro-CSS-Argumente allesamt dekonstruiert habt, frage ich mich schon, was denn an wirklich stichhaltigen Gründen bleibt. Dazu habt Ihr nämlich erstaunlich wenig gesagt, obwohl von allen Beteiligten immer wieder Formulierungen fielen wie “naja, über Tabellencode sind wir ja glücklicherweise trotzdem hinweg” (also wertend, dass CSS bzw. die sauberere Trennung ja schon ein Fortschritt ist). Nur wenn Ihr selbst keine schlagkräftigen Gründe dafür nennen könnt, warum bezeichnet Ihr dadurch implizit CSS dann als positiven Fortschritt?

  • Avatarbild von macx macx
    am 20. März 2009, 13:24 Uhr

    @Christian Ist deine letzte Frage wirklich ernst gemeint?

    Ich dachte eigentlich schon, dass wir in 129 Folgen Technikwürze ausreichend Argumente für Layouts pro-CSS gefunden haben. Aber darum ging es auch weder in dieser Folge, noch in Mikes Artikel. Denn auch darauf haben wir hingewiesen: Er wollte darauf hinweisen, dass man seine Argumente pro CSS mal wirklich überprüfen sollte, statt einfach alles mal nachzuplappern.

    Nicht mehr, und auch nicht weniger.

  • Avatarbild von SEOnaut SEOnaut
    am 20. März 2009, 13:57 Uhr

    Hallo !

    Der Auftritt wirklich grossartig und eine echte Inspiration für Radio4SEO. danke dafür und viel Glück weiterhin für euch.

    Gruss aus dem SEOversium

  • Avatarbild von Christian Christian
    am 20. März 2009, 14:00 Uhr

    Dann tut es mir Leid, dass es der erste Podcast von Technikwürze war, den ich mir angehört habe. Wird nicht mehr vorkommen ;)

  • Avatarbild von SEOnaut SEOnaut
    am 20. März 2009, 14:00 Uhr

    @schalki Sag mal, du glaubst aber nicht wirklich, dass Google semantisch arbeitet, oder ?

  • Avatarbild von Martin Ladstätter Martin Ladstätter
    am 20. März 2009, 14:48 Uhr

    Ich finde die neue Technikwuerze.de einfach super! Keiner Accessiblity-Verbesserungsvorschlag: Ich fände es super, wenn Ihr noch Sprungmarken einbauen würdet. Aufgefallen ist mir auch, dass bei http://technikwuerze.de/das-team die Tastatursteuerung nicht ganz funktioniert. Man kann zwar wen auswählen, wenn man aber dann weiter durch die Seite taben will, schlägst das insoweit fehl, als man eigentlich nicht mehr sieht, wo man ist und wie es weitergeht.

  • Avatarbild von [asterix] [asterix]
    am 24. März 2009, 21:26 Uhr

    “[..]kann ich CSS einfach noch nicht so nutzen, wie es möglich wäre.”

    Das ist wohl der hauptsächliche Grund, weshalb dieser Mike alle Punkte mehr oder weniger gut wiederlegen konnte. Aber CSS ist die Technik der Zukunft. Deshalb finde ich es gut, dass er im Fazit schreibt, dass es nur gedacht sei, um zum nachdenken anzuregen. Trotzdem habe ich mich jetzt fast 1.5 Stunden lang aufgeregt, wie man Tabellenlayouts so verherrlichen kann. :D

    War übrigens das erste mal, dass ich Technikwürze höre, ist echt toll!

  • Avatarbild von André André
    am 5. April 2009, 20:05 Uhr

    Großartige Sendung! Schön, dass CSS auch mal kritisch diskutiert wird und nicht nur immer und immer wieder die selben faden Argumente wiederholt werden.
    Auch wenn ich CSS mittlerweile lieben gelernt habe und nicht mehr missen möchte, musste ich bei der Umstellung “damals” jede Menge Fallstricke überwinden. Der deutlich schlankere Code kam mit teuer erkauft vor.
    Danke für die tolle Technikwürze!

  • Avatarbild von Tom Tom
    am 6. April 2009, 21:30 Uhr

    Ein Bsp. für den sinnvollen Einsatz von Layout-Tabellen bieten Newsletter. Es gibt immer noch eine Menge Clients, die mit Websteinzeit-Technik unterwegs sind und CSS schlecht bis gar nicht interpretieren und nicht wenige Webmailer kommen da auch mal schnell ins schleudern. Layout-Tabellen sollten zumindest das Grundgerüst bilden und CSS kann man dann noch draufsetzen, um es wenn möglich ein wenig aufzuhübschen.

  • Avatarbild von Marco Marco
    am 7. April 2009, 09:09 Uhr

    Die Diskussion ist in Ansätzen interessant und erinnert sehr stark an “Das Leben des Brian”: Was haben uns die Römer (Tabellen) eigentlich gebracht?

    Ihr entlarvt Euch ein gutes Stück selbst. Kommt mal ein wenig von Eurem Ross runter. Das Internet besteht eben nicht nur aus Seiten, die von Leuten erstellt wurden, die damit ihr täglich Brot verdienen. Und das ist auch gut so!

    Den Begriff “Wegwerfseite” finde ich in diesem Zusammenhang ziemlich panne. Die Programmierung einer Seite sagt doch erst einmal nichst über deren Inhalt aus. Und genau darum geht es ja.
    Wenn ich dann die Öffnungszeiten der Dönerbude (um bei Beispiel zu bleiben) auf einer Seite mit Tabellenlayout finde, dann hat sie ihren Zweck erfüllt. Und wenn derjenige, der sie erstellt hat eben nicht 8 Semester Kommunikationsdesign studiert hat, ist das auch in Ordnung. Also: Diskussion um technische Details auf hohem Niveau sind in Ordnung, aber bitte nicht auf eine solch herablassende Weise…

  • Avatarbild von macx macx
    am 7. April 2009, 09:34 Uhr

    @Marco Ich kann deiner Argumentation in Teilen nicht folgen, da wir mit dieser Sendung ja die These von Mike explizit vorstellen. Und ich selbst erinnere mich, mehrmals gesagt zu haben, dass man nicht einfach immer nur Pro-CSS-Argumente nachplappern soll, sondern seine Argumentation inhaltlich wirklich einmal überdenken sollte. Was aber trotzdem nicht rechtfertigt, dass die Dönerbudenwebseite Tabellenlayouts verwendet.

  • Avatarbild von André André
    am 11. April 2009, 19:42 Uhr

    Ich möchte @Marco insoweit beipflichten, dass es für die Mehrheit der Nutzer tatsächlich völlig egal ist, was technisch unter der Oberfläche einer Webseite geschieht. CSS, Tabelle, Fullscreen-JPEG – völlig egal, solange die gesuchte Information dort zu finden ist.
    Und wenn sich die Dönerbude (wir bleiben beim Beispiel) keine Web-Agentur leisten kann und die Seiten vom Enkel des Schwagers zusammenschustern lässt … who cares? Hauptsache ich kann mich über die Öffnungszeiten informieren, bevor ich im Regen die Straße runter latsche.
    Keine Frage: Ein valides CSS-Layout wäre die professionellere Lösung – ein absolutes K.O.-Kriterium ist das aber nicht unbedingt.

  • Avatarbild von Harald Harald
    am 17. April 2009, 23:27 Uhr

    Ich muss zugeben, ich verwende auch noch ab und zu mal Tabellen für Layoutzwecke – wenn wie letztens z.B. das Dropdownmenü in wirklich jedem Browser anders aussieht. Ansonsten kann ich aber gerne auf die absolut unübersichtliche Codesuppe Tabellen gerne verzichten.

    Sicher ist CSS nicht immer ganz einfach, aber wer sich als Entwickler mit den Tabellen rumschlagen muss, setzt sich gerne damit auseinander.

    Neben einer Reihe von Argumenten unter den 13 Punkten, die ich nicht wirklich nachvollziehen kann ist auch 1. Faster page loading. Wer den Optimierungsbedarf hat, macht aus einem Dutzend CSS-Dateien mit einem kleinen Script leicht eine Datei, die nebenbei noch komprimiert wird. Diese Datei kann dann dynamisch im HEAD eingefügt werden, wenn es sein muss.

  • Avatarbild von julia julia
    am 9. Mai 2009, 11:43 Uhr

    dieses ständige hin und her! irgendwann muss das doch ein ende haben!

  • Avatarbild von Chris Chris
    am 4. Juli 2009, 16:30 Uhr

    Ich bin zufällig hier gelandet und mein erster Eindruck ist sehr positiv (auch wenn ich das hier vermittelte Expertenwissen noch nicht in vollem Umfang nachvollziehen kann). Vor allem der Audio Podcast erleichtert mir das verfolgen der Inhalte- einen besonderen Dank hierfür!

  • Avatarbild von Peter Reimer Peter Reimer
    am 18. Juni 2013, 13:30 Uhr

    Hat mir wieder mal sehr gut gefallen. Danke und macht weiter so. Grüße aus Nürnberg :-)

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.