Die Evolution des Web-Designs

Seitdem die ersten Webseiten in den frühen 90er Jahren erstellt wurden, experimentieren Designer mit dem Aussehen von Internetseiten. Die ersten Seiten waren rein textbasiert mit wenigen Bildern und ihr Layout beschränkte sich auf Überschriften und Absätze. Allerdings hat sich die Industrie weiterentwickelt und uns tabellarische Designs, Flash und zu guter Letzt CSS-basierte Designs beschert.

Dieser Artikel deckt die kurze Geschichte der verschiedenen Epochen des Web-Designs ab und stellt einige Beispiele einer jeden Designart vor.

Die ersten Webseiten
Im August 1991 veröffentlichte Tim Berners-Lee die erste Internetseite: eine einfache, textbasierte Seite mit ein paar Links. Eine 1992 erstellte Kopie existiert noch immer online. Sie umschloss etwa ein Dutzend Links und diente dazu, zu erklären, was das World Wide Web ist.

Die nachfolgenden Seiten waren ähnlich, da sie ebenfalls ausschließlich textbasiert waren und über ein Einspalten-Design mit Inline-Links verfügten. Anfangs konnten mit HTML (HyperText Markup Language) lediglich sehr grundlegende Strukturen erstellt werden: Überschriften, Absätze und Links. Spätere HTML-Versionen ermöglichten das Hinzufügen von Bildern und unterstützten schließendlich auch die Einbindung von Tabellen auf Internetseiten.

Die Gründung des World Wide Web Consortium
1994 wurde das World Wide Web Consortium (W3C) gegründet, das HTML als Standard-Auszeichnungssprache für Webseiten festlegte. Damit sollte verhindert werden, dass jede beliebige Firma einen eigenen Browser oder eine eigene Programmiersprache entwickelt, was einen nachteiligen Effekt auf das Internet als Ganzes gehabt hätte. Das W3C legt noch immer Standards für offene Web-Markup- und Programmiersprachen (wie JavaScript) fest.

Beispiele:

Die erste Webseite (1992)



Yahoo! (1996)



Altavista (1996)



Tabellenbasierte Designs
Tabellenbasierte Layouts gaben Web-Designern mehr Möglichkeiten, Webseiten zu gestalten. Das ursprüngliche Tabellen-Markup in HTML war dazu gedacht, tabellarische Daten darzustellen, doch die Designer fanden schnell heraus, dass sie es nutzen konnten, um ihre Designs zu strukturieren und kompliziertere Layouts über mehrere Spalten aufzubauen, die mit HTML anfangs nicht erstellt werden konnten. Tabellenbasierte Designs wurden komplexer, beinhalteten Hintergrundbilder und gaben die Illusion einer einfacheren Struktur als das eigentliche tabellarische Layout.

Design über Struktur
Diese Epoche des Webdesigns verwendete nur wenig Aufmerksamkeit auf die Semantik oder die Zugänglichkeit und entschied sich oftmals zu Gunsten der Ästhetik anstelle einer guten Markup-Struktur.



Diese Epoche war gleichzeitig die Ära, in der Spacer GIFs verbreitet wurden, um nicht-druckbare Zeichen in Web-Dokumenten zu steuern. Einige größere Firmen richteten sogar Schulungen aus, um Designer über Spacer GIFs zu unterrichten. Auf Microsoft.com findet man beispielsweise eine Einführung zum Thema Einbindung von Spacer GIFs in HTML-Tabellen.

Die Entwicklung der ersten WYSIWYG-Web-Design-Applikationen, die alle tabellenbasierte Layouts nutzten, erhöhte die Verwendung von Tabellen. Zusätzlich konnten mit einigen dieser Programme Tabellen von solcher Komplexität entwickelt werden, dass Designer nicht in der Lage gewesen wären, diese von Grund auf zu erstellen (beispielsweise Tabellen, deren Zeilen nur einen Pixel hoch sind und über Hunderte von Zellen verfügen). Designer mussten sich auf Tabellen verlassen, wenn sie Layouts entwickeln wollten, die mittelmäßig komplex waren (z. B. Designs mit mehreren Spalten).

Beispiele:

W3C (1998)



Yahoo! (2002)



Altavista (2002)



Flash-basierte Web-Designs
Flash (ursprünglich als FutureSplash Animator, später als Macromedia Flash und mittlerweile als Adobe Flash bekannt) wurde 1996 entwickelt. Es kam mit elementaren Funktionen und einer Zeitleiste und hat sich zu einem umfassenden Werkzeug entwickelt, mit dem ganze Seiten erstellt werden können. Flash bat eine Vielzahl Möglichkeiten, die mit HTML nicht umgesetzt werden konnten.

