Email Marketing & AutomatizaciónMarketing móbil e tableta

16 Mellores prácticas de correo electrónico HTML compatible con móbiles que maximizan a colocación e o compromiso da caixa de entrada

En 2023, é probable que o móbil supere o escritorio como dispositivo principal para abrir correo electrónico. De feito, HubSpot descubriu iso Por cento 46 de todos os correos electrónicos abertos agora ocorren no móbil. Se non estás a deseñar correos electrónicos para móbiles, estás deixando moito compromiso e diñeiro sobre a mesa.

  1. Autenticación de correo electrónico: Asegurando o seu os correos electrónicos están autenticados ao dominio de envío e IP O enderezo é fundamental para chegar á caixa de entrada e non se dirixe a un cartafol de lixo ou spam. Tamén é esencial, por suposto, que proporciones un medio para desactivar o correo electrónico mediante unha plataforma que incorpore unha ligazón para cancelar a subscrición.
  2. Deseño responsivo: o HTML correo electrónico debería ser deseñado para ser receptivo, o que significa que se pode axustar ao tamaño da pantalla do dispositivo no que se está a ver. Isto garante que o correo electrónico teña un bo aspecto tanto en dispositivos de escritorio como en dispositivos móbiles.
  3. Asunto claro e conciso: Unha liña de asunto clara e concisa é importante para os usuarios de móbiles porque só poden ver as primeiras palabras da liña de asunto no panel de vista previa do correo electrónico. Debe ser breve e reflectir con precisión o contido do correo electrónico. A lonxitude óptima de caracteres dunha liña de asunto de correo electrónico pode variar dependendo dunha serie de factores, como o contido do correo electrónico, a audiencia e o cliente de correo electrónico que se utilice. Non obstante, a maioría dos expertos recomendan manter as liñas de asunto do correo electrónico curtas e precisas, normalmente entre 41-50 caracteres ou 6-8 palabras. Nos dispositivos móbiles, as liñas de asunto que superen os 50 caracteres poden cortarse e, nalgúns casos, só poden mostrar as primeiras palabras da liña de asunto. Isto pode dificultar que o destinatario comprenda a mensaxe principal do correo electrónico e pode reducir a probabilidade de que este se abra.
  4. Encabezado previo: Un preencabezado de correo electrónico é un breve resumo do contido dun correo electrónico que aparece xunto ou debaixo da liña de asunto na caixa de entrada dun cliente de correo electrónico. É un elemento importante que pode afectar a taxa de apertura dos teus correos electrónicos cando está optimizado. A maioría dos clientes incorporan HTML e CSS para garantir que o texto do preencabezado estea configurado correctamente.
<!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. Disposición dunha soa columna: Os correos electrónicos deseñados cun deseño dunha soa columna son máis fáciles de ler en dispositivos móbiles. O contido debe organizarse nunha secuencia lóxica e presentarse nun formato sinxelo e de fácil lectura. Se tes varias columnas, a utilización de CSS pode organizalas con gracia nun deseño dunha soa columna.

Aquí tes un Diseño de correo electrónico HTML é dicir, 2 columnas no escritorio e contrae a unha única columna nas pantallas móbiles:

<!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í tes un Diseño de correo electrónico HTML é dicir, 3 columnas no escritorio e contrae a unha única columna nas pantallas móbiles:

