HTML e CSS: guida introduttiva
Oggi, per fortuna, non è più necessario essere esperti in codice o in programmazione per creare email dall’impatto visivo altissimo e già ottimizzate per mobile. Esistono strumenti, come l’editor drag & drop BEE, che consentono di ottenere risultati eccellenti senza scrivere nemmeno una riga di codice. Eppure, avere una conoscenza anche minima di argomenti normalmente lasciati agli “addetti ai lavori” è un’ottima norma nel bagaglio culturale di chi si occupa di Email Marketing.
Dallo sviluppo di integrazioni al supporto strategico, dalla creazione di concept creativi all’ottimizzazione dei risultati.
In questo post faremo una veloce carrellata sui concetti fondamentali che ruotano attorno al codice HTML e CSS, legandoci in particolar modo al mondo dell’Email Marketing. Una migliore conoscenza del lato tecnico, anche qualora si usino editor o programmi WYSIWYG, permette di avere un maggior controllo su tutta la comunicazione, prevenendo errori in fase d’ideazione.
Quindi prendiamo un bel respiro, allacciamo le cinture e partiamo!
Cosa sono HTML e CSS
L’HTML (HyperText Markup Language) è un linguaggio a markup. Un markup o tag è un segnaposto che definisce o il tipo di formattazione del contenuto (tabella, titolo, testo, ecc.) o la presenza di un oggetto (immagine, audio, video) nella pagina. Per definire un tag si usa la sintassi del tipo <nome del tag>.
In questo esempio puoi vedere l’output su browser (il bottone con link) e il codice HTML che gli sottostà.
Anche il CSS (Cascading Style Sheet) è un linguaggio di formattazione. Il suo sviluppo ha permesso non solo di separare il contenuto di una pagina dalla struttura, ma anche di scrivere un codice più pulito e di definire molte più proprietà di quelle che il solo HTML può normalmente permettere.
Rispetto all’immagine precedente, nota come cambia il bottone qui sotto una volta che all’HTML viene aggiunto un foglio di stile CSS:
Sia HTML sia CSS sono degli standard fissati dal W3C, l’organizzazione mondiale predisposta a sovraintendere lo sviluppo del web.
L’unione di HTML e CSS he creato uno strumento estremamente potente per la realizzazione di pagine web e in seconda battuta email. Infatti, se da un lato l’HTML definisce la struttura in cui i contenuti si devono disporre, il CSS li modella nella visualizzazione via browser o via client di posta.
HTML: come funziona
Entrando più nello specifico, si deve subito chiarire che l’HTML, occupandosi solo del front-end, non può essere considerato un linguaggio di programmazione. Infatti l’HTML è privo degli elementi propri della programmazione come la definizione di una variabile o la definizione di funzione.
Pagina HTML: struttura
Essendo uno standard, ogni documento per essere valido deve rispettare una struttura ben definita:
- Document Type Definition o DTD
- Tag <html>
- Tag <head>
- Tag <body>
DTD (Document Type Definition)
Il DTD definisce il paradigma di regole e di tag utilizzati. Dal 1991 ad oggi sono state sviluppate diverse versioni di HTML, ognuna con il proprio DTD. È necessario dichiarare esplicitamente l’ambito in cui si lavora.
Torna a guardare schermata di codice che trovi all’inizio del post: vedrai, evidenziati, gli elementi di struttura.
Tag <html>
Dopo il DTD si apre il tag <html>, il quale indica al browser che tutto ciò che è contenuto al suo interno è scritto in linguaggio HTML.
A questo punto si aprono in successione due tag molto importanti: <head> e <body> che assolvono a due compiti distinti, che non devono essere mischiati.
Tag <head> e <body>
Se il tag <body> contiene il corpo del messaggio (le tabelle, i testi, le immagini, i link, ecc.), nel tag <head> si definiscono le informazioni di servizio essenziali per la corretta visualizzazione della pagina.
In particolare:
- <title> è il titolo della pagina [obbligatorio]
- La definizione del foglio di stile – o CSS – tramite il tag <style>
- I riferimenti a eventuali risorse esterne come font, CSS o javascript
- Le meta informazioni come keyword e description
- Eventuale codice javascript appartenente al documento
Fortunatamente, per la realizzazione delle email, possiamo soffermarci solo i primi due punti. Non si deve confondere il tag <title> con l’oggetto della mail. <title> è il titolo del documento ed è obbligatorio secondo lo standard. È sempre meglio inserirlo e cambiarlo rispetto a quello di default (es. titolo del documento), perché altrimenti potrebbe dare qualche problema lato deliverability.
HTML tag
Si è detto che il tag <body> contiene il corpo del messaggio; ora faremo un passo in più e vedremo qualche esempio di tag per fissare il concetto di marcatore.
Supponiamo di voler definire un paragrafo con del testo. Dobbiamo usare il tag <p> e nel codice della pagina dobbiamo dichiarare dove inizia il paragrafo, scrivendo appunto <p>. Dopo di che possiamo inserire il testo e alla fine dobbiamo dichiarare la chiusura del paragrafo con </p>.
L’idea base è molto semplice: apro un tag, inserisco il contenuto, chiudo il tag. Per il caso precedente si avrà: <p>[Testo che compone il paragrafo]</p>.
Esempi di tag che comportano una chiusura sono:
- <table>, <tr>,<td> per costruire le tabelle
- <strong> per i bold
- <em> per definire un testo enfatizzato
- <a> per i link
Esistono anche tag che sono stati concepiti diversamente e che non necessitano chiusura. Ad esempio, per inserire un’immagine si usa <img>, ma contenendo esso stesso tutte le specifiche dell’immagine (altezza, larghezza, percorso dove è salvata l’immagine, ecc.) la chiusura risulta inutile. Un altro esempio è il tag break, <br>, che inserisce una linea vuota (i.e. un a-capo).
Per aumentare la possibilità di formattazione del contenuto di una pagina web è possibile definire per i tag degli attributi che ne specificano le proprietà. Quindi attraverso gli attributi è possibile modellare non solo la struttura del contenuto, ma anche la formattazione del documento.
Ad esempio, per le immagini si possono stabilire altezza e larghezza; per le tabelle, per le righe che le compongono e per le celle di una riga si può definire il colore dello sfondo o l’allineamento del testo, oppure per un testo si può definire il font utilizzato, le dimensioni e il colore.
CSS: come funziona
Abbiamo detto, dunque, che il CSS definisce i fogli di stile, ovvero proprietà aggiuntive rispetto a quelle determinate dall’HTML. I principali modi per applicare i CSS a un documento sono tre:
- Esternamente
- Internamente
- Inline
Nello sviluppo di un’email si utilizzano gli ultimi due metodi: internamente e inline:
- Applicare un CSS internamente significa definirlo nella head, con i tag <style> del documento HTML
- Inline significa applicarlo direttamente sul tag
Nell’immagine qui sotto puoi vedere applicati entrambi i metodi (oltre alla visualizzazione in browser Firefox).
Partiamo dal CSS interno. Dalla riga 6 alla riga 28, nel tag <style> sono definite le regole che gestiscono la visualizzazione del <body>, del <table>e della classe CTA. Entrando nel dettaglio:
- Per definire delle proprietà per il tag <body> è sufficiente citare il nome del tag (in questo caso solo body). Il browser mostrerà ogni elemento contenuto nel tag con le proprietà definite. Ciò significa che, a meno di una diversa specifica, i testi avranno tutti dimensioni 16px e colore #0e0e0e.
- Si può definire anche una classe (in questo caso CTA): le sue proprietà si applicheranno solo agli elementi su cui è stata definita.
Nel concreto succede quanto segue:
- Il testo di tutto il documento avrà un colore grigio scuro (color:#0e0e0e), una dimensione di 16px e il set di font è ‘Gill Sans’, Arial, ‘sans-serif’.
- Per tutti gli elementi che possiedono class=”CTA” il colore diventerà verde (color:#299210), un’eventuale sottolineatura sarà inibita (text-decoration:none) e in più si applicherà il grassetto.
Si noti come la classe CTA abbia sovrascritto le regole (il colore) definite nel tag body.
Per gli stili inline, il comportamento è simile. Alla riga 37 si trova style=”color: #E71317; font-size: 20px;” che sovrascrive la regola body, ridefinendo non solo il colore (da grigio scuro a rosso), ma anche le dimensioni del testo (da 16px a 20px).
Si noti che con uno stile inline si definisce localmente, solo per l’elemento una formattazione differente rispetto al resto del documento.
Entrambi gli esempi mostrano un altro meccanismo dei CSS: l’ereditarietà. Secondo questo paradigma tutte le proprietà applicate a un elemento padre sono ereditate dagli elementi figli, cioè dai suoi discendenti. In questo caso l’elemento con la classe CTA eredita da body tutte le proprietà per poi andare a sovrascrivere solo quelle esplicitate.
In conclusione: HTML e CSS come un unico strumento
Si è già detto che l’unione tra HTML e CSS ha creato uno strumento molto potente. Non solo per la formattazione dell’output, ma anche perché si è separato il contenuto della pagina dalle regole di visualizzazione, rendendo il codice molto più leggero e semplice da leggere.
Lato email, inoltre, questo connubio ha permesso di realizzare comunicazioni non solo impattanti, ma anche mobile responsive – comunicazioni che si adattano ai diversi dispositivi: dal desktop, ai tablet ai dispositivi mobile.
Nelle prossime settimane approfondiremo alcuni temi specifici relativi al potenziale dell’HTML per le email – stay tuned!
Share this article
