hausflur wohnzimmer küche arbeitszimmer galerie nachbarschaft

<< zurück zur Übersicht "internet"

CSS- vs. Tabellenlayout: objektiv betrachtet

Vor ein paar Tagen lief im selfforum wieder mal eine hübsche kleine Diskussion zum Thema Tabellen/CSS. Außerdem habe ich versucht, unserer (Ex-)Azubine ein CSS-Layout für eine Tabellen-Imagemap aufzuschwatzen, und bin kläglich gescheitert, und zwar nicht an ihrem guten Willen, sondern an der Umsetzung. Und heute finde ich diesen Artikel von Andy Budd, der das Thema mit "An Objective Look at Table Based vs. CSS Based Design" einmal ein wenig emotionsloser als allgemein üblich angeht. Er hat mir netterweise sehr kurzfristig erlaubt, seinen Text zu übersetzen und hier zu veröffentlichen. Thank you, Andy. Ich versuche, demnächst einmal meine Kommentarfunktion ans Laufen zu bringen; wer kurzfristig das Thema diskutieren möchte, kann das auch gerne im selfforum tun, Stefan Muenz hat die Diskussion auf Grundlage des Originaltextes schon eröffnet.

(und bitte: schlagt mich nicht, wenn die Übersetzung noch etwas holprig ist, ich feile noch dran rum) Here we go:

CSS- vs. Tabellenlayout: objektiv betrachtet

Jahrelang gab es reichlich hervorragende Artikel, die entweder ein Loblied auf CSS-basierendes Webdesign sangen, oder andererseits dem tabellenbasierten Layout nachweinten. Es gab jedoch nur wenige Beiträge, die das Thema einmal aus der entgegengesetzten Perspektive betrachteten, vermutlich deshalb, weil man CSS-basiertes Webdesign erst einmal richtig beherrschen muss, bevor man es kritisieren kann. Einmal bekehrt, kehrt dagegen kaum jemand zur alten Arbeitsweise zurück.

Um nun etwas ausgleichend zu wirken und mich dazu ein wenig beim Advocatus-Diabolo-Spielen zu amüsieren, möchte ich in diesem Artikel zeigen, warum in einigen Fällen traditionelles Tabellenlayout gleichwertig, wenn nicht besser als CSS- und standardkonformes Design sein kann.

Die Verteufelung der Tabellen

Vor der Einführung von Tabellen ging es im Web ziemlich langweilig zu. Die Verwendung von Tabellen für Layoutzwecke eröffnete erstmals die Möglichkeit, eine Seite visuell zu gestalten. Man könnte sogar das tabellenbasierende Layout für die Beliebtheit des Webs und des Webdesigns insgesamt verantwortlich machen. Tatsächlich: Ohne Tabellen wären wir Webdesigner vermutlich alle arbeitslos.

Dennoch wurden Tabellenlayouts in den letzten Jahren mehr und mehr verteufelt. Web-Puristen pochen darauf, dass Tabellen niemals für Layoutzwecke gedacht waren und sie deshalb auch nicht dazu benutzt werden sollten. Die Geschichte bietet jedoch zahlreiche Beispiele dafür, dass Technologien zu dem einem Zweck erfunden wurden, und später Anwendungen in ganz anderen Bereichen fanden. Das World Wide Web selbst war für kaum mehr als den Austausch von Forschungsdaten gedacht – entwickelt hat es sich zu einer Plattform, auf der das Bedürfnis nach Werbung und Unterhaltung ebenso bedient wird wie Information und Bildung.

Der Komfortfaktor

Als Webdesigner haben wir jahrelang Tabellen benutzt, um Seiten zu gestalten. Die meisten Designer beherrschen die Technik und sind zufrieden damit. Die Verwendung von Tabellen führt zu verlässlichen Ergebnissen. Mit einigen wenigen “Hacks”, wie z.B. Blind-Gifs, können wir sicherstellen, dass unsere Seiten auf den allermeisten Browsern da draußen in der Welt gleich aussehen, von der ältesten Version eines Netscape 4 bis zu modernen Browsern wie Safari.

Obwohl die Pioniere seit langem von Webstandards reden, werden die meisten Websites noch immer mit Tabellen und nicht-standarkonformem Code entwickelt. Browser werden also auch künftig noch jahrelang gezwungen sein, tabellenbasierte Layouts zu akzeptieren. Das hebelt eines der wichtigsten Argumente für Webstandards gnadenlos aus, nämlich das der Vorwärtskompatibilität. Es ist überaus unwahrscheinlich, dass in naher Zukunft irgendeiner der großen Browserhersteller (grummel, das wird wohl Microsoft sein) einen Browser herausgeben wird, der die Mehrzahl der Websites unbenutzbar darstellt.

Deshalb sehen die meisten Webdesigner keine übermäßige Notwendigkeit, Webauftritte mit CSS-basierten Layout und standardkonformem Code zu produzieren.

Einstieg erleichtern

