Navigation und Service

Einfach teilhaben (Link zur Startseite)


Layout-Modelle

Bei der Erstellung einer Webseite stehen Ihnen drei grundlegende Methoden zur Verfügung, ein Layout zu definieren. Durch HTML-Frames können Webseiten in mehrere Zeilen und Spalten aufgeteilt werden. In den so definierten Bereichen können jeweils vollständige HTML-Dokumente angezeigt werden. Typischerweise existieren dann mehrere Frames, zum Beispiel ein Frame für den eigentlichen Inhalt, einer für die Navigation und je einer für den Kopf- und für den Fußbereich. HTML-Frames wurden zwar bereits von Netscape 2.0 und Internet Explorer 3.0 unterstützt, offizieller HTML-Standard wurden sie aber erst mit HTML 4 und dort nur in der speziellen Frameset-Variante.

Die zweite Methode um ein Layout zu erstellen, ist die Verwendung von Tabellen. Tabellen, die keine tabellarischen Daten beinhalten, sondern lediglich dazu dienen bestimmte Seitenelemente an eine festgelegte Stelle zu platzieren, werden Layout-Tabellen genannt. Layout-Tabellen wurden in der Vergangenheit häufig genutzt, besonders Exporte aus Grafik- und Layout-Programmen nutzten dieses Verfahren, um eine möglichst exakte Nachbildung im Browser zu gewährleisten. Sogenannte WYSIWYG-Editoren ("What You See Is What You Get", auf Deutsch: "Was du siehst, ist das, was du bekommst") unterstützten die Verbreitung von Layout-Tabellen ebenfalls.

Im modernen Webdesign wird die Gestaltung vom eigentlichen Inhalt und der Semantik der Webseite getrennt, sodass das Layout heute möglichst durch CSS-Eigenschaften gewährleistet wird. Bei einem CSS-Layout beschränkt sich das HTML-Markup möglichst nur auf die semantische Struktur des Inhalts. Diese Methode hat sich in den letzten Jahren weitgehend durchgesetzt. Nach anfänglichen Schwierigkeiten in Bezug auf Kompatibilität von älteren Browsern und den zahlreichen fehlerhaften Umsetzungen der CSS-Spezifikationen ("Browser-Bugs") gelten heute im Prinzip alle Probleme als gelöst und die Lösungsansätze sind gut dokumentiert.

Frames

Die Verwendung von Frames verstößt grundsätzlich nicht gegen die BITV. Allerdings gilt die Technik als veraltet und ist unter Webdesignern verpönt. Hinzu kommen gravierende Probleme, die beim Umgang mit Frame-Seiten für Menschen mit und ohne Behinderung auftreten.

  • Die Navigation mit Tastatur und Screenreader ist kompliziert und bedarf einiges an kognitiven Fähigkeiten.
  • Das Setzen von Lesezeichen ist nicht ohne Weiteres möglich, da eine Frameseite im Prinzip aus mehreren Webseiten zusammengesetzt wird und jede Webseite eine eigene Web-Adresse hat. Ein Lesezeichen kann aber nur eine Adresse speichern.
  • Ein Speichern einer Web-Adresse oder ein Versenden der Web-Adresse führt nur dazu, dass die übergeordnete Adresse der Frameseite versendet wird. Die Adressen der einzelnen Inhaltsseiten werden nicht versendet oder gespeichert.
  • Suchmaschinen und andere Webseiten können entweder auf die übergeordnete Frameseite verlinken oder auf einzelne Unterseiten. Ersteres führt zu den schon oben beschriebenen Problemen. Letzteres kann dazu führen, dass die Nutzerin oder der Nutzer in einer Sackgasse landet. Wird zum Beispiel auf die Inhaltsseite verlinkt, steht der Nutzerin oder dem Nutzer voraussichtlich keine Navigation zur Verfügung.

Neben diesen allgemeinen Problemen müssen auch alle BITV-Anforderungen und Bedingungen für die Frameseite als Ganzes und für alle Unterseiten in den einzelnen Frames erfüllt werden. Zunächst müssen alle Frames durch ein title-Attribut benannt werden. Die Benennung dient bei der Navigation zwischen den Frames zur Orientierung, deshalb müssen die title-Attribute Sinn und Zweck jedes Frames beschreiben.

