Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Come formulare una strategia di sviluppo e progettazione delle email

by
Difficulty:IntermediateLength:MediumLanguages:

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:

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.

Analytics report
Relazione riepilogativa di Litmus Analytics, mostra i dati dei client email e webmail.

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.

Analytics report showing popularity
I più popolari client email e webmail.

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:

  1. Garantire che le campagne email si visualizzino alla perfezione.
  2. Garantire che si possa interagire facilmente con le vostre campagne email, ad esempio utilizzando pulsanti che siano selezionabili nella loro intera area.
  3. 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:

  1. 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.
  2. 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
  • Layout responsive
  • Web font
  • Gif animate
  • Immagini di sfondo
  • Visualizzare alcuni contenuti (numeri, date e termini correlati come fino a), come collegamenti blu o grigi (senza implementare l'hack del collegamento blu)
Gmail
  • Layout responsive
  • Nessun web font
  • Gif animate
  • Immagini di sfondo (eccetto l'applicazione Gmail per gli utenti con un account non Gmail)

Caratteristiche di sviluppo e funzionalità supportate

Client email /
Client Webmail
Sviluppo
Caratteristiche e funzionalità supportate
Microsoft Outlook
  • Richiede <table> per la creazione della struttura email
iOS
  • Supporta <table> e / o <div> per la creazione della struttura email
Gmail
  • Supporta <table> e / o <div> per la creazione della struttura email
  • Richiede il CSS inline per lo stile degli elementi essenziali in alcune versioni, tra cui Gmail su Android 5.1, Gmail su Android 6.1 e Gmail App IMAP

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:

  1. Un approccio al design.
  2. Un approccio allo sviluppo.
  3. Un approccio a eventuali miglioramenti progressivi.
  4. 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
  • Layout fisso (Microsoft Outlook) e layout responsive (iOS Mail / Gmail sul cellulare)
  • Font web safe (Microsoft Outlook) (questi saranno sovrascritti dai caratteri nativi su Gmail per Android)
Sviluppo
  • La struttura <table> o la struttura <div> avvolta nella struttura fantasma <table> (Microsoft Outlook / iOS Mail)
  • Il font-size dei titoli e delle intestazioni dimensionato per adattarsi all'interno del viewport su mobile, con @media query utilizzato per ingrandire font-size per il desktop (Gmail)
Miglioramento progressivo
  • Web font, simili nello stile ai font web safe per mantenere l'integrità del design (iOS Mail)
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
  • Mobile
  • Layout responsive (iOS Mail / Gmail sul cellulare)
  • Web font e font web safe (questi saranno sovrascritti dai caratteri nativi su Gmail per Android)
Sviluppo
  • La struttura <div> o la struttura <div> avvolta nella struttura fantasma <table> (se uno dei ‘ client secondari’ è Microsoft Outlook)
  • Il font-size dei titoli e delle intestazioni dimensionato per adattarsi all'interno del viewport su mobile, con @media query utilizzato per ingrandire font-size per il desktop (Gmail)
Miglioramento progressivo
  • Web font, simili nello stile ai web safe font per mantenere l'integrità del design (iOS Mail)
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.

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.