Tabellenloses Webdesign

Tabellenloses Webdesign

In den Anfängen des Internetzeitalters wurden Möglichkeiten benötigt, um das Design einer Webseite festzulegen. Zu dieser Zeit waren die CSS-Spezifikationen jedoch nicht ausgereift oder vielen Webdesignern unbekannt. Außerdem wurden die HTML- und CSS-Spezifikationen häufig nicht gemäß den Spezifikationen umgesetzt, so dass Webseiten zum Teil sehr schlecht aussahen, wenn man sich strikt an diese hielt.

Daher wurden zu der Zeit häufig Tabellen benutzt, die mit Hintergrundfarben und Bildern ein schönes Design ergaben. Inhalte wie Texte und Bilder konnten einfach positioniert werden und das Aussehen der Webseite war bei nahezu allen Browsern einigermaßen gleich. Dazu war die Erstellung eines Layouts mit Tabellen sehr einfach. Grade bei Größenangaben wie 100% erweisen sich Tabellen als ein sehr einfaches Mittel dafür. Man kann im Grunde beliebig viele Zeilen und Spalten einfügen, Zellen zusammen verbinden und das Aussehen jede Zelle farbig oder mit Hintergrundbildern gestalten. Auch eine Verschachtelung von Tabellen ist möglich.

Entfernung von Tabellen auf Webseiten

Tabellen bieten den Webdesignern im Grunde alle Möglichkeiten. Trotzdem begann man irgendwann, auf Tabellen zu verzichten. Denn, irgendwann setzte sich die Erkenntnis durch, dass Tabellen nicht für Designzwecke vorgesehen sind, sondern für die Darstellung tabellarischer Inhalte. Man sagt dazu, dass bei der Verwendung von Tabellen zu Layoutzwecken die Webseite semantisch nicht korrekt ist. Man könnte zwar die Auffassung vertreten, dass man sich um die Semantik nicht kümmert, solange die Webseite gut aussieht. Semantisch nicht korrekte Webseiten haben jedoch einige Nachteile.

Beispielsweise haben blinde Menschen, die mit einem Screenreader eine Webseite besuchen, erhebliche Probleme mit Tabellen, die zu Designzwecken verwendet werden. So begannen viele Webmaster, ihre Webseiten umzugestalten und tabellenloses Webdesign zu entwickeln. Glücklicherweise wurden im Laufe der Zeit die HTML- und CSS-Spezifikationen in den Browsern korrekt umgesetzt, so dass von dieser Seite keine Nachteile mehr zu erwarten waren, wenn man auf Tabellen verzichtete.

Einsatz von Containern

Um das Design einer Webseite festzulegen, sind sogenannte DIV-Container vorgesehen. Diese kann man auch verschachteln, so dass damit Webdesigns erstellt werden können, für die man früher Tabellen benötigte. Die Handhabung ist zwar etwas schwieriger zu gestalten, weil vom Webmaster ein anderes Denken gefordert wird. Wenn man sich jedoch in die Materie eingearbeitet hat, wird man davon profitieren. Zu den Vorteilen zählen insbesondere die nachfolgenden Punkte.

Schlanker HTML-Code

Für Tabellen benötigt man sehr viel HTML-Code, da für jede Zeile, Spalte und Zelle gewisse Codezeilen benötigt werden. Das kann grade bei verschachtelten Tabellen den Quellcode aufblähen lassen. Mit DIV-Containern wird erheblich weniger HTML-Code benötigt. Ein schlanker Quellcode verursacht wesentlich weniger Datenverkehr auf dem Server. Aufgrund der geringeren Ladezeiten erfreut das außerdem die Besucher. Das ist ein Erfolgsfaktor, der nicht unterschätzt werden sollte. Viele Besucher brechen z.B. den Ladevorgang ab, wenn die Webseite zu lange lädt. Ein zufriedener Besucher kommt dagegen immer wieder gerne auf die Webseite oder empfiehlt es an Freunde und Bekannte.

Barrierefreies Webdesign

Behinderte bzw. blinde Menschen haben oft Probleme mit Tabellen, die auf Webseiten eingesetzt werden. Sehbehinderte Menschen nutzen meistens einen sogenannten Screenreader. Damit ist es möglich, Webseiten auf nicht-visuelle Art zu besuchen und die Inhalte zu lesen. Diese Screenreader haben oft Probleme mit Tabellen, weil sie nach semantischen Kriterien arbeiten und Tabellen, die für das Layout benutzt werden, sind semantisch nicht korrekt. Sie sind nur für Inhalte gedacht, die tabellarisch angeordnet werden müssen. Daher sollte man Webseiten semantisch korrekt aufbauen und für Layoutzwecke auf Tabellen verzichten. Aber nicht nur mit Screenreadern kann ein tabellenbasiertes Weblayout Probleme verursachen. Auch mit anderen Geräten wie z.B. mobilen Surfgeräten können tabellenbasierte Layouts Probleme bei der Darstellung verursachen.