Folgendes Beispiel erzeugt eine Seite mit drei Frames:

<frameset rows="80,*">
   <frame src="kopf.html" name="Kopf" 
          title="Kopfbereich mit Suchfeld">
   <frameset cols="25%,*">
      <frame src="verweise.html" name="Navigation" 
             title="Navigationsleiste">
      <frame src="inhalt.html" name="Inhalt" 
             title="Inhaltsbereich">
   </frameset>
</frameset>

Screenshot: eine Frameseite mit drei Frames Screenshot: eine Frameseite mit drei Frames

Die title-Attribute geben den Zweck jedes Frames an:

  • Frame 1: Kopfbereich mit Suchfeld
  • Frame 2: Navigationsleiste
  • Frame 3: Inhaltsbereich

Beachten Sie bitte: Wenn der Inhalt eines Frames sich grundlegend ändert, kann es passieren, dass die Beschreibung im title-Attribut den Inhalt nicht mehr korrekt beschreibt. Es sind Maßnahmen zu treffen, damit die Beschreibungen zu jeder Zeit den Inhalt beschreiben. Die Beschreibung kann zum Beispiel so allgemein gehalten sein, dass sie den zu erwartenden Inhalt immer korrekt beschreibt. Ist dies nicht möglich, kann auch durch JavaScript-Befehle die Beschreibung der Frames angepasst werden.

Wenn Sie Frames nutzen, müssen Sie, um ein gültiges Dokument zu erstellen, die richtige HTML-Version wählen und entsprechend die zugehörige Doctype-Definition angeben. Bei der Verwendung von Frames sind nur folgende HTML-Versionen und Doctype-Definitionen gültig:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" 
  "http://www.w3.org/TR/REC-html40/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Die Einhaltung einiger BITV-Bedingungen, die sich nicht direkt auf die Verwendung von Frames beziehen, macht bei der Verwendung von Frames ebenfalls Schwierigkeiten. Frameseiten bekommen häufig Probleme beim Vergrößern der Schrift oder beim Verändern der Fenstergröße. Die Maße der Frames können zwar in relativen Einheiten (%) angegeben werden, diese beziehen sich aber immer auf die Fensterbreite und passen sich nicht an die Schriftgröße an. Werden die Inhalte der einzelnen Frames zu groß, erscheinen Scrollbalken. Bei vier Frames können so auch bis zu acht Scrollbalken gleichzeitig auf dem Bildschirm erscheinen. Wichtige Inhalte werden so schnell übersehen.

Screenshot: eine Frameseite mit Problemen bei der Schriftenvergrößerung Screenshot: eine Frameseite mit Problemen bei der Schriftenvergrößerung

Die Abbildung oben zeigt eine Frameseite, bei der die Schrift vergrößert wurde. Einige der Frames zeigen horizontale und vertikale Scrollbalken und viele Inhalte sind abgeschnitten. Eine Unternavigation auf der rechten Seite wird nur sichtbar, wenn nach rechts gescrollt wird.

Tabellen-Layouts

Die Verwendung von Tabellen zu Layoutzwecken wird von der BITV ebenfalls nicht ausdrücklich verboten. In einer zusätzlichen WCAG-Technik zur Bedingung 1.3.1 "Informationen und Beziehungen" wird die Nutzung von "CSS anstelle von Tabellen zum Seitenlayout" empfohlen. Hintergrund ist, dass HTML-Tabellen zum Anordnen von Datentabellen entwickelt wurden. Die semantische Bedeutung ist die einer Datentabelle mit Beziehungen zwischen Spalten und Zeilen. Für viele Webdesigner stellt die Verwendung von Tabellen für Layoutzwecke deshalb einen semantischen Missbrauch dar.

