Einführung

Dieser Text ist eine Übersetzung des Textes Throwing Tables Out the Window von Douglas Bowman bei Stopdesign.

Schau Mama, keine Tabellen!

Auf der diesjährigen Digital Design World in Seattle hielt ich ein Seminar mit dem Titel “Keine Tabellen mehr, CSS-Layout-Techniken”. In diesem Seminar schauten wir uns die korrekte Verwendung von Tabellen an und einige Beispiele, wie man sie mit CSS gestalten kann. Dann konzentrierten wir uns auf tabellenloses Layout, begutachteten Beispiele und einen Überblick über die zwei grundlegenden Ansätze (Positionierung und Floats).

Zur Hälfte der Präsentation schaltete ich einen Gang hoch und kündigte an, dass wir ein Beispiel aus der wirklichen Welt von Tabellen und Spacer-Gifs in ein reines CSS-Layout umwandeln würden. Ich hätte mir ein unechtes Beispiel einfallen lassen können, um in meiner Präsentation damit zu arbeiten. Aber diese Idee hätte zu arrangiert gewirkt. Wenn ich mein eigenes Beispiel entwickelt hätte, wäre es schön und ordentlich gewesen. Alles wäre so angezeigt worden, wie ich es wollte, ohne irgendwelche Stolpersteine, von denen ich schon wusste, wie sie zu vermeiden waren.

Ausgedacht reichte also nicht. Ich wollte eine echte Herausforderung. Deshalb habe ich die Seite einer kleinen, in der Umgebung von Seattle ansässigen Firma gewählt, von der ich dachte, dass ein paar der Teilnehmer sie kannten:

Microsoft

Ok, eventuell mehr als nur ein paar Teilnehmern war diese nicht-ganz-so-kleine Firma bekannt. Viele von uns kommen an Microsofts Homepage jeden Tag an. Microsofts wirkliche Startseite könnte oder könnte nicht so bekannt sein oder so oft benutzt werden wie die von Suchmaschinen-Giganten wie Google oder Yahoo! Aber microsoft.com generell hat Tonnen an Datenverkehr und Millionen von Leuten passieren diese Domain täglich.

Die Schande ist, das die Microsoft-Seite nicht annähernd so optimiert ist, wie sie sein könnte. Sie haben den Sprung noch nicht gewagt: Benutzer laden unnötig längere Seiten und Server verschwenden Bandbreite um Schritt halten zu können. Mit 40kb ist die Microsoft Startseite nicht wirklich ein aufgeblasenes Monster. Aber sie ist mit unzugänglichem, auf Tabellen basierendem Markup belastet, gefüllt mit Hersteller-spezifischen Attributen und etwas ungeschicktem JavaScript. Beachte, dass ich nicht erwähnt habe, ob das Markup valide ist oder nicht. Trotz einem Hauch von XHTML versäumt Microsoft es einen Doctype auf ihrer Startseite anzugeben.

Warum Microsoft?

Ist das noch so eine “auf Microsoft herum hacken”-Sache?

Direkt und ehrlich: Nein.

Ich habe Microsoft nicht gewählt um auf diesen Zug aufzuspringen oder um Schüsse auf eine Firma abzugeben, für die einige in unserer Branche eine Hassliebe empfinden. (Ich habe nie eine Möglichkeit vorübergehen lassen um gewisse Entscheidungen, die sie machten zu hinterfragen, aber ich habe vermieden ein Urteil zu fällen.)

Ich gebe zu, dass ich zweckmäßiger Weise eine bekannte Firma wählte. Es liegt in meiner Natur, immer die “Großen” herauszufordern. Microsoft.com war (und ist) ein perfekter Kandidat für eine, an Standards angepasste, CSS-Überarbeitung.

Hier folgt warum:

Grund 1

Wegen der ineffizienten Nutzung einer Fülle von Tabellen und Spacer-Gifs, die für das Layout benutzt wurden. Seiten, die mit Tabellen gestalte wurden sind verschlüsselter und können daher weniger zugänglich sein. Microsoft ist hier nicht alleine. Eine überwältigende Mehrheit von Seiten im Netz benutzen heute noch immer Tabellen für das Layout ihrer Seite und für andere, rein visuelle, Zwecke. Ich wählte Microsoft, weil es ein bekanntes Beispiel (und ein Modell) ist, für Seiten, die sich mit denselben Fragen auseinander setzen sollten.

Grund 2

