Màrqueting per correu electrònic i automatitzacióMàrqueting per a mòbils i tauletes

16 millors pràctiques de correu electrònic HTML adaptat per a mòbils que maximitzen la col·locació i la implicació de la safata d'entrada

El 2023, és probable que el mòbil superi l'escriptori com a dispositiu principal per obrir correu electrònic. De fet, HubSpot ho va trobar 46 cent de tots els correus electrònics oberts ara es produeixen al mòbil. Si no esteu dissenyant correus electrònics per a mòbils, esteu deixant molt de compromís i diners sobre la taula.

  1. Autenticació de correu electrònic: Garantir el vostre els correus electrònics estan autenticats al domini d'enviament i IP l'adreça és fonamental per arribar a la safata d'entrada i no dirigir-se a una carpeta de correu brossa o correu brossa. També és essencial, per descomptat, que proporcioneu un mitjà per desactivar el correu electrònic mitjançant una plataforma que incorpori un enllaç de baixa.
  2. Disseny responsive: El HTML el correu electrònic hauria de ser dissenyat per ser sensible, el que significa que es pot ajustar a la mida de la pantalla del dispositiu en què es veu. Això garanteix que el correu electrònic tingui un bon aspecte tant en dispositius d'escriptori com en dispositius mòbils.
  3. Línia d'assumpte clara i concisa: Una línia d'assumpte clara i concisa és important per als usuaris mòbils perquè només poden veure les primeres paraules de l'assumpte al panell de previsualització del correu electrònic. Ha de ser breu i reflectir amb precisió el contingut del correu electrònic. La longitud òptima de caràcters d'una línia d'assumpte de correu electrònic pot variar en funció d'una sèrie de factors, com ara el contingut del correu electrònic, l'audiència i el client de correu electrònic que s'utilitza. Tanmateix, la majoria d'experts recomanen mantenir les línies d'assumpte dels correus electrònics curtes i puntuals, normalment entre 41 i 50 caràcters o entre 6 i 8 paraules. Als dispositius mòbils, les línies d'assumpte que superen els 50 caràcters poden tallar-se i, en alguns casos, només poden mostrar les primeres paraules de l'assumpte. Això pot dificultar que el destinatari entengui el missatge principal del correu electrònic i pot reduir la probabilitat que el correu electrònic s'obri.
  4. Capçalera prèvia: Un precapçalera de correu electrònic és un breu resum del contingut d'un correu electrònic que apareix al costat o sota de la línia d'assumpte a la safata d'entrada d'un client de correu electrònic. És un element important que pot afectar la taxa d'obertura dels vostres correus electrònics quan s'optimitzen. La majoria dels clients incorporen HTML i CSS per garantir que el text de l'encapçalament estigui configurat correctament.
<!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. Disseny d'una sola columna: Els correus electrònics dissenyats amb un disseny d'una sola columna són més fàcils de llegir en dispositius mòbils. El contingut s'ha d'organitzar en una seqüència lògica i presentar-se en un format senzill i fàcil de llegir. Si teniu diverses columnes, l'ús de CSS pot organitzar-les amb gràcia en un disseny d'una sola columna.

Aquí hi ha una Disseny de correu electrònic HTML és a dir, 2 columnes a l'escriptori i es replega a una sola columna a les pantalles de mòbils:

<!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>

Aquí hi ha una Disseny de correu electrònic HTML és a dir, 3 columnes a l'escriptori i es replega a una sola columna a les pantalles de mòbils:

