1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}
|
||
5.5 Textgestaltung |
||
| Zurück zu: [ eBook-Startseite | AboutWebDesign.de ] | ||
|
Inhaltsverzeichnis Textgestaltung 5.5.1 Einleitung 5.5.2 Grundsätze der Textgestaltung 5.5.2.1 Technische Aspekte 5.5.2.2 Inhaltliche Aspekte 5.5.3 Möglichkeiten der Strukturierung 5.5.4 Optische Gestaltungsmöglichkeiten 5.5.4.1 Spaltensatz 5.5.4.2 Schriftgrößen-Probleme |
||
5.5.1 EinleitungIn diesem Kapitel geht es um die Kunst, Texte im WWW möglichst optimal zu präsentieren. Allzu umfangreich ist dieses Kapitel nicht, lesenswert ist es jedoch trotzdem. |
||
|
||
5.5.2 Grundsätze der TextgestaltungZwei verschiedene Aspekte sind beim Gestalten von Texten zu beachten: Einerseits muss die technische Umsetzung gelungen sein, andererseits muss aber auch der Inhalt der Texte dem WWW angemessen sein.5.5.2.1 Technische AspekteSorgen Sie für gute Lesbarkeit. Angemessen große Schriften sind Pflicht, denn Mini-Schriftsätze sind schlecht lesbar. Kontraste zwischen Vorder- und Hintergrund müssen sein. Gute Textgestaltung setzt auch immer eine deutliche optische Gliederung voraus: Setzen Sie Absätze und Haltepunkte für das Auge. Machen Sie Gebrauch von Zwischenüberschriften und heben Sie diese deutlich vom Rest ab. Es ist empfehlenswert, für längere Texte eine Serifen-Schriftart wie Times New Roman zu verwenden, denn die sind besser lesbar.5.5.2.2 Inhaltliche AspekteStudien haben ergeben, dass Surfer im WWW nicht lesen, sondern überfliegen. Daher muss die optische Gliederung durch eine klare inhaltliche Gliederung unterstützt werden. Stellen Sie wichtige Aussagen und Schlussfolgerungen an den Anfang Ihrer Texte, denn der Surfer muss zu Anfang überzeugt werden, dass sich der Zeitaufwand, in den Text einzusteigen, sich wirklich lohnt. |
||
|
||
5.5.3 Möglichkeiten der Strukturierung
<a href="#headline1">Thema 1</a> ... <a name="headline1"></a><h1>Thema1</h1> Diesen Code im Browser anzeigen Wie Sie sehen, eignet sich die Anker-Technik von HTML hervorragend, um innerhalb einer Datei eine Inhalts-Navigation bereitzustellen. Eine andere Möglichkeit der Strukturierung sind Listen: Die gibt es in verschiedenen Varianten, so z.B. die ungeordneten Listen (ul), die geordneten Listen (ol) und die Definitionslisten. Folgende Beispiele zeigen die Verwendung: Ungeordnete Liste: <ul> <li>Eins <li>Zwei </ul> Die gibt es auch mit anderen Aufzählungssymbolen: <ul type="circle"> <li>Eins </ul> <ul type="square"> <li>Zwei </ul> Eine nummerierte Liste: <ol> <li>Eins <li>Zwei </ol> Und eine Definitionsliste <dl> <dt>AboutWebDesign</dt> <dd>AWD ist eine Seite über Webdesign</dd> <dt>Computer</dt> <dd>Eine arbeitssparende Rechenmaschine</dd> </dl> Diesen Code im Browser anzeigen |
||
|
||
5.5.4 Optische GestaltungsmöglichkeitenOptisch lässt sich mit Texten nicht viel reißen: Sie können zwar Farbe, Größe, Schriftart und viele andere Attribute festlegen (siehe CSS-Kapitel), jedoch müssen Sie dabei stets darauf achten, die Regeln für gute Lesbarkeit nicht zu missachten: Usability geht stets vor Design.5.5.4.1 SpaltensatzEine interessante Möglichkeit ist jedoch der Spaltensatz: Direkt mit HTML geht hier leider nichts. Sie müssen also auf Tabellen-Tricks zurückgreifen:<table width="600" cellpadding="0" cellspacing="4" align="center"> <tr> <td bgcolor="black" width="2"><img src="/blindgif.gif" vspace="0" hspace="0"></td> <td style="align: justify" width="297">Spalte 1</td> <td bgcolor="black" width="2"><img src="/blindgif.gif" vspace="0" hspace="0"></td> <td style="align: justify" width="297">Spalte 2</td> <td bgcolor="black" width="2"><img src="/blindgif.gif" vspace="0" hspace="0"></td> </tr> </table> Diesen Code im Browser anzeigen Damit das funktioniert, müssen Sie natürlich irgendwo eine Blindgif-Datei parat haben. Um die sinnvolle, manuelle Aufteilung des Textes auf zwei Spalten kommen Sie übrigens nicht herum. 5.5.4.2 Schriftgrößen-ProblemeDie Benutzer können im Browser eine Schriftgröße einstellen. Das kann Ihr gesamtes Layout zerreißen, wenn Sie nicht eine Pixelgrößen-Definition via CSS vornehmen:body {font-size: 10px;} Diesen Code im Browser anzeigen Ob es aber Sinn macht, dem Surfer seinen Einfluss auf die Schriftgröße zu nehmen, ist mehr als fragwürdig. Wenn Sie das ähnlich sehen, aber trotzdem CSS verwenden wollen, sollten Sie relative Formatierungen einbauen: body {font-size: 110%;} Diesen Code im Browser anzeigen Wenn Sie relative Angaben einsetzen, muss Ihr Layout aber auch darauf ausgelegt sein und sollte nicht von einer größeren Schrift auseinander gerissen werden. Eine solche Flexibilisierung des Layouts ist ohnehin empfehlenswert. |
||
|
