AG Webseiten: Grundlagen des Webseiten-Layout

• Unser Arbeitsstand wird inzwischen in einem Subversion-Archiv verwaltet. Eine Kopie davon, kann direkt im Internet angeschaut werden: https://studiy.tu-cottbus.de/~_projektwiki/webdesign/index-16.html

• Raster aus 12 oder 16 Spalten
• Gesamtbreite der Seite wird festgelegt auf 960px (zentriert im Browser-Fenster). Dies ist notwendig für die modernen Breitbild-Displays, da sonst auf diesen die Lesbarkeit hinüber ist (alles in einer Zeile). Zudem hat es den Vorteil, dass sich das Layout weniger verändert, wenn das Fenster mal Breiter wird.
• Die Spalten haben eine feste Breite und einen gewissen Rand bzw. Abstand zwischen den Spalten (wird „gutter“ genannt).
• HTML-Elementen (z.B. Textblöcke, Bilder, etc.) wird per CSS-Klasse die Breite in Anzahl der Spalten zugewiesen. Der Spaltenabstand wirkt dabei natürlich nur auf den Außenseiten.
• Die Definition der CSS-Klassen ist auf http://www.960.gs erhältlich.

• http://www.cosmocode.de/de/blog/detman/2009-09/02-wysiwyg-wikis
• http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/
• http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/
• http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/
• https://eldorado.tu-dortmund.de/bitstream/2003/24419/2/dissertation_liebig.pdf
• http://psychology.wichita.edu/surl/usabilitynews/81/PersonalityofFonts.asp
• http://www.wordle.net/ Wort-Wolken aus den häufigsten Wörtern ⇒ Für uns wichtige Begriffe sollten wir auch häufig genug verwenden?
• http://en.wikipedia.org/wiki/Wikipedia:Layout http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style
• http://www.famfamfam.com/lab/icons/silk/

Der visuelle Eindruck von Webseiten-Elementen soll einen schnellen (und unbewussten) Einblick in die Aufgabe des Elements und seiner Rolle innerhalb der Seite liefern. Zum Beispiel hat ein Navigationsmenü eine globale Funktion, die unabhängig von dem aktuellen Seiteninhalt ist, während Bearbeiten-Buttons zum Inhalt der gerade gezeigten Seite gehören. Wenn diese optische Unterscheidung nicht gewährleistet ist, leidet die Verständlichkeit der Seite (Symptome: Verwirrung, Suchen).

Der visuelle Eindruck wird gesteuert durch Hintergrund- und Text-Farbe, Schriftart, -Stil und -Größe, sowie durch die Positionierung innerhalb des Layouts. Zum Beispiel werden lokale und globale Elemente direkt beieinander ohne anderweitige Trennung regelmäßig maximale Verwirrung stiften. Ein konkretes Beispiel: „ältere Versionen“ (lokal) vs. „letzte Änderungen“ (global). gibt es noch andere Mittel zur visuellen Unterscheidung.

Ein weiterer, wichtiger Aspekt ist die Haptik von Funktionsträgern - also wie sie auf den Benutzer reagieren. Früher mussten Links unbedingt unterstrichen sein, um als Link erkannt zu werden. War dies nicht der Fall, wurden die Links übersehen. Umgekehrt ist auch heute noch unterstrichener Text ohne Link-Funktion eine Quelle höchster Benutzerfrustration (also höchstens Links unterstreichen, sonst nichts). Heutzutage genügt es, wenn Links optisch vom Normaltext abheben bzw. dürfen in Link-Bereichen wie dem Navigationsmenü frei formatiert sein. Stattdessen ist nun wichtiger, dass die Links auf den Mauszeiger reagieren: Bewegt der Benutzer die Maus über einen Link, muss sich der Link und/oder der Mauszeiger optisch verändern. Tut er dies nicht, wird er nicht als Link erkannt und auch umgekehrt kann man wieder die Benutzer verärgern, wenn Elemente auf den Mauszeiger reagieren, aber nicht auf Klicks.

Einfluss der groben Position: Navigations in linker leiste statt Kopfzeile oder reichter Leiste. Suche-Feld oben rechts.

• Bei Wem bin ich?
• Wo bin ich auf der Seite?
• Wo bin ich hergekommen? Bzw. Wo war ich vorher auf der Seite?
• Suche (Volltextsuche)
• Login, Admin, Letzte Änderungen, Link zu Sitemap, Abonnieren
• Copyright mit Link auf Impressum
• Navigationsmenü: 1) Kurzüberblick für neue/seltene Besucher; 2) schnelles,tiefes Springen für häufige Nutzer
• RSS-Feeds

• der Inhalt der aktuellen Seite
• Inhaltsverzeichnis der aktuellen Seite
• Bilder und ähnliches im Rand
• Buttons „Seite Bearbeiten“, „Abschnitt Bearbeiten“
• Export der Seite (Druckansicht, PDF, ODF)
• „Version“, Link zu älteren Versionen, Autor
• Tags (Stichworte) der Seite (ev. mit Möglichkeit zur Bearbeitung)