Einer der Gründe, daß das Internet so erfolgreich wurde, ist seine Niedrigschwelligkeit. HTML ist einfach zu erlernen, und Browser sind recht tolerant gegenüber miesem Dokumentcode. Das macht es wunderbar einfach für jedermann, Dokumente im Web zu veröffentlichen – jeder kennt den berühmten 12jährigen Neffen, der eine einfache Website mit Frontpage zusammenklicken kann.

Vergleichen wir nun tabellenbasiertes Arbeiten mit CSS-Entwicklung. Die CSS-Syntax ist recht einfach und niemand würde ernsthaft behaupten, dass man einen hohen IQ braucht, um CSS zu lernen. Einige der Begriffe sind jedoch nicht ganz ohne: Obwohl das Box-Modell auf den ersten Blick recht einfach ist, stolpere ich immer wieder über zusammenfallende Außenabstände. Das Grundkonzept von 'float' und 'clear' sind schon schwieriger zu verstehen, ebenso wie die Positionierung von Elementen. Nach meiner Erfahrung gibt es eine etwa sechs- bis zwölfmonatige Lernkurve, beginnend von einfachen CSS-Kenntnissen bis hin zu der Fähigkeit, komplett CSS-basierende Webauftritte souverän zu produzieren.

Da wäre dann noch das Problem mit der Browserunterstützung. Wenn man sich erst einmal eine Weile damit beschäftigt hat, weiß man, welche Browser was unterstützen und kennt die wichtigsten Browser-Bugs. Aber es gibt soviele Bugs, dass selbst die “Experten” übermäßig viel Zeit mit der Umgehung der Fehler verbringen. Für einen Anfänger muß es mehr als frustrierend sein, nicht zu wissen, ob ein Problem damit zusammenhängt, daß man CSS noch nicht richtig beherrscht, oder mit irgendeinem dubiosen Browserfehler. Wundert es noch irgendjemanden, daß immer wieder dieselben Fragen in Foren wie CSS-Discuss auftauchen?  

Wenn die Browserhersteller endlich die Kurve in Sachen Webstandards kriegen, wird die Produktion von Webauftritten mit CSS um einiges einfacher werden. Die meisten Leute würden mir wohl zustimmen, dass es schwieriger ist, in die CSS-Entwicklung einzusteigen als in Tabellendesign. Ich könnte mir vorstellen, daß das mit ein Grund dafür ist, warum CSS-basiertes Design so “populär” bei Web-Profis geworden ist. Damit heben sie sich nämlich von den “Frontpage-Klickibuntis” ab und erobern sich so das Web zurück. Vielleicht sehen deshalb viele die Webstandards als “Elfenbeinturm”, und vielleicht deshalb kommen viele der Webstandard-Vorkämpfer mit einem Überlegenheitsgefühl und einer pflichteifrigen Grundeinstellung gegenüber Webdesign daher.

Manches geht einfach leichter mit Tabellen

Jeder von uns hat sich schon einmal beim Austüfteln eines ziemlich komplizierten CSS-Codes für etwas ertappt, das mit Tabellen kinderleicht umzusetzen gewesen wäre. Nehmen wir zum Beispiel Formulare: Sogar knifflige Formulare sind mit Tabellen in wenigen Minuten umgesetzt. Mit floatenden Elementen kann man dasselbe optische Resultat erzielen, aber es ist weit komplizierter. Für einen CSS-Guru ist es eine angenehme Herausforderung und macht Spaß – als Normalsterblicher mit dem Chef im Nacken, der nicht versteht, warum sein “simples Formular” so lange braucht, kann es extrem frustrierend sein.

Mit Geduld und Wissen kann man die meisten Dinge, die früher mit Tabellen umgesetzt wurden, mit CSS machen. Natürlich ist der Weg länger, aber am Schluß erreicht man das Ziel (oder verhungert unterwegs). Aber bei einigen Dingen stößt man – trotz alle Versuche – auf unüberwindliche Grenzen. Ein Beispiel dafür sind etwa Footer. Regelmäßig lese ich Postings von frustrierten CSS-Schreibern, die versuchen, einen Footerbereich zu erzeugen, der am unteren Rand des sichtbaren Fensterbereichs steht, solange der Dokumentinhalt nicht den vollen Fensterbereich ausfüllt. Mit Tabellen ist das ziemlich einfach – aber versuch das mal mit reinem CSS! Wen wundert's, dass Webdesigner sich von CSS abwenden, wenn selbst einfachste Dinge so widerspenstig dargestellt werden, sobald man aufhört, Tabellen zu verwenden. [Anmerkung von elya: für Footer gab's bei alistapart ein Lösungsansatz, mein Safari mag sie aber nicht]

Überbewertete Vorteile

Es gibt eine Menge guter Gründe, Tabellen wegzuwerfen und statt dessen CSS-basiertes Layout zu verwenden. In ihrem Eifer, Webstandards voranzutreiben, haben viele jedoch die Vorteile übertrieben.

