Wie Sie Ihren eigenen Styleguide entwickeln

Online-Marke­ting: Der Style­guide

Ein Styleguide (Gestal­tungs­richtlinie) ist eine schrift­liche Anleitung für die einheitliche Erstellung und Ge­stal­tung von Texten und sonstigen Kommu­ni­ka­tions­elementen auf dem Internetauftritt. Ein Style­guide hilft gerade bei grösseren Websites das Design auf der gesamten Website einheitlich zu gestalten. Auf diesem Style­guide werden die Cas­ca­ding Style Sheets (CSS) aufgebaut.

Informationen gemäss Stand vom 8.3.2023

Für die Ausgabe auf Bildschirm wird beispielsweise die Datei styles.css verwendet, für den Ausdruck zum Beispiel die Datei print.css. Welche Parameter gehören in den Styleguide?

Inhaltsver­zeich­nis: Styleguides

• Farben
• Fotos, Grafiken, Logos
• Navigationselemente
• Schriften
• Tabellen
• Hyperlinks
• Formulare
• PDF-Dateien
• Barrierefreiheit
• Ikonografie

Farben

• Übersicht
  Notieren Sie jeweils Farbname, Hexcode oder RGB-Wert der einzelnen Gestaltungs­ele­mente.

Fotos, Grafiken, Logos

• Ausmasse notieren
  Grösse in Pixeln: Länge mal Breite, die jeweils zur Verfü­gung steht.
• Gewicht notieren
  Grösse in KB: Dateigewicht so klein wie möglich halten.
• Thumbnails
  Grösse in Pixeln der finger­nagel­grossen Bilder sowie des Fotos, welches entsprechend gelinkt wird.
• Dateiformate
  Als Formate werden .jpg, .gif und .png verwendet.
  Für die Fotos wird das Format .jpg verwendet.
  Für Logos wird das Format .gif oder .png verwendet.
• Bilderrahmen
  Welche Umrandungen werden ggf. verwendet?
• Freisteller
  Es können freigestellte Motive in den Bildbreiten verwendet werden.
• Anmerkungen
  Bei der Auswahl von Fotos ist auf ausreichende fotografische Qualität Wert zu legen.
  Für die Bildschirmdarstellung ist häufig eine Bearbeitung der Kontraste und Farbeinstellungen notwendig.
  Für fotografische Abbildungen ist das JPG-Format vorgesehen. Die Qualität der Komprimierung ist vom Einzelfall abhängig, in den meisten Fällen ist eine Stufe zwischen 60% und 90% sinnvoll. Urheber-, Presse-, Bild- und Per­sön­lich­keits­rechte sind unbedingt zu beachten!

Navigations­ele­men­te

• Klassifizierung
  Notieren Sie Farben, Grössen und allfällige Mouse-over-Effekte.
• Trennlinien
  Notieren Sie Farben, Art und Grösse.

Schriften

• Standardschrift
  Welche Standardschrift wird eingesetzt und welche Ersatzschriften werden angeboten?
• Schriftenparameter
  Angabe der Schriftart und -familie, z. B. font-family: Arial,Helvetica
  Schriftauszeichnung, z. B. font-weight:600 oder font-style: italic
  Grösse, z. B. font-size: 100%
  Schriftausrichtung, z. B. text-align: left
  Farbe, z. B. color: #000
  Rahmen, z. B. Border=1
  Zeilenhöhe, z. B. line-height: 120%
  Abstände, z. B. padding-left: 10px
  Abstände, z. B. margin: 10px
  Hintergrundgrafik, z. B. background-image: url(‘images/hintergrund.gif’);
  Anzahl der Hintergrundwiederholungen, z. B. background-repeat: repeat-y
• Titel
  H1 verwendet für Titel der Ebene 1
  H2 verwendet für Titel der Ebene 2
  H3 verwendet für Titel der Ebene 3
  H4 verwendet für Titel der Ebene 4
  H5 verwendet für Titel der Ebene 5
  H6 verwendet für Titel der Ebene 6
• Unsortierte Listen
  Definieren Sie die ungeordnet aufzählende Listenelemente. Farben, Grösse, welche Markierungen werden ver­wen­det? (HTML-Standard-Elemente oder eingebettete Grafiken)