Suchmaschinen

Die Betreiber einer Webseite haben naturgemäß ein Interesse, dass ihre Webseite in den Suchmaschinen gut positioniert sind. Da Suchmaschinen ihre Algorithmen nicht unbedingt preisgeben, ist der Effekt von tabellenlosen Webdesigns zwar nicht belegbar. Verschiedene Theorien sagen jedoch, dass:

  • Webseiten ohne Tabellen einen Bonus für barrierefreie Webseiten bekommen.
  • Suchmaschinen Webseiten ohne Tabellen schneller durchsuchen und die Inhalte können.
  • Webseiten mit geringeren Ladezeiten einen Bonus bekommen.
  • Suchmaschinen versuchen, das Thema und die Struktur einer Webseite herauszufinden. Bei semantisch korrekten Webseiten fällt dies wesentlich leichter als bei tabellenbasiertem Webdesign. Denn, Suchmaschinenbots sind wie Maschinen, die nicht einfach darüber entscheiden können, ob eine Grafik zum Layout oder zum Inhalt gehört.

Trennung von Design und Inhalt

Setzt man auf DIV-Container statt auf Tabellen, so kann man das Design sauber vom Inhalt trennen. So können z.B. Suchmaschinenbots die Webseite wesentlich besser durchsuchen und das Thema, das die Seite behandelt, herausfinden.

Einfache Steuerung des Designs

Dadurch, dass man die Inhalte vom Design trennt, kann man das Aussehen einer Webseite wesentlich einfacher steuern. Es ist z.B. möglich, über eine einzige CSS-Datei das gesamte Aussehen der Webseite zu beeinflussen und zu ändern. Sollte z.B. nach einer gewissen Zeit entschieden werden, dass die Webseite ein Redesign benötigt, dann kann das mit neuen Grafiken und einigen Anpassungen in der CSS-Datei realisiert werden, ohne dass man an den Seiten bzw. den Inhalten etwas ändern muss.

Responsive Webdesign für mobile Geräte

Im Zuge der weiten Verbreitung surfen immer mehr Menschen mit mobilen Geräten, die eine andere Bildschirmauflösung haben und sich in der Größe wesentlich von normalen Monitoren unterscheiden. Webseiten, die nur für normale Monitore optimiert sind, können auf mobilen Geräten das Surfvergnügen beeinträchtigen. Daher begannen einige Seitenbetreiber, für die Webseite eine mobile Version zu entwickeln. Das ist jedoch nicht ganz unproblematisch. Denn, im Grunde erstellt man eine Seite doppelt. Man kann die Inhalte zwar mit bestimmten Tools auf die mobile Version migrieren. Das bedeutet jedoch einen höheren Aufwand.

Eine Lösung für solche und andere Probleme kann responsive Webdesign bieten. Wenn man nämlich mit DIV-Containern und CSS-Einstellungen das Design vom Content trennt, dann kann man flexible Designs erstellen, die von der verwendeten Bildschirmauflösung abhängen. So kann man bewerkstelligen, dass die Webseite auf normalen Monitoren anders aussieht als auf mobilen Geräten. Bei Designs, die auf Tabellen basieren, ist das nur eingeschränkt oder gar nicht möglich.

Individuelle Designs für verschiedene Ausgabemedien

Über CSS-Einstellungen ist nicht nur möglich, für verschiedene Bildschirmauflösungen verschiedene Designs festzulegen. Man kann sogar für jedes Ausgabemedium ein anderes Design festlegen. So kann man z.B. für die Druckausgabe gewisse Elemente anders gestalten. So könnte man z.B. den Header oder die Navigation für den Druck ausblenden.

Aus den genannten Gründen sollte man bei der Erstellung von Webseiten auf tabellenlose Webdesigns setzen. Nicht zuletzt zeigt man dadurch, dass man innovativ ist und auf zukunftssichere Technologien setzt. Denn, wie lange die Browser Webseiten mit Tabellen in Zukunft auch korrekt darstellen, weiß niemand. Tabellenlose Webseiten brauchen am Anfang häufig mehr Zeit bei der Erstellung, der Aufwand lohnt sich jedoch.