Parti Modelli CSS

Modelli CSS per componenti in cataloghi pieni di articoli simili

Due schede prodotto in un catalogo di componenti possono sembrare identiche ma avere significati completamente diversi. Un articolo potrebbe essere spedito questo pomeriggio, il secondo è un ordine speciale con un'attesa di sei settimane e il terzo è stato ritirato dal mercato a favore di una versione più recente. Lo stile rende visibile questa differenza prima ancora che qualcuno clicchi sul link, e i modelli CSS per i componenti offrono ai fornitori una serie di regole visive per distinguere questi articoli.

Stato di stock per schede identiche

Le condizioni di inventario cambiano più velocemente delle foto dei prodotti, quindi i segnali ad esse associati svolgono la maggior parte del lavoro quotidiano.

Alcune di queste condizioni meritano un trattamento specifico:

• Disponibile, con scorte limitate e in riassortimento, separate da un elemento più incisivo del semplice colore.

• Articoli su ordinazione, dove il tempo di consegna deve essere indicato accanto al prezzo.

• Componenti fuori produzione che rimandano al loro sostituto.

• Compatibilità confermata con la macchina selezionata e un avviso in caso di incompatibilità.

I distributori che offrono linee OEM e aftermarket affiancate necessitano di un ulteriore segnale, perché la differenza di prezzo solleva un interrogativo a cui una piccola etichetta risponde più rapidamente di un paragrafo.

Rendere i codici lunghi più facili da leggere

Un codice articolo è il nome reale del prodotto, quindi merita maggiore risalto visivo rispetto al testo circostante. Un layout a larghezza fissa, una maggiore spaziatura tra le lettere e un contrasto deciso rendono un codice di diciannove caratteri più facile da leggere ad alta voce e da confrontare con quello usurato sul banco di lavoro. Le tabelle delle specifiche meritano la stessa attenzione, con unità allineate, separatori di riga discreti e larghezze di colonna costanti lungo l'elenco.

Nicepage gestisce la maggior parte di questi aspetti tramite i suoi controlli visivi, mentre il codice CSS personalizzato si occupa di ciò che non viene gestito automaticamente. La documentazione sul CSS personalizzato spiega come aggiungere regole e assegnare classi agli elementi, mantenendo separati dal sistema visivo generale elementi specifici del catalogo come badge di compatibilità, righe di confronto o chip filtro.

Gli schermi stretti richiedono meno colonne

Sui telefoni, lo stile del catalogo di solito cede. Un codice di venti caratteri va a capo al centro, dividendolo in due parti incomprensibili, una tabella delle specifiche nasconde il prezzo e quattro schede di fila non lasciano nulla di leggibile. Un allineamento a capo controllato, una tabella che scorre orizzontalmente e un numero di schede che diminuisce man mano che lo schermo si restringe risolvono la maggior parte di questi problemi.

Vale la pena mantenere queste opzioni di formattazione, poiché una regola valida per una famiglia di prodotti con descrizioni insolitamente lunghe non ha senso ridisegnare ogni scheda del catalogo. Lo stile che resiste a un catalogo in crescita è solitamente quello più sobrio: un linguaggio visivo per gli articoli ripetuti, più un breve elenco di eccezioni, ognuna delle quali giustifica la sua utilità.