Come l'abbiamo fatto convertire i messaggi di posta elettronica Tuts + in modelli di monitoraggio della campagna

Nelle prime due parti di questa serie di casi di studio, abbiamo visto come sono state progettate le nuove e-mail Envato Tuts +, poi costruite come deliverable HTML / CSS statici. In questo ultimo pezzo del puzzle, ti mostrerò come abbiamo convertito questi file in modelli di Campaign Monitor.

In questa fase c'erano un paio di membri del team coinvolti nel processo: Cameron e me. Cam ha assunto l'incarico di integrare i digest in Campaign Monitor, ho gestito le newsletter, che spiegherò in questo post.

1. Prepara i tuoi file

Nicole ha consegnato una serie di file alla fine del processo di compilazione, inclusi HTML, CSS e risorse immagine. Insieme, si occupavano di diversi tipi di email, quindi ho dovuto prendere solo i bit necessari per il modello di newsletter e lavorare da lì.

Mancia: Scarica i file sorgente se vuoi seguirli.

Eroe locale

Attualmente, i percorsi all'interno dei file sono tutti relativi. Ci sono un paio di link ai file CSS, alcuni link all'interno di quelli alle immagini e tutti puntano intorno alla directory dei file locali così come la vediamo. Per esempio:

Quando carichiamo i nostri file alla fine del tutorial, Campaign Monitor riconoscerà tutti questi percorsi e li modificherà di conseguenza.

2. Inizia in alto

Il nostro processo è questo: prenderemo tutti i bit statici del nostro modello di email e li scambiamo per frammenti dinamici laddove possibile. Scorrendo verso il basso, il primo colpevole che trovo si trova sulla linea 73: un link alla versione web:

Qualcosa non sembra giusto? Visualizza la versione web

Quel collegamento sarà diverso ogni volta, quindi passiamo alla dinamica di CM :

Qualcosa non sembra giusto? Visualizza la versione web

Facile come quello Il prossimo!

3. Link più importanti

Il di cui ci occupiamo solo è uno dei pochi link importanti messi a disposizione da Campaign Monitor. Mentre siamo dell'umore, facciamo uso di uno o due altri. Il preferenze email il paragrafo può essere trovato intorno alla riga 346, e assomiglia a questo:

Sei iscritto a questa newsletter perché fai parte del team di traduzione. Non del tutto a tuo piacimento? Nessun problema: aggiorna le tue preferenze email o disiscriviti.

Usiamo  e  per rendere dinamica quella sezione:

Sei iscritto a questa newsletter perché fai parte del team di traduzione. Non del tutto a tuo piacimento? Nessun problema: aggiorna le tue preferenze email o Annulla l'iscrizione.

Ci sono un paio di altri link importanti, come ad esempio , ma non li useremo in questo caso.

4. Linee singole

La prossima cosa a cui dobbiamo partecipare è l'intestazione principale dell'email.

Intorno alla linea 87 lo troverai contrassegnato in questo modo:

Newsletter del progetto di traduzione
 
Mese 20XX

Paragrafi, con classi di intestazione e h1 o h2 (grazie e-mail HTML). Ognuno di questi deve essere modificabile da Campaign Monitor, quindi, dato che avremo solo bisogno di modificare il contenuto del testo e nient'altro, possiamo usare il  elemento modello:

 Newsletter del progetto di traduzione 
 
 Mese 20XX 

I paragrafi rimangono perfettamente intatti, aggiungeremo una regione modificabile all'interno di ciascuna di esse. Ogni linea singola ha un optional etichetta attributo, che verrà visualizzato in modo utile dall'editor di Campaign Monitor:

5. Linee multiple

Per contenuti che sono un po 'più complessi di titoli e linee, useremo il elemento. Sulla linea 134 troverai il contenuto del nostro "primo articolo" che utilizzeremo come introduzione per ogni email:

In questo progetto di traduzione newsletter n tempus nunc ullamcorper a. Etiam eget turpis augue. Proin un efficitur massa. In ac augue libero. Nulla nel tortore commodo, hendrerit nisl non, placerat nunc.
 
Ian Yates
 Editor, Envato Tuts+

Rendiamo dinamiche queste due sezioni:

 
In questo progetto di traduzione newsletter n tempus nunc ullamcorper a. Etiam eget turpis augue. Proin un efficitur massa. In ac augue libero. Nulla nel tortore commodo, hendrerit nisl non, placerat nunc.
   
