Bootstrap è il framework alla base di un numero enorme di siti e applicazioni web, e prima o poi ognuno di essi deve inviare email: un messaggio di benvenuto dopo la registrazione, un link per reimpostare la password, una conferma d'ordine. I nostri modelli di email gratuiti per progetti Bootstrap ti offrono design in linea con l'aspetto del tuo sito, usando il tipo di markup che le caselle di posta capiscono davvero.
Perché i modelli di email Bootstrap richiedono un HTML diverso
Una pagina Bootstrap si basa su flexbox, media query e un foglio di stile caricato da un file o da una CDN. I client di posta trattano tutti e tre in modo molto diverso dai browser:
- Niente fogli di stile collegati. Gmail, Outlook.com e Yahoo Mail ignorano un file CSS collegato dall'email, quindi le classi di Bootstrap arrivano nella casella di posta senza alcuno stile dietro.
- Niente flexbox nel classico Outlook. Outlook per Windows visualizza le email con il motore di rendering di Word, che non supporta flexbox, float né posizionamento, quindi lì una griglia Bootstrap si sfalda.
- Poco spazio per il CSS. Gmail limita la dimensione di un blocco di stile in un'email, e il foglio di stile completo di Bootstrap è molte volte più grande di quel limite.
Ecco perché gli sviluppatori di email costruiscono i layout con tabelle e stili inline. Blocks fa questo lavoro al posto tuo: i modelli sono assemblati da strutture a tabelle con gli stili scritti direttamente negli elementi, includono correzioni per Outlook e si adattano agli schermi dei telefoni nei client di posta che lo supportano.
Usare un modello Blocks in un progetto Bootstrap
- Scegli un modello e regola colori, font e logo in modo che l'email sembri parte del tuo sito.
- Esporta il risultato come file HTML o come archivio ZIP con le immagini, oppure copia il codice direttamente dall'editor.
- Salva l'HTML nel tuo progetto come modello di email e sostituisci nomi, link e dettagli dell'ordine con le variabili usate dal tuo motore di template.
- Invialo tramite il tuo server SMTP o un'API email come Amazon SES o SendGrid, e aggiungi una versione in solo testo per chi legge con app di posta che non mostrano l'HTML.
Se preferisci scrivere le email a mano con classi simili a quelle di Bootstrap, esiste un progetto open source separato chiamato Bootstrap Email che compila questo markup in tabelle e stili inline. È sviluppato in modo indipendente dal team di Bootstrap e richiede un passaggio di build sul tuo computer. Blocks segue invece la via visiva: progetti nel browser e ottieni subito l'HTML finito.
Le email che ogni sito Bootstrap invia
- Email di benvenuto che accolgono i nuovi utenti e li indirizzano al primo passo nel tuo prodotto.
- Email di reimpostazione della password con un unico pulsante chiaro e una breve nota su quando scade il link.
- Conferme d'ordine per negozi e siti di prenotazione che hanno bisogno di un riepilogo dell'acquisto affidabile.
- Email di onboarding per applicazioni web che presentano le funzionalità un messaggio alla volta.
Consigli per i modelli di email nei progetti web
- Ospita le immagini in un luogo pubblico. Gli URL assoluti delle immagini si caricano in ogni casella di posta, mentre i percorsi relativi copiati dalla tua app si rompono.
- Testa in più di un client. Controlla almeno Gmail, Apple Mail e Outlook per Windows prima di rilasciare un nuovo modello.
- Dai nomi chiari alle variabili. Segnaposto leggibili dicono al prossimo sviluppatore esattamente quale valore finisce dove.
- Tieni i modelli nel repository. Conserva l'HTML delle email accanto al codice che le invia, così ogni modifica passa dalla revisione.
Per approfondire le scelte di markup, leggi il nostro confronto tra framework per email e la guida email HTML o in solo testo. Se la tua app invia molte email di sistema, la panoramica dei servizi di email transazionali ti aiuterà a scegliere un fornitore.
Ottieni modelli di email gratuiti per progetti Bootstrap
Scegli un modello qui sopra, adattane lo stile al tuo tema Bootstrap ed esporta un HTML pulito per la tua app. Se il tuo team invia anche newsletter, lo stesso design può essere esportato direttamente su Mailchimp o HubSpot.