HTML e CSS: concetti di codifica e-mail

Immergersi nel mondo della programmazione può sembrare scoraggiante se non l'hai mai fatto prima. La codifica e-mail, in particolare, ha il proprio insieme di regole. Se non conosci la programmazione, ecco alcune cose da considerare prima di immergerti direttamente in HTML e CSS per la posta elettronica.

Devo codificare la mia email?

Se non hai esperienza di codifica, codificare un'e-mail da zero potrebbe non essere una soluzione pratica per te e certamente non è necessaria. VerticalResponse offre un'ampia selezione di modelli ottimizzati per dispositivi mobili e offre un editor di facile utilizzo che ti consente di personalizzare i nostri modelli pronti per l'uso con i tuoi contenuti.

Se hai esperienza e un certo livello di comfort nell'utilizzo o nell'apprendimento dell'HTML, la codifica di un modello di email personalizzato potrebbe essere un'ottima opzione. Come per la codifica di una pagina Web, devi comunque considerare i comportamenti del browser e del dispositivo. Inoltre, considera le impostazioni predefinite di stile unico di dozzine di client di posta elettronica come Gmail, Yahoo, Outlook e altri. Se sei abituato a codificare una pagina Web in HTML e ad applicare un foglio di stile CSS esterno, dovrai abituarti a lavorare con CSS internamente e in linea in modo che i tuoi stili non vengano sovrascritti dalle impostazioni predefinite di questi client di posta elettronica.

Vocabolario da conoscere

Se sei completamente nuovo alla programmazione, ecco cosa devi sapere su HTML e CSS:

L'HTML è un linguaggio che utilizzerai per strutturare e descrivere i tuoi contenuti. HTML sta per Hypertext Markup Language. Quando si codifica in HTML, si esegue il markup del contenuto con tag che indicano al browser Web come visualizzare informazioni come immagini e parole su una pagina Web.

CSS è un linguaggio che influenza la presentazione dei tuoi contenuti. Usando i CSS, puoi assegnare stili agli elementi HTML. CSS sta per Foglio di stile a cascata. La parola cascata è significativa perché le dichiarazioni di stile, o regole, saranno rispettate in base all'ordine di apparizione. Se fai due dichiarazioni per lo stesso elemento, quest'ultimo sarà onorato perché sovrascrive ciò che lo precede.

Ecco i modi per collegare il tuo CSS al tuo HTML:

CSS esterno: utilizzando un foglio di stile esterno (un file comunemente chiamato style.css) a cui si fa riferimento all'interno del file HTML. Questo è ottimo per i siti Web perché se hai 100 elementi comuni che si estendono su oltre 100 pagine, puoi cambiarli tutti in una volta con un'unica dichiarazione CSS.

CSS interno, noto anche come CSS incorporato: incluso il codice CSS all'interno dei tag <style> nella parte superiore del file HTML. Quando si codifica un'e-mail, questo può essere ottimo per assegnare stili generali che si applicano a elementi comuni. Tuttavia, questo metodo non è sempre supportato dalla posta elettronica.

Inline CSS: allegare codice CSS a un singolo elemento HTML direttamente all'interno del codice HTML. Nella codifica e-mail, questo metodo garantisce che determinati stili non vengano sovrascritti dalle impostazioni predefinite del browser e del client di posta elettronica.

Se sei abituato a configurare il tuo CSS esternamente o internamente, puoi costruirlo in questo modo e quindi utilizzare uno strumento inliner come questo di PutsMail per convertire i tuoi stili in CSS inline.

La relazione tra HTML e CSS

Per avere un'idea migliore di come HTML e CSS sono correlati e di come separare CSS da HTML può liberare la presentazione del tuo HTML, vai al fantastico e celebre sito web CSS Zen Garden, dove puoi visualizzare lo stesso markup HTML con CSS drasticamente diversi , codificato da noti designer.

Avvicinamento alla codifica e-mail

Quando codifichi un'e-mail da zero, mantienila il più semplice possibile. Usa un editor di testo semplice, come TextWrangler, Blocco note o Sublime, e stai lontano da editor visivi come Dreamweaver perché possono aggiungere elementi non necessari al tuo codice.

Per il layout, prova ad adottare un approccio mobile-first. Ciò significa progettare per piccoli schermi e farsi strada. Con la visualizzazione mobile in continuo aumento, assicurarsi che la tua posta elettronica abbia un bell'aspetto su telefoni e tablet è più importante che mai; non c'è motivo di creare un design complicato che stia bene solo su un desktop. Mantenere il tuo messaggio e il tuo design abbastanza semplici per i dispositivi più piccoli sarà anche più facile da codificare, sarà accessibile agli utenti di tutti i dispositivi e manterrà l'attenzione del tuo lettore focalizzata sull'invito all'azione principale.

Una volta che il layout e la codifica sono stati completati, assicurati di utilizzare uno strumento come Litmus o l'anteprima della posta in arrivo di VerticalResponse per l'editor HTML per visualizzare in anteprima l'aspetto della tua e-mail su vari browser e client di posta elettronica in modo da poter risolvere eventuali problemi prima di premere invia.

Da dove iniziare a imparare

Ci sono molti tutorial online in cui puoi imparare in modo pratico, in dettaglio come codificare un'e-mail. Un buon modo per approfondire la codifica e-mail è trovare un modello semplice che ti piace e dedicare un po' di tempo all'esame del codice. Acquisisci familiarità con i tag principali come <body>, <head> e <div> e poi nota come i tag a volte sono ulteriormente definiti in ID o classi, come <div class=”half-column”>. Si noti che la denominazione in un modello HTML di qualità sarà chiara e logica in modo che sia più facile capire cosa sta succedendo quando appare nel CSS.

Se sei pronto per una lezione passo passo, cerca i tutorial recenti (entro l'ultimo anno). L'approccio alla codifica viene costantemente riconsiderato. Un metodo ottimizzato per dispositivi mobili che ha guadagnato popolarità negli ultimi due anni, ad esempio, è l'approccio fluido/ibrido. Questo tutorial fluido/ibrido di Envato Tuts+ è ottimo per coloro che hanno già una certa comprensione dell'HTML. Per i principianti, Lynda.com offre molti corsi di codifica specifici per e-mail. Un buon corso ti guiderà attraverso un esercizio di codifica e fornirà un file di progetto di esempio scaricabile che puoi utilizzare come riferimento.

Dedica meno tempo a raggiungere più clienti

PROVA OGGI LA RISPOSTA VERTICALE

(È gratis!)

Nota del redattore: questo post del blog è stato originariamente pubblicato a marzo 2016 ed è stato rinnovato e aggiornato per accuratezza e rilevanza.