Mosaico Modelli HTML

Modelli HTML a mosaico responsivi

Un modello HTML a mosaico viene fornito come file apribili in un editor: una pagina, un foglio di stile e immagini già inserite in sezioni di diverse larghezze. Lo screenshot della demo mostra una disposizione di queste tessere. Tutto ciò che si fa in seguito avviene nel codice sottostante, quindi vale la pena aprire il codice sorgente prima di visualizzare l'anteprima.

La maggior parte del lavoro rimane a livello di contenuto. Le foto vengono sostituite, le didascalie riscritte e le schede duplicate quando la galleria supera le dimensioni della demo.

Markup dietro blocchi di immagini irregolari

Le composizioni a tessere sono costruite in modi molto diversi e la differenza si nota nel momento in cui si aggiunge un elemento. Una griglia tenuta insieme da colonne e righe continua a funzionare anche quando una scheda viene copiata. Un layout ancorato con offset fissi richiede una correzione manuale ogni volta.

Sezioni come queste solitamente costituiscono la maggior parte del contenuto di una pagina a mosaico:

• un'ampia immagine con un breve titolo sovrapposto
• una scheda che si ripete in una galleria o in un feed di categorie
• un riquadro di testo per un servizio, una nota o una citazione
• un riquadro con una call to action che chiude il gruppo di elementi visivi

Nessun template li include tutti di default, quindi è utile aprire la demo, contare gli elementi effettivamente riutilizzabili e ignorare il resto.

Ordine del codice sorgente su schermi stretti

Su uno smartphone, la composizione viene visualizzata in una singola colonna, che segue l'ordine dei file. Un riquadro nell'angolo in alto a destra di un laptop può trovarsi al quarto posto su uno smartphone, pur contenendo il titolo del progetto.

C'è un modo rapido per verificarlo. Disattiva gli stili nel browser e leggi la pagina come testo semplice. Il risultato sarà simile alla sequenza di scorrimento di un visitatore con il pollice. Se un elemento importante è nascosto, spostalo all'interno dell'HTML. Un'ulteriore media query lo nasconderebbe soltanto.

Modificare il codice di esempio senza compromettere i riquadri

Considerate i contenuti demo come pezzi di ricambio. Copiate un riquadro che si comporti già come vi serve, incollatelo dove continua la galleria, quindi modificate l'immagine e il testo al suo interno. I nomi delle classi rimangono come sono stati scelti dall'autore, e discutere di questa convenzione a metà del progetto costa di più che seguirla.

Quindi, riducete la finestra del browser finché il mosaico non si riduce a una singola colonna e osservate quale progetto viene visualizzato per primo da un visitatore. Se è quello che mostrereste a un cliente, il template è pronto per i vostri contenuti.