Come formulare una strategia di sviluppo e progettazione delle email
Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)
In questo tutorial spiegherò come concentrare i vostri sforzi sui client di posta elettronica e webmail client utilizzati dal vostro target di riferimento.
Nota: questo tutorial è parte di un'intera settimana dedicata alle email su Tuts+ Web Design – date un'occhiata alla guida di apprendimento di Padroneggiare l'email in HTML per saperne di più!
1. Comprendere l'importanza di una strategia
Il vostro target di riferimento ha accesso a una vasta gamma di client email, client webmail e dispositivi, e, poiché non c'è nessuna email equivalente agli standard W3C, come sperimentano le vostre campagne email varieranno a seconda di quello che sta usando per visualizzarle e quello che sta usando per interagire con esse.
Per esempio, potrebbero utilizzare:
- Microsoft Outlook, che non riproduce le gif animate oltre il primo fotogramma.
- Gmail, che non esegue il rendering dei web font.
- iOS Mail, che riproduce le gif animate ed esegue il rendering dei web font, ma anche, inutilmente, esegue il rendering di alcuni contenuti come collegamenti blu o grigi!
Pertanto, per offrire una grandiosa esperienza utente al vostro target di riferimento, è necessario formulare il design dell'email e la strategia di sviluppo che tiene conto dei client di posta elettronica e dei client webmail che usano. Uno che consente di sfruttare il loro meglio, e superare (con uno o due hack email) le loro caratteristiche peggiori e più impegnative.
La domanda è: come lo si può fare, quando il pubblico di riferimento potrebbe impiegare un numero qualsiasi di client di posta elettronica e di client webmail, su un qualsiasi numero di dispositivi? La risposta, è utilizzando uno strumento analitico per email per scoprire quale stanno usando.
2. Scoprite quale client usa il vostro pubblico
Gli strumenti analitici per email, come quelle che si trovano su Litmus ed Email on Acid, monitorano le campagne di email individuali e creano un report, fornendo preziosi dati sui client email e i client webmail, oltre al dispositivo, al sistema operativo e ai dati di coinvolgimento. Per generare e accedere a questi dati, è necessario creare un collegamento di rilevamento univoco all'interno dello strumento, per ognuna delle vostre campagne email e costruirlo per ogni rispettiva email HTML. Può apparire come questo:
<style data-ignore-inlining>@media print{ #_t { background-image: url('https://tel8cld8.emltrk.com/tel8cld8?p&d=Your_Email_Campaign_Name');}} div.OutlookMessageHeader {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} table.moz-email-headers-table {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} blockquote #_t {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')} #MailContainerBody #_t {background-image:url('https://tel8cld8.emltrk.com/tel8cld8?f&d=Your_Email_Campaign_Name')}</style><div id="_t"></div> <img src="https://tel8cld8.emltrk.com/tel8cld8?d=Your_Email_Campaign_Name" width="1" height="1" border="0" alt="" />
Una volta che avete inviato la vostra campagna di email, con il link di monitoraggio integrato, inizierete a veder apparire i dati all'interno della sua relazione analitica. Allora avrete bisogno di lasciare tempo sufficiente per buona parte dei vostri destinatari di aprire la vostra campagna email, per ottenere un quadro preciso di come l'hanno vista e hanno interagito.



Come inviate sempre più campagne email al vostro pubblico di destinazione, vedrete che iniziano ad emergere i trend nei rapporti analitici delle email, consentendovi di identificare quali sono i client di posta elettronica e i client webmail più popolari tra il pubblico di destinazione, e che è il minimo. Vale la pena affermare qui, che non è saggio formulare il vostro design dell'email e la strategia di sviluppo su un rapporto, poiché può essere un'anomalia, quindi iniziate con un minimo di tre.
Ora siete pronti ad analizzare i vostri report analitici delle email e stabilire su quali client di posta elettronica e client webmail per formulare la vostra strategia.
3. Ridurre i client sui quali stabilire una strategia
Iniziate analizzando le relazioni nel vostro strumento analitico delle email, guardando principalmente ai client di posta elettronica e ai client webmail che sono stati utilizzati dal vostro target per aprire le vostre campagne email. Identificate il client email e webmail più popolare del pubblico di destinazione, indicato dalla percentuale di gradimento registrata da ciascuno di essi.



Il più popolare client email e webmail client dovrebbe essere considerato il "client primario" del pubblico di destinazione, e quello su cui dovreste preparare la vostra strategia di progettazione e sviluppo delle email. Come guida, la loro percentuale di gradimento collettivo dovrebbe raggiungere un minimo del 60-70% ed essere composta da due o tre client email e / o webmail.
Il restante 30-40% dovrebbe essere considerato come "client secondario" del pubblico di destinazione.
La strategia di progettazione e sviluppo di email quindi, dovrebbe essere formulata per fornire quanto segue ai "client primari" del vostro target:
- Garantire che le campagne email si visualizzino alla perfezione.
- Garantire che si possa interagire facilmente con le vostre campagne email, ad esempio utilizzando pulsanti che siano selezionabili nella loro intera area.
- Controllare, dove possibile, che le caratteristiche dei client email e webmail aggiungano valore all'esperienza utente.
E fornire il seguente al "client secondario" del vostro pubblico:
- Garantire i messaggi della vostra campagna email e gli inviti all'azione siano chiari, e mentre non potrebbero essere visualizzati senza problemi, o esattamente allo stesso modo come i "clienti primari", non si perda troppo sonno per questo.
- Garantire che sia facile interagire con le vostre campagne email.
Dopo aver stabilito quali sono i "client primari" e i "client secondari" del vostro pubblico di destinazione, siete quasi pronti per iniziare a formulare la vostra strategia di progettazione e sviluppo dell'email. Tuttavia, prima di farlo, dovete comprendere le loro caratteristiche uniche per garantire una grandiosa esperienza utente.
4. Identificare i "client primari" e "secondari"
Comprendere correttamente i vostri client primari e secondari vi mette in grado di prendere buone decisioni di progettazione e sviluppo, nel formulare la strategia di progettazione e sviluppo dell'email.
Anche se non esaustiva, ecco alcune delle caratteristiche e delle funzionalità supportate da alcuni dei client più popolari email e webmail. Vale la pena affermare, che alcune delle caratteristiche predefinite possono essere migliorate o superate utilizzando degli hack.
Caratteristiche del design e funzionalità supportate
Client email / Client Webmail | Design Caratteristiche e funzionalità supportate |
---|---|
Microsoft Outlook |
|
iOS |
|
Gmail |
|
Caratteristiche di sviluppo e funzionalità supportate
Client email / Client Webmail | Sviluppo Caratteristiche e funzionalità supportate |
---|---|
Microsoft Outlook |
|
iOS |
|
Gmail |
|
Dopo aver stabilito quali sono i client primari e secondari del vostro pubblico di destinazione e aver compreso le loro caratteristiche, siete pronti per formulare una strategia di progettazione e sviluppo dell'email.
5. Formulare il vostro design e la strategia di sviluppo
Utilizzando le conoscenze che avete acquisito dai rapporti analitici delle email e la comprensione dei vari client del pubblico di destinazione, potete ora formulare la strategia. Ricordate, il vostro obiettivo è quello di offrire un'esperienza utente grandiosa al vostro pubblico di destinazione. Se disponete di più gruppi di destinatari, sarà necessario creare una strategia per ognuno di loro.
Cosa comprende un'email design e una strategia di sviluppo
Una strategia di progettazione e sviluppo è composta da quattro elementi chiave; ognuno informato e influenzato dal client principale del pubblico di destinazione. Gli elementi chiave sono:
- Un approccio al design.
- Un approccio allo sviluppo.
- Un approccio a eventuali miglioramenti progressivi.
- Una base logica, che delinea il pensiero dietro la strategia.
Strategie esemplificative
Qui ci sono alcune strategie esemplificative, basate su un reale target di pubblico, con i client email e webmail che influenzano ogni approccio indicato tra parentesi.
Strategia #1
Client primari | Microsoft Outlook (50%) iOS Mail (20%) Gmail (10%) |
---|---|
Design |
|
Sviluppo |
|
Miglioramento progressivo |
|
Base logica | Poiché la maggior parte del target di riferimento utilizza Microsoft Outlook, un client di posta fisso, le email dovrebbero essere progettate principalmente per la visualizzazione e l'interazione con il desktop. La mancanza di supporto dei web font, significa anche che dovrebbero essere usati i web safe font. Le tecniche di miglioramento progressivo possono essere implementate per sfruttare alcune delle caratteristiche di progettazione e sviluppo che offrono gli altri client di posta elettronica e webmail utilizzati da questo target, quali i web font su iOS Mail e le gif animate su Gmail, benché saranno necessari degli hack per email appropriati per garantire che Microsoft Outlook non esegua il rendering con i font di fallback come Times. |
Strategia #2
Client primari | iOS Mail (40%) Gmail (30%) |
---|---|
Design |
|
Sviluppo |
|
Miglioramento progressivo |
|
Base logica | Poiché la maggior parte del target di riferimento utilizza iOS Mail, potete essere più creativi, poiché avete più funzionalità di progettazione e sviluppo da sfruttare, come la possibilità di utilizzare i web font per il titolo e le intestazioni. L'uso di Gmail è più significativo tra questo pubblico di destinazione, ma a causa dell'image caching di Google, è impossibile identificare quale versione stanno utilizzando e se supporta o meno il CSS interno. Così, come con la strategia #01, l'email deve essere sviluppata per funzionare sul mobile senza fare affidamento sul CSS interno e @media query. |
Cosa sono le tabelle fantasma?
Le tabelle fantasma gli elementi di <table>
creati per essere visibili solo su Microsoft Outlook. Come tali, i loro tag di apertura <table>
, <tr>
e <td>
e i loro tag di chiusura </td>
, </tr>
e </table>
, sono avvolti nei commenti condizionali di Microsoft – <!--[if true]>
e <![endif]-->
per esempio.
Consentono di creare email per Microsoft Outlook, che consentono anche di costruire le email per altri client email e webmail con i <div>
. La costruzione di email con i <div>
, vi garantisce che le email siano accessibili e vi consente di trarre vantaggio dalla flessibilità che offre lavorare con i <div>
, come la possibilità di utilizzare la proprietà float
.
<!--[if true]> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <div style="width:auto; max-width:540px; font-size:16px; line-height:24px; color:#3f3f3f; padding:0 20px; margin:0 auto;"> </div> <!--[if true]> </td> </tr> </table> <![endif]-->
Conclusione
Come avete scoperto in questo tutorial, è importante avere una strategia di progettazione e sviluppo delle email, se avete intenzione di offrire un'esperienza utente grandiosa al vostro pubblico di destinazione. È anche importante rieseguire regolarmente e analizzare i rapporti del vostro strumento analitico dell'email, poiché il pubblico di destinazione potrebbe cambiare il loro client di posta o webmail scelto di volta in volta.