Teile CSS-Vorlagen

CSS-Vorlagen für Teilekataloge mit vielen ähnlichen Artikeln

Zwei Produktkarten in einem Teilekatalog können identisch aussehen, aber völlig unterschiedliche Bedeutungen haben. Ein Artikel ist sofort lieferbar, der zweite ist eine Sonderbestellung mit sechs Wochen Wartezeit, und der dritte wurde durch eine neuere Version ersetzt. Die Gestaltung macht diesen Unterschied sichtbar, bevor jemand klickt, und CSS-Vorlagen für Teile bieten Lieferanten visuelle Regeln für diese Unterscheidungen.

Lagerbestandsstatus auf identischen Karten

Lagerbestände ändern sich schneller als Produktfotos. Daher übernehmen die zugehörigen Signale den Großteil der täglichen Arbeit.

Einige dieser Status verdienen eine gesonderte Beschreibung:

• Auf Lager, geringer Lagerbestand und Nachbestellung, unterschieden durch ein aussagekräftigeres Signal als nur die Farbe.

• Sonderbestellungen, bei denen die Lieferzeit neben dem Preis angegeben wird.

• Ausgelaufene Komponenten mit Hinweis auf das jeweilige Ersatzprodukt.

• Bestätigte Kompatibilität mit der ausgewählten Maschine und eine Warnung bei falscher Kompatibilität.

Händler, die sowohl Originalteile als auch Ersatzteile anbieten, benötigen ein zusätzliches Signal, denn der Preisunterschied wirft Fragen auf, die ein kleines Etikett schneller beantwortet als ein langer Absatz.

Lange Codes übersichtlich gestalten

Eine Teilenummer ist die eigentliche Produktbezeichnung und verdient daher mehr visuelle Aufmerksamkeit als der umgebende Text. Eine feste Breite, ein größerer Buchstabenabstand und ein starker Kontrast erleichtern das Vorlesen eines 19-stelligen Codes und den Abgleich mit dem abgenutzten Code auf der Werkbank. Spezifikationstabellen profitieren von derselben Sorgfalt: mit ausgerichteten Einheiten, dezenten Zeilentrennern und gleichbleibenden Spaltenbreiten.

Nicepage deckt den Großteil dieser Aspekte über seine visuellen Steuerelemente ab, während benutzerdefinierter CSS-Code die verbleibenden Bereiche abdeckt. Die Dokumentation zu benutzerdefiniertem CSS erklärt, wie Regeln hinzugefügt und Klassen Elementen zugewiesen werden, um katalogspezifische Darstellungen wie Passform-Badges, Vergleichszeilen oder Filterchips vom allgemeinen visuellen System fernzuhalten.

Schmale Bildschirme benötigen weniger Spalten

Auf Smartphones stößt die Katalogformatierung oft an ihre Grenzen. Ein zwanzigstelliger Code wird mittendrin umgebrochen und in zwei unleserliche Hälften geteilt, eine Spezifikationstabelle verdrängt den Preis aus dem Blickfeld, und vier Karten nebeneinander sind kaum noch lesbar. Kontrollierter Zeilenumbruch, eine seitlich scrollbare Tabelle und eine sich bei schmalerem Bildschirm reduzierende Kartenanzahl lösen die meisten Probleme.

Diese Anpassungen sollten unbedingt beibehalten werden, da eine Regel, die für eine Produktfamilie mit ungewöhnlich langen Beschreibungen gilt, nicht alle Karten im Katalog neu formatieren sollte. Formatierungen, die auch bei wachsenden Katalogen Bestand haben, sind meist eher unspektakulär: eine einheitliche visuelle Sprache für wiederkehrende Artikel und eine kurze Liste von Ausnahmen, die jeweils ihre Berechtigung haben.