Framework per email responsive a confronto

Oltre ai tanti editor di email drag and drop, c’è un altro modo per semplificare e velocizzare la creazione delle email: i framework. Ottimizzano la scrittura del codice senza sostituirla con ambienti no-code. Abbiamo già scritto un articolo su uno dei framework più popolari, MJML; questa volta vogliamo dare un’occhiata ai suoi concorrenti e metterli a confronto.

Framework per email responsive con e senza tag personalizzati: che differenza c’è?

Prima di tutto, chiariamo cos’è un framework. Un framework è una sorta di modello, una struttura già pronta per sviluppare più in fretta. Su questa base puoi scrivere il tuo codice. I framework definiscono la struttura, fissano le regole e offrono gli strumenti necessari per realizzare un progetto.

La differenza tra framework con e senza tag personalizzati è semplice: un framework per email con tag personalizzati di solito è un linguaggio di markup specializzato, utile se il tuo team sa programmare bene ma non ha voglia di perdere tempo con HTML/CSS e/o vuole automatizzare il lavoro.

I framework per email senza tag personalizzati sono raccolte di componenti già pronti, senza tag speciali: solo HTML/CSS pulito. Questa è l’unica differenza.

Naturalmente alcuni strumenti stanno un po’ a metà strada. Vediamo le opzioni più popolari, con i loro pro e contro, così potrai decidere quale strumento usare.

Framework per email con tag personalizzati

1. MJML

MJML è un framework per email gratuito e open source che permette di creare email HTML più in fretta grazie a componenti già pronti. Ha un’app desktop e una galleria di modelli, permette di inviare le email direttamente dall’app ed è integrato con Outlook, Apple Mail, Gmail, Yahoo Mail e Office 365. E come ciliegina sulla torta, MJML ha un suo editor di email: modifichi l’email nella parte sinistra dello schermo e vedi l’anteprima in quella destra.

Se vuoi approfondire questo strumento, leggi il nostro articolo dedicato.

2. Foundation For Emails 2

Le funzioni di Foundation for Emails 2 sono simili a quelle di MJML: componenti personalizzati, una raccolta di modelli di email e la possibilità di creare campagne responsive. Con Foundation for Emails 2 si può lavorare in due modi: con la versione CSS o con quella Sass. Il framework non ha un editor di email, e qui MJML batte il concorrente.

Abbiamo già confrontato Foundation for Emails 2 con MJML. Un confronto quasi obbligato, visto che questi due framework per email hanno molto in comune. Ecco le principali funzioni che condividono:

• una raccolta di componenti personalizzati riutilizzabili;
• una galleria di modelli di email HTML responsive;
• un inliner CSS online.

Foundation for Emails 2 usa un proprio motore di elaborazione dei modelli, chiamato Inky. In sostanza fa la stessa cosa del motore di MJML: semplifica il lavoro con tabelle annidate complesse grazie a tag abbreviati. Ecco come appare il codice quando usi Inky:

Ed ecco la sua forma finale in HTML pulito:

I tag sono circa 10: tre servono a creare una griglia, il tag block-grid serve a creare… una griglia a blocchi. I nomi dei tag menu, title, button e callout parlano da soli.

A differenza di MJML, Foundation for Emails 2 crea due versioni dell’email: una per desktop e una per dispositivi mobili. Puoi decidere a quale breakpoint passare dall’una all’altra e anche mostrare o nascondere alcuni blocchi nel codice con i tag .hide-for-large e .show-for-large.

Anche se Foundation for Emails 2, proprio come MJML, ha una serie di modelli pronti, non ha un suo editor di email no-code, quindi non puoi vedere l’anteprima e modificare l’email direttamente lì. Puoi ricorrere ad altre soluzioni, per esempio Blocks 😉.

3. HEML

HEML è un linguaggio di markup basato su XML, distribuito come modulo NPM per Node.js. È molto simile a HTML/CSS, quindi per usarlo non devi imparare regole particolari.

Questo framework per email è pensato per rendere la scrittura del codice delle email simile allo sviluppo web. Puoi creare elementi e regole di stile personalizzati. HEML è anche piuttosto «social», per così dire: puoi condividere i tuoi asset personalizzati con altri utenti e usare i loro lavori.

Ecco le principali funzioni di HEML:

• facile da usare: è pensato per sembrare HTML e comportarsi come HTML, così il tuo cervello non deve riorganizzare schemi già acquisiti né imparare un nuovo linguaggio;
• inlining del CSS di default (si può disattivare);
• l’HTML pulito non interferisce con il linguaggio di HEML e si possono usare entrambi insieme;
• una guida rapida direttamente in homepage.

Un esempio di codice scritto in HEML

Framework per email senza tag personalizzati

1. Maizzle

Maizzle è un framework per email che al posto dei tag personalizzati usa il framework Tailwind CSS e Node.js. Non devi imparare un nuovo linguaggio: bastano HTML pulito e le utility class di Tailwind. In compenso, rinunci alle scorciatoie.

Maizzle usa configurazioni d’ambiente che ti permettono di costruire scenari su misura per il tuo flusso di lavoro tramite file di configurazione JS. Per la logica dei modelli si usa PostHTML, quindi hai a disposizione partial, cicli e contenuti remoti.

Le funzioni chiave di Maizzle:

• il linguaggio di template Nunjucks, creato da Mozilla;
• il supporto a GitHub Flavored Markdown;
• l’inlining del codice tramite i transformer;
• il layout di default è adattato ai requisiti AMP.

