Simsen CSS-Vorlagen

Anpassbare CSS-Vorlagen für SMS

Die visuellen Regeln sind die Elemente einer Vorlage, die Sie am häufigsten bearbeiten: Farben, Schriftgrößen und der Abstand zwischen den Blöcken. Eine CSS-Vorlage für SMS enthält diese Vorgaben bereits und sorgt für ein einheitliches Erscheinungsbild. Ihre Aufgabe besteht nun darin, sie an Ihre Marke anzupassen.

Farben, Schriftgröße und Abstände

SMS-Seiten enthalten viel Text, und Text verzeiht keine visuellen Details. Eine zu große Überschrift lässt die darunter stehende Nachricht verschwinden, und eine Karte mit zu geringem Abstand lässt eine Preisliste schwerer lesbar erscheinen. Mit einer Vorlage sind diese Proportionen bereits festgelegt, und jede Anpassung ändert sie an allen Stellen, an denen sie verwendet werden.

Die visuelle Gestaltung einer Messaging-Website konzentriert sich größtenteils auf wenige Bereiche:

• Überschriften- und Textgrößen, die lange Ankündigungen lesbar halten
• Abstände zwischen gestapelten Textblöcken, damit Absätze nicht übereinander liegen
• Schaltflächen- und Linkstatus, die auf allen Bildschirmen erkennbar bleiben
• Hintergründe und Rahmen, die verhindern, dass sich die einzelnen Tarifkarten überschneiden

Wiederkehrende Karten mit einheitlichem Layout

Tarifstufen, Funktionsgruppen und Angebotsblöcke wiederholen sich auf einer Website, und kleine Inkonsistenzen wirken sich stärker aus als man denkt. Wenn drei Karten unterschiedliche Abstände aufweisen, merkt der Leser, dass etwas nicht stimmt, bevor er den Fehler erkennt, und der Vergleich der Optionen wird langsamer. Gemeinsame visuelle Regeln sorgen dafür, dass diese Karten einheitlich gestaltet sind, auch wenn sich ihre Inhalte unterscheiden.

Das Nicepage-Grid-Element steuert die Anordnung und platziert die Karten in Zellen, die sich an die verfügbare Breite anpassen. Responsive Modi ermöglichen es Ihnen, die Darstellungsfehler in schmaleren Ansichten zu korrigieren, da eine Tarifreihe, die auf einem Laptop gut lesbar ist, im Stapelbetrieb größere Schrift und mehr Abstand benötigt.

Benutzerdefinierte Regeln für seltene Fälle

Standardmäßige visuelle Steuerelemente decken gängige Entscheidungen ab. Wenn ein Element vom Standard abweichen soll, bietet benutzerdefinierter CSS-Code eine feinere Steuerung. Der Workflow für benutzerdefiniertes CSS umfasst Regeln für einzelne Elemente, Seiten oder die gesamte Website sowie Klassen für eine präzisere Zielgruppenansprache. Ein hervorgehobenes Enterprise-Level, ein ungewöhnlicher Button-Zustand oder ein Badge, das bündig mit einer Überschrift abschließen muss, sind Beispiele für Fälle, in denen ein paar Zeilen benutzerdefinierter Code sinnvoll sind.

Halten Sie solche Ausnahmen selten. Der Wert einer Vorlage zeigt sich beispielsweise, wenn sich die Markenfarbe ändert und eine einzige Änderung an einer gemeinsamen Regel überall dort aktualisiert wird, wo die alte Farbe verwendet wurde. Wenn dieselbe Änderung bedeutet, jedes Element einzeln zu öffnen, funktioniert das visuelle System nicht mehr.