• linke Spalte für globale Dinge (Menü, Navigation, Seitenweite-Tools)
• mittlere Spalte für den Inhalt der Seite und lokale Dinge
• rechte Spalte als Rand und Freiraum für Notizen, Bilder, Hinweise, lokale Links etc. (werden „Marginalien“ genannt). Dies ist eine relativ neue und seltene Sache auf Webseiten und sonst eher im Druckbereich anzutreffen. Die Marginalien werden nicht vom Text umflossen (flatternde Textbreite), sondern stehen rechts neben dem Text und der Text behält seine normale Breite.
• Ursprünglich wollten wir mit 12 Spalten arbeiten, also 2+7+3, aber dann ist die rechte Spalte zu schmal für Bilder. Daher ein auf 16 Spalten basiertes Layout mit der Unterteilung 3+8+5. Dies entspricht sogar näherungsweise dem Goldenen Schnitt (siehe Fibonacci-Folge: 1,2,3,5,8,…).
• wir haben die CSS-Klassen erweitert, um Abschnitte mit voller Breite (13 Spalten), Marginalien größer als der Rand, und Konfliktbehebung zu ermöglichen
• Die zur Zeit hauptsächlich verfolgte Variante enthält keinen Seitenkopf im ursprünglichen Sinn. Das ist ungefähr so, wie jetzt aus Wikipedia (nur ohne dem Werbebanner). Damit wollen wir in der Vertikalen Platz sparen, d.h. dem Seiteninhalt zur Verfügung stellen. Positiver Nebeneffekt ist, dass die Seiten-Überschrift an der prominentesten Stelle erscheint anstelle von statischen Inhalten.
  • linke Spalte („Global-Spalte“): Logo und globaler Titel, globales Navigationsmenü, falls vorhanden lokales Navigationsmenü (Namensraum-Basiert), die wichtigsten Seiten-Tools ( welche wären das überhaupt)
  • mittlere und rechte Spalte: „Lokal-Spalte“
  • die Lokal-Spalte beginnt zuerst mit einem horizontalen, aber nicht aufdringlichen Balken: „Sie sind hier:“, „Suche“ (weil die Suche nach Seiteninhalten sucht)
  • darunter kommt die Aufteilung in Inhalt (8 Spalten) und Marginalienrand (5 Spalten)
  • der Inhalt beginnt mit der ersten Überschrift direkt unter dem „Sie sind hier:“.
  • lokale Inhaltsverzeichnisse sollen manuell eingefügt werden mit Hilfe eines Syntax-Plugins. Dadurch müssen wir nicht mit NOTOC alles kaputt machen und das Inhaltsverzeichnis muss sich an die Marginalien-Regeln halten (denn es sollte sowieso eine normale Marginalie sein).
  • der Seitenfuß soll auf voller Breite sein und so abgesetzt, dass er wie die Statusleiste vom Browser wirkt. Er soll die selten verwendeten Funktionen enthalten (z.B. Admin-link, Subscribe, )
• : Position von „Anmelden/Login“, „Seite Bearbeiten“, „Abschnitt Bearbeiten“
• : Design der Navigation
• : Alle Bilder sollten Untertitel haben wie im Druckbereich !?! Vorteil: Export nach PDF/ODT wird etwas, weil alle Bilder schon sinnvolle Untertitel haben. Weiteres Argument: es geht keiner mit der Maus auf ein Bild, um den Alt-Text zu sehen. ⇒ Untertitel brauchen Design und besseren Dokuwiki-Support
• Schriftarten auswählen…
  • http://code.google.com/webfonts mengenschrift: lato, ubuntu, buda; überschriften: reene beani, crafty girls, sunshiny, dancing script
  • http://www.Typotheque.com/webfonts
  • georgia statt times, verdana statt helvetica/arial
  • http://www.surl.org/usabilitynews/112/typeface.asp
  • http://www.josbuivenga.demon.nl/
  • http://papress.com/thinkingwithtype/
  • schönes beispiel für den einzatz von schriftarten: http://owlapi.sourceforge.net/ http://clarkparsia.com/pellet
• aufzählungen; eventuell passen striche besser zur dünnen Schrift, tricks siehe http://www.alistapart.com/articles/taminglists/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="960-16.css">
  <link rel="stylesheet" type="text/css" href="960-16-own.css">
  <title>Your title here</title>
</head>
<body> 
  <div class="container_16 dokuwiki">
    <div id="leftbar" class="grid_3">
      Navigation
    </div>
 
    <div class="grid_13">
      <div class="grid_13 alpha omega">
        <div id="youarehere" class="grid_8 alpha">Sie sind hier:</div>
        <div id="searchfield" class="grid_5 omega">Suche</div>
      </div>
 
      <div id="content" class="grid_8 alpha omega">
        <h1>Überschrift</h1>
      </div>
    </div>
 
    <div class="clear">&nbsp;</div> 
  </div>
 
  <div id="footer">
    Fuß
  </div>
</body>
</html>

• „Sie sind hier“ und der Inhalt sind in einem 13 Spalten breiten div, damit meide rechts neben der Navigationsleiste landen. Ansonsten würde der Inhalt erst hinter dem Ende der linken Leiste beginnen. Die CSS-Klassen „alpha“ und „omega“ entfernen den überschüssigen Gutter der inneren Blöcke.
• Ursprünglich sollte der Block „content“ auch die CSS-Klasse „suffix_5“ haben. Diese produziert einen 5 Spalten breiten rechten Rand (statt des normalen Gutter). Dieser soll dann für die Marginalien verwendet werden. Leider machte das Probleme im IE6 (alles zu breit und umgebrochen) und dann stellten wir fest, dass es ohne „suffix_5“ genau so gut geht.
• Der „clear“ Block am Ende des Containers ist wichtig, damit der äußere Container selbst auch wirklich so groß wie seine Inhalte werden. Ansonsten kann man ihm keine wirksame Hintergrundfarbe geben und der Fuß würde ganz nach oben auf der Seite rutschen!

<div class="fullwidth" style="background-color:#aaf;">
  <p>Vestibulum purus est, blandit at consequat eu...</p>
</div>

.fullwidth {
  /* kopiert von grid_13 alpha omega */
  width: 770px;
  margin: 0 0 10px 0 !important;
}

• Die Hintergrundfarbe ist hier nur zu Demonstrationszwecken, um die Breite sichtbar zu machen.
• Der Text wird hineinragende Marginalien umfließen. Wenn man will, dass der Fullwidth-Block erst nach der letzten Marginalie anfängt, muss man explizit ein ClearFloat einbauen (~~CL~~ in Dokuwiki). im IE verhält es sich schon selbst wie ein Clear-Float, was sehr schade ist.
• leftfullwidth beschreiben
• leftfullwidth muss über dem navi-menü dargestellt werden, aber unter den aufgeklappten menupunkten.

<div class="grid_5 mediaright" style="background-color:green; height:200px">
  Randnotizen 1
</div>
<div class="grid_5 mediaright" style="background-color:green; height:200px">
  Randnotizen 2
</div>

.mediaright {
  float:right;
  margin-right: -300px !important;
  clear: both;
  margin-top: 5px;
  margin-bottom: 5px;
  /* ein Pixel mehr als der Gutter, 
   * damit Firefox 3.6 wirklich nachschaut,
   * was sich überlappt */
  margin-left: 11px;
}

• Die Hintergrundfarbe und Höhe ist hier nur zu Demonstrationszwecken, um den Block sichtbar zu machen.
• Theoretisch könnte man ein 5 Spalten breites div machen und dies mit der CSS-Klasse „push_8“ nach rechts in den Rand schieben. Aber dann können Marginalien nie breiter als 5 spalten werden - eine unschöne Einschränkung. Und die Marginalien wären linksbündig ausgerichtet im Rand, was auch komisch aussehen könnte.
• Stattdessen benutzen wir float: right; mit einem negativen rechten Rand so breit wie die 5 Rand-Spalten. Dadurch wird der Textumfluss aktiviert und das Bild in den Rand reingezogen. Nebeneffekt: Marginalien sind rechts ausgerichtet, statt links. Wenn sie größer als 5 Spalten sind, ragen sie in den Textbereich herein und werden vom Text ganz normal umflossen. oberer Rand fehlt in unserem Test-Code.
• Wenn, wie in dem Beispiel, zwei Marginalien direkt aufeinander folgen, würden sie übereinander oder nebeneinander platziert werden. Beides ist nicht schön. Deswegen enthält die CSS-Klasse auch clear: right;. Dies sorgt dafür, dass solche Marginalien untereinander platziert werden und sich nicht überdecken.
• Die Marginalien müssen mindestens ein Pixel breiter sein als der Rechte Rand, damit die Floats später auch in Fullwidth-Blöcken umflossen werden (ein Firefox-Bug?). Wir erreichen dies mit einer „margin-left“ die mindestens ein Pixel breiter als der Rand ist, so dass die Floats immer (unmerklich) in den Text stehen.

Wir wollen, dass das lokale Inhaltsverzeichnis nicht mehr automatisch oben rechts platziert wird, weil es da meistens der Einleitung im Weg ist und auch optisch nicht zu den Marginalien passen würde. Stattdessen sollen die Autoren explizit ein Inhaltsverzeichnis einfügen können, wenn sie eines wünschen. Dieses soll sich dann als Marginalie in den Rand einfügen, zum Beispiel erst im zweiten Abschnitt. Notwendig ist dazu eine Syntaxerweiterung ~~CONTENTS~~. Programmieraufwand abschätzen.

Alternative: Das Inhaltsverzeichnis kommt unter die anderen Navigationsmenüs in der linken Leiste. Dann muss aber optisch dafür gesorgt werden, dass man sieht, dass es zur Seite statt zum globalen Rahmen gehört. Das könnte zum Beispiel über eine gemeinsame Hintergrundfarbe von Inhaltsbereich und Verzeichnis führen im Kontrast zum Hintergrund der Navigationsmenüs.