Styleguide

Untertitel sind p's mit der Klasse "subline".

Dieser Styleguide bietet eine anschauliche Dokumentation der Elemente, die in wfDynamic mit dem Editor zum Bearbeiten der Seiteninhalte genutzt werden können. Neben Erläuterungen zum richtigen Einsatz der verfügbaren Textauszeichnungen dient der Styleguide natürlich auch zur visuellen Referenz.

Zur Einhaltung der Barrierefreiheit und allgemeinen Webstandards ist es wichtig, einige grundlegende Regeln zu beachten. Im Prinzip hängt die Art der Auszeichnung eines Textelementes immer von seiner Bedeutung ab. Überschriften werden als solche formatiert, Aufzählungen als Listen, Zitate als Zitate usw.

Zwischenüberschriften wie diese erleichtern das Überfliegen langer Artikel

Durch Zwischenüberschriften lassen sich lange Texte in sinnvolle Abschnitte aufteilen. Sie sind außerdem eine wichtige Hilfe für Benutzer von Screenreadern: Seitenbesucher mit Seh- oder Leseschwäche lassen sich die Überschriften auf einer Seite vorlesen, um einen schnellen Eindruck vom Inhalt zu bekommen und zu entscheiden, ob sie auch den Rest der Seite hören wollen oder nicht.

Gliederung von Texten in Absätze

Normale Texte werden durch Drücken der Eingabetaste am Ende eines logischen Abschnitts vom Editor automatisch in Absätze unterteilt, die auf der Website durch Abstand vom vorherigen und folgenden Absatz oder anderen Textbausteinen getrennt werden.

Weitere Untergliederung der logischen Textabschnitte

Soweit sinnvoll, können zusammenhängende Textabschnitte mit Zwischenüberschriften 2. Ordnung nochmals weiter unterteilt werden. Zwischenüberschriften sollten aber tatsächlich nur zur Gliederung, und nicht zur einfachen Hervorhebung von Textstellen genutzt werden.

Betonung einzelner Wörter, Satzteile oder Sätze

Sollen bestimmte Textstellen hervorgehoben werden, stehen zur Betonung kursiver Text, sowie zur starken Betonung fetter Text zur Verfügung.

Hyperlinks

Um einen Textlink im Fließtext einzufügen, markiert man den Text und klickt in der Symbolleiste auf das Linksymbol (in Form einer Kette).

Aussagekräftige Links erleichtern die Benutzbarkeit für den Leser erheblich: Linktexte wie "hier", "klick" oder "download" sollten so weit wie möglich vermieden werden. Gute Links beschreiben sich selbst, und sagen aus was den Besucher erwartet, wenn er dem Link folgt. Der Linktext könnte z. B. der Titel der verlinkten Seite sein, oder der Name einer Datei, die heruntergeladen werden soll. Ein guter Test ist, sich zu fragen, ob der Linktext ohne den Satzzusammenhang Sinn macht.

Das heißt jedoch nicht, dass Linktexte immer eine komplette Zusammenfassung dessen geben müssen, was sich hinter dem Link verbirgt. Für ausführliche Beschreibungen ist der Linktitel gedacht (das Feld "Beschreibung" im Linkdialog). Es gilt, eine angemessene Balance zu finden.

Interne Links

Links zu anderen Unterseiten des eigenen Webauftritts sollten immer über den Dialog des Editors referenziert werden, anstatt die URL einfach zu kopieren und in das Textfeld einzufügen. Dazu klickt man einfach auf den "Browse"-Button (mit drei Punkten beschriftet) und wählt dann das zu verlinkende Dokument aus der Seitenhierarchie aus (Ordner mit Doppelklick öffnen bis "Dokument selbst" auswählbar ist, dann mit "Ok" bestätigen). Damit bleiben eingebaute Links intakt, auch wenn sich später einmal die Dokumentenhierarchie oder die URL der verlinkten Seite ändert.

Externe Links

Externe Links werden genauso über das Linksymbol hinzugefügt, aber anders als Interne mit absoluten URLs in Form von http://www.webfactory.de verlinkt. Man kopiert hierzu die komplette URL und fügt sie in das Eingabefeld ein.

Bilder

Bilder können im Editor über das Icon in der Symbolleiste hinzugefügt werden. Im sich öffnenden Dialog wählt man das gewünschte Bild aus der Mediendatenbank aus, die kleine Vorschau soll hierbei das Auffinden der richtigen Datei erleichtern. Nach einem Klick auf "Ok" öffnet sich ein weiterer Dialog mit Möglichkeiten, die Formatierung des Bildes zu beeinflussen. Große Priorität für die Barrierefreiheit hat die Wahl eines aussagekräftigen Beschreibungstextes. Seitenbesucher mit Sehbehinderung können sich diese Beschreibung vorlesen lassen, um ebenfalls Zugang zu den durch das Bild vermittelten Informationen zu erlangen.

Darüber hinaus kann im Dialog noch die Bildgröße verändert, und die Ausrichtung des Bildes in Relation zum umgebenden Text (links- oder rechtsbündig) ausgewählt werden. Die Option "Proportionen einschränken" bitte immer auf "Ja" belassen, da die Bilder sonst verzerrt werden!

Daten, Daten, Daten.. aber ist es eine Liste oder doch eine Tabelle?

Listen

Eine Liste sollte gewählt werden, wenn es um eine reine Aufzählung von Daten geht. Je nach Art der Daten bietet sich eine nummerierte oder eine ungeordnete Aufzählungsliste an.

Eine nummerierte Liste sieht so aus:

1. Erstens
2. Zweitens
3. Drittens

Und so eine Aufzählungsliste:

• Ein Punkt
• Noch ein Punkt
• Mehr Punkte
• Mehr Punkte
• Mehr Punkte

Tabellen

Eine Tabelle ist immer dann die erste Wahl, wenn man tabellarische Daten darstellen möchte; also Daten, die zweidimensionale Beziehungen haben. Ein Beispiel:

Diese Daten stehen sowohl in horizontaler (Produkt mit Einsatzbereich und Preis) als auch in vertikaler (Liste von Produkten) Beziehung zueinander. Mit einer Tabelle lassen sich die Zusammenhänge einfach und übersichtlich darstellen.

Die Formatierung von Tabellen im Editor funktioniert am Besten über das Kontextmenü (Rechtsklick auf die Tabelle, Unterpunkt "Tablle"). Dort lassen sich markierte Zeilen als Titelzeilen auszeichnen (auch Tabellenkopf oder Kopfzeile gennant), sowie die linke Spalte als Titelspalte, in der den einzelnen Zeilen Überschriften zugewiesen werden. Außerdem sollten eine kurze Zusammenfassung und eine Tabellenüberschrift formuliert werden.

Zitate

Zitate werden meistens eingrückt und optisch gesondert gekennzeichnet:

Dies ist ein Zitat-Block. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.