Mosaico Modelli HTML

Template HTML a mosaico responsive

Un template HTML a mosaico viene fornito sotto forma di file pronti da aprire in un editor: una pagina, un foglio di stile e immagini già inserite in sezioni di diverse larghezze. Lo screenshot dimostrativo mostra una possibile disposizione di queste tessere. Tutto ciò che farai successivamente avverrà nel codice sottostante; conviene quindi aprire i file sorgente prima ancora dell'anteprima.

La maggior parte di questo lavoro si concentra sui contenuti. Le fotografie vengono sostituite, le didascalie riscritte e una scheda viene duplicata non appena la galleria supera la dimensione della demo.

Il markup dietro blocchi di immagini irregolari

Le composizioni a tessere vengono realizzate in modi molto diversi, e tale differenza emerge non appena si aggiunge un ulteriore elemento. Una griglia retta da estensioni di righe e colonne continua a funzionare quando viene duplicata una scheda. Un layout bloccato da scostamenti fissi richiede invece correzioni manuali continue.

Sezioni come queste costituiscono in genere la struttura portante di una pagina a mosaico:

• un'ampia tessera immagine sormontata da un breve titolo
• una scheda che si ripete in una galleria o in un feed di categorie
• una tessera di testo per un servizio, una nota o una citazione
• una tessera call to action che chiude il cluster visivo

Nessun template le include tutte in modo predefinito; conviene quindi aprire la demo, individuare gli elementi realmente riutilizzabili e ignorare il resto.

Ordine del codice sorgente su schermi stretti

Uno smartphone mostra la composizione su un'unica colonna, e tale colonna segue l'ordine del file. Una tessera nell'angolo in alto a destra su uno schermo desktop può trovarsi al quarto posto su un telefono, pur rappresentando il progetto principale.

Esiste un modo rapido per verificarlo. Disattiva gli stili nel browser e leggi la pagina come testo semplice. Quello che otterrai corrisponde alla sequenza che un visitatore scorre con il pollice. Se un elemento fondamentale risulta sepolto troppo in basso, sposta la sezione all'interno dell'HTML. Aggiungere un'ulteriore media query servirebbe solo a nascondere il problema.

Modificare il codice di esempio senza alterare le tessere

Considera i contenuti dimostrativi come pezzi di ricambio. Copia una tessera che già si comporta nel modo desiderato, incollala nel punto in cui la galleria prosegue, quindi sostituisci l'immagine e il testo al suo interno. Mantieni i nomi delle classi scelti dall'autore: stravolgere questa convenzione a metà del lavoro costa più che seguirla.

Riduci poi la larghezza della finestra del browser fino a quando il mosaico non collassa in una singola colonna e osserva quale progetto il visitatore incontra per primo. Se è proprio quello che mostreresti a un cliente, il template è pronto per i tuoi contenuti.