I 9 Incarichi del Web Designer:
#1 – Rispetta il Contenuto (Content-First)

20 Lug , 2019 Design,Tutorial HTML & CSS,Web Design

Inizia con questo articolo una serie di guide e tutorial HTML/CSS sui principi fondamentali (o incarichi) che ogni buon Web Designer dovrebbe seguire per la corretta progettazione e realizzazione di un sito web.

Iniziamo quindi da quello che è sicuramente l’incarico più importante in assoluto: Rispettare il Contenuto, concetto che viene molto spesso definito nell’ambito del Web Design con il nome di Content-First.

Ma cosa significa il termine Content-First? In che modo noi Web Designer possiamo effettivamente rispettare il contenuto di una pagina web HTML?

Innanzitutto ogni Web Designer deve tenere in considerazione che in un sito web, non è la grafica ad avere il ruolo più importante, bensì, come dice il termine stesso Content-First (letteralmente “Prima il Contenuto”), sono i contenuti ad avere la maggiore importanza; per questo, la prima cosa da tenere in considerazione per realizzare una pagina HTML Content-First, e rispettarne correttamente il contenuto, è quella di disporli nell’esatto ordine gerarchico di importanza, prevedendo inoltre tutte le possibili visualizzazioni responsive, e quindi come verranno disposti i nostri contenuti in ognuna di esse, già in fase di progettazione del wireframe grafico:

 

 

Il Web Designer Virtuoso disporrà quindi più in alto il payoff o il titolo della pagina, probabilmente associato all’immagine più rappresentativa (immagine di copertina o immagine in evidenza), e proseguirà disponendo i contenuti rimanenti in ordine gerarchico di importanza dall’alto verso il basso e da sinistra verso destra, ovvero nell’ordine in cui verranno scritti nella pagina HTML, essendo essa effettivamente un file di testo puro, ed in quanto tale verrà letta dal browser (seppur velocemente) appunto dall’alto verso il basso e da sinistra verso destra, come un qualsiasi file di testo. 😉 Solo in questo modo avremo realmente il nostro contenuto disposto in logica Content-First.

Tenendo bene a mente quest’ultimo punto, quando andremo a trascrivere in codice HTML la nostra grafica, bisognerà far bene attenzione all’ordine in cui si inseriranno i tag HTML, soprattutto nei casi ambigui dove la progettazione grafica potrebbe indurci a non rispettare il contenuto in logica Content-First; facciamo un esempio:

Abbiamo progettato una sezione di pagina in cui l’immagine è protagonista insieme al relativo titolo descrittivo, che però graficamente è posizionato nell’area bassa dell’immagine; una cosa del genere:

 

 

Ora, il nostro cervello (o forse l’ingannevole dio Loki, chi lo sa 😮 ) potrebbe portarci a trascrivere questa sezione in HTML inserendo l’immagine prima del titolo, essendo essa posizionata “più in alto” nella nostra grafica, in questo modo:

<div class="contenitore">
   <img src="images/immagine.jpg" alt="immagine">
   <h2> Titolo dell'immagine </h2>
</div>

Niente di più sbagliato 🙂 . Per rispettare il contenuto della nostra pagina HTML in logica Content-First, dovremmo invece scrivere il codice HTML inserendo prima il titolo, chiaramente più importante (essendo un elemento <h2>) e poi l’immagine, affidandoci al nostro fedele amico CSS per posizionarli come progettato nella grafica, ad esempio in questo modo:

HTML:

<div class="contenitore">
   <h2> Titolo dell'immagine </h2>
   <img src="images/immagine.jpg" alt="immagine">
</div>

CSS:

.contenitore {
    position: relative;
    /* altri stili */
}
.contenitore img {
    position: relative;
    z-index: 1;
    /* altri stili */
}
.contenitore h2 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    /* altri stili */
}

Come mostrato nell’esempio, qui sono le proprietà CSS position e bottom (corredate anche da altre proprietà CSS che ogni Web Designer Virtuoso dovrebbe conoscere 😉 ) a posizionare il titolo solo visivamente più in basso rispetto all’immagine, ma il reale contenuto è in logica Content-First, essendo l’<h2> scritto prima dell’<img>.

Questo ovviamente è un esempio piuttosto basilare della scrittura di codice HTML in logica Content-First, ma se lo rapportiamo a contenuti più imponenti, come per esempio una sidebar posizionata graficamente sulla sinistra della pagina (e che quindi saremmo portati a scrivere prima del contenuto principale nel codice HTML, cosa molto sbagliata come abbiamo visto), capiremo come rispettare il contenuto non sia affatto una cosa semplice o da sottovalutare, soprattutto considerando che le ricompense per una corretta struttura HTML Content-First saranno grandi, sia per l’UI/UX che per la SEO.

Tutto chiaro? Se avete domande o precisazioni su come rispettare il contenuto HTML in logica Content-First non esitate a commentare qui sotto, e rimanete sintonizzati per il prossimo Incarico del Web Designer, che tratterà un’altra tematica fondamentale del mondo del Web Design: il concetto di Mobile-First 😉

 

Content First, Contenuto, Design, federico gomato, Guida HTML, Guida Web Design, logica Content-First, Rispettare il Contenuto HTML, Tutorial HTML, Web Design, Web Design Tutorial

---