9 trucchi per progettare la newsletter HTML perfetta

Una newsletter e-mail è il modo perfetto per rimanere in contatto con i tuoi clienti o follower. Spesso la tua azienda o il tuo sito web presenteranno numerosi aggiornamenti di prodotto o eventualmente eventi imminenti che vorresti condividere. È sempre possibile pubblicare nuove informazioni sul tuo blog o sui tuoi flussi di social media, ma il tuo pubblico non può che spingersi così lontano per raggiungerti. In questo caso, l'e-mail non è sicuramente una tecnologia morta, ma un potenziale inutilizzato.

Il processo di creazione e invio di una newsletter è molto più semplice di quanto si possa pensare, ma per progettare un modello personalizzato e creare il proprio codice - questo può richiedere più tempo.

Abbiamo raccolto alcuni fantastici suggerimenti per progettare newsletter HTML di alta qualità come mai prima d'ora. Anche se sei un principiante, troverai sicuramente alcune informazioni preziose per iniziare il processo di marketing via e-mail.

Obiettivi di una newsletter

Prima di entrare negli aspetti di progettazione, dovremmo chiarire il tuo scopo per la creazione di una newsletter. A seconda del tipo di sito Web che si esegue, le informazioni contenute nella newsletter possono variare notevolmente rispetto ad altre, ma lo scopo principale di una newsletter è quello di fornire aggiornamenti convenienti direttamente nella posta in arrivo del tuo lettore.

È probabile che gli utenti di Internet pesanti controllino la posta elettronica più di due volte al giorno. Anche coloro che sono costantemente impegnati si prenderanno il tempo di leggere i loro messaggi almeno una volta al giorno. Questo è il momento perfetto per catturare l'attenzione anche senza richiedere visite al tuo sito. Anche se nessuno sta facendo clic sui tuoi link, l'informazione è ancora ricevuto, che è grande per la costruzione di un marchio.

Considera alcuni degli argomenti che dovresti offrire nel tuo progetto. Stai includendo i link alla registrazione per il tuo servizio; eventuali link ai blog o articoli pubblicati più di recente sul tuo sito? Il layout della tua newsletter rifletterà il modo in cui desideri che i tuoi lettori rispondano, ma alla fine stai cercando di suscitare interesse e trasmettere alcune informazioni interessanti alle masse.

1. Utilizza le tabelle nei tuoi layout

Questo può sembrare un po 'contraddittorio rispetto ai moderni standard web odierni, ma le e-mail sono ancora arcaiche nei loro motori di rendering, quindi è necessario costruire verso modelli più vecchi. Purtroppo i tavoli sono la via più facile per far funzionare tutto correttamente tra i vari client di posta elettronica. A seconda delle tue conoscenze sulla creazione di layout basati su tabelle, questa potrebbe effettivamente essere una buona notizia!

Potresti anche chiedertene il motivo div e altri elementi di blocco non sono una buona idea. La maggior parte dei client di posta elettronica sono costruito per rimuovere qualsiasi CSS estraneo soddisfare. Ciò significa che non sarai in grado di utilizzare gran parte di nulla, ad eccezione di CSS in linea (e anche il supporto completo è scadente). Clienti come Microsoft Outlook 2007 e Gmail di Google hanno un supporto molto scarso per elementi flottanti e posizionamento diretto.

La soluzione migliore sarebbe annidare più tabelle l'una dentro l'altra. Padding e margini non sono impostati su una scala particolare tra molti client di posta elettronica. Questo è un motivo per cui attenersi all'utilizzo width = "value" su tutti gli elementi della tua tabella. Questi visualizzeranno sempre la stessa larghezza, indipendentemente dal client di posta elettronica che i tuoi lettori stanno utilizzando, quindi è molto più sicuro e più coerente per impostare padding e margini usando celle di tabella vuote.

2. Posizionamento a larghezza fissa

Hai alcune opzioni quando crei le bozze del layout della tua newsletter, tuttavia la migliore opzione da seguire è per impostare le larghezze fisse per la tabella che contiene. Ci sono molte risoluzioni diverse del monitor: non sarai in grado di accontentare tutti. Se non si dispone di elementi particolari con larghezza statica, è sempre possibile utilizzarli width = "100%" sulla tua tabella di contenimento. Ciò consentirà al contenuto di riempire l'intera larghezza di tutti i client di posta elettronica.