<!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. Modo claro e escuro: ponte os clientes de correo electrónico admiten o modo claro e escuro CSS prefers-color-scheme para acomodar as preferencias do usuario. Asegúrate de utilizar tipos de imaxes nos que teñas un fondo transparente. Aquí tes un exemplo de código.
<!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. Tipos de letra grandes e lexibles: O tamaño e o estilo da fonte deben elixirse para que o texto sexa fácil de ler nunha pantalla pequena. Use polo menos un tamaño de letra de 14 puntos e evite usar fontes difíciles de ler en pantallas pequenas. As fontes de uso habitual teñen unha alta probabilidade de renderizarse de forma consistente en diferentes clientes de correo electrónico, polo que usar Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma e Trebuchet MS adoitan ser fontes seguras. Se usas unha fonte personalizada, asegúrate de ter identificada unha fonte alternativa no teu 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 óptimo das imaxes: As imaxes poden retardar os tempos de carga e poden non mostrarse correctamente en todos os dispositivos móbiles. Use as imaxes con moderación e asegúrese de que teñan o tamaño e comprimido para visualización móbil. Asegúrate de encher o texto alternativo das túas imaxes no caso de que o cliente de correo electrónico as bloquee. Todas as imaxes deben almacenarse e consultarse desde un sitio web seguro (SSL). Aquí tes un exemplo de código de imaxes sensibles nun correo electrónico 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. Borrar chamada á acción (CTA): Un CTA claro e destacado é importante en calquera correo electrónico, pero é especialmente importante nun correo electrónico compatible con móbiles. Asegúrate de que a CTA sexa fácil de atopar e que sexa o suficientemente grande como para facer clic nun dispositivo móbil. Se incorporas botóns, podes asegurarte de que os tes escritos en CSS tamén con etiquetas de estilo en liña:
<!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. Contido breve e conciso: Mantén o contido do correo electrónico breve e directo. O límite de caracteres para un correo electrónico HTML pode variar dependendo do cliente de correo electrónico que se utilice. Non obstante, a maioría dos clientes de correo electrónico impón un límite de tamaño máximo para os correos electrónicos, normalmente entre 1024 e 2048 kilobytes (KB), que inclúe tanto o código HTML como calquera imaxe ou anexo. Use subtítulos, viñetas e outras técnicas de formato para que o contido se poida escanear facilmente mentres se despraza e le nunha pantalla pequena.
  2. Elementos interactivos: incorporando elementos interactivos que capte a atención do teu subscritor aumentará a participación, a comprensión e as taxas de conversión do teu correo electrónico. GIF animados, temporizadores de conta atrás, vídeos e outros elementos son compatibles coa maioría dos clientes de correo electrónico de teléfonos intelixentes.
  3. Personalización: Personalizar o saúdo e o contido para un subscritor específico pode aumentar significativamente o compromiso, só asegúrate de facelo ben. Ex. É importante ter alternativas se non hai datos nun campo de nome.
  4. Contido dinámico: A segmentación e a personalización do contido poden reducir as túas taxas de cancelación da subscrición e manter comprometidos aos teus subscritores.
  5. Integración da campaña: A maioría dos provedores de servizos de correo electrónico modernos teñen a capacidade de engadir automaticamente Cadenas de consulta de campañas UTM para cada ligazón para que poida ver o correo electrónico como unha canle en analíticas.
  6. Centro de preferencias: O marketing por correo electrónico é demasiado importante para só un enfoque de activación ou exclusión dos correos electrónicos. Incorporar un centro de preferencias onde os teus subscritores poidan cambiar a frecuencia coa que reciben correos electrónicos e o contido que é importante para eles é unha forma fantástica de manter un programa de correo electrónico sólido con subscritores comprometidos.
  7. Proba, proba, proba: Asegúrate de probar o teu correo electrónico en varios dispositivos ou utilizar unha aplicación para previsualiza os teus correos electrónicos en clientes de correo electrónico para asegurarse de que se ve ben e funciona correctamente en diferentes tamaños de pantalla e sistemas operativos ANTES de enviar. Tornasol informa de que os 3 contornos abertos móbiles máis populares seguen a ser os mesmos: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Ademais, incorpore variacións de proba das súas liñas de asunto e contido para mellorar as súas taxas de apertura e clics. Moitas plataformas de correo electrónico agora incorporan probas automatizadas que mostrarán a lista, identificarán unha variación gañadora e enviarán o mellor correo electrónico aos subscritores restantes.

Se a túa empresa ten dificultades para deseñar, probar e implementar correos electrónicos de resposta móbil que fomenten o compromiso, non dubides en contactar coa miña empresa. DK New Media ten experiencia na implementación de practicamente todos os provedores de servizos de correo electrónico (ESP).

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.