Tabellenloses Webdesign mit CSS
Einleitung:
Wenn Sie sich schon etwas mit dem Thema Tabellenloses Webdesign befasst haben, so habe Sie sicherlich schon den Disput mitbekommen, der sich zur Zeit zwischen Tabellen-Fetischisten und CSS-Fanatikern abspielt. Vielleicht habe Sie sich auch schon etwas mit dem Thema befasst und dieser Artikel ist nur einer von einigen, die Sie zu dem Thema gelesen haben. Ich fürchte dann werden Sie hier (falls Sie sich wirklich schon umfassend in das Thema eingelesen haben) keine neuen Erkenntnisse finden.
Was ich Ihnen aber bieten kann ist eine Auflistung aller Vorteile und Nachteile, die ich für tabellenloses Webdesign finden konnte. Natürlich ausreichend begründet und mit einem kritischen Blick sowohl auf die Argumente der Befürworter als auch der Kritiker. Dies ist also ein Versuch das zumeist als sehr emotional gesehene und behandelte Thema 'tabellenloses Webdesign', so objektiv und sachlich, als es mir möglich ist, darzustellen.
Vorteile:
Hier finden Sie die Vorteile, die tabellenloses Webdesign meiner Meinung und Erfahrung nach bringt, Sie sollten jedoch immer im Kopf behalten, dass es Menschen sind, für die Sie eine Webseite erschaffen, versuchen Sie sich also soweit als möglich in einen ganz normalen 'dummen' (gehen Sie am besten vom dümmst Möglichen aus) Nutzer hinein zu versetzen.
Schlanker Quellcode:
Es ist unbestritten, dass Quellcode, der mit (X)HTML und CSS (tabellenlos) anstatt nur mit HTML oder einer Mischung von Tabellendesign mit CSS, wesentlich kompakter ist. Dies am Beispiel dieser Seite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<meta name="Content-Language" content="de">
<meta name="language" content="de">
<meta name="author" content="Damian Frick">
<meta name="ROBOTS" content="INDEX, FOLLOW">
<meta name="revisit-after" content="2 days">
<meta name="keywords" content="">
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="imagetoolbar" content="no">
</head>
<body>
<div id="site">
<div id="header"></div>
<div id="content"></div>
<div id="side-content"></div>
<div id="footer"></div>
</div>
</body>
</html>
Diese Seite verbraucht leer gut 772 Byte für die HTML Datei, 1952 Byte für die CSS Datei und noch 6954 Byte für die Kopfgrafik. Das ist alles. Jemand der die Seite betritt muss anfangs gut 9,5 KB an Daten laden. Wenn er aber jetzt noch das Impressum besucht muss der die CSS Datei und die Kopfgrafik nicht mehr laden, da sie schon in der Cache gespeichert sind. Wären als nur noch die 772 Byte für die leere Seite (je mehr Text, desto mehr muss natürlich geladen werden) zu laden. Beim Impressum hat die HTML Datei, wegen dem Text eine Grösse von 6891 Byte. Daraus folgt, dass sich, je weniger Text man hat, das tabellenlose Webdesign um so mehr lohnt, da bei weniger Text die Einsparnis vom Tabellendesign zum tabellenlosen Webdesign prozentual Grösser ist. Nun kann man natürlich argumentieren, dass tabellenloses Webdesign desto unwichtiger wird, je mehr Text ich habe. Dies ist (prozentual gesehen) korrekt. Nicht aber mit absoluten Zahlen, denn mehr Text bedeutet auch, dass bei Tabellendesign pro Zeile Text aufgrund der Formatierungen mehr Quelltext dazu kommt, als bei tabellenlosem Design. Wobei hier auch wieder wichtig ist, wie sehr Sie CSS in Verbindung mit Tabellen nutzen, falls Sie dies überhaupt noch tun. Am Beispiel dieser Seite gesehen, müssten sie, wäre sie nicht tabellenlos, bei der Ansicht der Artikelseite und des Impressums, egal wie optimal die Seite mit Tabellen umgesetzt wäre, insgesamt mindestens 35 KB an Daten laden. Mit CSS sind es nur noch 30 KB. Ein kleiner Unterschied, doch je mehr Seiten das Projekt hat, desto grösser wird der Unterschied.
Ein schlanker Quelltext hat auf folgende drei wichtigen Faktoren einen Einfluss:
-
Traffic:
Der Traffic ist das von ihnen genutzte Transfervolumen. Alle Dateien, die Sie auf Ihren Server hochladen und die Andere von Ihrem Server herunterladen (z.B. indem sie Ihre Webseite besuchen) tragen zum Traffic bei. Reduzieren Sie nun die Grösse Ihrer Webseite, so sinkt damit auch Ihr Traffic.
-
Speicherplatzverbrauch:
Eine Optimierung Ihres Quelltextes senkt natürlich auch Ihren Speicherplatzverbrauch.
-
Ladezeiten:
Die Ladezeiten sind der eigentliche Punkt an der ganzen Sache, denn Traffic und Speicherplatzverbrauch ist heute (ausser bei sehr grossen Seiten) eigentlich kaum noch ein Problem. Die Ladezeiten, jedoch haben einen nicht zu unterschätzenden Einfluss auf den Erfolg Ihrer Seite. Denn langes Laden nervt viele Nutzer. Dies sollte ein guter Grund sein, warum Sie sich überlegen sollten tabellenlosem Webdesign einen höheren Stellenwert einzuräumen.
Benutzerfreundlichkeit:
"Tabellenloses Webdesign ist Benutzerfreundlicher", wird oft behauptet. Doch stimmt das? Ich finde Ja! Sie haben es ja schon an obigem Beispiel, der Ladezeit gesehen. gut geschriebener tabellenloser Code ist Tabellendesign in Sachen Ladezeit überlegen. Doch es gibt noch ein weiteres Argument puncto Benutzerfreundlichkeit. Die Behindertenfreundlichkeit.
Sehbehinderte Menschen haben häufig ein Problem mit tabellenbasierten Webseiten. Da viele sehbehinderte Menschen Webseiten mit einem Screenreader, also einem Programm, dass die Seite auf nicht-visuelle Art ausgibt, das Internet nutzen, ist es besser eine Seite semantisch Korrekt aufzubauen. Denn diese Screenreader arbeiten nach semantischen Kriterien, und haben somit Probleme mit verschachtelten Tabellen, die in ihrer Funktion den Begriff Tabelle pervertieren. Eine Tabelle ist zum tabellarischen ordnen von Inhalt, nicht als Layout-Werkzeug gedacht. Behindertengerechtes Webdesign heisst also Semantisches Webdesign. Dazu an anderer Stelle mehr!
Suchmaschinenoptimierung:
Dies ist eines der wichtigsten Argumente der Befürworter, aber gleichzeitig auch eines der strittigsten. Denn wir wissen immer noch nicht ganz genau, wie Suchmaschinen Links werten. Befürworter gehen davon aus, dass aufgrund des kleineren Quelltexts tabellenlose Seiten bevorzugt werden, da die Spider diese wesentlich schneller aufnehmen und verarbeiten können. Andere bezweifeln diese These. Es ist aber gut möglich, dass Suchmaschinen in Zukunft semantischere und darum auch behindertengerechtere Webseiten einen Bonus geben werden. Wie gross dieser ausfallen wird ist allerdings noch fraglicher als, ob dies überhaupt geschehen wird. Verlassen Sie sich also nicht auf dieses Argument. Es schadet aber zumindest nicht seine Webseite tabellenlos zu gestalten.
Redesigns:
Ein weiteres wichtiges Argument der Befürworter ist das einfacher werden von Neuaufsetzungen einer Webseite, sogenannten Redesigns. Hier ist ein gewisser Vorteil meiner Meinung nach nicht von der Hand zu weisen, denn ein tabellenloser Quelltext ist semantischer und dadurch leichter zu durchschauen. das heisst im Endeffekt, dass es für einen Webdesigner, der den Quelltext zum ersten mal sieht, wesentlich schneller geht ihn zu durchschauen und so Änderungen vorzunehmen.
Häufig wird auch argumentiert, dass ja nur die CSS Datei zu ändern sei. Dies ist aber von Fall zu Fall unterschiedlich, darum würde ich diesem Argument nicht allzuviel Achtung beimessen. Ein ganz kleines Plus also.
Optische Konsistenz:
Eine CSS Datei für alles. Dies ist der Garant für absolute optische Konsistenz, der Ihrem Internetauftritt Konstanz verleiht und es den Nutzern ermöglicht sich sehr leicht und schnell zurecht zu finden.
Dies erlaubt am meisten Möglichkeiten, wenn so wenig Darstellungsinformationen im HTML Dokument sind als möglich. Die Seite also so tabellenlos ist als möglich.
Verschiedene Layouts für verschiedene Ausgabemedien:
Wenn Sie Ihres Seite tabellenlos gestalten, können Sie einfach und schnell andere CSS Dateien für eine Druckausgabe oder für die Darstellung auf einem Handheld definieren.
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="handheld" href="handheld.css">
Es gibt sogar (mit Hilfe von javascript) die Möglichkeit verschiedene Stylesheets für verschiedene Bildschirmauflösungen zu definieren: Preparing for Widescreen
Nachhaltigkeit
Auch die Nachhaltigkeit, also Dauerhaftigkeit, einer Webseite spielt eine Rolle. Wie lange wird Ihre Webseite noch korrekt angezeigt werden? Bei den vom W3 Consortium gesetzten Standards für das Internet, die immer mehr Browser umsetzen, ist unter anderem auch das tabellenlose Layout. Darum ist man auch in Zukunft auf der sichereren Seite mit tabellenlosem Webdesign.
Prestige
Tun Sie sich als innovatives, zukunftsgerichtetes Unternehmen hervor und verharren Sie nicht beim Tabellendesign. Zeigen Sie, dass Sie mit der Zeit gehen und bereit sind Ihr Wissen zu vergrössern.
Nachteile
Nun die Nachteile von tabellenlosem Webdesign.
Schwierige Umstellung
Wie wir wissen gibt es Leute, denen Änderungen schwerer fallen als andere, darum ist dies sicher ein gutes Argument. Die Umstellung auf tabellenloses Webdesign kann einigen schwerer fallen als anderen. Man muss sagen, dass tabellenlos schon etwas anderes ist als mit Tabellen und doch teilweise eine neue Denkweise notwendig ist. Einigen kann der Aufwand zu viel sein.
Browserinkompatibilität
Manche Browser haben die Webstandards noch nicht oder nur ungenügend Umgesetzt, darum kann es erhebliche Probleme beim Umsetzen eines tabellenlosen Layouts geben. Einige dieser Probleme können durch CSS Hacks beseitigt werden. Andere nicht. Dies ist also ganz klar eines der Mankos!
Zusammenfassung
Ich habe die Erfahrung gemacht, dass tabellenloses Webdesign als Bereicherung gesehen wurde und es hat mir die Erschaffung von Webseiten definitiv erleichtert. Also versuchen Sie's und geben Sie nicht gleich auf, denn Anfangs kann es doch etwas frustrierend sein!