Tuttavia, per molti questo metodo è un po 'troppo lassista. Newsletter costruttiva richiederà una larghezza fissa nella maggior parte dei casi, specialmente se utilizzerai banner e immagini con una dimensione particolare. Raccomando di lavorare con 500 px - Larghezza massima del documento di 600 px. Le dimensioni orizzontali dello schermo dell'iPhone e alcuni modelli BlackBerry sono limitate a 320 px, quindi anche a 500 px il tuo modello di e-mail sarà ridimensionato per adattarsi correttamente.

Considerando che molti utenti di dispositivi mobili scelgono di visualizzare le e-mail senza HTML, questo non dovrebbe essere un problema enorme. Gli utenti di client desktop e webmail probabilmente sperimenteranno una configurazione simile indipendentemente dal sistema operativo che utilizzano. In caso di dubbio crea alcuni modelli di modelli e scegli quelli che ti piacciono di più!

3. Unità pixel

A meno che non utilizzi elementi fluidi nella tua newsletter, è probabile che dovrai ridimensionare alcune cose. Cerca di tenerlo dentro pixel (px) piuttosto che in un altro tipo di unità. Le percentuali possono facilmente confondersi con i numerosi client Webmail e le finestre del software. Con un minor numero di elementi di pagina, i layout fluidi possono uscire indenni, anche se con alcuni bug.

Ma i pixel sono sempre una cosa sicura. Lavorando all'interno del limite di larghezza massima di 600px, puoi effettivamente inserire un sacco di contenuti all'interno. L'esposizione è più semplice se dividi i tuoi layout in due o tre colonne e scrivi sempre le tue dimensioni in pixel. L'unica eccezione potrebbe essere dimensioni dei caratteri dove ems può supportare meglio i tuoi lettori, ma em dimensionamento sarà diverso in modo simile percentuali sarebbe - così per semplicità, attenersi agli allineamenti basati su pixel.

4. Le possibilità con i CSS

Potrebbe sembrare che la progettazione di e-mail sia destinata a distruggere l'uso degli stili CSS. Sebbene ci siano molte funzionalità non supportate, il CSS è ancora perfettamente accettabile in molti casi. Campaign Monitor ha una bella tabella di proprietà CSS supportate elencate dal client di posta elettronica. Tutto supporterà le basi come famiglia di font e stile del font, così puoi saltare il tag se vuoi.

Siate cauti riguardo ai vostri stili di font per non spingere troppo oltre i limiti. Se ti senti a disagio con gli stili in linea, è sempre possibile utilizzare il tag del font HTML anche se è stato deprecato. Se sei un designer CSS, non hai bisogno di uscire dal sistema, ma qualsiasi codice CSS abbreviato può causare disegni buggati. Ad esempio il font: 12px / 14px Arial, sans-serif; la stenografia può aiutare a risparmiare molto spazio, ma non è completamente accettata per la progettazione di e-mail, anche quando viene utilizzata con gli stili in linea.

Anche le tue scelte di colore dovrebbe essere scritto a mano. Colori esagonali come #ccc o # E3F deve essere scritto per intero come #CCCCCC o # ee33ff, rispettivamente. Se riesci a costruire ciò di cui hai bisogno senza CSS, ti consiglio questo percorso, ma non esagerare completamente dai CSS nei disegni di e-mail perché contrariamente alla credenza popolare è supportato nella maggior parte dei casi.

5. Migliori pratiche dei collegamenti di ancoraggio

Sicuramente vuoi includere alcuni link nella tua newsletter. Questi potrebbero essere collegamenti in uscita ad altre pagine del Web o collegamenti che conducono alle pagine più popolari sul tuo sito web. Inoltre, la maggior parte dei footer conterrà un link di annullamento dell'iscrizione affinché i tuoi lettori possano scegliere di uscire dal processo di posta elettronica, ma come dovresti gestire tutti questi link nel tuo progetto?

Bene, va notato innanzitutto che i client di posta elettronica sono molto pignoli con i loro progetti. Molti sceglieranno di sovrascrivere i tuoi stili di collegamento, anche con CSS in linea. Un trucco è quello di includi sia il colore in linea sia un tag di span aggiuntivo all'interno dell'elemento di ancoraggio. Se il colore e lo stile dei tuoi collegamenti sono importanti per il design generale, devi prendere la precauzione in più. Ho aggiunto un piccolo esempio di codice qui sotto:

qualche link text

Gli effetti al passaggio del mouse sono non supportato in Outlook 2007/2010, Gmail, iOS o Android. Puoi comunque voler includere il a: hover stile per tutti i client di supporto: Outlook 2000/2003, Hotmail, Apple Mail e Yahoo! mail, ma personalmente non vedo molti benefici nell'esperienza utente parziale, dal momento che i selettori di ancoraggio non sono fortemente supportati offrendo solo 2-3 colori di collegamento da usare durante il tuo design.

Come presunzione, gli utenti si aspetteranno che i tuoi link si aprano in una nuova scheda o finestra. Idealmente il target = "_ blank" l'attributo dovrebbe essere sufficiente per consentire a tutti i browser di riconoscere questa funzionalità e l'inclusione di questo attributo sui collegamenti di ancoraggio non dovrebbe influire negativamente su software di posta elettronica come Lotus Notes o Outlook.

6. Test in tutti i principali clienti

Uno studio recente dei client di posta elettronica più diffusi (realizzato da Campaign Monitor) mostra dieci dei client di posta elettronica più popolari nell'ultimo anno. Può sembrare un po 'noioso ma i designer dovrebbe prendere l'abitudine di controllare le loro newsletter su tutti i principali client di posta elettronica, per lo meno su alcuni dei client più comuni come Gmail, Hotmail o Yahoo! posta.

Questo non include solo webmail, ma anche software operativo su Mac OS X e Windows. Anche secondo il loro diagramma posta iOS e androide sono entrambi entrati nella top 10 degli ultimi anni. Infatti, iPhone, iPod Touch e iPad Mail sono al primo posto tra i più popolari in assoluto sotto Outlook! Sfortunatamente non c'è un modo per testarli senza possedere uno dei dispositivi - quindi dovrai accontentarti di altre opzioni.

Un bug del supporto mobile è disponibile in molti modelli di iPhone e Android. Il rendering di e-mail mobile sarà spesso ridimensiona il testo all'interno del tuo modello. Ciò potrebbe non influire molto sul tuo design, ma può essere fastidioso per alcuni lettori. Usando il CSS -webkit-text-size-adjust: nessuno;, volontà garantire una dimensione di testo predefinita anche per tutti i motori di analisi senza bisogno di testarlo.

Se conosci amici o colleghi che usano software alternativo, potresti volerlo chiedi il loro aiuto per testare la newsletter. Puoi entrambi invia loro una copia dell'e-mail controllare sul proprio dispositivo o prendere in prestito il dispositivo eliminare attivamente bug di codifica. Fortunatamente Outlook offre una versione di installazione Mac, quindi non è necessario rintracciare un utente Windows per tali ottimizzazioni, ma quando si tratta di Lotus Notes o Windows Mail, si può essere sfortunati.

L'alternativa è pagare per una soluzione come Anteprima della mia e-mail, sfortunatamente non forniscono account demo gratuiti, ma il loro servizio è ben noto per offrire terrificanti anteprime del tuo design. L'e-mail su Acid è un servizio simile che offre un account gratuito ma non consente di eseguire test su tutti i client, il che significa sconfiggere lo scopo. I servizi di rendering online dovrebbero essere utili se è necessario testare molti modelli di newsletter a lungo termine senza l'uso di computer alternativi, tuttavia non sono fondamentali, quindi non stressare se non puoi testarli tutti!

7. Offrire sempre viste basate sul Web

I lettori non saranno sempre in grado (o essere disposti) a visualizzare la tua e-mail in modo nativo. Offrendo un'altra versione da qualche parte sul Web darà un senso di facilità e compatibilità. Questo processo non può essere completamente automatizzato a meno che tu non voglia includere un testo normale versione.

In questo modo, lo faresti spoglia tutti i tag HTML dal layout della newsletter. Non saresti in grado di includere collegamenti o stili per nulla. Tutto il contenuto sarebbe semplicemente essere presentato come un file di testo normale per i lettori senza le funzionalità di rendering. Questa è certamente una buona alternativa, ma quando offri una versione Web completa della stessa newsletter toglie il danno causato da qualsiasi bug di rendering. La maggior parte dei lettori eseguirà un browser Web aggiornato che è possibile personalizzare e creare la tua newsletter su e alla perfezione.

