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.