Svizzero Modelli HTML

Template HTML in stile svizzero facili da usare per pagine web strutturate

La calma di un layout svizzero si perde facilmente nel codice. Ciò che sullo schermo appare come una griglia rigorosa può scomporsi al primo ciclo di modifiche a meno che il markup non sia diviso lungo le stesse linee. I template HTML in stile svizzero ben progettati ottengono questo risultato fin dall'inizio, allineando le zone di contenuto alle colonne e alle unità ripetute per progetti e articoli.

Markup costruito attorno alle colonne

Nella composizione svizzera, ogni elemento di contenuto possiede una zona definita sulla griglia e il markup dà forma a queste zone. I pattern che vale la pena verificare per primi sono quelli che si ripetono:

• Un indice di progetti le cui righe condividono le stesse parti, come un numero, un titolo e una miniatura, ciascuno pronto per la propria colonna.
• Una voce di portfolio che mantiene un'ampia area immagine separata da una stretta area di testo, affinché la divisione asimmetrica regga l'inserimento di una nuova foto o di una descrizione più lunga.
• Un articolo editoriale il cui titolo principale e i sottotitoli mantengono livelli di intestazione fissi, così che l'ordine di importanza sia radicato nel markup.
• Un blocco compatto di specifiche per luogo, anno e cliente posizionato accanto al testo principale.

Dove collocare lo spazio vuoto

I designer svizzeri usano lo spazio per separare gruppi di informazioni, e un template mantiene quel ritmo solo se il suo markup traccia gli stessi confini. Quando la presentazione dello studio, l'elenco dei progetti e i dettagli di contatto risiedono in aree distinte, ognuno di essi può cambiare senza alterare i vuoti attorno agli altri. I layout volutamente disuguali dipendono ancora di più da questo principio. Un titolo con una colonna vuota accanto, o una breve nota spinta molto a destra, mantiene la propria posizione quando ogni elemento costituisce un'unità separata nel codice.

Codice modellato da progetti o articoli

Due template svizzeri possono sembrare quasi identici in uno screenshot e assolvere comunque a scopi diversi. Un template per portfolio è organizzato attorno a unità di progetto ripetibili, perciò aggiungere un nuovo progetto significa per lo più copiare un blocco esistente e sostituirne il contenuto. Un template editoriale dedica maggiore attenzione ai testi lunghi, con una scala di intestazioni più articolata, citazioni in evidenza ed elenchi di articoli che rimangono leggibili all'interno di una colonna stretta.

Se prevedi di personalizzare il design in Nicepage, esportarlo come HTML e continuare a lavorare sul codice, verifica che le unità ripetute del template corrispondano ai tuoi contenuti. Quando il markup rispecchia già i tuoi progetti o articoli, lo sviluppo si riduce al semplice inserimento e perfezionamento, e la griglia che ti ha convinto a scegliere il template resta intatta.