kundennutzen.ch: Praxisnahes Online-Marketing-Magazin zum Thema Kundennutzen für Websites. In diesem Magazin erfahren Sie Tipps und Tricks für KMU rund um Online-Marketing mit den Schwerpunkten Website-Promotion und Website-Optimierung.
[ 
]
[ InfoService ]
[ Sitemap ]
[ Stichworte ]
[ Twitter ]
[ Blog ]
[ Google+ ]
Online-Marketing Checkliste
Wie man eigene Styleguides entwickelt
Ein Styleguide (Gestaltungsrichtlinie) ist eine schriftliche Anleitung für die einheitliche Erstellung und Gestaltung von Texten und sonstigen Kommunikationselementen auf dem Internetauftritt. Ein Styleguide hilft gerade bei grösseren Websites das Design auf der gesamten Website einheitlich zu gestalten. Auf diesem Styleguide werden dann die Cascading Style Sheets (CSS) aufgebaut.
Für die Ausgabe auf Bildschirm wird z. B. die Datei styles.css verwendet, für den Ausdruck z. B. die Datei print.css. Welche Parameter gehören nun in das Styleguide?
Farben
- Übersicht
Notieren Sie jeweils Farbname, Hexcode oder RGB-Wert der einzelnen Gestaltungselemente.
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 fingernagelgrossen Bilder sowie des Fotos, welches entsprechend gelinkt wird. - Dateiformate
Als Formate werden .jpg, .gif und .png verwendet.
Für die Bilder werden die Format .jpg sowie .png verwendet.
Für Logos wird das Format .gif oder .png verwendet. - Bilderrahmen
Welche Umrandungen werden ggf. verwendet? - Freisteller
Es können auch 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 Persönlichkeitsrechte sind unbedingt zu beachten!
Navigationselemente
- Klassifizierung
Notieren Sie Farben, Grössen und allfällige Mous-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: z. B. verwendet für Titel der Ebene 1
H2: z. B. verwendet für Titel der Ebene 2
H3: z. B. verwendet für Titel der Ebene 3
H4: z. B. verwendet für Titel der Ebene 4
H5: z. B. verwendet für Titel der Ebene 5
H6: z. B. verwendet für Titel der Ebene 6 - Unsortierte Listen
Definieren Sie die ungeordnet aufzählende Listenelemente. Farben, Grösse, welche Markierungen werden verwendet? (HTML-Standard-Elemente oder eingebetete Grafiken) - Sortierte Listen
Geordnete Listen werden standardmässig mit numerischer Ordnung versehen.
Tabellen
- Datentabellen
Tabellen werden zur besseren Orientierung in den Zeilen <tr> z. B. gestreift angezeigt. Eventuelle Kopfzellen <th>, die sich an den vier Rändern einer Tabelle (typischerweise links und oben) befinden, werden etwas dunkler angezeigt. - Schriftgrösse
Die Schriftgrösse ist per Stylesheet-Definition für die entsprechende Klasse auf z. B. 90% gesetzt. - Mouse-Over-Effekt
Bei einem Mausfokus wird die entsprechende Tabellenzeile ggf. farblich hervorgehoben.
Hyperlinks
- Interne Links
Interne Hyperlinks sind dem Standard entsprechend unterstrichen. - Externe Links
Externe Hyperlinks sind dem Standard entsprechend unterstrichen und werden z. B. 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 z. B. in einem rot umrahmten Kasten am Anfang der Seite aufgelistet. Im Formular selbst sind die Feldbeschreibung und das Feld rot hinterlegt. Die Schrift wird z. B. weiss dargestellt.
Validierungen sollten aus Gründen der Barrierefreiheit prinzipiell nicht per JavaScript, sondern auf dem Server vorgenommen werden. (Diese Methode ist zudem wesentlich sicherer, da sie nicht durch den Anwender ausgehebelt 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, ladeintensive Flash-Animationen und andere Dateiformate, die ein spezielles Plugin voraussetzen, sollten nicht in eine Inhaltsseite direkt eingebunden werden, sondern erst auf Anfrage des Nutzers geladen werden.
Die Datei kann in einem Popup-Fenster angezeigt werden oder es wird direkt auf die Multimedia-Datei verwiesen, die dann einen externen Player öffnet.
Angegeben wird das Medium, die Technik und die Dateigrösse (sowie ggf. das Aktualisierungsdatum) z. B. 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 gewährleisten. Die Texte müssen, wie alt-und title-Attribute von Bildern, den Inhalt des Films beziehungsweise der Animation wiedergeben. Ausserdem muss der Nutzer jederzeit Bewegungen anhalten können. - b) für Browserunabhängige Programme
Ikonografie
- Übersichtlichkeit der Ikonen
Eine in Gestaltung und Verwendung durchgängige Ikonografie hilft Interaktionsprinzipien zu verdeutlichen.
Einheitliche Symbole verwenden z. B. für
- Drucken
- nach oben
- Zurück zur letzten Seite
- PDF-Dokumente
- Externe Links
- Videos
- Sounds
Autor: Walter B. Walser, task-force.ch Webpromotion
Über den Autor: Walter B. Walser ist Internet-Kaufmann. Er lebt seit 17 Jahren vom Internet, beratet KMUs im Zusammenhang mit deren Internetauftritt und hat sich auf die Website-Promotion (Traffic-Generierung) spezialisiert. Sein Profil bei Google+
Sie wollen keinen neuen Beitrag vom Online-Marketing-Magazin verpassen? Abonnieren Sie den kostenlosen InfoService, der Sie per E-Mail über neue Beiträge orientiert.
Empfehlung
Angebote
Neuste Beiträge
Knüller
kundennutzen.ch
Ein Projekt von
task-force.ch Website-Promotion