Macromedia Shockwave
Vor Flash gab es Macromedia Shockwave (später Adobe Shockwave). Shockwave wurde genutzt, um Menüs und andere Multimedia-Inhalte für CD-ROMs zu erstellen. Shockwave-Dateien waren groß und während Breitband-Internetverbindungen das Abspielen ermöglichten, war Shockwave für die damals standardmäßigen Einwahlverbindungen unpraktisch. Flash-Filme hingegen waren kleiner und besser für den Online-Einsatz geeignet.

Der Vorteil von Flash
HTML-Seiten waren in ihren Designmöglichkeiten begrenzt, besonders dann, wenn sie mit frühen Versionen von HTML erstellt wurden. Um aufwändige Designs zu entwerfen, musste man komplizierte Tabellenstrukturen aufbauen und/oder Spacer Images verwenden. Flash ermöglichte es, komplexe und interaktive Seiten mit Animationen zu erstellen.

Beispiele:
Hinweis: Dies sind Beispiele für Flash-Designs aus jüngster Zeit.





Dynamic HTML (DHTML)
Etwa zur gleichen Zeit, als Flash die Welt des Web-Designs eroberte (späte 1990er Jahre – frühe 2000er Jahre), wurden auch DHTML-Techniken eingeführt, die aus verschiedenen Web-Technologien, wie beispielsweise JavaScript und manchmal auch Server-Side Scripting bestanden, um interaktive/animierte Seiten zu erschaffen.

Während dieser Zeit, mit dem Beginn von Flash und der Beliebtheit von DHTML, wurde das Konzept interaktiver Seiten ins Leben gerufen, die es Nutzern nicht nur erlaubten statische Inhalte zu betrachten, sondern auch mit den Web-Inhalten zu interagieren.

3DML
3DML ist eine weniger bekannte Web-Design-Sprache zur Erstellung dreidimensionaler Webseiten. Sie wurde 1996 von Michael Powers erfunden. 3DML-Dateien wurden in einer Art ungültiger XML geschrieben.



Flatland Rover ist ein 3DML-Browser, der unabhängig entwickelt wurde und obwohl es Plug-ins für den Internet Explorer, Netscape Netvigator, den AOL-Browser und Opera gab, wurde kein Plug-in für Firefox zur Verfügung gestellt, nachdem die Entwicklung 2005 eingestellt wurde.

Noch immer existieren Seiten online, die in 3DML erstellt wurden, aber ohne die entsprechenden Browser Plug-ins, kann man sie nicht betrachten. 3DML wurde genutzt, um Welten oder Szenen zu entwickeln, die „Spots“ genannt werden. Was 3DML einen Vorteil verschaffte war, dass es schneller als die meisten anderen Sprachen war, mit denen man 3D-Simulationen aufbauen konnte (wie Flash, für dessen Erstellung und Bearbeitung man eine Flash Desktop Anwendung benötigte) und kleinere Dateigrößen benötigte.

CSS-basierte Designs
CSS-basierte Designs gewannen nach dem Dotcom-Boom zu Beginn der frühen 2000er Jahre an Beliebtheit. Während CSS bereits zuvor zur Verfügung stand, wurde es von den großen Browsern nicht vollends unterstützt und viele Designer kannten sich nicht mit CSS aus (und waren sogar eingeschüchtert).

CSS-basierte Designs hatten viele Vorteile gegenüber tabellenbasierten- oder Flash-Designs. Zunächst ermöglichte es die Trennung der Design-Elemente vom Inhalt, was bedeutete, dass es möglich wurde, visuelle Aspekte des Web Layouts und des Inhalts zu unterscheiden.

CSS ist darüber hinaus eine bewährte Methode, um Webseiten zu gestalten, wo tabellenbasierte Layouts an ihre Grenzen stoßen. Es reduziert außerdem Markup-Durcheinander und sorgt für sauberere und semantische Web-Layouts. Des Weiteren erleichtert CSS die Verwaltung von Webseiten, da Inhalt und Design getrennt voneinander betrachtet werden. Man kann die gesamte Darstellung einer CSS-basierten Seite ändern, ohne dass man den Inhalt dabei anrühren muss.

Die Dokumentgrößen von CSS-Designs sind allgemein kleiner als tabellenbasierte Designs, was in einer verbesserten Reaktionszeit der Seiten resultiert. Obwohl es beim ersten Aufrufen einer Seite zu einer Beeinträchtigung der Bandbreite kommt, wenn die Stylesheets einer bisher noch nicht besuchten Seite heruntergeladen werden, wird CSS vom Browser des Nutzers (per Voreinstellung) zwischengespeichert, so dass die Seite bei späteren Besuchen schneller lädt.

Beispiele:

W3C (2003)



W3C (2009)



Yahoo! (2009)



Altavista (2009)



Die Zukunft?
Wie entwickelt sich Web-Design weiter? Teilen Sie mir Ihre Ansichten mit und nehmen sie an der Diskussion in den Kommentaren teil.