Modelli di email transazionali open source

Quando configuri un nuovo account SendGrid, la creazione di una serie di modelli di email per il tuo account è una delle attività più importanti da completare. Se hai intenzione di inviare e-mail tramite la nostra API per la tua app o servizio, molto probabilmente avrai bisogno di diversi tipi di modelli di e-mail. Alcuni dei più comuni sono la reimpostazione della password, le conferme e-mail e le ricevute.

Sebbene sul Web sia disponibile una vasta selezione di modelli di e-mail predefiniti, trovare un set facile da personalizzare per adattarsi al tuo marchio non è sempre facile.

È anche importante testare a fondo i modelli nei comuni client di posta elettronica. Questo processo può richiedere molto tempo e rallentare il processo di configurazione del tuo account SendGrid e iniziare a inviare e-mail.

Mi sono reso conto che il team di SendGrid potrebbe fornire valore ai nostri clienti creando un set open source di modelli di posta elettronica che gli utenti potrebbero sfruttare per coprire questi casi d'uso comuni. Non solo i modelli sono facili da personalizzare, ma sarai attivo e invierai rapidamente!

Il nostro set di modelli, che chiamiamo "Incolla", copre 5 casi d'uso:

• Reimposta password
• Conferma via email
• Lettere di benvenuto
• Ricevute
• Digest (giornaliero, settimanale o mensile)

Scarica i modelli su GitHub

Per iniziare con i nostri modelli Incolla, vai su GitHub e clona il repository o scarica la cartella Modelli Incolla. Vale anche la pena ricordare che questi modelli vivono in un repository open source di modelli di posta elettronica a cui altri utenti di SendGrid hanno contribuito a contribuire durante il nostro ultimo Hacktoberfest.

Personalizzazione dei modelli Incolla

Una volta che hai una copia locale dei modelli Incolla, aprili nel tuo editor di codice preferito (ti consiglio VSCode o Atom; sono entrambi gratuiti).

Consiglierei di iniziare con base.html poiché contiene la maggior parte dei componenti riutilizzabili presenti in molti altri modelli. Questi modelli condividono tutti una struttura comune per l'HTML e, sebbene nel documento siano presenti alcuni stili di base, la maggior parte degli stili si trova in linea.

Mentre sfogli l'HTML, noterai molti commenti HTML per indicare dove iniziano e finiscono i blocchi. Queste sono note importanti che ti aiuteranno a scansionare i modelli e iniziare a modificarli.

Noterai anche gli stili sugli elementi HTML per i colori di sfondo, la tipografia, la spaziatura, ecc. Ti incoraggio a sperimentarli per avere un'idea di come cambiano l'aspetto di questi modelli.

Aggiungi il tuo logo ai modelli

Una delle prime cose che vorrai fare è sostituire il logo dei modelli Incolla con il tuo. Puoi trovare rapidamente il blocco del logo cercando il suo commento HTML, indicando il punto di partenza:

All'interno di questo blocco, ti consigliamo di individuare il tag di ancoraggio (<a> ) e modificare l'HREF nel tuo URL. Il modello dovrebbe essere collegato alla home page di SendGrid per impostazione predefinita.

Dopo aver modificato l'URL, sostituiamo il logo Incolla con il tuo. Ti consiglio di archiviare il tuo logo in un luogo a cui puoi facilmente collegarti, come il tuo server web o una CDN. Dopo aver sostituito il logo src, regola gli stili in linea in modo che la larghezza/altezza sia corretta: questo dipenderà dalle proporzioni del tuo logo. Per impostazione predefinita, il logo Incolla è quadrato 48px, quindi abbiamo impostato gli stili di larghezza su 48px.

Esempio:

In questo esempio, viene fatto riferimento all'URL del logo Incolla insieme ad alcuni stili di larghezza per impostarlo sulla dimensione desiderata di 48 px. Regola questi valori per il tuo logo per assicurarti che appaia nitido.

Personalizzazione dei colori di sfondo

