Simsen CSS-Vorlagen

Anpassbare CSS-Vorlagen für Text-Messaging

Die visuellen Regeln sind die Bereiche einer Vorlage, die Sie am häufigsten bearbeiten: Farben, Schriftgrößen und die Abstände um einen Block. Eine CSS-Vorlage für Text-Messaging liefert diese Entscheidungen bereits aufeinander abgestimmt mit, sodass Sie sie nur noch an eine Marke anpassen müssen.

Farben, Schrifthierarchie und Abstände

Messaging-Seiten enthalten viel Text, und Text verzeiht visuelle Ungenauigkeiten kaum. Eine Überschrift, die zwei Nummern zu groß ist, erdrückt die darunter stehende Mitteilung, und eine Karte mit zu engem Innenabstand lässt eine Preisliste unübersichtlicher wirken, als sie ist. Wenn Sie mit einer Vorlage starten, sind diese Proportionen bereits festgelegt; passen Sie eine an, ändert sie sich überall dort, wo sie verwendet wird.

Der Großteil der visuellen Gestaltung einer Messaging-Website konzentriert sich auf wenige Schwerpunkte:

• Schriftgrößen für Überschriften und Fließtext, damit auch lange Mitteilungen gut lesbar bleiben
• die Abstände zwischen übereinanderliegenden Textblöcken, damit Absätze nicht ineinander übergehen
• Button- und Link-Zustände, die von Bildschirm zu Bildschirm wiedererkennbar bleiben
• Hintergründe und Rahmen, die verhindern, dass Tarifkarten optisch miteinander verschwimmen

Wiederkehrende Karten mit stimmigem Erscheinungsbild

Tarifstufen, Funktionsgruppen und Zitatblöcke wiederholen sich auf einer Website, und kleine Abweichungen zwischen ihnen wiegen schwerer, als man denkt. Wenn drei Karten unterschiedliche Innenabstände aufweisen, spürt der Leser, dass etwas nicht stimmt, noch bevor er das Problem genau benennen kann, und der Vergleich der Optionen fällt schwerer. Gemeinsame visuelle Regeln halten diese parallelen Elemente im Einklang, während ihre Inhalte individuell bleiben.

Das Nicepage-Raster-Element übernimmt die Anordnung und hält Karten in Zellen, die sich bei wechselnder verfügbarer Breite dynamisch neu anordnen. Mit den responsiven Modi können Sie anschließend Darstellungsfehler in der engeren Ansicht beheben – denn eine Tarifreihe, die auf einem Laptop übersichtlich wirkt, benötigt größere Schriften und mehr Freiraum, sobald dieselben Karten untereinander angeordnet werden.

Benutzerdefinierte Regeln für Sonderfälle

Standardmäßige visuelle Steuerelemente decken die üblichen Designentscheidungen ab. Wenn ein einzelnes Element aus dem Muster ausscheren muss, bietet Custom CSS Code feinere Kontrolle. Der Custom CSS-Workflow umfasst Regeln für ein einzelnes Element, eine Seite oder die gesamte Website sowie Klassen für ein noch präziseres Ansprechen. Ein hervorgehobener Enterprise-Tarif, ein ungewöhnlicher Button-Zustand oder ein Badge, der direkt an einer Überschrift platziert werden muss, sind genau die Fälle, die wenige Zeilen benutzerdefinierten Code rechtfertigen.

Solche Ausnahmen sollten selten bleiben. Der wahre Nutzen einer Vorlage zeigt sich an dem Tag, an dem sich eine Markenfarbe ändert und eine einzige Bearbeitung einer übergeordneten Regel die Farbe überall dort aktualisiert, wo sie verwendet wurde. Müssen Sie für dieselbe Änderung jedes Element einzeln öffnen, hat das visuelle Designsystem unbemerkt aufgehört, für Sie zu arbeiten.