Tabellenlayouts können aber auch Menschen mit Behinderungen erhebliche Probleme bereiten. Die Navigierbarkeit kann eingeschränkt sein. Insbesondere Nutzerinnen und Nutzer von Screenreadern können durch die häufig sehr tief verschachtelten Tabellen irritiert werden. Menschen, die mit einer vergrößerten Schrift arbeiten, stoßen oft auf die Grenzen eines unflexiblen Tabellenlayouts. Die WCAG kennt im Zusammenhang mit Layouttabellen zwei Fehler, die zur Nichterfüllung einer Bedingung führen. So dürfen für Layouttabellen keine th-Elemente, Caption-Elemente oder nicht-leere Summary-Attribute verwendet werden. Ebenso ist eine Webseite nicht barrierefrei, wenn der Inhalt einer Layouttabelle in linearer Form nicht mehr verständlich ist. Besonders bei verschachtelten Tabellen kann dies schnell zu einem Problem werden.

Neben den Problemen, die sich bei der Erfüllung der BITV ergeben, haben Layouttabellen auch weitere gravierende Nachteile. Tabellenlayouts sind unflexibel bei Layoutänderungen, Layoutänderungen sind zeitaufwendig und dadurch meist mit hohen Kosten verbunden. Die unvermeidbare Wartung der Webseite wird schwerer und teurer, da der Quellcode aufgebläht und unübersichtlich ist. Webseiten mit Layouttabellen haben relativ viel Quellcode der für jede Seite ausgeliefert werden muss, benötigen dadurch eine höhere Bandbreite und verursachen dadurch höhere Kosten bei Anbieter und Nutzern.

CSS-Layouts

Die Verwendung von CSS-Eigenschaften ist die von der WCAG und somit auch von der BITV empfohlene Technik, um Layouts zu erstellen. Für die BITV-Bedingung 1.3.1 "Informationen und Beziehungen" wird in einer WCAG-Technik ausdrücklich die Nutzung von "CSS anstelle von Tabellen zum Seitenlayout" empfohlen.

Diese Technik ist seit Jahren erprobt. Die anfänglichen Kompatibilitätsprobleme vor allem in älteren Browsern sind weitgehend gelöst. Selbst fehlerhafte CSS-Umsetzungen im Internet Explorer der Version 6 sind gut dokumentiert und durch zahlreiche Lösungsmöglichkeiten können auch für diesen fast nicht mehr relevanten Browser annehmbare Layouts geschaffen werden. Viele kostenlos erhältliche CSS-Frameworks bieten Layouts in Baukastensystemen an, deren Ergebnisse auf allen relevanten Browsern funktionieren. Vorteil der Frameworks ist unter anderem, dass sie Lösungen für zahlreiche Browserbugs (Fehler in Browsern) kapseln und so den Entwicklungsprozess beschleunigen. Einige Links zu CSS-Frameworks finden Sie am Ende dieses Kapitels.

Arten von CSS-Layouts

Die Layouts, die mit Hilfe von CSS-Eigenschaften erstellt werden, können grob in 3 Gruppen eingeteilt werden.

Feste Layouts haben die Eigenschaft, dass ein äußerer Rahmen existiert und dieser eine fest vorgegebene Breite besitzt. Zum Beispiel werden häufig Maße wie 980 Pixel oder 760 Pixel verwendet. Diese Maße entsprechen der Nutzfläche der Standard-Bildschirmbreiten von 1024 beziehungsweise 800 Pixeln. Der Nachteil im Sinne der Barrierefreiheit ist, dass sich das Layout nicht an Schriftgrößen oder Bildschirmbreiten anpasst. Um die Anforderungen der BITV zu erfüllen, muss sich der Seitenbetreiber entweder auf das Funktionieren der Zoomfunktion im Browser verlassen können oder er muss auf der Seite Steuerelemente anbieten, mit dem eine Nutzerin oder ein Nutzer eine größere Schrift auswählen kann.

