HTML/Tutorials/Layoutkonzepte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Seit Erfindung des World Wide Web (ausführliche Chronik unter: Grundlagen/Entstehung des Internet) haben sich die Vorstellungen von Webdesign und entsprechenden Layouts immer wieder weiterentwickelt.

Anfänge[Bearbeiten]

Anfänglich standen den Erstellern von Webseiten nur wenige HTML-Elemente zur Verfügung, was sich auch in einer entsprechenden Einfachheit von Webseiten niederschlug. Erste Ansätze waren das Einfügen von Bildern, die bald auch in Form von grafischen Texten für Überschriften verwendet wurden.

Die Links werden von einem CGI-Script erzeugt.
Das Hintergrundbild hat eine Auflösung von 767 × 513px. Damals übliche Monitore mit einer Auflösung von 640 × 480 Pixeln zwangen Benutzer zum Scrollen.
Auch wenn das Design heute überholt wirkt; die Seiten sind problemlos benutzbar und sogar flexibel in der Breite.


Framesets[Bearbeiten]

Eine der ersten Gestaltungsmöglichkeiten war die Verwendung von Framesets, die es ermöglichte, bestimmte Seitenelemente wie Header, Navigation oder Fußzeile in eigene Seiten auszulagern, zu positionieren und immer am gleichen Ort auf dem Bildschirm erscheinen zu lassen.

Nachteilig war, dass Suchmaschinen auf einzelne Unterseiten verwiesen, die dann ohne Navigation und Kopf aufgerufen wurden. Abhilfe schaffte nur ein externes JavaScript.

Tabellen[Bearbeiten]

Eine eher ungewollte Benutzung von HTML-Tabellen entwickelte sich, als man diese als Gestaltungsgrundlage für ein Design benutzte.

Der mögliche Verzicht auf die Anzeige von Tabellen- und Zellrahmen führte dazu, dass man die unsichtbaren Tabellen als Raster für Designs benutzte. Diese Methode, Layouts zu generieren ist seit Ende der 90er Jahre weitestgehend verschwunden, da sich gegenüber den explizit für die Gestaltung von HTML-Elementen gedachten Technologien wie CSS die Nachteile der Layouttabellen immer deutlicher herausstellten.

Heute werden solche Layouttabellen immer noch sehr häufig für (Werbe-)E-Mails und Newsletter im HTML-Format verwendet, da die CSS-Unterstützung einiger Mailclients oft nicht den Wünschen der Versender dieser Dokumente entspricht.

Cascading Style Sheets (CSS)[Bearbeiten]

Der Einsatz von CSS ermöglicht auf einfache Weise, das Design einer Webseite zu beeinflussen. Die Definition des Aussehens eines HTML-Elements ist damit von der Platzierung des Elements völlig unabhängig geworden, was in einigen Bereichen zu deutlichen Vorteilen bei der Webgestaltung geführt hat.

So ist es mittels CSS möglich, eine Webseite fast völlig neu zu gestalten, ohne etwas an den HTML-Seiten selbst zu verändern. Dies erhöht die Flexibilität und Wartungssicherheit einer Webseite enorm.

Allerdings führt die unterschiedliche Implementierung von CSS in verschiedenen Browsern zu neuen Problemen, die bei der Gestaltung mit Layout-Tabellen nicht weiter ins Gewicht fielen: Die Seiten sehen in verschiedenen Browsern manchmal sehr unterschiedlich aus, teilweise werden bestimmte Seiten unbenutzbar.

Besonders negativ fiel hierbei der Internet Explorer auf, dessen Rendering Engine des Internet Explorers bis zur Version 7 eine eigene, nicht dem W3C entsprechende Umsetzung des so genannten Box Modells enthielt, was ein von vielen Kunden gefordertes pixelgenaues Umsetzen von Layouts für alle Browser deutlich erschwert.

Die Tabellenzellen haben feste Höhen und Breiten, damit die Hintergrundbilder pixelgenau passen.
Die Textauszeichnung ist semantisch sinnvoll und wird durch ein Stylesheet formatiert.

Liquid Layout[Bearbeiten]

Schon Ende der 90er begannen Web-Designer horizontale Werte nicht mehr in Pixeln, sondern in Prozentangaben anzugeben. Gegenüber dem bisherigen starren Layout (Fixed Layout) wurde es im (Liquid Layout) so möglich die Seiteninhalte an den verfügbaren Viewport anzupassen, so dass vermieden wurde, bei schmalen Bildschirmen den Inhalt durch Scrollbalken sichtbar machen zu müssen, bzw. bei großen Bildschirme breite Ränder an den Seiten vermeiden konnte.

Dies schloss natürlich pixelgenaue Hintergrundbilder aus, wogegen eine Kachelung kleinerer Bilder weiterhin möglich ist.

Dieses Liquid Layout wurde auch Elastic Layout; wenn nicht nur die Breiten sondern auch die Höhen in Prozent angegeben wurden, auch Fluid Layout genannt.

RWD (Responsive Webdesign)[Bearbeiten]

In den letzten Jahren verlagerte sich der Internetkonsum weg von den Desktop-Rechnern am heimatlichen Schreibtisch hin zu mobilen Endgeräten, die ebenso in der S-Bahn wie auf auf der Couch im Wohnzimmer nutzbar waren.

Anfangs litten die mobilen Geräte unter kleinen Bildschirmen mit geringer Auflösung und geringen Übertragungsraten mit hohen Tarifen. Deshalb versuchte man für mobile Endgeräte mittels WAP und eigenen Internet-Adressen (häufig mit m. oder mobil. vor dem Domain-Namen) schlankere Inhalte und spezielle, angepasste Designs anzubieten.

Allerdings riefen die Geräte häufig trotzdem die "originalen" Seiten auf. So wurde die Möglichkeit Stylesheets durch die media queries-Kategorie "handheld" aufzurufen, von mobilen Geräten weitgehend ignoriert. Auch ein Auslesen der User-Agent-Kennung war wirkungslos, da sich die Browser häufig nicht genau identifizierten.

Trotzdem entwickelte sich ein adaptives Design, das sich mittels media queries an alle denkbaren Größen und Geräte anpasste. Hierbei geht es nicht nur um die Breite der Darstellung, sondern auch um eine unterschiedliche Darstellung der Navigation: Auf mobilen Geräten werden die Verweise zum Beispiel untereinander und größer dargestellt als auf großen Viewports.

weiterführende Links[Bearbeiten]

Single-Page Webseiten[Bearbeiten]

Bei Single-Page-Webseiten wird der Inhalt nicht auf mehrere kurze Seiten verteilt, sondern sofort geladen und durch Scrollen oder Navigieren ohne weiteren HTTP-Request sofort eingeblendet.