• Sortierte Listen
  Geordnete Listen werden standardmässig mit nume­rischer Ordnung verse­hen.

Tabellen

• Datentabellen
  Tabellen werden zur besseren Orientierung in den Zeilen <tr> beispielsweise gestreift an­ge­zeigt. Eventuelle Kopf­zellen <th>, die sich an den vier Rändern einer Tabelle (typischerweise links und oben) befinden, werden etwas dunk­ler angezeigt.
• Schriftgrösse
  Die Schriftgrösse ist per Stylesheet-Definition für die entsprechende Klasse auf zum Beispiel 90% gesetzt.
• Mouse-Over-Effekt
  Bei einem Mausfokus wird die entsprechende Tabellenzeile farblich hervorgehoben.

Hyperlinks

• Interne Links
  Interne Hyperlinks sind dem Standard entsprechend unterstrichen.
• Externe Links
  Externe Hyperlinks sind dem Standard entsprechend unterstrichen und werden durch ein entsprechendes Symbol gekennzeichnet.
• Design
  Definition der Farben und Action (unterstrichen/nicht unterstrichen) der Links von
  ➤ unbesuchtem Link
  ➤ besuchtem Link (Visited Links)
  ➤ aktuellem Link (Active Links)
  ➤ Fokussierte Links (Hovered Links)

Formulare

• Feldgruppen anzeigen
  Feldgruppen von Formularen sollten mit dem Tag <fieldset> umfasst und durch eine <legend> beschrieben werden. Auf die Verwendung von <label> ist zu achten.
• Validierung
  Alle fehlenden Pflichtangaben werden nach einer Validierung zum Beispiel in einem rot umrahmten Kasten am Anfang der Seite aufgelistet. Im Formular selbst sind die Feldbe­schreibung und das Feld rot hinterlegt. Die Schrift wird bei­spiels­weise weiss dargestellt.
  Validierungen sollten aus Gründen der Barriere­freiheit prinzipiell nicht per JavaScript, sondern auf dem Server vor­ge­nom­men werden. (Diese Methode ist zudem wesentlich sicherer, da sie nicht durch den Anwender aus­ge­he­belt werden kann.)

PDF-Dateien

• Downloads
  Spezielle Texte können als PDF-Dateien zur Verfügung gestellt werden. Angezeigt wird jeweils der Dateiname, das Aktualisierungsdatum, die Dateigrösse und die Anzahl der Seiten im Dokument.
• Animationen, Filme
  Videodateien, Sounddateien, lade intensive Animationen und andere Dateiformate, die ein spezielles Plugin vor­aus­setzen, sollten nicht in eine Inhalts­seite direkt eingebunden werden, sondern erst auf Anfrage des Nutzers geladen werden.
  Die Datei kann in einem Popup-Fens­ter angezeigt werden oder es wird direkt auf die Multi­media-Datei ver­wiesen, die einen externen Player öffnet.
  Angegeben wird das Medium, die Technik und die Dateigrösse (sowie das Aktualisierungsdatum) zum Beispiel Video anzeigen, WMV-Datei, 2.2 MB

Barrierefreiheit

• a) Für behinderte Leser
  Es ist darauf zu achten, dass alternative Textbeschreibungen eingebunden werden, um die Barrierefreiheit zu ge­währ­leis­ten. Die Texte müssen, wie alt- und title-Attribute von Bildern, den Inhalt des Films be­zie­hungs­weise der Anima­tion wiedergeben. Ausserdem muss der Nutzer jederzeit Bewegungen an­hal­ten können.
• b) für browserunabhängige Pro­gramme

Ikonografie

• Übersichtlichkeit der Ikonen
  Eine in Gestaltung und Ver­wendung durchgängige Ikonografie hilft Inter­aktions­prinzipien zu verdeutlichen.
  Einheitliche Symbole ver­wenden für
  ➤ Drucken
  ➤ Nach oben springen
  ➤ Zurück zur letzten Seite
  ➤ PDF-Dokumente
  ➤ Externe Links
  ➤ Videos
  ➤ Sounds

Autor: Walter B. Walser, kundennutzen.ch