Die von Designern häufig angepriesenen Raster ("Grids") sind in der Regel eine Sonderform von festen Layouts. Bei der Verwendung von Grids wird die Seite in ein relativ schmales Spaltenraster geteilt. HTML-Elemente werden durch CSS-Eigenschaften dann genau in dieses Raster gesetzt. Viele CSS-Frameworks bieten dazu spezielle Klassennamen an, mit denen angegeben werden kann, wie breit ein Element werden soll. Mit der Klasse class="grid-4" wird zum Beispiel ein HTML-Element erzeugt, dass genau so breit ist wie 4 Grid-Spalten. Das Beispiel unten zeigt ein typisches 960-Pixel-breites Spaltenraster mit 12 Spalten. Die über dem Raster liegenden Rechtecke sind mit einem CSS-Klassennamen beschriftet, mit dem in diesem Beispiel ein entsprechend breites Element erzeugt werden kann.

Ein typisches Spaltenraster mit einer Breite von 960 Pixeln und 12 Spalten. Rechtecke überspannen die Spalten. Sie sind mit Klassen-Namen und Pixelbreite beschriftet und verdeutlichen das CSS-System. Ein typisches Spaltenraster mit einer Breite von 960 Pixeln und 12 Spalten. Rechtecke überspannen die Spalten. Sie sind mit Klassen-Namen und Pixelbreite beschriftet und verdeutlichen das CSS-System.

Die Nachteile der Grid-Systeme sind dieselben, wie bei allen festen Layouts, sie reagieren nicht ohne Weiteres flexibel auf eine Vergrößerung der Schrift oder eine Veränderung der Fensterbreite. Schnell werden Texte beim Vergrößern der Schrift abgeschnitten oder von anderen Seitenbereichen überlagert. Bei schmalen Fensterbreiten kommt es dazu, dass Fließtexte über den Fensterrand hinaus geschrieben werden. Beim Lesen muss dann für jede Zeile nach rechts und wieder zurück gescrollt werden.

Fließende Layouts passen sich an die Fensterbreite an, indem alle Maße des Layouts prozentual abhängig von der Fensterbreite definiert werden. Als Nachteil wird meist das Verhalten bei einer Schriftvergrößerung und in extremen Situationen mit sehr schmalen und sehr breiten Fenstern angeführt. Sehr schmale Fenster führen immer zu Überlagerungen oder abgeschnittenen Wörtern, die Nutzung einer Schriftvergrößerung potenzieren die Darstellungsprobleme. Durch eine im CSS angegebene Mindestbreite lässt sich das Problem zumindest bei sehr schmalen Fensterbreiten ausklammern. Unschöne breite Textpassagen auf sehr breiten Bildschirmen, bei denen eine Leserin oder ein Leser leicht die Zeile verliert, können durch die Angabe einer maximalen Breite vermieden werden.

Eine Webseite mit einem fließenden Layout. Links die Webseite mit einer minimalen Breite. Rechts dieselbe Webseite in der breitesten Darstellung. Eine Webseite mit einem fließenden Layout. Links die Webseite mit einer minimalen Breite. Rechts dieselbe Webseite in der breitesten Darstellung.

Bei elastischen Layouts basieren alle Maße auf der Maßeinheit em, also auf der Größe der gerade benutzten Schriftart. Verändert eine Nutzerin oder ein Nutzer die Schriftgröße, verändert sich auch die Breite des Layouts. Die Proportionen des Layouts bleiben so erhalten. Unschöne breite Textpassagen können dabei einfach vermieden werden.

Die Webseite des vorherigen Beispiels, diesmal als elastisches Layout. Bei großer Schrift wird die Seite entsprechend breit dargestellt. Die normalen Proportionen bleiben erhalten. Die Webseite des vorherigen Beispiels, diesmal als elastisches Layout. Bei großer Schrift wird die Seite entsprechend breit dargestellt. Die normalen Proportionen bleiben erhalten.