Die Leute wollen kurze Ladezeiten: viele CSS-Anhänger behaupten nun, dass CSS bei der Verkürzung hilft. Bei den meisten Websites ist das Design auf allen Seiten gleichmäßig verteilt. Aber bei CSS-basierenden Seiten befindet sich das “Design” üblicherweise in einer oder mehreren externen Dateien – diese können recht kompliziert und, selbst für einen einfachen Webauftritt, schnell ziemlich groß werden. Einer meiner letzten Webauftritte mit vier Stylesheets hatte rund 12 KB (wenn auch mit Formatierungen und Kommentaren). Mit CSS lädt man das Design im Prinzip also vor, statt es es gleichmäßig über die Seiten zu verteilen. Das bedeutet, dass die erste geladene Seite länger lädt, als eine entsprechende tabellenbasierte Seite. Wenn die Stylesheets einmal geladen sind, sind sie üblicherweise im Cache und müssen nicht bei jeder Seite neu geladen werden. Nur will man eigentlich gerade auf der ersten Seite keine verlängerten Ladezeiten sehen.

Kunden ins Boot holen

Die traurige Wahrheit ist, daß die meisten Kunden sich nicht dafür interessieren, wie eine Seite geschrieben ist. Aus irgendeinem Grund fühlen sich Webdesigner trotzdem veranlaßt, ihren Kunden Webstandards zu “verkaufen”.

Es ist richtig, dass Suchmaschinen semantisch strukturierte Seiten mögen. Ein weit verbreiteter Glaube ist darüber hinaus, daß Suchmaschinen schlanken Code honorieren. Einen Webauftritt mit CSS und nach Webstandards aufzubauen, kann die Suchmaschinenfreundlichkeit in der Tat unterstützen. Es ist jedoch kein Allheilmittel. Es gibt da draußen viele tabellenbasierte Websites, die in den Suchmaschinen auf hervorragenden Plätzen rangieren. Genauso ist es möglich, eine CSS-basierte Seite mit miesem Suchmaschinenranking zu fabrizieren. Das wichtigste für Suchmaschinen ist Content und eingebundene Links und nicht, ob man Tabellen oder CSS fürs Layout nutzt.

Kritischer wird es, wenn versucht wird, Kunden Webstandards und speziell CSS-basiertes Design mit dem Argument der Barrierefreiheit zu verkaufen, denn Tabellenlayouts stellen nicht per se eine Barriere dar. Solange Tabellen sinnvoll linearisiert werden, ist ihr Content einfach zugänglich. Bildschirmlesegeräte sind technisch heutzutage sehr weitentwickelt, und die meisten von ihnen sind recht tüchtig im Umgang mit tabellenbasierten Dokumenten. Während das Einhalten einiger anerkannter Regeln zu Entwicklung einer barrierefreien Seite selbstverständlich ist, so gehört ein tabellenloses Design nicht zu den Anforderungen, um beispielsweise das amerikanische “AA-Rating” für barrierefreie Seiten zu bekommen. Tabellenloses Design ist auch für den Erhalt des strengeren “AAA-Rating” nur eine Empfehlung, keine Anforderung.

Ein oftgenannter Vorteil ist die Unabhängigkeit vom Entwickler. In einer Webdesigner-Welt, die ausschließlich standardkonform produziert, wäre es sehr viel leichter, von einem Website-Entwickler zu einem anderen zu wechseln. Jeder würde sofort verstehen, wie die Website aufgebaut ist und niemand müßte sich durch fremde “Tag soups” hangeln. Hat man webstandard-versierte Entwickler in ausreichender Menge bei der Hand, ist das eine sichere Sache. Obwohl jedoch die Anzahl qualifizierter CSS-Entwickler stetig wächst, ist es immer noch ein recht spezialisiertes Gebiet. Sich derart auf CSS festzulegen, könnte wegen des Fachkräftemangels deshalb durchaus riskant sein. Nach meinen Erfahrungen hat ein Unternehmen oftmals nur einen einzigen Mitarbeiter, der erfahren genug ist, einen Webauftritt komplett in CSS zu entwickeln. Das dürfte die Abhängigkeit vom Entwickler eher erhöhen als verringern.

Fazit

Webstandards und CSS-basierendes Design sind definitiv der Weg in die Zukunft. In unserem Drang diese “neuen” Techniken durchzusetzen, glauben wir womöglich irgendwann unseren eigenen Übertreibungen. Beim Versuch eine Sache hochzustilisieren, bleibt die Wirklichkeit stets hinter unseren Erwartungen zurück. Mit einer zu dogmatischen Vorgehensweise riskieren wir, genau die Menschen auszugrenzen, die wir eigentlich überzeugen wollen.

Tabellenbasiertes Design wird es noch lange geben. Um Entwickler zum Wechsel zu ermutigen, sollten wir mit gutem Beispiel vorangehen und dabei mithelfen, den Einstieg zu erleichtern – nicht neue Barrieren errichten. Wir müssen ehrlich und offen in Bezug auf die Vorteile und gleichermaßen die Kosten sein. CSS-Webauftritte zu entwickeln, kann mühsam und zeitraubend sein. Unter bestimmten Bedingungen kann es sinnvoller sein, Tabellen anstelle von CSS zu benutzen.

With kind permission of Andy Budd, 12. Mai 2004

elya ·  15.05.2004