Come accennato in precedenza, il colore di sfondo è impostato su una varietà di blocchi per stabilire lo stile predefinito dei modelli Incolla (grigi e bianchi). Puoi facilmente cambiarlo (e dovresti) per abbinare i colori del tuo marchio.

Il modo più semplice per passare da uno stile all'altro è utilizzare il tuo editor per cercare gli stili inline, bgcolor e il colore di sfondo. Il valore di queste proprietà può essere sostituito con valori esadecimali (es. #000000) o nomi di colori (es. nero). Mentre elabori queste modifiche, è facile tenere d'occhio le cose se apri uno dei modelli nel tuo browser preferito e aggiorni mentre apporti le modifiche.

Esempio:

In questo esempio, il tag body ha uno stile di sfondo grigio chiaro. Questo valore del colore e altri all'interno del modello devono essere personalizzati in base al tuo marchio.

Personalizzazione dei pulsanti

I pulsanti sono uno dei componenti di interfaccia più comuni nei modelli di posta elettronica. Li utilizzerai come invito all'azione, evidenziando l'azione più importante che desideri che un utente esegua, come la conferma del proprio indirizzo email.

Per impostazione predefinita, i pulsanti di Incolla hanno lo stile di blocchi blu con un raggio di bordo sottile per arrotondare gli angoli. La personalizzazione di questi pulsanti in base al tuo marchio è simile alle modifiche che abbiamo già apportato al colore di sfondo del nostro modello. Cerca il blocco utilizzando il commento HTML che abbiamo aggiunto per te:

Abbiamo diverse celle di tabella a cui è applicato uno sfondo bianco (#ffffff) per creare il blocco attorno al pulsante, ma ti consigliamo di trovare la cella di tabella con i seguenti stili di seguito.

Esempio:

In questo esempio, <td> ha un bgcolor che viene utilizzato per impostare il colore del pulsante, insieme a un raggio di bordo per arrotondare leggermente gli angoli. Sperimenta con questi stili per ottenere un look unico per i tuoi bottoni che corrisponda al tuo marchio.

La seconda parte del nostro pulsante è l'ancora (<a> ) all'interno della cella della tabella mostrata sopra.

Questa ancora controlla l'URL in cui andrà a finire il pulsante quando viene cliccato, ma anche gli stili di testo per l'etichetta. Puoi regolare gli stili per regolare l'etichetta in base alle tue preferenze e a ciò che corrisponde al tuo marchio.

Personalizzazione della tipografia

Per impostazione predefinita, i modelli Incolla vengono caricati nel font web, Source Sans Pro, tramite Google Fonts. Puoi utilizzare un font web diverso dalla raccolta di Google o utilizzare il set standard di font che si trova sulla maggior parte dei computer in questi giorni (Arial, Georgia, Times, ecc.).

Se hai intenzione di utilizzare un font web diverso, dai un'occhiata ai miei suggerimenti e trucchi per lo sviluppo della posta elettronica per alcuni suggerimenti utili. Assicurati di sfogliare l'HTML per tutti gli stili in linea che fanno riferimento alla famiglia di caratteri e regola in base alle tue preferenze.

Esempio:

In questo esempio, <td> ha uno stile della famiglia di caratteri impostato per utilizzare Source Sans Pro, con alcuni ripiegamenti su caratteri più standard nel caso in cui il webfont non venga caricato.

Pensieri finali

Spero che questi suggerimenti ti aiutino a personalizzare questi modelli per adattarli al tuo marchio e renderti operativo sulla piattaforma di SendGrid. In futuro, spero di espandere il nostro repository di modelli di posta elettronica con più modelli, ma anche uno strumento di creazione che renderà il processo di personalizzazione molto più rapido.

Se riscontri problemi lungo il percorso, invia un problema con il repository GitHub e, se desideri contribuire, invia una richiesta pull. Cerchi altri modelli con cui sperimentare? Prova i modelli di email HTML reattivi gratuiti di SendGrid.