HTML/Tutorials/Layoutkonzepte

15min

leicht

Wussten Sie schon, dass die ersten Webseiten bereits responsiv waren?

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

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.

• 1.Web-Seite des CERN (1992)
• ACME Laboratories, eine Software-Seite von Jeffrey Poskanzer,1991
• Microsoft 1. Internetseite (1994) (über webarchive.org)

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.

• SELFHTML 2.0 (25.06.1995)
• SELFHTML 4.0 (21.01.1996)

Auch wenn das Design heute überholt wirkt; die Seiten sind problemlos benutzbar und sogar flexibel in der Breite.

Die Irrwege

Mit größeren Bildschirmen wollte man den Platz besser ausnutzen und Elemente auch nebeneinander positionieren. Leider wurde dies oft mit mittlerweile verpönten Technologien realisiert:

Framesets

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

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)

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ührte 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 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.

• SELFHTML 7.0 (27.04.1998) (1.Version mit CSS, aber immer noch Tabellen-Layout)
• fertiges Beispiel-Layout von SelfHTML (2001; aufgerufen über webarchive.org)

Die Tabellenzellen haben feste Höhen und Breiten, damit die Hintergrundbilder pixelgenau passen.

Die Textauszeichnung ist semantisch sinnvoll und wird durch ein Stylesheet formatiert.

pixelgenaues Layout

Diese Seite ist optimiert für den Internet Explorer und eine Auflösung von 640x480 Pixel!

Quelle: Internet

Ein weiterer Irrweg war der Versuch ein pixelgenaues Layout für eine bestimmte Auflösung zu gestalten.

Layoutkonzepte

In Zeitschriften und Blogs schwirren viele Buzz words umher, die aber oft nur bestimmte Merkmale und keine in sich geschlossenen Modelle repräsentieren.

Fixed Layout vs. Liquid Layout

Bereits in der Ära der Tabellen-Layouts waren viele Seiten responsiv, da Web-Designer horizontale Werte nicht mehr in Pixeln, sondern in Prozentangaben angaben und sich so fließend unterschiedlichen Viewport-Größen anpassten (engl. Liquid Layout; auch Elastic Layout genannt). Wenn nicht nur die Breiten, sondern auch die Höhen in Prozent angegeben wurden nannte man es auch Fluid Layout. Allerdings wurden viele Spalten bei kleinen Bildschirmen zu schmal, sodass längere Wörter überstanden. Eine andere Anordnung war nicht möglich.

Dem gegenüber existierten starre, pixelgenaue CSS-Festlegungen besonders mit Hintergrundbildern, die nur für eine bestimmte Auflösung geeignet waren (Fixed Layout).

responsives vs. adaptives Design

Auf den ersten Blick scheint dies das gleiche zu bedeuten. Während responsive Seiten stufenlos skalieren, passen sich adaptive Webseiten bei bestimmten Viewport-Breiten (meist in 3 Varianten: mobile, Tablet und Desktop) an die neuen Größenverhältnisse an. Beide Methoden schließen sich nicht aus, sondern ergänzen sich. Lassen Sie den Inhalt entscheiden, welche Methode geeigneter ist. Der Kulturbanausen-Blog hat einen sehr informativen Artikel zum Thema geschrieben, auf dem Froont-Blog gibt es sehr anschauliche Animationen zum Thema.

feste oder relative Größen

Gerade Anfänger entwickeln ein Layout anhand der realen Pixel der Bildschirmauflösung ihres Geräts, meist eines Desktop-Computers. Dabei vernachlässigen sie jedoch wieder die vielen anderen und auch zukünftig noch erscheinenden Geräte. Des Weiteren können Webseiten in Mobilgeräten mit einem Wisch skaliert werden. John Alsopp vergleicht Webdesign in „A Dao of Web Design “ mit Wasser, dessen Fluss zwar gelenkt, aber nicht künstlich aufgestaut werden kann.

Die Maxime, Webseiten auf allen Ausgabegeräten gleich aussehen zu lassen, muss schon an der unterschiedlichen Pixeldichte von Mac (72dpi) gegenüber Windows (96dpi) scheitern, bei denen ein fester Wert von body {font-size: 14px} per se keine gleichen Abmessungen erzielt.

Empfehlung: Richten Sie die Abmessungen von Schriftgröße, Seitenelementen und den Breakpoints der media queries nicht nach festen Pixeln, sondern nach relativen Größen wie em oder rem aus, sodass sich das Layout an den tatsächlich vorhandenen Schriftgrößen ausrichtet.

Eine Ausnahme bilden verschachtelte Elemente wie Logos, Sticker und Buttons, bei denen die Kindelemente in festen Relationen zueinander stehen. Hier können feste Pixelgrößen helfen, das Aussehen gleich zu halten.

Vektor- oder Rastergrafiken

Kleine Icons aus jpg- oder gif-Grafiken wirken auf hochauflösenden Bildschirmen oft pixelig. Daneben sorgt eine Vielzahl von Grafiken für viele http-Requests, die die Ladezeit der Seite erhöhen.

Empfehlung: Erstellen Sie SVG-Icons. Sie sind immer gestochen scharf, skalierbar und können sogar bei größeren Viewport-Größen zusätzliche Details einblenden

RWD (Responsive Webdesign)

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 auch 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.

Das inclusive Design versucht alle Anforderungen so zu berücksichtigen, dass Benutzer die Inhalte möglichst bequem und benutzerfreundlich erreichen können.

Single-Page Webseiten

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.

→ Hauptartikel: OnePager