Menu

af1.it

Uno che scrive

Importanza del layout e corretta impaginazione del sito

6 minuti
aggiornato il
Immagine vettoriale di due tavole di legno: il layout del sito web dovrebbe essere semplice e chiaro come due tavole di legno posizionate vicine

Layout del sito web: semplice

Quanto è importante il layout del sito web ? Come trovare l'impaginazione funzionale ed accattivante ?
Dal layout del sito molto dipende in termini di usabilità; facilità di utilizzo del sito, se è oppure no intuitivo nella navigazione, i colori dei link, il carattere e la dimensione del testo, la grafica ed il design, la velocità di caricamento delle pagine, la visibilità in base alle dimensioni dello schermo del pc, il menù di navigazione, il box della ricerca.

I fogli si stile per il layout del sito web

Tutti aspetti che sono legati all'impaginazione, al layout. I CSS sono stati sicuramente una delle più belle evoluzioni del web, hanno rivoluzionato l'impaginazione dei siti e la velocità di caricamento delle pagine, perché vanno inevitabilmente ad alleggerire in maniera considerevole il peso delle stesse.

Un conto è riportare in ciascuna pagina l'intera struttura del sito, altro è inserire un semplice collegamento al foglio di stile che di conseguenza rappresenta un inequivocabile vantaggio, specialmente laddove ci siano strutture più o meno complesse che necessitano di parecchi elementi; elementi che però sono presenti in uno o più fogli esterni alle pagine, caricati durante la visualizzazione.

<link rel="stylesheet" id="nome-collegamento-css"  href="http://www.example.com/css/style.css"type="text/css" media="all" />

Gli attributi del link:

● rel – Indica quale relazione esiste tra la pagina in oggetto ed il link esterno, in questo caso stylesheet, foglio di stile.

● id – Se si desidera dare un nome specifico al link per maggiore chiarezza nel codice.

● href – Indica il collegamento ipertestuale del foglio di stile.

● type – Indica il tipo di linguaggio del codice.

● media – Indica per quale dispositivo di visualizzazione il foglio è stato creato.

I fogli di stile dunque rappresentano dei vantaggi, andando ad alleggerire notevolmente il peso delle pagine, queste non solo vengono caricate con maggiore velocità, ma contemporaneamente con un minore consumo di banda.

I CSS non rappresentano un vantaggio solo quando si necessita di avere una struttura che, se presente in ciascuna pagina, andrebbe ad appesantire a dismisura la stessa, ma sono comunque un vantaggio anche quando la struttura del sito è semplice e povera di costruzione.

Tramite il foglio di stile è anche possibile cambiare l'intero layout del sito, che potenzialmente contiene migliaia di pagine, modificando il codice di un solo foglio: quello di stile, il CSS.

A tutto vantaggio dell'usabilità abbiamo:

● Minore peso (kB) delle pagine quindi del sito;

● Maggiore velocità di caricamento e minore consumo di banda;

● Maggiore facilità di intervento quando si desidera modificare il layout.

Quale layout scegliere per il sito

Realizzare un sito con una semplice struttura non è difficile, per chi ovviamente ha almeno le conoscenze basilari di HTML ed ovviamente anche dei CSS, che conviene utilizzare, invece di usare le vecchie tabelle, più che altro per avere una maggiore compatibilità con tutti i dispositivi di visualizzazione (PC, dispositivi mobili, pagine da stampare, etc.).

La scelta dei colori, dello stile grafico, soprattutto se non si è molto pratici è meglio puntare sulla semplicità; ad esempio, il layout HTML di default per quanto riguarda i link è già molto chiaro ed intuitivo ccosì com'è.

Se non si ha la giusta conoscenza sia del linguaggio HTML che CSS, si rischia di pasticciare parecchio e vanificare i grandi vantaggi che possono essere rappresentati dai linguaggi di programmazione; sul web esistono sia template già pronti che CMS con relativi temi, quindi se non si è in grado di programmare da soli si può ricorrere a queste soluzioni, molto comode anche per chi conosce la programmazione del resto.

WordPress ad esempio mette a disposizione un'infinità di temi molto interessanti, realizzati specificamente con riguardo all'usabilità con leggerezza della struttura, velocità di navigazione, layout intuitivi che ben si adattano sui diversi dispositivi di visualizzazione.

