E-mail marketing e automazioneMarketing per dispositivi mobili e tablet

16 best practice e-mail HTML ottimizzate per i dispositivi mobili che massimizzano il posizionamento e il coinvolgimento nella posta in arrivo

Nel 2023, è probabile che il mobile supererà il desktop come dispositivo principale per l'apertura della posta elettronica. In effetti, HubSpot lo ha scoperto 46 per cento di tutte le aperture di posta elettronica ora avviene su dispositivo mobile. Se non stai progettando e-mail per dispositivi mobili, stai lasciando un sacco di impegno e denaro sul tavolo.

  1. Autenticazione e-mail: Assicurando il tuo le email sono autenticate al dominio di invio e IP l'indirizzo è fondamentale per raggiungere la posta in arrivo e non essere indirizzato a una cartella di posta indesiderata o spam. È anche essenziale, ovviamente, fornire un mezzo per rinunciare all'e-mail utilizzando una piattaforma che incorpori un collegamento per annullare l'iscrizione.
  2. Design reattivo: Le HTML e-mail dovrebbe essere progettato per essere reattivo, il che significa che può adattarsi alle dimensioni dello schermo del dispositivo su cui viene visualizzato. Ciò garantisce che l'e-mail abbia un bell'aspetto sia sul desktop che sui dispositivi mobili.
  3. Oggetto chiaro e conciso: Una riga dell'oggetto chiara e concisa è importante per gli utenti mobili perché potrebbero vedere solo le prime parole della riga dell'oggetto nel riquadro di anteprima dell'e-mail. Dovrebbe essere breve e riflettere accuratamente il contenuto dell'e-mail. La lunghezza ottimale dei caratteri di una riga dell'oggetto di un'e-mail può variare a seconda di una serie di fattori, come il contenuto dell'e-mail, il pubblico e il client di posta utilizzato. Tuttavia, la maggior parte degli esperti consiglia di mantenere le righe dell'oggetto delle e-mail brevi e pertinenti, in genere tra 41-50 caratteri o 6-8 parole. Sui dispositivi mobili, le righe dell'oggetto più lunghe di 50 caratteri potrebbero essere tagliate e, in alcuni casi, potrebbero essere visualizzate solo le prime parole della riga dell'oggetto. Ciò può rendere difficile per il destinatario comprendere il messaggio principale dell'e-mail e può ridurre la probabilità che l'e-mail venga aperta.
  4. Preintestazione: L'intestazione di un messaggio di posta elettronica è un breve riepilogo del contenuto di un messaggio di posta elettronica visualizzato accanto o sotto la riga dell'oggetto nella posta in arrivo di un client di posta elettronica. È un elemento importante che può influire sul tasso di apertura delle tue e-mail quando ottimizzate. La maggior parte dei client incorpora HTML e CSS per garantire che il testo dell'intestazione sia impostato correttamente.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        /* desktop styles here */
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        /* mobile styles here */
      }
    </style>
  </head>
  <body>
    <!-- Intro text for preview -->
    <div style="display:none; max-height:0px; overflow:hidden;">
      This is the intro text that will appear in the email preview, but won't be visible in the email itself.
    </div>
    
    <!-- Main email content -->
    <div style="max-width:600px; margin:0 auto;">
      <!-- Content goes here -->
    </div>
  </body>
</html>
  1. Layout a colonna singola: Le e-mail progettate con un layout a colonna singola sono più facili da leggere sui dispositivi mobili. Il contenuto dovrebbe essere organizzato in una sequenza logica e presentato in un formato semplice e di facile lettura. Se hai più colonne, l'utilizzo di CSS può organizzare con garbo le colonne in un layout a colonna singola.