Ian Yates
 Editor, Envato Tuts+
 

Seguono lo stesso schema di prima: regioni modificabili, con etichette opzionali, ma questa volta ci consentono un editor WYSIWYG:

6. Immagini modificabili

Scorri fino alla riga 168 e troverai un'immagine all'interno di una cella di una tabella, tutto da solo:

Questo farà parte di una sezione ripetibile (che tratteremo in un minuto), quindi rendiamo prima questa immagine dinamica. Non mi piace usare la parola "semplicemente" nei tutorial, ma in questo caso lo lascio scorrere: basta aggiungere il modificabile attributo al tag immagine. Fatto!

Il larghezza l'attributo è obbligatorio, ma il src (che ci fornisce un'immagine predefinita) è facoltativo, come lo è il nostro amico etichetta attributo.

Fatto ciò, l'editor ci consente di rimuovere l'immagine predefinita, caricarne una nuova, aggiungere un testo alternativo e (in modo cruciale) aggiungere un collegamento.

"I dati rigidi dicono: le e-mail con le immagini convertono quasi il doppio." - Chris Hexton, CEO e co-fondatore di Vero

Nota: tieni presente che se scegliamo di rimuovere completamente l'immagine, rimarrà il markup contenente. Ciò può comportare ampie aree imbottite senza contenuto, quindi considera come contrassegnare le immagini nel design.

7. Aree ripetibili

Quell'immagine è parte di una sezione che vogliamo essere in grado di ripetere tutte le volte che è necessario. Inizia sulla linea 146 e termina sulla riga 176, con i commenti:

Come abbiamo fatto prima con altre aree, dobbiamo rendere l'intestazione all'interno di questa sezione a e il contenuto a , fallo prima di andare oltre.

Per rendere ripetibile questo intero blocco, avvolgiamo i bit necessari in a elemento:

Questo ci darà alcuni controlli extra nell'editor di Campaign Monitor, permettendoci di duplicare la sezione, spostarla (utile per il riordino) o eliminarla.

Nota: il dovere contenitore a , un , o un .

Un'altra nota: non puoi nidificare elementi!

8. Disposizione

Ora per una sezione ripetibile con una differenza. È una sezione specifica per argomento e ogni argomento ne ha una, con il colore dell'argomento appropriato.

Nel caso della nostra newsletter del progetto di traduzione, a volte potremmo includere una sezione Fotografia e video, insieme a Codice e Sviluppo giochi. A volte possiamo saltare il codice. A volte potremmo includere tutti e nove gli argomenti. Quindi qual è il migliore per organizzare questo? Inserisci il elemento.

Possiamo usare più elementi di layout all'interno di un singolo blocco, in modo che ogni volta che duplichiamo il blocco ci viene data una scelta di layout. Nel nostro caso, vogliamo scegliere tra gli argomenti disponibili, quindi il nostro markup sarà un po 'come questo:

    ... 

Lì vedrai elementi di layout, ognuno con un'etichetta unica.

Importante: non usa le entità HTML con escape (come & piuttosto che &) all'interno delle etichette di layout.

Comincia dalla riga 183 avvolgendo i nostri blocchi di argomenti in a . Quindi avvolgi ciascuno dei blocchi di argomenti in a

9. Caricare su Campaign Monitor

Tutto il nostro duro lavoro è finito, ora abbiamo bisogno di caricare i nostri file su Campaign Monitor per poter utilizzare il nostro modello in una campagna email!

Vai al pannello di controllo di Campaign Monitor Modelli> Importa.

Successivamente, inserisci un nome per il modello, seleziona il file HTML completo, quindi seleziona tutti gli altri asset necessari (CSS e immagini) come un unico file zip. 

I tuoi file verranno caricati ed elaborati, il che richiederà un momento. Gli stili saranno ottimizzati (alcuni inline, alcuni inietti nel dell'HTML) e i percorsi verranno aggiornati. Al termine, il modello sarà disponibile per selezionare quando si avvia una nuova campagna!

Conclusione

Questo avvolge questo case study di email; una panoramica di come abbiamo progettato e realizzato le e-mail Envato Tuts +. Spero ti sia piaciuto seguire il processo e se hai bisogno di ispirazione email per il tuo prossimo progetto, assicurati di controllare gli ultimi modelli di email disponibili su Envato Market!

Web design