Einzelne Aspekte der Layouttypen können untereinander auch kombiniert werden. Die Nachteile die entstehen, wenn sich zu streng an die einzelnen Layouttypen gehalten wird, können so wieder wettgemacht werden. Durch die Verbreitung von Smartphones mit Internetzugang hat sich das Problem der schmalen Fensterbreiten verstärkt. In den letzten Jahren wurde dadurch ein neuer Trend im Webdesign mehr und mehr etabliert: "Responsive Webdesign". Der Begriff bezeichnet das Verfahren, dynamisch auf die physikalischen Gegebenheiten des Nutzergeräts zu reagieren. Durch "Media Queries", einer Technik des CSS3-Standards, ist es möglich, abhängig von der Bildschirmauflösung und der Bildschirmausrichtung unterschiedliche CSS-Eigenschaften zu aktivieren.

Der Quellcode im folgenden Beispiel erzeugt auf normalen Bildschirmen einen Artikel mit einer Illustration, die verkleinert links oben dargestellt und vom Text umflossen wird. Auf Bildschirmen die schmaler als 760 Pixel sind, verändert sich die Darstellung. Das Bild wird nicht mehr umflossen, sondern es wird über die gesamte Bildschirmbreite dargestellt. Der Text wird dadurch unter die Illustration gesetzt. Die Abstände des Bildes zum Text oder zum Fensterrand werden ebenfalls angepasst.

@media screen {
   .illustration {
      float: left;
      margin-right: 1em;
      margin-bottom: .5em;
      width: 300px;
   }
   ...
}
...
@media screen and ( max-width: 760px ) {
   .illustration {
       display: block;
       float: none;
       margin-right: 0;
       margin-bottom: 1em;
       width: 100%;
   }
   ...
}
...
<div class="article">
  <h3>Käthe Kollwitz</h3>
  <p>
    <img class="illustration" src="kaethe_kollwitz" 
         alt="Ersttagsbrief mit den Motiven "Nie wieder ..." />
    Käthe Kollwitz zählt zu den bekanntesten deutschen Künstlerinnen 
    und Künstlern des 20. Jahrhunderts. Sie entwickelte ...
  </p>
</div>

Die Abbildungen zeigen die Darstellung der Webseite auf einem breiten Bildschirm (links) und auf einem schmalen Bildschirm (rechts).

Ein Webseitenausschnitt. Links in einem breiten Bildschirm, rechts auf einem schmalen Bildschirm Ein Webseitenausschnitt. Links in einem breiten Bildschirm, rechts auf einem schmalen Bildschirm

CSS-Frameworks

Es existieren zahlreiche CSS-Frameworks mit unterschiedlichen Stärken und Schwächen. Frameworks helfen Entwicklerteams, durch eine gemeinsame Code-Basis, die Zusammenarbeit zu verbessern und die Produktivität zu erhöhen. Inkompatibilitäten der Browser werden bereits durch das Framework gelöst. Lösungen zu häufig auftretende Designproblemen werden ebenfalls im Framework gekapselt. Die einzelne Entwicklerin oder der einzelne Entwickler bekommt so mehr Freiheiten, sich um die eigentliche Arbeit zu kümmern.

Ein detaillierter Vergleich aller Frameworks würde den Rahmen dieses Kapitels sprengen. Folgende Vier sind die zurzeit wahrscheinlich am verbreitetsten Frameworks:

  • YAML: Ein sehr flexibles Framework. YAML unterstützt feste, fließende und elastische Layouts, mehrspaltige Anordnungen sowie flexible und feste Grids. Die Barrierefreiheit wird aktiv von YAML unterstützt. Eine ausführliche Dokumentation wird mitgeliefert. YAML enthält unter anderem Module für "responsive Design", Typografie, Formulare und Menüs.
  • 960 CSS Framework: Ursprünglich ein Framework zum Aufbau von gridbasierten Layouts. Durch Erweiterungen sind aber auch flexible Layouts umsetzbar.
  • Blueprint CSS Framework: Ebenfalls ein gridbasiertes Framework. Module für Typografie, Formulare und Druckausgabe.
  • YUI 2 Grids: CSS: Framework aus dem Hause Yahoo, gridbasierte Layouts, unterstützt aber auch fließende und flexible Layouts. Zahlreiche Komponenten für Formularelemente und sonstige häufig benötigte Nutzer-Interfaces.

© Bundesministerium für Arbeit und Soziales