Części Szablony CSS

Szablony CSS części zamiennych dla katalogów pełnych podobnych artykułów

Dwie karty produktów w katalogu części zamiennych mogą wyglądać identycznie, a oznaczać zupełnie co innego. Jeden element wysyłany jest dzisiaj po południu, drugi to zamówienie specjalne z sześciotygodniowym okresem oczekiwania, a trzeci został wycofany z produkcji na rzecz nowszego wariantu. Odpowiednie ostylowanie uwidacznia tę różnicę, zanim użytkownik kliknie, a szablony CSS części zamiennych dają dostawcom zestaw reguł wizualnych dla takich rozróżnień.

Stan magazynowy na identycznych kartach

Stany magazynowe zmieniają się szybciej niż zdjęcia produktów, dlatego przypisane do nich oznaczenia wykonują większość codziennej pracy.

Kilka z tych stanów wymaga odrębnego podejścia:

• W magazynie, niski stan i zamówienie oczekujące, odróżnione czymś wyraźniejszym niż sam kolor.
• Artykuły na zamówienie specjalne, w przypadku których czas realizacji powinien znajdować się obok ceny.
• Wycofane komponenty ze wskazaniem zamiennika, który zajął ich miejsce.
• Potwierdzone dopasowanie do wybranej maszyny oraz ostrzeżenie, gdy część nie pasuje.

Dystrybutorzy oferujący równolegle linie części oryginalnych (OEM) i zamienników potrzebują jeszcze jednego sygnału, ponieważ różnica w cenie rodzi pytanie, na które mała etykieta odpowiada szybciej niż cały akapit tekstu.

Ułatwianie odczytu długich kodów

Numer części to rzeczywista nazwa produktu, dlatego zasługuje na większy akcent wizualny niż otaczający go tekst. Czcionka o stałej szerokości znaków, większe odstępy między literami i wyraźny kontrast ułatwiają odczytanie dziewiętnastoznakowego kodu na głos oraz porównanie go ze zużytą częścią na stole warsztatowym. Tabele specyfikacji wymagają podobnej dbałości: wyrównanych jednostek, dyskretnych separatorów wierszy i szerokości kolumn zachowujących stały wymiar na całej długości listy.

Nicepage obsługuje większość tych wymagań za pomocą wbudowanych kontrolek wizualnych, a Custom CSS Code radzi sobie z pozostałymi kwestiami. Dokumentacja dotycząca niestandardowego CSS wyjaśnia, jak dodawać reguły i przypisywać klasy do elementów, dzięki czemu specyficzne dla katalogu rozwiązania, takie jak plakietki dopasowania, wiersze porównawcze czy filtry wyboru, nie zaburzają ogólnego systemu wizualnego.

Wąskie ekrany wymagają mniejszej liczby kolumn

Na ekranach telefonów stylistyka katalogu często zawodzi. Dwudziestoznakowy kod zawija się w połowie i przekształca w dwa bezsensowne fragmenty, tabela specyfikacji wypycha cenę poza widoczny obszar, a cztery karty w jednym wierszu uniemożliwiają czytanie. Kontrolowane zawijanie tekstu, tabela z przewijaniem poziomym oraz redukcja liczby kart w miarę zwężania ekranu rozwiązują większość tych trudności.

Takie nadpisania stylów warto ściśle ograniczać, ponieważ reguła wprowadzona dla jednej grupy produktów o wyjątkowo długich opisach nie powinna zmieniać wyglądu każdej karty w katalogu. Stylowanie, które zdaje egzamin przy rozrastającym się katalogu, to zazwyczaj podejście uporządkowane: jeden język wizualny dla powtarzających się artykułów oraz krótka lista w pełni uzasadnionych wyjątków.