Styleguide für Webseiten - das sind die Standards

Auch wenn das Internet frei ist, so haben sich dennoch einige Standards im Laufe der vielen Jahre etabliert, die beim Besucher auf Wohlwollen stoßen und gerne aktzeptiert werden.

Menüs

1. Menüs sollten entweder links oder oben angebracht sein.
2. Menüs sollen nicht fixiert sein, da in mobilen Darstellung Platz verloren geht
3. Menüs sollten nicht tiefer als zwei Ebenen geschachtelt sein
4. Ein Footer gehört zum guten Ton!
5. Footer sollte unten sein! :)
6. Footer darf nicht fixiert sein
7. Footer sollte mindestens ein Copyright und eine Mail-Adresse enthalten

Die linke oder obere Menüposition hat sich aus praktischen Erfordernissen ergeben, denn in responsiven und mobilen Layouts, rutscht das Menü dadurch automatisch nach oben und wird vor dem Content angezeigt..

Content

1. der Inhalt soll eine feste Breite haben um die Laufweite von Sätzen zu begrenzen
2. weißer Hintergrund und dunkelgrauer Text
3. alternativ: grauer Hintergrund und heller Text (kein Weiß)
4. serifen- non-serifen Schriften können gleichermaßen genutzt werden
5. Merspaltigkeit ist auf dem Desktop PC immer noch sehr beliebt, verliert mobil jedoch seine Wirkung
6. Datum an Beiträgen sind in chronologischen Blogs sinnvoll ansonsten sollten sie darauf verzichten
7. "mehr lesen..." diese Buttons sind zwar seh angesagt, jedoch aus SEO-Sicht fatal. Es ist besser einen klickbaren Titel anzubieten
8. Blätter-Buttons und Paginatoren sind zwar verbreitet aber der Mensch scrollt lieber als das er klickt, da der kognitive Aufwand beim Klicken höher ist

Weißer Hintergrund und schwarze Schrift war lange Zeit der Standard, jedoch setzt sich der ermüdungsfreiere graue Hintergrund mit heller Schrift immer mehr durch. Dennoch hat das Farbschema der Webseite auch Wirkung auf das Image des Unternehmens. Helle Webseiten wirken positiv, freundlich und dynamisch, während dunkele Farbschematas eher düster und bedrückend wirken.

Auch die Verwendung von Serifen- oder Nicht-Serifen Schriften hat sich mittlerweile aufgelöst. Aufgrund exzellenter Monitorauflösungen sind beide Varianten möglich und akzeptiert.

Videos und Medien

1. Als Bildformat hat sich WebP etabliert und sollte statt JPG oder PNG genutzt werden
2. Videos dürfen nicht automatisch starten (Datenverbrauch an mobilen Endgeräten beachten)
3. 1920x1080 ist Standard, 4k Videos sind nicht etabliert
4. SVG-Grafiken sind mittleweile sehr verbreitet und wirken positiv auf das Datenvolumen

Beim inflationären Gebrauch von Medien denken sie an Handys

iFrames

1. Verzichten Sie auf iFrames, denn Sie haben den externen Content nicht unter eigener Kontrolle
2. iFrames lassen sich kaum mit HTML oder CSS formatieren
3. YouTube-Videos sind aktuell noch eine Ausnahme, denn diese lassen sich nur mit iFrames sinnvoll einbinden

iFrames waren schon immer ein Dorn im Auge von Google und co, daher bestraft Google Webseiten mit iFrames mit schlechterem Ranking. iFrames sind generell kritisch zu sehen, denn was passiert mit Ihrer seriösen Webseite, wenn sich der Betreiber des iFrames-Content plötzlich dazu entschließt, pornografischen Inhalt auf seine Seite zu legen? iFrames sollten daher nicht mehr verwendet werden!

Sonstiges

1. Verzichten Sie auf Linien, da diese streng wirken und den Lesefluss blockieren
2. Schatten sind durchaus wieder modern. Dezent eingesetzt erzielen sie eine gute Wirkung
3. Icons im Flat-Design sind aktuell sehr beliebt und sind dem Leser gefällig
4. Sharing-Buttons haben einen negativen Ruf - sofern es für Sie nicht wichtig ist, verzichten Sie diese Sharing-Elemente
5. Machen Sie dem Leser deutlich, ob er bei Links die Seite verlässt oder sich ein neuer Reiter öffnet
6. Vermeiden Sie weitesgehend den Einsatz von Rahmen, diese wirken unangenehm für das Auge, da das menschliche Auge unbewußt den Linien folgt - das kostet Zeit und erhöht den kognitiven Aufwand

Hinweis: die oben angeführten Punkte müssen in keinster Weise akribisch und vollständig umgesetzt werden. Sie sollen lediglich zeigen, welche Standards aktuell sehr beliebt sind und mit welchen Layouts Sie die beste Akzeptanz beim Leser erzielen können. Bedenken Sie daher auch, das nicht alle Vorschläge zu jedem Projekt oder jedem Unternehmen passen können. Hier ist Kreativität gefragt, ein individuelles Theme unter maximaler Berücksichtigung der obigen Punkte zu erzeugen - das ist das Ziel.

Weiterführende Links

• IONOS: Der Styleguide... Designkonzept...
• PC-Magazin: Erscheinungsbild Ihrer Webseite...
• Sandstein: Styleguide Designkonzept für Ihre Webseite
• T3n: 7 Beispiele für perfekten Styleguide
• mobirise: Download HTML Templates