Onderdelen CSS-sjablonen

CSS-sjablonen voor onderdelencatalogi vol vergelijkbare artikelen

Twee productkaarten in een onderdelencatalogus kunnen er identiek uitzien, maar toch totaal verschillende dingen betekenen. Het ene artikel wordt vandaag nog verzonden, het tweede is een speciale bestelling met een wachttijd van zes weken, en het derde is uit productie genomen ten gunste van een nieuwere versie. Styling maakt dat verschil zichtbaar voordat iemand klikt, en CSS-sjablonen voor onderdelen bieden leveranciers een set visuele regels voor die onderscheidingen.

Voorraadstatus op identieke kaarten

Voorraadstatussen veranderen sneller dan productfoto's, dus de signalen die eraan gekoppeld zijn, doen het meeste werk.

Een paar van die statussen verdienen een aparte behandeling:

• Op voorraad, lage voorraad en nabestelling, onderscheiden door iets sterkers dan alleen kleur.

• Artikelen op speciale bestelling, waarbij de levertijd naast de prijs hoort.

• Uit productie genomen onderdelen die verwijzen naar de vervangende versie.

• Een bevestigde compatibiliteit met de geselecteerde machine, en een waarschuwing wanneer de compatibiliteit niet correct is.

Distributeurs die OEM- en aftermarketproducten naast elkaar aanbieden, hebben nog een extra signaal nodig, omdat het prijsverschil vragen oproept die een klein label sneller beantwoordt dan een alinea.

Lange codes leesbaar maken

Een artikelnummer is de eigenlijke naam van het product en verdient daarom meer visuele aandacht dan de omringende tekst. Een vaste breedte, ruimere letterafstand en een sterk contrast maken een code van negentien tekens gemakkelijker hardop te lezen en te vergelijken met de versleten code op de werkbank. Specificatietabellen verdienen dezelfde aandacht, met uitgelijnde eenheden, subtiele regelafscheiders en kolombreedtes die consistent blijven over de hele lijst.

Nicepage dekt het grootste deel hiervan via de visuele instellingen, en aangepaste CSS-code regelt wat Nicepage niet kan. De documentatie over aangepaste CSS legt uit hoe regels worden toegevoegd en klassen aan elementen worden toegewezen, waardoor catalogusspecifieke elementen zoals pasvormbadges, vergelijkingsrijen of filterchips buiten het algemene visuele systeem blijven.

Smalle schermen vereisen minder kolommen

Op telefoons laat de catalogusstijl het vaak afweten. Een code van twintig tekens breekt halverwege af en wordt twee betekenisloze helften, een specificatietabel verdringt de prijs uit beeld en vier kaarten op een rij maken niets leesbaars. Gecontroleerde tekstterugloop, een tabel die horizontaal scrollt en een kaarttelling die afneemt naarmate het scherm smaller wordt, lossen het meeste hiervan op.

Het is de moeite waard om deze aanpassingen te behouden, aangezien een regel die bestaat voor één productfamilie met ongebruikelijk lange beschrijvingen niet elke kaart in de catalogus opnieuw hoeft te tekenen. De stijl die een groeiende catalogus overleeft, is meestal de saaie soort: één visuele stijl voor herhaalde items, plus een korte lijst met uitzonderingen die elk hun nut bewijzen.