Politik CSS-Vorlagen

Kreative Politik-CSS-Vorlagen

Politik-CSS-Vorlagen werden bereits vorformatiert geliefert: aufeinander abgestimmte Themenkarten, Zitate von Unterstützern mit einheitlicher Gestaltung und Unterstützer-Buttons, die wie aus einem Guss wirken. Es bleibt Ihnen überlassen, dieses visuelle System an eine bestimmte Kampagne anzupassen – und die lohnenswertesten Vorlagen erfordern dabei die geringsten Anpassungen.

Sich wiederholende Komponenten gestalten

Kampagnenmaterial wiederholt seine Formen mit unterschiedlichen Inhalten. Daher treffen Sie die meisten visuellen Entscheidungen einmal und vererben sie auf alle Elemente desselben Musters. Drei davon tragen die visuelle Identität:

1. Farbe, einheitlich gehalten im Header, auf den Themenkarten und auf dem Unterstützer-Button, mit einem separaten Status für dringende Mitteilungen.
2. Typografie, nach Funktion aufgeteilt, sodass der Kampagnenslogan, der Name des Kandidaten und die Themenüberschriften jeweils ein unterschiedliches Gewicht erhalten.
3. Button-Hierarchie, da der primäre Aufruf und ein sekundärer Link sich niemals optisch gleich stark aufdrängen sollten, inklusive Hover- und Fokus-Zuständen.

Karten sind der Bereich, in dem sich das System beweisen muss. Eine Themenkarte mit einem Titel aus zwei Wörtern und eine mit einem ganzen Satz müssen dennoch bündig abschließen, was auf Abstände, Überschriftenbehandlung und Kartenhöhe ankommt. Zitate von Unterstützern sind anspruchsvoller, weil ein Unterstützer nur eine Zeile verfasst und der nächste einen ganzen Absatz.

Themen-Raster auf Mobilgeräten

Eine Zeile mit sechs Themenkarten funktioniert auf dem Desktop, ist auf einem Smartphone jedoch unmöglich. Das Grid Element platziert zusammengehörige Elemente in Zellen und passt diese Anordnung für schmalere Bildschirme an, sodass dieselben Positionen als einspaltiges Layout dargestellt werden. Drei Details brechen dabei am häufigsten um:

1. Lange Bezeichnungen von Gesetzesinitiativen, die in eine dritte Zeile umbrechen und die restliche Karte verzerren.
2. Ein Kandidatenporträt, das seine Desktop-Proportionen beibehält, während die Biografie daneben zu einem schmalen Streifen zusammengedrückt wird.
3. Veranstaltungslisten, bei denen Datum, Veranstaltungsort und Anmeldelink nicht mehr bündig sind, sobald sie untereinander angeordnet werden.

Namen von Kandidaten sind der andere Härtetest. Ein vollständiger Name mit akademischem Titel und langer Amtsbezeichnung passt selten in den Platz, den eine Demo vorsieht. Die Überschrift bricht entweder sauber um oder zerstört den gesamten Block.

Ausnahmen, die man von Hand schreiben sollte

Einige Elemente benötigen eine eigene Regel. Eine hervorgehobene Kampagnenankündigung oder ein dringender Hinweis auf eine verlegte Kundgebung erfordern möglicherweise einen Farbstatus, den das restliche Design nicht verwendet. Nicepage unterstützt dafür Custom CSS Code, und die Custom-CSS-Dokumentation beschreibt Regeln, die auf ein einzelnes Element, einen einzelnen Abschnitt oder die gesamte Website angewendet werden können.

Halten Sie diese Ausnahmen selten. Ein visuelles System, das Sie ständig überschreiben müssen, war von Anfang an die falsche Wahl. Das sicherste Zeichen eines guten Systems ist, wie es sich bei echten Kampagneninhalten verhält: lange Kandidatennamen, ungleichmäßige Zitate und eine Veranstaltungsliste, die stetig anwächst.