Styleguide für Webseiten - das sind die Standards

Möchten Sie Themes, Layouts und Designs erstellen die auf hohe Akzeptanz beim Besucher stoßen, dann sollten Sie sich zuvor diesen Styleguide durchlesen.

CMS Workbench Bludit Pico WordPress Smarty Twig Automad PHP
CSS von Animation bis Responsiv

CSS von Animation bis Responsiv - Das Buch für den Webentwickler in der neuen Auflage. Hier findet sich das vollständige Wissen zu CSS und Co. in einem Band. Einsteiger erhalten eine fundierte Einführung, professionelle Webentwickler einen Überblick über alle CSS-Technologien und Praxislösungen für CSS-Layouts sowie Tipps, um aus dem täglichen Webeinerlei herauszukommen. Zahlreiche aktuelle Themen wie HTML5 und CSS3, CSS-Transitions, objektorientiertes CSS, JavaScript-Fallbacks, Responsive Webdesign mit CSS sowie viele Praxisbeipiele machen das Buch zu einem unentbehrlichen Werk für die tägliche Arbeit. (*

kaufen...
Inhaltsverzeichnis
  •   Menüs
  •   Content
  •   Videos und Medien
  •   iFrames
  •   Sonstiges
  •   Weiterführende Links

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


Styleguide Design Theme Layout
22.02.2022
Oliver Lohse

Es wurden noch keine Kommentare verfasst, sei der erste!

Weitere passende Artikel

_____

So steuern Sie die Templatevorgabe in Beiträgen mit dem CMS Bludit. Sie können den Tamplatenamen bei der Erstellung von Beiträgen im Backend angeben.
Brandings der Entwickler sind natürlich eine gute Sache, jedoch dürfen sie auch abgestellt werden. Wie das für das Bludit Theme DEVTHEME geht, lesen Sie hier
Im Bludit Theme DEVTHEME wird das Label "latest Post" angezeigt. Manchmal kann das störend sein. Entfernen Sie das Label doch einfach in der home.php
Mit diesem Coding können Sie verschiedene Templates starten, jenachdem ob der Leser eine Seite, Kategorie, home oder Tag wählt. Bludit kennt vier Seiten-Typen
Wenn Sie Bludit-Themes und Templates entwickeln dann können Sie dem Leser die Möglichket geben das Theme live umzuschalten für den ersten Eindruck.
Das Bludit Theme TYPERITE ist vielversprechend, da es ein Optimum an Customizing ermöglicht. Entfernen Sie das Branding aus dem Footer - das ist erlaubt.
Mit diesem Design Pattern schreiben Sie gute Themes die Sie auch noch in vielen Jahren weiter Ausbauen können. Erzeugen Sie einfache modulare Komponenten.

Download - Plugins -

Download • kostenlos • Plugin • Template • Theme
Kostenlose Plugins und Templates für Bludit, Pico CMS, WonderCMS, GetSimple, WordPress und co, zum kostenlosen Download
Teil 1 - Der Einstieg in das Templating mit dem freien CMS GetSimple - der Name ist Programm, denn dieses CMS ist klar und leicht beherrschbar strukturiert.
Teil 3 - Ein GetSimple Template erstellen. In Verbindung mit dem freien und beliebten CSS-Framework Bootstrap eine leichte Sache auf dem Weg zum eigenen Blog.
Dieser Beitrag zeigt ein einfaches Demo Template für die JavaScript basierte Template Engine Handlebars. Dieses Template ist sogar offline funktionsfähig.
Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.
Werden Sie zum Template-Entwickler und beginnen mit leichten Arbeiten, portieren Sie Ihre Templates später in die großen CMS wie WordPress, Bludit oder Joomla
Laden Sie Themengebundene Logos und Bilder mit Hilfe der Helper Klasse Theme oder der Konstante DOMAIN_THEME des CMS Bludits. Das ist die bevorzugte Variante.
Mit diesem Trick legen Sie neue Datenbank-Felder in der JSON-Datenbank des WonderCMS vollkommen automatisiert an - mit nur einer Codezeile im WonderCMS Theme.
WordPress Easy - Redaktion

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.