Temi con tanto di validazione del W3C, e con CSS realizzati in modo che siano facilmente visualizzabili, non solo dai diversi dispositivi ma anche dalle diverse impostazioni dello schermo. Il livello qualitativo di questi temi, layout prêt-á-porter è davvero ottimo, totalmente gratuiti e facilmente installabili da chiunque con pochissimi clic.

Un aspetto importante da questo punto di vista è l'aggiornamento del tema: non è importante solamente mantenere aggiornato WordPress alla versione più recente, bensì anche il tema utilizzato in quanto dovrà sempre mantenersi al passo con l'aggiornamento del CMS. Se un tema rimane senza aggiornamento per lunghi periodi le versioni più recenti del CMS potrebbero anche esserci problemi di corretta visualizzazione e funzionamento, infatti quando sono presenti sul sito di WordPress nella sezione dedicata ai temi non aggiornati da 2 anni od oltre, viene mostrato un avviso che mette in guardia da potenziali problemi di malfunzionamento.

Per quanto riguarda il design, lo stile grafico, l'interfaccia grafica (GUI) è possibile davvero scegliere temi molto interessanti e molto attenti anche per quanto riguarda questo importante aspetto.

La scelta di un design e dei colori utilizzati per un buon grafico non è mai casuale, nei casi migliori è frutto di ricerche specifiche, mirate, per comprendere quale possa essere lo stile grafico più apprezzato dagli utenti, sotto ogni punto di vista.

È preferibile mantenere uno stile grafico molto semplice se si desidera fare le cose da soli e non si ha una conoscenza approfondita in materia.

Come dev'essere il layout di un sito ?

Dovrebbe essere gradevole all'utente, funzionale all'usabilità, non stancare con un impatto visivo eccessivamente vistoso, compatibile con i diversi dispositivi di visualizzazione e impostazioni dello schermo, leggero da caricare, essere intuitivo nella navigazione.

L'impossibile a richiesta ?! No, affatto, possibilissimo, e come se non bastasse lo si può trovare anche già pronto se si utilizza un CMS come WordPress.

Non è cosa da poco avere a disposizione un template (oltre che l'intera struttura gestionale) totalmente gratuito che ha riguardi ed attenzioni dal punto di vista dell'usabilità, quanto di più importante, insieme al contenuto, su internet.

● (Con WordPress) Mantenere aggiornato il proprio tema è un requisito essenziale, per mantenerlo adeguato con la struttura gestionale (sempre aggiornata alla versione più recente), quindi scegliere il tema di un autore che si preoccupi di mantenere aggiornato il layout.

● La scelta del tema deve basarsi sulla semplicità di utilizzo, intuizione di navigazione, compatibilità di visualizzazione con le diverse impostazioni dello schermo e diversi dispositivi.

Quindi: eseguire delle prove, anche minimizzando la finestra del browser e vedere come si comporta il layout, ingrandendo e diminuendo la dimensione dei caratteri, affinché possa essere visto da diverse impostazioni, anche in termini di accessibilità per chi ha diverse esigenze visive e motorie.

● Che sia leggero da caricare, le pagine devono essere veloci da visualizzare; oltre la scelta di un buon hosting (fondamentale) che offra prestazioni adeguate, il layout deve essere leggero, snello, agile.

● La struttura gerarchica del sito deve essere la più congeniale secondo i contenuti.

 

                 

 

Felice Amadeo: autore di af1.it

af1.it è mantenuto dalla mia passione.
Se vuoi sostenere af1.it fai una donazione.

Se qualche articolo ti è piaciuto e vuoi fare una donazione, ti ringrazio.

Tanti anni fa, quando c'erano ancora le lire, un bravo artista di strada, terminata la sua esibizione di giocoliere disse alla folla intorno: se il mio spettacolo vi è piaciuto, dimostratemelo, se non vi è piaciuto scrivetelo su “un deca…”

(un deca, le vecchie 10.000 lire…)
So smile & stay in touch !!!

af1.it usa cookie tecnici anche di terzi per le statistiche visite e per annunci pubblicitari, per sapere come negare il consenso leggi l'informativa estesa. Cliccando su Va bene, scorrendo la pagina o continuando la navigazione acconsenti all'uso dei cookie. Leggi informativa estesa

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi