Technik, Typografie und Layout

Damit ich nicht vergesse, was ich mir beim Erstellen dieser Seiten überlegt habe (und diese dann beim nächsten Update völlige verschandle :), habe ich hier einige Gedanken dahinter aufgeschrieben. Diese Überlgeungen können in ihrer Art auch für andere "Webdesigner" Beispiel sein.

(Das Wort "Webdesigner" ist ja geradzu zu einem Schimpfwort verkommen. Diese Zeilen sind vieleicht auch hilfreich für solche, die dem "hast- Du- nichts,- bist- Du- nichts,- bist- Du- Webmaster"- Stadium entwachsen wollen.)

Schriften

Diese Seite verwendet standardmässig die Schnitte "Sans" und "Mono" der Opensource Schriftfamilie Bitstream Vera:

Diese Schrift ist frei verfügbar und kann heruntergeladen werden. Falls diese Schriften nicht installiert sind folgen in dieser Reihenfolge:

Trebuchet MS (Proportional) / Courier (Monospace)
die im System definierten Seriferiffenlose und Monospace Schrift

An sich würde ich die Schriftwahl gerne ganz offen lassen und die vom System beziehungsweise User definierte seriffenlose Schrift zur Dartstellung verwenden. Da aber die meisten die scheussliche Arial (Allgmein sehr lesenwerter Artikel. Er beschriebt viele Überlegungen welche auch dieser Seite zu Grunde liegen.) als Standard verwenden versuche ich das Unglück mit dieser Wahl stuffenweise zu mildern.

Die Schriftgrösse ist natürlich nicht fix in Punkten oder Pixeln, sondern relativ definiert (Schon mal eine Webseite eines "Webdesigners" auf einem Bildschirm mit 150 dpi zu lesen versucht?). Leider scheint unter den Browserherstellern kein konsens zu herschen was "normal" ist. Im css habe ich die Basisschrift als "small" definiert, was mir als vernünftiger Kompromiss erscheint.

Textformatierung

Der Fliesstext ist in linksbündigem Flattersatz gehalten. Absätze werden durch eine eingerückte erste Zeile hervogehoben.

Farben

Das Ziel bei der Farbgestalltung dieser Seiten war die Farbe als Hilfmittel zum Verständnis des Inhalts und der Bedienung einzusetzen. Aus diesen Gründen soll bekanntes und erwartetes Verhalten und Aussehen beibehalten und die formlosen Konventionen des Webs nicht verletzt werden. So sind auch die Linkfarben - bis auf die bereits besuchten Links - unverändert. Selbstverständlich soll diese Seite aber auch gefallen können - das gehört ja schliesslich auch zum Bedienkomfort einer Webseite.

Diese Seiten sind mit folgenden Farbelementen gestalltet:

#444444: Nicht ganz schwarz. Die Standardschriftfarbe welche haupsächlich im Inhaltsbereich und in der Fusszeile verwendet wird.
#335599: Besuchte Links werden in diesem dunkleren, entfärbten Blau dargestellt. Die Farbe der unbesuchten Links werden im Interesse der Gewohnheit des Benutzers nicht umdefiniert. Über den Entscheid diese Farbe offen zu lassen und damit das Erscheinungbild zu Gunsten der Bedienbarkeit zu gefährden kann man sich Streiten.
#bbc6ee: Helles, blasses Blau. Diese Farbe wird für die Schrift im Kopf und Fussbereich für Text mit weniger Bedeutung verwendet.
#cccccc: Linenfarbe im Inhaltsbereich; ZB. horrizontale trennlinien oder Kastenränder.
#f6f7ff: Helle Hintergrundfarbe mit Blaustich für den Kopf und Fussbereich der Seite.
#f7f7f7: Sehr helles Grau mit welchem "Kästen" im Inhalt hinterlegt und vom normalen Text abgehoben werden..
#ffffff / Weiss: Der Hintergrund dieser Seiten ist Weiss.

Layout

Webseiten haben häufig einige gemainsame Bausteine, welche im Layout berücksichtig werden. Die Wichtigsten sind:

Titel
Inhalt
Navigation
statische und statistische Angaben ("footer")