<!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. Mode clar i fosc: La majoria de els clients de correu electrònic admeten el mode clar i fosc CSS prefers-color-scheme per adaptar-se a les preferències de l'usuari. Assegureu-vos d'utilitzar tipus d'imatge on tingueu un fons transparent. Aquí teniu un exemple de codi.
<!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. Tipus de lletra grans i llegibles: La mida i l'estil de la lletra s'han de triar perquè el text sigui fàcil de llegir en una pantalla petita. Utilitzeu com a mínim una mida de lletra de 14 punts i eviteu utilitzar tipus de lletra difícils de llegir en pantalles petites. Els tipus de lletra que s'utilitzen habitualment tenen una alta probabilitat de representar-se de manera coherent en diferents clients de correu electrònic, de manera que l'ús d'Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma i Trebuchet MS solen ser tipus de lletra segurs. Si feu servir un tipus de lletra personalitzat, assegureu-vos de tenir un tipus de lletra alternatiu identificat al vostre 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. Ús òptim de les imatges: Les imatges poden alentir els temps de càrrega i poden no mostrar-se correctament a tots els dispositius mòbils. Utilitzeu les imatges amb moderació i assegureu-vos que tinguin la mida i comprimit per a la visualització mòbil. Assegureu-vos d'omplir el text alternatiu de les vostres imatges en cas que el client de correu electrònic les bloquegi. Totes les imatges s'han d'emmagatzemar i fer referència des d'un lloc web segur (SSL). Aquí teniu un exemple de codi d'imatges responsives en un correu electrònic 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. Esborra la crida a l'acció (CTA): Un CTA clar i destacat és important en qualsevol correu electrònic, però és especialment important en un correu electrònic adaptat per a mòbils. Assegureu-vos que el CTA sigui fàcil de trobar i que sigui prou gran com per fer clic en un dispositiu mòbil. Si incorporeu botons, podeu assegurar-vos que també els teniu escrits en CSS amb etiquetes d'estil en línia:
<!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. Contingut breu i concís: Mantingueu el contingut del correu electrònic breu i directe. El límit de caràcters per a un correu electrònic HTML pot variar segons el client de correu electrònic que s'utilitzi. Tanmateix, la majoria dels clients de correu electrònic imposen un límit de mida màxima per als correus electrònics, normalment entre 1024 i 2048 kilobytes (KB), que inclou tant el codi HTML com qualsevol imatge o fitxer adjunt. Utilitzeu subtítols, vinyetes i altres tècniques de format per fer que el contingut es pugui escanejar fàcilment mentre us desplaceu i llegiu en una pantalla petita.
  2. Elements interactius: la incorporació elements interactius que capti l'atenció del vostre subscriptor augmentarà la participació, la comprensió i les taxes de conversió del vostre correu electrònic. GIF animats, temporitzadors de compte enrere, vídeos i altres elements són compatibles amb la majoria dels clients de correu electrònic de telèfons intel·ligents.
  3. Personalització: Personalitzar la salutació i el contingut d'un subscriptor específic pot augmentar la participació de manera significativa, només assegureu-vos que ho feu bé! Per exemple. És important tenir alternatives si no hi ha dades en un camp de nom.
  4. Contingut dinàmic: La segmentació i la personalització del contingut poden reduir les vostres taxes de cancel·lació i mantenir compromesos els vostres subscriptors.
  5. Integració de la campanya: La majoria dels proveïdors de serveis de correu electrònic moderns tenen la capacitat d'afegir automàticament Cadenas de consulta de la campanya UTM per a cada enllaç perquè pugueu veure el correu electrònic com a canal a l'anàlisi.
  6. Centre de preferències: El màrqueting per correu electrònic és massa important per només un enfocament d'activació o desactivació dels correus electrònics. Incorporar un centre de preferències on els vostres subscriptors poden canviar la freqüència amb què reben correus electrònics i quin contingut és important per a ells és una manera fantàstica de mantenir un programa de correu electrònic fort amb subscriptors compromesos!
  7. Prova, prova, prova: Assegureu-vos de provar el vostre correu electrònic en diversos dispositius o utilitzar una aplicació previsualitza els teus correus electrònics a través dels clients de correu electrònic per assegurar-vos que es veu bé i funcioni correctament en diferents mides de pantalla i sistemes operatius ABANS d'enviar-lo. Tornesol informa que els 3 entorns oberts mòbils més populars continuen sent els mateixos: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). A més, incorporeu variacions de prova de les vostres línies d'assumpte i contingut per millorar els vostres percentatges d'obertura i clics. Moltes plataformes de correu electrònic ara incorporen proves automatitzades que mostren la llista, identificaran una variació guanyadora i enviaran el millor correu electrònic a la resta de subscriptors.

Si la vostra empresa té problemes per dissenyar, provar i implementar correus electrònics responsius per a mòbils que impulsen la implicació, no dubteu a contactar amb la meva empresa. DK New Media té experiència en la implementació de pràcticament tots els proveïdors de serveis de correu electrònic (ESP).

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.