Scaffale Modelli CSS

Template CSS per librerie per collezioni di libri che restano allineate

Uno scaffale di copertine appare ordinato solo se lo stile grafico riesce a mantenerne la coerenza. Scansioni di copertine rigide, foto di tascabili e vecchie edizioni non hanno mai le stesse dimensioni, e un template per libreria deve contenerle in una cornice omogenea mantenendo leggibili titoli e nomi degli autori in basso.

Le copertine presentano proporzioni disuguali

Le immagini dei libri raramente condividono le stesse proporzioni. Una ristampa può essere tozza, un volume d'arte quasi quadrato e un classico scansionato tagliato in alto. Schede di dimensioni uguali non garantiscono copertine uguali, ed è proprio questo dislivello a rendere disordinato uno scaffale. Un «rapporto di aspetto» (aspect-ratio) fisso per l'area della copertina, abbinato a una regola di «adattamento dell'oggetto» (object-fit) che consente all'immagine di riempirla, mantiene ogni scheda alla stessa altezza ritagliando i bordi dell'illustrazione anziché deformarla.

I titoli lunghi generano l'altro problema di disallineamento. Due righe di testo sotto una copertina e quattro sotto la successiva spostano i nomi degli autori ad altezze diverse lungo la stessa riga.

Poche scelte di stile sostengono la maggior parte dell'equilibrio visivo di una collezione di libri:

• un rapporto fisso per l'area della copertina, in modo che una ristampa tozza e un volume d'arte alto occupino lo stesso spazio;
• un limite di righe per i titoli, che mantiene la riga dell'autore a un'altezza uniforme in ogni scheda;
• spazi generosi tra i gruppi, affinché le nuove uscite e i consigli dello staff siano percepiti come scaffali distinti;
• uno stato hover che mostra una valutazione o una riga di riassunto.

Nicepage gestisce la maggior parte di questi aspetti tramite i suoi controlli visivi, mentre l'elemento Griglia imposta le colonne e gli spazi intermedi.

Le colonne della griglia si riducono sui display stretti

Uno schermo ampio accoglie comodamente una lunga riga di copertine. La stessa riga su un telefono si riduce di solito a una o due colonne, ed è opportuno verificare cosa accade tra questi due estremi in ciascuna modalità reattiva.

Assicurati che la copertina, il titolo e l'autore rimangano leggibili a qualsiasi larghezza. Le etichette di genere e le note sull'edizione possono essere rimpicciolite sugli schermi piccoli, poiché chi scorre uno scaffale da telefono osserva per prima cosa la grafica. Una biblioteca personale tollera una densità maggiore rispetto a una libreria commerciale, dove ogni copertina rappresenta anche un prodotto.

Regole personalizzate per un singolo scaffale

Talvolta un gruppo richiede soluzioni che i controlli predefiniti non offrono, come un contorno dorato per i libri premiati. Nicepage supporta i controlli CSS personalizzati per un singolo elemento, una pagina specifica o l'intero sito, gestendo al meglio tali eccezioni.

Valutare un template sul suo scaffale più affollato dice molto più della home page dimostrativa. Caricalo con il titolo più lungo, la scansione peggiore e il gruppo più numeroso che intendi pubblicare, quindi verifica se le righe rimangono ancora perfettamente allineate.