L'impostazione della pagina è interamente a tua scelta. Alcuni siti Web lo faranno dedicare un intero post al blog per duplicare il contenuto dell'e-mail, forse con alcuni Informazioni aggiuntive. Gli altri lo faranno creare una pagina separata dal sito Web principale senza collegamenti diretti nella navigazione. Questo metodo può essere utile in quanto i lettori non saranno distratti dal modello del sito Web principale o dal contenuto della barra laterale.

8. Aggiunta del contenuto dell'immagine

Le immagini sono un'altra ragione per offrire ai tuoi lettori una soluzione basata sul web. Per impostazione predefinita, i client di posta elettronica sono impostati per eliminare le immagini dal contenuto. Se il tuo indirizzo viene aggiunto a un elenco sicuro, tutte le immagini verranno visualizzate per impostazione predefinita, ma l'utente deve accettare questa configurazione quindi non è certamente una garanzia. Appena assicurati che le immagini non siano richieste come parte del contenuto principale, ma incluso come un tocco in più per l'estetica della pagina.

Dopo aver esportato la grafica, ci sono alcuni suggerimenti per creare immagini specifiche per la posta elettronica. Lo vorrai sempre imposta gli attributi di larghezza e altezza sul tuo img tag. Senza queste specifiche in ordine, alcuni client distorcono il contenuto dell'immagine. Un alt il tag si rivelerà utile, quindi i visitatori sapranno cosa contiene il contenuto dell'immagine prima che venga caricato.

Come accennato prima, posizionare le immagini nella tua e-mail può essere complicato. Evitare l'uso di galleggianti a tutti i costi! L'immagine align = "sinistra" l'attributo funzionerà molto meglio o in alternativa mappare le celle esatte della tabella per adattare le tue immagini lungo la parte superiore, sinistra o destra della tua newsletter. Non sarai in grado di ottenere un perfetto abbinamento con così tanti clienti là fuori (in particolare i client mobili), ma ottimizzare le tue immagini e mantenere le dimensioni dei file piccole per i migliori risultati.

Per quanto riguarda la memorizzazione delle immagini, è consigliabile che tu mantenere tutti i file nel proprio server Web. Questa è l'opzione migliore invece di utilizzare un altro host di immagini o caricando i file su un servizio di newsletter online. Inoltre dovresti separare il contenuto delle tue newsletter dal resto delle immagini in una struttura di cartelle così / Img / e-mail o / Img / email / 2011.

9. Evita la cartella spam!

Questo può essere difficile da sentire, ma non tutti i client di posta elettronica sono amichevoli verso le newsletter. Ci sono miliardi di e-mail inviate ogni giorno e la maggior parte contiene spam o contenuti dannosi, quindi avere queste misure di sicurezza incorporate nella Posta in arrivo è chiaramente per precauzioni di sicurezza.

Tuttavia, quando si tratta di marketing su Internet, puoi facilmente scoraggiarti per vedere la tua ultima newsletter finire con la spazzatura. Per ridurre le possibilità che questo accada, dovresti ripulisci il tuo design per semplicità. Non fare immagini fastidiose o fai esplodere il tuo testo del titolo con centinaia di parole chiave.

Anche provare a mantieni i tuoi contenuti brevi e in tema. Non è necessario includere il contenuto completo per tutti i tuoi articoli o pagine. Prova ad aggiungere una frase o due con un link alternativo al tuo sito web al posto di una lunga lista. Il più breve è la tua e-mail, più è probabile che superi l'ispezione spam.

Newsletter Design Gallery

Che divertimento sarebbe un articolo di newsletter via e-mail senza alcuni esempi fantastici? Ci sono un sacco di disegni e modelli di newsletter e-mail da verificare su Google. HTML E-mail Gallery è una fonte molto popolare di ispirazione.

Di seguito sono inclusi gli screenshot delle numerose newsletter nella galleria di Campaign Monitor. Speriamo che questi fantastici layout possano darti delle idee fantastiche per i tuoi progetti.

Divertiti a progettare le tue newsletter ideali!

Alertful for Business