Piastrelle Modelli HTML

Modelli HTML a riquadri puliti con markup sorgente modificabile

Quando uno sviluppatore eredita un modello HTML a riquadri, si ritrova con un insieme di file, e la piacevolezza del mese successivo dipende da come questi file sono assemblati. Il modello si presenta ovunque: un indice di portfolio, una griglia di prodotti o la schermata iniziale di una rivista. Il markup che segue determina se l'aggiunta di duecento voci sarà un lavoro pomeridiano o una riscrittura completa.

Modelli di markup che copierai spesso

La ripetizione è il punto di un layout a riquadri, ed è la prima cosa da esaminare. Una scheda di solito include un'immagine, un titolo e un link, e la sua forma dovrebbe rimanere identica dalla prima all'ultima voce. Apri il codice sorgente e cerca alcuni elementi:

1. Sezioni semantiche attorno a ciascun gruppo di riquadri anziché un unico contenitore infinito.

2. Intestazioni che si sviluppano in ordine gerarchico, con una voce in evidenza sopra gli elementi che introducono.

3. Un modello di scheda ripetuto alla lettera, con i punti di aggancio delle classi lasciati al loro posto per un lavoro successivo.

4. Link scritti sugli elementi su cui il visitatore clicca effettivamente.

L'ordine di lettura resiste a ogni compressione

Una disposizione di riquadri che risulta leggibile su uno schermo ampio può apparire in un ordine strano su un telefono, poiché la posizione visiva di un pannello e la sua posizione nel codice sorgente sono diverse. L'elemento principale in alto a sinistra non dovrebbe apparire sotto tre schede secondarie. Un rapido controllo su qualsiasi blocco ripetuto:

1. L'elemento di cui il visitatore ha bisogno per primo compare per primo nel codice sorgente.

2. Il testo di supporto rimane attaccato all'immagine che descrive.

3. Il link chiude il blocco invece di fluttuare sopra il contenuto su cui agisce.

Se si fa bene una volta all'interno di una singola scheda, la duecentesima la erediterà. Se si sbaglia, si verrà a sapere da un cliente che usa un telefono.

Dopo l'esportazione, controllare prima i link

Nicepage esporta il progetto dall'applicazione desktop e la guida all'esportazione descrive questo flusso di lavoro. Ciò che viene salvato sul disco è un insieme di file che puoi ospitare ovunque, quindi nulla è vincolato all'hosting di Nicepage e il codice sorgente rimane aperto per ulteriori modifiche.

La prima revisione dopo l'esportazione è breve e vale la pena dedicarci del tempo. Verifica che i link relativi e i percorsi delle risorse funzionino correttamente una volta che i file sono sul server, che gli attributi alt delle immagini descrivano accuratamente il contenuto e che le intestazioni siano rimaste nell'ordine corretto dopo la sostituzione del contenuto. Le schede ripetute meritano una seconda occhiata una volta che vengono riempite con materiale reale, perché un titolo che si adatta alla demo in quattro parole raramente si adatta alla realtà in dodici.

Quello che stai valutando è la facilità d'uso del codice sorgente. Un markup leggibile, modificabile ed estendibile senza problemi rimane utile a lungo anche dopo che la disposizione a schermo cambia.