2. Pine

Pine è un framework per email responsive pensato per chi sviluppa email. Punta su un codice pulito, con HTML5 alla base. Il modo migliore per iniziare con Pine è partire dal suo boilerplate, che contiene già tutto il CSS, i tag e gli attributi necessari:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Pine Email Framework</title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      table {border-collapse: collapse;}
      td,th,div,p,a {font-size: 16px; line-height: 26px;}
      .spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
    </style>
    <![endif]-->

    <style type="text/css">

      /*Framework CSS - removed for demo purposes */
    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

    <div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>

    <table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center" bgcolor="#EEEEEE">
          <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
            <tr>
              <td align="left" bgcolor="#FFFFFF">

                <!-- ADD ROWS HERE -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Le funzioni chiave di Pine:

• wrapper, container e colonne;
• griglia a 12 colonne;
• componenti interattivi (accordion, tabella prezzi, testimonianze ecc.);
• supporto alle immagini di sfondo in Outlook;
• supporto alle immagini Retina.

3. Acorn

Acorn è una versione più leggera di Pine. Anche qui c’è HTML5 alla base, ma con una griglia a 4 colonne, a differenza di Pine che ne usa una a 12.

Le funzioni chiave di Acorn:

• griglia a 4 colonne;
• utility, contenuti e componenti interattivi responsive;
• una galleria di font di sistema moderni;
• supporto alle immagini di sfondo Retina in Outlook e Windows Mail.

4. Bojler

Bojler è un framework CSS/Sass, costruito con Sass.

Bojler richiede Node.js e NPM. Sul sito ufficiale trovi la documentazione completa per seguire passo passo installazione e configurazione.

Le funzioni chiave di Bojler:

• inliner integrato;
• transpiler automatico da Sass a CSS, inlining del CSS e linting di Sass;
• tipografia, sistema a griglia, utility class e componenti già pronti;
• un web server con live reload.

Client e dispositivi supportati da Bojler

Altri strumenti per creare HTML più facilmente

Ci sono diverse soluzioni che di solito vengono chiamate framework HTML, anche se non lo sono: per esempio pattern, modelli e boilerplate HTML. Certo, semplificano il lavoro, ma sono più adatti a chi scrive HTML con esperienza. Sono strumenti per chi vuole lavorare sul codice senza intermediari.

Cerberus

Cerberus è una raccolta di modelli e pattern HTML responsive gratuiti per creare le email più facilmente. Ogni modello è accompagnato dalle informazioni necessarie ed è testato nei client di posta più diffusi.

L’elenco di tutti i client di posta supportati da Cerberus

Una curiosità: il creatore di Cerberus è contrario agli inliner CSS, perché il suo prodotto deve restare semplice e non dovrebbe dipendere da uno strumento del genere. Sostiene inoltre che l’inlining gonfia il codice e, come ultimo argomento, che il posizionamento del CSS di Cerberus è già ottimizzato.

Esempio di codice in Cerberus

Kilogram

Kilogram è costruito su Nunjucks, il motore di template creato da Mozilla. Offre anche strumenti aggiuntivi per sviluppare email responsive. Installando Kilogram ottieni modelli di email, un inliner CSS e un minificatore HTML.

Ecco l’elenco dei client di posta compatibili con Kilogram:

• tutte le versioni di Outlook desktop;
• Office 365 (web);
• Outlook.com (web, iOS, Android, Windows Phone);
• Thunderbird (Windows);
• AOL Mail (iOS);
• Yahoo! Mail (web, iOS, Android);
• Google Inbox (web, iOS, Android);
• Gmail (web, iOS, Android);
• Mail.ru (web, iOS, Android);
• myMail (iOS, Android);
• Rambler Mail (web, iOS, Android);
• Yandex Mail (web, iOS, Android);
• Airmail (iOS, OSX);
• Apple Mail (iOS, OSX);
• Spark (iOS);
• Polymail (iOS, OSX).

Inkcite

Inkcite è un sistema di design modulare per creare email moderne e responsive. Non usa tag personalizzati, ma qualcosa di simile: i cosiddetti «Helpers», che sembrano normali tag HTML tra parentesi graffe.

Ecco come appaiono:

Inkcite ha tre ambienti: Development, Preview e Production.

Nell’ambiente Development puoi sviluppare l’email e i suoi contenuti in locale.

L’ambiente Preview serve a inviare le versioni di prova delle email.

Production è la fase finale dello sviluppo dell’email. Le immagini vengono caricate sulla CDN, gli URL inseriti nell’HTML, il tracciamento dei link e i tag vengono attivati, l’HTML viene minificato e partono i controlli di sicurezza.

Allora, quale framework per email scegliere?

Se cerchi una soluzione che semplifichi e acceleri in modo drastico la scrittura del codice e sei pronto a imparare nuove logiche, strutture e regole, i framework per email con tag personalizzati fanno per te.

Se cerchi uno strumento o una piattaforma che ti accompagni nella scrittura del codice, le dia più struttura e non ti costringa a imparare un nuovo linguaggio e nuove regole, la tua scelta sono i framework per email senza tag personalizzati.

Se invece ti serve una sorta di assistente, ricorri ad altri strumenti (a volte chiamati anch’essi framework): boilerplate, modelli e pattern HTML.

E se trovi errori o imprecisioni in questo articolo o in qualsiasi altro articolo del nostro blog, scrivici pure a support@useblocks.io. Interverremo e correggeremo tutto il prima possibile.