Anatomia di un sito web, differenze tra versione desktop e mobile

Dopo aver visto cos'è un sito internet, come progettarlo, realizzarlo e dove svilupparlo vediamo nello specifico l'anatomia di un sito web per comprendere le diverse sezioni che lo compongono e cosa contengono.

In questo articolo analizzeremo un mockup di un sito classico nella versione visualizzazione per dispositivo desktop, dove in genere la risoluzione minima è 750 px di larghezza e la versione per smartphone.

Gli spazi in un layout dovrebbero, in genere, essere organizzati in questa maniera:

• header, la parte alta del sito.
• menù di navigazione.
• contenuto della pagina.
• barra laterale o sidebar.
• footer, la parte conclusiva del sito.

Vediamo nel dettaglio quali elementi inserire in questi spazi e la loro funzione nella versione desktop di un sito, a seguire vedremo gli stessi elementi come conviene disporli nella versione mobile, quando creiamo un sito con layout responsive.

Se pensiamo di realizzare un sito senza ottimizzarlo per la versione mobile commettiamo un enorme errore, visto che il 55/60% dell'utenza utilizza un dispositivo mobile per navigare, oltre che Google da aprile dello scorso anno ha deciso di premiare i siti ottimizzati per smartphone e tablet.

L'header o l'”introduzione del sito web”

Quando un utente visualizza una pagina di un sito web la prima sezione che nota è quella relativa alla parte alta della pagina definita header.

Questa zona può contenere una creatività grafica o meno che identifica e caratterizza il sito, in cui inserire il logo o il nome dell'attività sponsorizzata dal sito web.

In alcuni casi l'header contiene un menù di navigazione di carattere aziendale o corporate, i social correlati al sito e un banner per invitare l'utenza ad effettuare una conversione o interazione.

In altri casi il banner viene utilizzato per monetizzare la pagina web, grazie a circuiti come Adsense, WordAds o servizi di advertising similari. In questi casi si cerca di inserire un banner in questa posizione, in quanto nella versione mobile lo spazio in cui visualizzare un sito web è limitato dal monitor di dimensioni minori e se un utente non scrolla la pagina rischia di non visualizzare l'annuncio pubblicitario, che in questa posizione è uno dei primi elementi ad essere visualizzato. A seguire in questo articolo nel dettaglio l'anatomia di un sito web per device mobile per comprendere meglio questo meccanismo.

Il menù di navigazione

Subito dopo l'header è necessario inserire un menù di navigazione o in alcuni casi è possibile inserirlo prima della sezione vista nel paragrafo precedente.

Può essere a voci fisse, nel caso di pochi contenuti presenti sul sito web, a discesa o mega menù, con una parte di contenuti direttamente visualizzabili quando l'utente passa il mouse su una label, ossia su una delle voci.

Ricordiamo nel creare un menù che le voci principali non devono andare su più righe e che le label principali non devono essere più di sette, per non confondere l'utenza.

In alcuni casi, se non inserito nell'header, si può inserire il modulo per la ricerca dei contenuti nel sito direttamente nel menù di navigazione.

Fondamentale la voce home, per far tornare alla pagina iniziale del sito gli utenti che atterrano in una sezione interna.

Il contenuto

Generalmente inserito sulla parte sinistra di un sito, nel caso di lettura del testo occidentale, ossia da sinistra verso destra, lasciando sulla destra la sidebar. Il motivo va ricercato nel fatto che l'occhio cade prima sulla parte a sinistra di una pagina web, a causa della nostra abitudine a leggere in questo senso. Per siti in lingue con senso di lettura da destra a sinistra conviene fare l'inverso.

La sezione relativa al contenuto è quella che cambia più frequentemente e per questo va analizzata caso per caso.

Alcuni box che però possono essere inseriti subito al di sotto del contenuto possono essere:

