Layout e impaginazione del sito

 🕢 6 min.
Immagine vettoriale di due tavole di legno: il layout del sito web dovrebbe essere semplice e chiaro come due tavole di legno posizionate vicine
(photo by Rani Ramli on Pixabay)

Layout e impaginazione del sito: semplice, accessibile, usabile, specialmente sui dispositivi mobili.


Dal layout del sito, molto dipende in termini di usabilità, facilità di utilizzo, se è intuitivo nella navigazione, il colore dei link, il carattere e la dimensione del testo, la grafica, il design, la velocità di caricamento delle pagine, la visibilità, in base alle dimensioni dello schermo, il menù di navigazione, il box della ricerca; tutti elementi che sono importanti per facilitare la navigazione.

I fogli si stile

I CSS (Cascading Style Sheets), e comunque più in generale il linguaggio 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.

Sebbene fosse, e lo è ancora, prassi diffusa, inserire collegamenti esterni alla pagina per quanto riguarda i file ․css sto sperimentando, in ritardo come mio solito, che risulta talvolta molto conveniente inserire parte del codice CSS all'interno dei tag <head></head>

Ti consiglio di leggere questo articolo: What's with putting the CSS in the head? su medium․com che a me ha chiarito un po' le idee riguardo i fogli di stile, e il loro utilizzo.

Altro sito importante, che può migliorare la velocità di caricamento delle pagine, è sitelocity․com Critical Path CSS Generator – Internal CSS Style Sheet Generator for the above the fold content, uno strumento molto utile, che serve a rendere più snelle le pagine, andando a mettere parte del linguaggio CSS nell'intestazione della pagina, per velocizzare il caricamento.

Questo è il collegamento ad un file ․css:

<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, e il link esterno alla pagina, in questo caso stylesheet, foglio di stile.

id – Se si desidera dare un nome specifico al link, per maggiore chiarezza nel codice, e talvolta per utilità.

href – Indica il collegamento ipertestuale al foglio di stile.

type – Indica il tipo di linguaggio del codice, ovvero, in questo caso css che ormai si può evitare, da qualche anno a questa parte, è sufficiente <link rel="stylesheet" href="styles≶css">

Così come per il codice javascript è sufficiente il suffisso <script> e nemmeno in questo caso serve più specificare style="text/javascript"

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

Il linguaggio CSS rappresenta 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.

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 - af1.it
Dal 2006 lavoro con internet, scrivo i contenuti e provvedo alla gestione del sito. Ho scoperto WordPress tanti anni fa, e dal 2013 uso questo.