Die grundlegenden Struktur der Microsoft-Seite ist ein Modell, das von tausenden von Webseiten benutzt wird: Kopfbereich + 3 Spalten + Fußbereich. Speziell: Ein Kopfbereich, der sich über die gesamte Breite der Seite erstreckt und eine Linke Spalte, die hauptsächlich die Navigation enthält, eine Hauptspalte für den Inhalt eine Rechte Spalte für extra “Zeug” und einen Fußbereich, der sich unter den drei Spalten befindet und sich auch über die gesamte Seitenbreite erstreckt. Wenn es kein 3-Spalten-Layout ist, benutzen viele Seiten eine 2-Spalten-Variation der selben grundlegenden Struktur mit einer Seitenleiste links oder rechts der von Hauptspalte:

Microsofts Startseite, mit 3 verschiedenen Überblendarten, die die grundlegende Struktur zeigen, eine zeigt Kopfbereich, 3 Spalten, Fußbereich; Zwei andere zeigen Kopfbereich, 2 Spalten, Fußbereich

Grund 3

Weil Microsofts Startseite CSS für ein bisschen mehr als FAC (Fonts and Color/Schriften und Farben) benutzt. Es würde mir große Freude machen, wenn die Firma, die das Konzept von Style Sheets in Entwicklungsumgebungen grundlegend erfunden hat, sich mehr auf CSS berufen würde und weniger auf veraltete Methoden.

Grund 4

Weil Microsoft momentan verschiedene Versionen ihrer Homepage serviert, abhängig davon, welcher Browser benutzt wird um sie anzusehen. Eine Version für den Internet-Explorer für Windows (Version 5.5 und höher) und eine andere, irgendwie “abgespeckte” Version für alle anderen Browser (einschließlich IE/Mac) die einige der Bilder und Produkt-Logos auslässt. Die Nicht-IE/Win-Version verzichtet auch auf einige Funktionalität (z.B. Fly-Out-Menüs) und zeigt Seiten-Elemente mit anderer Technik an. Wenn dir ein IE/Win 5.5 oder höher und ein anderer Browser zur Verfügung steht kannst du es dir selbst anschauen. Wenn nicht ist hier ein Screenshot der beiden Versionen mit rot eingekreisten Unterschieden:

Screenshots von von den zwei verschiedenen Startseiten, die Microsoft ausliefert. Der linke Screenshot - von IE 5.5 oder höher - zeigt mehr Grafiken und generell schönere Stile als die Version rechts, die alle anderen Browser bekommen.

Die Nicht-IE/Win-Version ist spürbar blutarmer als die volle Version, die dem IE/Win ausgeliefert wird. Wir alle wissen: Das muss nicht so sein. Falls du dich gefragt hast: es ist kein schlampiges Coden, das in einigen Browsern funktioniert und in anderen nicht. Microsoft macht absichtlich eine JavaScript-Browser-Abfrage und leitet den Browser auf eine andere Datei, wenn der Browser IE5.5 oder höher ist. Stattdessen könnte Microsoft nur eine Seite instand halten, die in allen Browsern funktioniert.

Immerhin liefert Microsoft eine Version ihrer Seite an Nicht-IE/Win-Browser. Einige Entwickler gehen nicht mal so weit. Die häufigste Antwort, die man als Begründung für das Einstellen der Unterstützung von anderen Browsern hört ist, dass MSIE/Win DER Browser ist, der von der MEHRHEIT der Leute genutzt wird und es ZU LANGE dauert um für andere Browser zu entwickeln, so dass die Seiten in diesen auch richtig angezeigt werden. Andere beschweren sich darüber, das das Entwickeln für Nicht-IE/Win-Browser ZU TEUER ist. Beide, die zu-lange- und zu-teuer-Behauptungen, sind falsch.

Viele Entwickler glauben an diese Behauptungen, weil sie beginnen für den IE zu programmieren und ihre Arbeit auch in diesem überprüfen. Dann schauen sie sich das Ergebnis in einem anderen Browser an und werden frustriert, wenn sie alle Arten von vermutlichen Fehler sehen, die sie reparieren müssen.

IE interpretiert CSS lockerer als andere Browser, die mehr Versionen in den letzten Jahren hatten (Mozilla, Firefox, Safari, Opera…). Mit dem IE beginnend bedeutet, dass weniger Probleme bei der Entwicklung entdeckt werden. Anfänglich für den IE zu entwickeln und dann auf andere Browser anzupassen wird den Zeit-Verbrauch und die Kosten, auf lange Zeit gesehen, erhöhen. Aber es gibt einen besseren Weg um das Entwicklungs-Ziel zu erreichen, der schneller und günstiger ist.

Beginne mit dem genauen, eher angepasstem Browser, der (normalerweise) die Dinge so anzeigt, wie sie angezeigt werden müssen. Bringe dort alles zum Arbeiten. Dann, mache kehrt und erstelle ein paar Flicken für den IE. Entwicklung auf diese Weise ist wesentlich schneller. Es könnte unintuitiv sein den Browser der Mehrheit des Verkehrs anfänglich zu vermeiden. Aber der Prozess ist viel flüssiger und effizienter, wenn man sich nicht an die entspannte Anzeige-Weise des IE gewöhnt oder auf sie verlässt. Beginne mit dem IE und du könntest mit schlechtem Code beginnen, der viel länger braucht um an andere genauere Browser angepasst zu werden.

Diesen Weg gehend müssen wir immer noch gegen den IE-Faktor kämpfen. Wenn wir jedoch mehr Erfahrung mit dem Fehlverhalten des IEs in CSS-Dingen erhalten, könnte dieser IE-Faktor minimiert werden. Es gibt Hoffnung.

Nur die Fakten, bitte

In der zweiten Hälfte der Präsentation gingen wir durch jeden Schritt der Umwandlung von Microsofts Tabellen-basiertem, Spacer-Gif-Beladenen Seite in eine zugänglichere, rein CSS-gesteuerte Seite, die in allen Browsern funktioniert. Das ist nichts neues. Andere haben microsoft.com schon umgewandelt. Viele Leser dieser Seite erstellen tabellenlose Designs seit einem Jahr oder länger. Aber wir sehen nicht jeden anderen ins Wasser springen, obwohl das Wasser jetzt nahezu ganz erforscht ist. Auch die Präsentation auf der Digital Design World und dieser Nachfolge-Artikel sollen dazu beitragen.

Im weiteren Verlauf der Präsentation splitteten wir jede Ebene des Prozesses in mehrere bearbeitbare Brocken. Ich hob jeden Hauptschritt des Prozesses hervor, einschließlich dem Abschaffen von Tabellen, der Umwandlung in eine semantischere Auszeichnung und die CSS-Techniken, um jedes Teil der Startseite von Microsoft detailgetreu nachzubauen.

Während der Präsentation untersuchten wir viele Anschauungsmaterialien (Diagramme, Screenshot und Piktogramme), die halfen die Techniken zu verstehen, die verwendet wurden um verschiedene Teile anzuzeigen. Ich hatte den Code als separate vorbereitete Dateien, auf die ich in jedem Prozess-Level verweisen konnte.

Einer der Gründe, warum ich diesen Nachfolge-Artikel schreibe ist, um die endgültigen Resultate der microsoft.com-Umwandlungen zu veröffentlichen, die nur schwer zu ignorieren sind:

Aktuelles Design (IE/Win) Aktuelles Design (andere) Überarbeitung
Benutzte Tabellen 40 36 0
Spacer-Gifs 35 76 0
Image-Tags insgesamt 43 122 6
CSS Hintergrund-Bilder 1 1 11
Unterstützte Browser 2 Meiste moderne Meiste moderne
HTML-Datei-Größe 40kb 39kb 15kb
Datei-Größen Reduktion - 3% 62%

Weiter gehen

Die Zahlen werden interessanter, wenn wir beginnen Einschätzungen und Projektionen im Meyer/Davidson ESPN-Stil zu machen. Laut einer öffentlichen Microsoft-Seite mit dem Titel Inside Microsoft geht hervor, dass microsoft.com 1,2 Milliarden Seitenbesuche im Monat Mai 2004 hatte. In dieser Präsentation zeigte ich, wie die HTML-Seite um 62% oder 25kb reduziert wurde. Ich sagte auch voraus, dass eine ungefähr 25kb-Ersparnis eine faire Einschätzung ist, wenn Microsoft auf ihrer gesamten Website aggressiv CSS benutzt. Wenn man dies mit durchschnittlich 38,5 Millionen Seitenbesuchen pro Tag multiplizieren kommen wir auf eine Ersparnis von 924GB Bandbreite pro Tag oder 329 Terabyte pro Jahr.

Diese Zahlen sollten genug sein um ein paar Einstellungen zu ändern.

