Logo

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.

Divoom Sling Bag mit Pixel Art LED-Display

Divoom Sling Bag mit Pixel Art LED-Display - Eingebautes LED-Panel und Stromversorgung über eine Powerbank. Sie können Echtzeit-Zeichnungen erstellen, indem Sie die Divoom-App verwenden, die auf dem Rucksack angezeigt wird und die hellen Pixelkunstbilder und Animationen auf dem 16 x 16-Pixel-"Monitor" zeigt, was zum Thema des coolen Stils beiträgt. Hinweis

kaufen...
Automad Bludit Coast GetSimple GRAV Handlebars Java PHP Pico Smarty Templating Typemill WonderCMS WordPress yamlCMS

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.

Passend:


Ein eigenes Theme für Bludit CMS leicht entwickeln

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.

Templating 3 ein einfaches Layout für das CMS GetSimple anlegen

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.

Standardisiertes PHP Formular Designpattern entwickeln

Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.

Designpattern für ein übersichtliches und flexibles CMS Theme

Mit diesem Design Pattern schreiben Sie gute Themes die Sie auch noch in vielen Jahren weiter Ausbauen können. Erzeugen Sie einfache modulare Komponenten.

Anleser im Bludit CMS Template DEVTHEME einstellen

Stellen Sie den Anleser des Beitrags im Bludit Template DEVTHEME individuell ein, indem Sie die Anzahl anzuzeigender Zeichen mit einem PHP Befehl begrenzen.

Den Footer im Template DEVTHEME des Bludit CMS anpassen

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 Theme DEVTHEME latest Post in Bludit CMS entfernen

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

Erstellen Sie einen Theme einfachen Umschalter für Bludit

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.

Themengebundene Icons und Logos sicher in Bludit Themes laden

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.

Templating, funktionfähiges Template für das CMS GetSimple

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.

Democode und Beispieltemplate für Handlebars in JavaScript

Dieser Beitrag zeigt ein einfaches Demo Template für die JavaScript basierte Template Engine Handlebars. Dieses Template ist sogar offline funktionsfähig.

YAML Syntax in Pico CMS in der Theme Config auslesen

Die YAML Syntax anhand einer Liste erläutert, die beispielsweise Affiliate oder CTA Links aufnimmt und die vom Twig-Template ausgelesen werden können.

Werden Sie Template-Entwickler so starten Sie Templating Tipps

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

Ein neues Datenbanfeld für WonderCMS in der json-DB anlegen

Mit diesem Trick legen Sie neue Datenbank-Felder in der JSON-Datenbank des WonderCMS vollkommen automatisiert an - mit nur einer Codezeile im WonderCMS Theme.


Meta: Instagram CMSWorkbench.de GIMP-Handbuch.de Kontakt Impressum Datenschutz