• I pulsanti di condivisione del contenuto sui social.
• Un box identificativo dell'autore del contenuto.
• Una zona per i commenti e la conseguente interazione e scambio informazioni con l'utenza.
• I tag associati all'articolo.

La sidebar

La barra laterale è un'altra delle sezioni cardine di un sito internet, in quanto offre la possibilità all'utenza di visualizzare contenuti in primo piano, migliora l'usabilità dello strumento e permette all'amministratore delle pagine di inserire contenuti sponsorizzati e banner per l'advertising.

Le sidebar possono essere diverse, in funzione delle categorie tematiche, ma devono essere create in numero limitato, in maniera tale da non confondere troppo l'utenza quando passa da una pagina ad un'altra, mantenendo continuità di layout.

In una landing page questa sezione può essere opzionale ed anzi è meglio non inserirla per non distrarre l'utente dall'azione per cui è nata la pagina.

Vediamo quali elementi possiamo posizionare in questa sezione:

• Un sotto menù relativo alla categoria.
• I social network associati al sito internet.
• Contenuti in evidenza.
• Banner pubblicitari.
• Form di contatto, interazione o iscrizione ai servizi presenti sul sito.

Il footer o “piè di pagina” del sito

In chiusura della nostra pagina è necessario inserire una zona come l'header e il menù e che si visualizzerà in maniera identica su tutte le pagine, in modo da dare continuità al layout.

Il footer può presentare una creatività particolare o essere neutro.

Elementi obbligatori in questa zona, per un sito aziendale, sono la ragione sociale e la partita iva dell'attività identificata dal sito, mentre per tutti i siti la legge italiana obbliga i webmaster a inserire:

• Un link a una pagina sulle condizioni di privacy del sito.
• Il link all'informativa estesa sui cookie.
• Le condizioni d'uso dello strumento.

Sempre nel footer possiamo inserire i social associati al nostro sito web, la nuvola di tag, una informazione riassuntiva sulla mission del sito web, i contatti aziendali e gli ultimi commenti ai nostri articoli.

L'anatomia di un sito web nella versione mobile

Premessa: in questo articolo consideriamo il layout di un sito di tipo responsive, ossia che si adatta alla risoluzione del display degli utenti modificando l'aspetto del contenuto grazie al codice CSS, ai tag HTML dedicati alla creazione di layout fluidi come i DIV e agli attributi dei tag img dedicati al Responsive Web Design. E' possibile realizzare una versione mobile di un sito internet in modalità diverse, come creare un sito parallelo su un sotto dominio del sito a cui reindirizzare gli utenti grazie all'analisi degli user-agent, ma è una modalità che non mi piace per tutta una serie di fattori, in primis il dover scrivere due volte il contenuto quando si vuole aggiornare il sito e il rischio di venire penalizzati a livello di SEO, a causa di contenuti duplicati, se non configuriamo bene il nostro file robots.txt.

Gli elementi visualizzabili su un sito ottimizzato per i dispositivi mobile sono gli stessi che abbiamo visto fino ad ora, ma cambia la loro disposizione e nel caso è possibile spegnere o aggiungere alcuni elementi sulla versione per smartphone del sito.

In particolare l'ordine degli elementi potrebbe diventare il seguente:

• header e menù versione mobile (ossia che si espande e fa visualizzare le voci di navigazione solo a seguito di interazione dell'utente) in modo da risparmiare spazio.
• Il contenuto.
• La sidebar.
• Il footer.

E' poi necessario far visualizzare per ogni sezione solo gli elementi necessari, questo perchè la lettura di una pagina web su smartphone avviene con scroll verso il basso e se il contenuto da visualizzare risulta troppo lungo vi è il rischio che l'utenza abbandoni la pagina prima di compiere l'azione per cui abbiamo realizzato il sito web.

Riferimenti utili

• Come spegnere gli elementi nella visualizzazione mobile di un sito Wordpress.
• Il Responsive Web Design su Wordpress.
• Ottimizzare il layout delle email inviate dal nostro sito per i dispositivi mobili.