Jetzt werfe ich ein, dass die Überarbeitung nur eine Version ist und Microsofts fortschrittliches Design unterstützt (wie es heute im IE/Win zu sehen ist) und funktioniert so in viel mehr modernen Browsern.

Firmen wie Microsoft möchten vielleicht nicht nur eine Version instand halten, die in mehr Browsern arbeiten, schneller lädt und zugänglicher für alle Arten von Browsern und Geräten ist. Ungeachtet dessen, dachte ich, dass es sinnvoll ist aufzuzeigen wie sie – oder jede andere Firma – eine Version erstellen könnte, die schlankere Auszeichnung benutzt, in mehr Browsern funktioniert und die Zugänglichkeit erhöht. Alles demonstriert in einer Zeitspanne von ein bis zwei Stunden…

Weitere Punkte und Vorbehalte

  • Wenn du neugierig bist und alles wissen möchtest: Die CSS-Datei wuchs von 3kb und 5kb (IE/Win- bzw. Nicht-IE/Win-Versionen) auf 8kb für die Überarbeitung.
  • Die Fly-Out-Menüs, die man in der IE/Win-Version für zwei Optionen in der Linken-Seite-Navigation hat, sind auch reproduzierbar. Das alles wird gemacht mit reinem CSS und einfachem, semantischen, zugänglichem Markup. Die Überarbeitung benutzt die :hover-Pseudo-Klasse um die verschachtelten ungeordneten Listen on und aus zu schalten, wenn die Maus über den übergeordneten Listenpunkt. Ein Zugeständnis: Der IE unterstützt :hover auf Listen-Elemente nicht, deshalb ist die JavaScript-Methode, die zur Zeit benutzw wird, noch nötig um Fly-Out-Menüs in diesen Browsern zu unterstützen. Oder soetwas wie die Suckerfish-Dropdowns könnte benutzt werden um die gleiche, semantische, verschachtelte Liste zu benutzen, die in der Überarbeitung verwendet wird.
  • Der heftige Sprung in der Anzahl der Image-Tags für die Nicht-IE/Win-Version ist die Schuld von mehr benutzten Spacer-Gifs. Die Nicht-IE/Win-Version ruft auch jedes Aufzählungsbild individuell anstatt einmal in einer CSS-Deklaration, wie dies die IE/Win- und die überarbeitete Version tun, auf.
  • Das gesamte JavaScript, welches in Microsofts HTML zu finden war wurde entfernt. Zum Beispiel gab es hunderte von proprietären Attributen in Anker-Elementen, die zum Zweck der Click-Verfolgung benutzt wurden/weden. Microsoft möchte vielleicht etwas davon später wieder einbauen – dann aber in einer validen Weise.

Wenn du ein Teil einer Firma, einer Gruppe oder Organisation bist (groß oder klein), die von der in diesem Artikel beschriebenen Präsentation profitieren könnte (und daran interessiert ist), kannst du das Kontakt-Formular benutzen um sich nach Möglichkeiten zu erkunden diese Präsentation zu dir zu bringen.

*Bitte beachten:* Dieser Text ist eine Übersetzung. Alle Rechte Douglas Bowman vorbehalten.

*Please Note*: This text is a translation of Douglas Bowmans great article Throwing Tables Out the Window at Stopdesign.

Überarbeitet/Last Modified: 27.01.2005, 23.17 Uhr

 

3 Gedanken zu “Tabellen aus dem Fenster werfen

  1. Ein sehr schönes Beispiel, warum ein CSS-layout die einzig wahre Lösung ist, alleine 329 Terrabytes Ersparnis pro Jahr ist schon ein Killer-Argument.
    Danke für die Übersetzung, vielleicht lesen es ja auch ein paar meiner Kunden ;-)

    Grüsse Artur

  2. Der Artikel ist wegweisend und zumindest im englischen Original sehr ansprechend geschrieben. Die deutsche Übersetzung ist jedoch unprofessionell und muss dringend überarbeitet werden! Übersetzerkommentare in Klammern sind schlechter Stil, außerdem ist der Text viel zu wortwörtlich übersetzt.

    Gruß, Ines

  3. Ich geb zu, dass dies keine professionelle Übersetzung ist, sondern lediglich in meiner Freizeit geschrieben. Übersetzerkommentare mögen auch schlechter Stil sein, aber zur Verdeutlichung manchmal doch nötig.

    Davon abgesehen halte ich niemanden davon ab sich das – wirklich sehr gut – geschriebene Orginal durchzulesen.

Keine Kommentare möglich