Viel freier Raum für Text

14. Dezember 2010, von Frank Hellenkamp

Weil Text Liebe braucht:

textfreiraum ist ein Redaktionsbüro, das sich die Freiheit nimmt, weitgehend unabhängig von Vorgaben Artikel, Features und Kommentare zu schreiben. Wir durften für textfreiraum die Website gestalten. Da textfreiraum von Text lebt und durch Text atmet, war ein Layout vonnöten, das den Texten ebenfalls den benötigten Raum bietet.

Der Inhalt: Texte über Design

Inhaltlich besteht textfreiraum aus drei Grundelementen:

Einem Blog, dass News enthält und regelmäßig aktualisiert wird,
»Design and Living«, mit Artikeln und Essays über Produkt- bzw Interior Design, und
»Designer's Voice«, einer Reihe von sehr lesensweerten Interviews mit klugen Köpfen aus der Design-Szene, wie Philippe Stark, Johanna Grawunder oder Ross Lovegrove.

Das Grundlayout

Das Grundlayout basiert auf sich bewegenen Logoteilen »text«, »frei« und »raum«, die auf einer großen Fläche von Weißraum positioniert sind. Das Logo gibt es in vier verschiedenen Layout-Varianten.

Logolayouts

Passend zu den vier Logolayouts ist dann das komplette Textlayout aufgebaut:

Die Layouts können von der Redaktion frei gewählt werden und sind untereinander austauschbar, ohne dass der Inhalt der jeweiligen Seite neu aufgebaut werden müsste, da es immer aus zwei frei füllbaren Spalten (Hauptspalte und Marginalspalte) besteht.

Interessant wird es aber vor allem dadurch, dass unterschiedliche Layouts auch auf einer einzelnen Seite untereinander verwendet werden können — dadurch können relativ leicht recht dynamisch gestaltete Layouts umgesetzt werden:

Drei verschiedenen Layouts (1, 4 und 3) mit Blindtext untereinander

Bei längeren Seiten, die mehr als eine Bildschirmseite umfassen — was aufgrund der Länge der Texte und der Interviews auf mehreren Seiten vorkommt — wird das Logo automatisch mehrmals auf der Seite kopiert, damit der Absender möglichst immer sichtbar bleibt. Allerdings sind die Logokopien zurückhaltend grau und nicht orange.

Die Hauptnavigation ist bewußt einfach gehalten und besteht aus nur einer einzigen Ebene — die Unterpunkte können dann über die jeweilige Auflistung auf der Indexseite bzw. liniear über »vor« und »zurück« navigiert werden.

Silbentrennung

Gute Silbentrennung auf Internetseiten ist in der Regel bisher nicht vorhanden. Es gibt theoretisch die Möglichkeit, bedingte Trennstriche in den Text zu integrieren, die nur dann sichtbar werden, wenn an der jeweiligen Stelle ein Umbruch erzeugt wird.

Leider ist dieser bedingte Trennstrich ( oder ) von manchen — besonders älteren — Browsern nicht unterstützt und wird an jeder Stelle angezeigt. Insofern ist eine Benutzung in der Praxis leider nicht möglich.

Aber es gibt eine Lösung hierfür — willkommen bei: hyphenator

hyphenator ist eine OpenSource Javascript Library geschrieben von Mathias Nater, die die Silbentrennung direkt im Browser ermöglicht. Die Benutzung ist einfach — man bindet die Script-Datei für die entsprechende Sprache ein:

<!-- for german -->
<script type="text/javascript" 
    src="path-to/hyphenator_de.js"></script>

Um die Javascript-Dateien zu generieren gibt es auch ein sehr komfortables Tool: hyphenator.googlecode.com/svn/trunk/mergeAndPack.html

Dort läßt sich neben anderen Parametern konfigurieren, welche Sprache(n) eingebunden werden und Text in welchen Elementen umgebrochen werden soll. Normalerweise wird der Text in allen Elementen, die die Klasse »hyphenate« um. Wir haben dieses für alle Textboxen aktiviert, nicht aber für die Navigation, die Hauptheadlines oder die Teaser-Elemente.

<div class="size-L hyphenate"> 
    <h2>Als Journalisten lieben wir Worte. </h2> 
    <p>Als Design-Fans stehen wir aber auch 
        auf das sinnliche Konzept aus Optik, ... </p> 
</div>

Optimierung für mobile

Zusätzlich wurde die Seite — in ähnlicher Technik wie depage.net — noch für aktuelle Mobilgeräte wie iPhone und Android-Devices optimiert:

Nun also viel Vergnügen auf textfreiraum.de!