Layout e impaginazione del sito web

@ Condividi via Email
Aggiornato:
Layout e impaginazione del sito web
(Foto di BUMIPUTRA da Pixabay)

Layout e impaginazione del sito web: 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>

CSS nel tag head

Il codice CSS all'interno del tag head migliora le prestazioni del sito 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.

Ho fatto dei test di velocità del sito, e devo dire che funziona.

Critical CSS

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 codice CSS nell'intestazione della pagina, per velocizzare il caricamento.

I file CSS come risorsa esterna alla pagina

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" />

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"> come consigliato per l'HTML 5

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 e 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, soprattutto per i dispositivi mobili, pagine da stampare, etc..

Colori e stile grafico

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 e intuitivo ccosì com'è.

Layout del sito: pensa anche alle persone con esigenze visive diverse Quando decidi il colore dei link, non dimenticare le persone daltoniche, e con esigenze visive diverse.

Conoscenza linguaggio di programmazione

Se non hai la giusta conoscenza sia del linguaggio HTML che CSS, rischi di pasticciare parecchio e vanificare i grandi vantaggi che possono essere rappresentati dai linguaggi di programmazione.

Template HTML e CMS

Esistono sia template già pronti che CMS come WordPress con relativi temi, quindi se non si è in grado di programmare da soli si può ricorrere a queste soluzioni, molto comode, e pensate sorpattutto per chi conosce i linguaggi di programmazione.

WordPress Content Management System

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

Validazione W3C del sito web

Temi con tanto di validazione del W3C (World Wide Web Consortium), 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 elevato, totalmente gratuiti e facilmente installabili da chiunque con pochissimi clic.

WordPress aggiornamento temi

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 di tempo, con le versioni più recenti del CMS potrebbero anche esserci problemi di incorretta visualizzazione e funzionamento.

Quando sono presenti sul sito di WordPress nella sezione dedicata ai temi, quelli non aggiornati da almeno 2 anni, viene mostrato un avviso che mette in guardia da potenziali problemi di malfunzionamento; la stessa cosa accade per i Plugin.

Stile grafico dei temi

Per quanto riguarda il design, lo stile grafico, l'interfaccia grafica (GUI, Graphical User Interface), è 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 bravo grafico non è mai casuale, nei casi migliori è frutto di ricerche specifiche, mirate, per comprendere quale possa essere lo stile più apprezzato dagli utenti, sotto ogni punto di vista.

È preferibile mantenere uno stile grafico molto semplice, se desideri fare le cose da te, e non hai 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, intuitivo nella navigazione.

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

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

Cosa ricordare se usi WordPress

• Mantenere aggiornato il proprio tema è un requisito essenziale, per mantenerlo adeguato con la struttura gestionale, sempre aggiornata alla versione più recente, quindi scegli 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.

Fai dei test

Esegui 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 del sito; un sito da leggere, o uno di foto ad esempio, richiedono layout significativamente diversi per dare risalto al contenuto.

 

Felice Amadeo - af1.it
Dal 2006 lavoro con internet, scrivo i contenuti e provvedo alla gestione del sito. Ho conosciuto WordPress tanti anni fa, e dal 2013 uso questo.
Invecchiando, ho scoperto che mi piace portare il cappello.