Die klassische und auch bewährte Aufteilung des Platzes unter diesen Elementen ist Titel oben, Navigation links, Inhalt rechts (allenfalls vertauscht) und der footer mit Datum, copyright etc. unten.

Mit dem Layout dieser Webseite habe ich versucht von diesem Konzept abzuweichen, ohne die Benutzbarkeit und Barrierefreiheit zu gefährden. Die baumartige Navigation baut sich hierarchisch von oben nach unten auf. Die aktuelle Position im Baum wird durch eine zunehmende Anzahl von "+" Zeichen signalisiert. Damit sind etwa drei Hierarchiestufen realisierbar, wobei jedoch die Anzahl der Inhalte auf der selben Stufe pro Ast durch die Darstellung auf einer Linie beschränkt ist.

Technik

Diese Seiten werden alle in gültigem XHTML 1.1 Strict und CSS 2 geschrieben und werden mittels php aus einzelnen Elementen zusammengebaut. Ein spezielles cms kommt nicht zum Einsatz.

CSS

Die Darstellung dieser Seite ist vollständig in CSS realisiert. Die beiden Screenshots mit Stylesheets und ohne Stylesheets Illustrieren das.

Ausgabemedien

Derzeit unterstützt diese Webseite explizit "screen", "projection", "tv" und "print" mit teilweise speziellen Formatierungen.

"Environement-" oder "Context Based Styles"

Damit bezeichne ich die Technik, welche ich mit der Zeit entwickelt habe um Inhalt möglichst strikt von der Formatierung, im speziellen Darstellung zu trennen (Wer LaTeX kennt, kennt das Konzept). Die Idee entstand unter anderem aus der Not, Inhalte von älteren oder anderen Seiten in neue Seiten zu integrieren, ohne das komplette HTML-Markup neu zu schreiben.

Die Idee orientiert sich an der Möglichkeit, Formatierungen für bestimmte Elemente nicht an Hand einer explizit definierten Klasse oder gar ID des Elements zu definieren, sondern die Formatierirung unspezifischer Markup-Elemente durch übergeordnete Container zu bestimmen.

So bleibt beispielsweise eine Liste immer eine ordinäre Liste ohne Spezifikation einer "class" oder "id". Die unter Umständen völlig verschiedene Darstellung im Kopf oder im Inhalt einer Webseite wird nur durch Ihren Kontext in der sie sich befindet bestimmt.

Folgende Menu-Liste könnte im Kopf wie ein "Menu" eines Programmes formatiert werden:

<div id="programmenu">
	<ul>
		<li>Datei</li>
		<li>Bearbeiten</li>
		<li>Werkzeuge</li>
		<li>Hilfe</li>
	</ul>
</div>

Dieser Code könnte mit einem geeigneten Stylesheet wiefolgt dargestellt werden:

Datei
Bearbeiten
Werkzeuge
Hilfe

Hingegen sollen die Liste der Zutaten im Inhalt eines Kochrezepts Punkt für Punkt untereinander aufgeführt werden:

<div id="rezept">
	<ul>
		<li>Zwiebeln</li>
		<li>Knoblauch</li>
		<li>Olivenöl</li>
		<li>Tomaten</li>
	</ul>
</div>

Dieser Code könnte mit einem geeigneten Stylesheet wiefolgt dargestellt werden:

Zwiebeln
Knoblauch
Olivenöl
Tomaten

Beide Inhalte sind mit "nackten" (X)HTML Tags Markiert und können mittels den unterschiedlichen Umgebungen (Einmal "programmenu", einmal "rezept"), in denen sie sich befinden, völlig verschieden und der Situation angepasst formtiert werden.

Selbstverständlich sind diesem Ansatz auch Grenzen gesetzt. So können im Seitendesign und den Stylesheets nicht alle Eventualitäten berücksichtigt werden. So müssen "Extravaganzen" wie die Beispiele obeni, welche so im Aufbau dieser Seiten nicht vorgesehen sind, nach wie vor mit konkreten style-Angaben formatiert werden. Der grosse Teil der Inhalte kommt jedoch völlig ohne diskrete Formatierung und CSS Anweisungen in normalem (X)HTML daher.