Ecco uno Layout e-mail HTML ovvero 2 colonne sul desktop e si riduce a una singola colonna sugli schermi dei dispositivi mobili:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.right {
          order: 2;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>

Ecco uno Layout e-mail HTML ovvero 3 colonne sul desktop e si riduce a una singola colonna sugli schermi dei dispositivi mobili:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col left">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Modalità chiara e oscura: ponte i client di posta elettronica supportano la modalità chiara e scura CSS prefers-color-scheme per soddisfare le preferenze dell'utente. Assicurati di utilizzare tipi di immagine in cui hai uno sfondo trasparente. Ecco un esempio di codice.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Light mode styles */
      body {
        background-color: #ffffff;
        color: #333333;
      }
      .container {
        background-color: #f9f9f9;
      }
      .text {
        border: 1px solid #cccccc;
      }
      /* Dark mode styles */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #333333;
          color: #f9f9f9;
        }
        .container {
          background-color: #333333;
        }
        .text {
          border: 1px solid #f9f9f9;
        }
      }
      /* Common styles for both modes */
      .container {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .col {
        flex: 1;
        margin: 10px;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      h2 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="col">
        <img src="image1.jpg" alt="Image 1">
        <div class="text">
          <h2>Heading 1</h2>
          <p>Text for column 1 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image2.jpg" alt="Image 2">
        <div class="text">
          <h2>Heading 2</h2>
          <p>Text for column 2 goes here.</p>
        </div>
      </div>
      <div class="col">
        <img src="image3.jpg" alt="Image 3">
        <div class="text">
          <h2>Heading 3</h2>
          <p>Text for column 3 goes here.</p>
        </div>
      </div>
    </div>
  </body>
</html>
  1. Caratteri grandi e leggibili: La dimensione e lo stile del carattere dovrebbero essere scelti per rendere il testo facile da leggere su uno schermo piccolo. Usa una dimensione del carattere di almeno 14pt ed evita di utilizzare caratteri difficili da leggere su schermi piccoli. I caratteri comunemente usati hanno un'alta probabilità di essere visualizzati in modo coerente su diversi client di posta elettronica, quindi l'utilizzo di Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma e Trebuchet MS sono in genere caratteri sicuri. Se utilizzi un font personalizzato, assicurati di avere un font di fallback identificato nel tuo CSS:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Custom font */
      @font-face {
        font-family: 'My Custom Font';
        src: url('my-custom-font.woff2') format('woff2'),
             url('my-custom-font.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }
      /* Fallback font */
      body {
        font-family: 'My Custom Font', Arial, sans-serif;
      }
      /* Other styles */
      h1 {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      p {
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>My Custom Font Example</h1>
    <p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
  </body>
</html>
  1. Uso ottimale delle immagini: Le immagini possono rallentare i tempi di caricamento e potrebbero non essere visualizzate correttamente su tutti i dispositivi mobili. Usa le immagini con parsimonia e assicurati che siano dimensionate e compressa per la visualizzazione mobile. Assicurati di inserire il testo alternativo per le tue immagini nel caso in cui il client di posta elettronica le blocchi. Tutte le immagini devono essere archiviate e richiamate da un sito Web sicuro (SSL). Ecco un codice di esempio di immagini reattive in un'e-mail HTML.
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* CSS for desktop styles */
      @media only screen and (min-width: 600px) {
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        .col {
          flex: 1;
          padding: 10px;
        }
        .col.left {
          order: 1;
        }
        .col.middle {
          order: 2;
        }
        .col.right {
          order: 3;
        }
        .single-pane {
          width: 100%;
        }
        img {
          max-width: 100%;
          height: auto;
        }
      }
      /* CSS for mobile styles */
      @media only screen and (max-width: 599px) {
        .container {
          display: block;
        }
        .col {
          width: 100%;
          padding: 10px;
        }
      }
    </style>
  </head>
  <body>
    <!-- 3-column section with images -->
    <div class="container">
      <div class="col left">
        <img src="image1.jpg" alt="Image 1">
        <!-- Content for left column -->
      </div>
      <div class="col middle">
        <img src="image2.jpg" alt="Image 2">
        <!-- Content for middle column -->
      </div>
      <div class="col right">
        <img src="image3.jpg" alt="Image 3">
        <!-- Content for right column -->
      </div>
    </div>
  </body>
</html>
  1. Chiaro invito all'azione (CTA): Un invito all'azione chiaro e prominente è importante in qualsiasi e-mail, ma è particolarmente importante in un'e-mail ottimizzata per i dispositivi mobili. Assicurati che l'invito all'azione sia facile da trovare e che sia abbastanza grande da poter essere cliccato su un dispositivo mobile. Se incorpori i pulsanti, puoi assicurarti di averli scritti in CSS anche con tag di stile in linea:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      /* Desktop styles */
      .button {
        display: inline-block;
        background-color: #4CAF50;
        color: #ffffff;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      /* Mobile styles */
      @media only screen and (max-width: 600px) {
        .button {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Sample Responsive Email</h1>
    <p>This is an example of a responsive email with a button.</p>
    <a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
  </body>
</html>
  1. Contenuti brevi e concisi: Mantieni il contenuto dell'e-mail breve e pertinente. Il limite di caratteri per un'e-mail HTML può variare a seconda del client di posta utilizzato. Tuttavia, la maggior parte dei client di posta elettronica impone un limite di dimensione massima per le e-mail, in genere tra 1024-2048 kilobyte (KB), che include sia il codice HTML che eventuali immagini o allegati. Utilizza sottotitoli, elenchi puntati e altre tecniche di formattazione per rendere il contenuto facilmente scansionabile durante lo scorrimento e la lettura su uno schermo piccolo.
  2. Elementi interattivi: incorporando elementi interattivi che catturano l'attenzione del tuo iscritto aumenteranno il coinvolgimento, la comprensione e i tassi di conversione dalla tua email. GIF animati, timer per il conto alla rovescia, video e altri elementi sono supportati dalla maggior parte dei client di posta elettronica per smartphone.
  3. Personalizzazione: La personalizzazione del saluto e del contenuto per un abbonato specifico può favorire in modo significativo il coinvolgimento, assicurati solo di farlo bene! Per esempio. Avere fallback se non ci sono dati in un campo del nome è importante.
  4. Contenuto dinamico: La segmentazione e la personalizzazione del contenuto possono ridurre i tassi di annullamento dell'iscrizione e mantenere coinvolti i tuoi abbonati.
  5. Integrazione della campagna: La maggior parte dei moderni fornitori di servizi di posta elettronica ha la possibilità di aggiungere automaticamente Stringhe di query della campagna UTM per ogni collegamento in modo da poter visualizzare l'e-mail come un canale in Analytics.
  6. Centro preferenze: L'email marketing è troppo importante solo per un approccio opt-in o opt-out alle e-mail. Incorporare un centro preferenze in cui i tuoi abbonati possono modificare la frequenza con cui ricevono e-mail e quali contenuti sono importanti per loro è un modo fantastico per mantenere un programma di posta elettronica forte con abbonati coinvolti!
  7. Prova, prova, prova: Assicurati di testare la tua posta elettronica su più dispositivi o utilizza un'applicazione per visualizzare in anteprima le tue e-mail attraverso i client di posta per assicurarti che abbia un bell'aspetto e funzioni correttamente su schermi di diverse dimensioni e sistemi operativi PRIMA dell'invio. Tornasole riporta che i primi 3 ambienti aperti mobili più popolari continuano ad essere gli stessi: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Inoltre, incorpora le variazioni di prova delle righe dell'oggetto e del contenuto per migliorare le percentuali di apertura e di clic. Molte piattaforme di posta elettronica ora incorporano test automatizzati che campionano l'elenco, identificano una variante vincente e inviano l'e-mail migliore agli abbonati rimanenti.

Se la tua azienda ha difficoltà a progettare, testare e implementare e-mail reattive per dispositivi mobili che favoriscono il coinvolgimento, non esitare a contattare la mia azienda. DK New Media ha esperienza nell'implementazione di praticamente tutti i fornitori di servizi di posta elettronica (ESP).

Douglas Karr

Douglas Karr è CMO di ApriINSIGHTS e il fondatore della Martech Zone. Douglas ha aiutato dozzine di startup MarTech di successo, ha assistito nella due diligence di oltre 5 miliardi di dollari in acquisizioni e investimenti Martech e continua ad assistere le aziende nell'implementazione e nell'automazione delle loro strategie di vendita e marketing. Douglas è un esperto e relatore di trasformazione digitale e MarTech riconosciuto a livello internazionale. Douglas è anche autore di una guida per manichini e di un libro sulla leadership aziendale.

Articoli Correlati

Torna a pulsante in alto
Chiudi

Blocco annunci rilevato

Martech Zone è in grado di fornirti questi contenuti gratuitamente perché monetizziamo il nostro sito attraverso entrate pubblicitarie, link di affiliazione e sponsorizzazioni. Ti saremmo grati se rimuovessi il blocco degli annunci mentre visiti il ​​nostro sito.