E-mail marketing e automaçãoMarketing para celulares e tablets

16 práticas recomendadas de e-mail HTML compatível com dispositivos móveis que maximizam o posicionamento e o envolvimento da caixa de entrada

Em 2023, é provável que o celular ultrapasse o desktop como o principal dispositivo para abrir e-mails. Na verdade, a HubSpot descobriu que 46% de todas as aberturas de e-mail agora ocorrem em dispositivos móveis. Se você não está criando e-mails para dispositivos móveis, está deixando muito engajamento e dinheiro na mesa.

  1. Autenticação do email: Garantindo o seu e-mails são autenticados para o domínio de envio e IP endereço é fundamental para chegar à caixa de entrada e não roteado para uma pasta de lixo eletrônico ou spam. Também é essencial, é claro, que você forneça um meio de desativar o e-mail usando uma plataforma que incorpore um link de cancelamento de inscrição.
  2. Design Responsivo: A HTML e-mail deve ser projetado para ser responsivo, o que significa que ele pode se ajustar ao tamanho da tela do dispositivo no qual está sendo visualizado. Isso garante que o e-mail tenha uma boa aparência em computadores e dispositivos móveis.
  3. Linha de assunto clara e concisa: Uma linha de assunto clara e concisa é importante para usuários móveis porque eles podem ver apenas as primeiras palavras da linha de assunto em seu painel de visualização de e-mail. Deve ser breve e refletir com precisão o conteúdo do e-mail. O comprimento ideal de caracteres de uma linha de assunto de e-mail pode variar dependendo de vários fatores, como o conteúdo do e-mail, o público e o cliente de e-mail usado. No entanto, a maioria dos especialistas recomenda manter as linhas de assunto do e-mail curtas e diretas, geralmente entre 41 a 50 caracteres ou 6 a 8 palavras. Em dispositivos móveis, as linhas de assunto com mais de 50 caracteres podem ser cortadas e, em alguns casos, podem exibir apenas as primeiras palavras da linha de assunto. Isso pode dificultar o entendimento do destinatário da mensagem principal do e-mail e pode reduzir a probabilidade de o e-mail ser aberto.
  4. Pré-cabeçalho: Um pré-cabeçalho de e-mail é um breve resumo do conteúdo de um e-mail que aparece ao lado ou abaixo da linha de assunto na caixa de entrada de um cliente de e-mail. É um elemento importante que pode impactar na taxa de abertura de seus e-mails quando otimizados. A maioria dos clientes incorpora HTML e CSS para garantir que o texto do pré-cabeçalho seja configurado corretamente.
<!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 de coluna única: E-mails projetados com um layout de coluna única são mais fáceis de ler em dispositivos móveis. O conteúdo deve ser organizado em uma sequência lógica e apresentado em um formato simples e de fácil leitura. Se você tiver várias colunas, a utilização de CSS pode organizar as colunas em um layout de coluna única.

Aqui está um Layout de e-mail HTML ou seja, 2 colunas na área de trabalho e se reduz a uma única coluna nas telas do celular:

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

Aqui está um Layout de e-mail HTML ou seja, 3 colunas na área de trabalho e se reduz a uma única coluna nas telas do celular:

<!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: Os mais clientes de e-mail suportam modo claro e escuro APF prefers-color-scheme para acomodar as preferências do usuário. Certifique-se de utilizar tipos de imagem em que você tenha um fundo transparente. Aqui está um 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. Fontes grandes e legíveis: O tamanho e o estilo da fonte devem ser escolhidos para facilitar a leitura do texto em uma tela pequena. Use pelo menos um tamanho de fonte de 14pt e evite usar fontes difíceis de ler em telas pequenas. As fontes comumente usadas têm uma alta probabilidade de renderização consistente em diferentes clientes de e-mail, portanto, usar Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma e Trebuchet MS são fontes normalmente seguras. Se você usar uma fonte personalizada, certifique-se de ter uma fonte alternativa identificada em seu 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 ideal de imagens: As imagens podem diminuir o tempo de carregamento e podem não ser exibidas corretamente em todos os dispositivos móveis. Use imagens com moderação e verifique se elas são dimensionadas e comprimido para visualização móvel. Certifique-se de preencher o texto alternativo para suas imagens caso o cliente de e-mail as bloqueie. Todas as imagens devem ser armazenadas e referenciadas a partir de um site seguro (SSL). Aqui está um código de exemplo de imagens responsivas em um 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. Chamada para ação clara (CTA): Um CTA claro e proeminente é importante em qualquer e-mail, mas é especialmente importante em um e-mail compatível com dispositivos móveis. Certifique-se de que o CTA seja fácil de encontrar e que seja grande o suficiente para ser clicado em um dispositivo móvel. Se você incorporar botões, pode garantir que eles também sejam escritos em CSS com tags de estilo inline:
<!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. Conteúdo curto e conciso: Mantenha o conteúdo do e-mail curto e direto ao ponto. O limite de caracteres para um email em HTML pode variar dependendo do cliente de email usado. No entanto, a maioria dos clientes de e-mail impõe um limite máximo de tamanho para e-mails, geralmente entre 1024 e 2048 kilobytes (KB), que inclui o código HTML e quaisquer imagens ou anexos. Use subtítulos, marcadores e outras técnicas de formatação para tornar o conteúdo facilmente escaneável durante a rolagem e leitura em uma tela pequena.
  2. Elementos interativos: Incorporar elementos interativos que capturam a atenção do seu assinante aumentarão as taxas de engajamento, compreensão e conversão do seu e-mail. GIF animado, cronômetros de contagem regressiva, vídeos e outros elementos são suportados pela maioria dos clientes de e-mail de smartphones.
  3. Personalização: Personalizar a saudação e o conteúdo para um assinante específico pode aumentar significativamente o engajamento, apenas certifique-se de acertar! Por exemplo. Ter substitutos se não houver dados em um campo de nome é importante.
  4. Conteúdo dinâmico: A segmentação e a personalização do conteúdo podem reduzir suas taxas de cancelamento e manter seus assinantes engajados.
  5. Integração de campanha: A maioria dos provedores de serviços de e-mail modernos tem a capacidade de anexar automaticamente Querystrings de campanha UTM para cada link para que você possa visualizar o e-mail como um canal de análise.
  6. Centro de preferências: O marketing por e-mail é muito importante para apenas uma abordagem de aceitação ou exclusão de e-mails. Incorporar um centro de preferências onde seus assinantes podem alterar a frequência com que recebem e-mails e qual conteúdo é importante para eles é uma maneira fantástica de manter um forte programa de e-mail com assinantes engajados!
  7. Teste, teste, teste: Certifique-se de testar seu e-mail em vários dispositivos ou utilizar um aplicativo para visualize seus e-mails em clientes de e-mail para garantir que tenha uma boa aparência e funcione corretamente em diferentes tamanhos de tela e sistemas operacionais ANTES de enviar. Tornassol relata que os 3 ambientes móveis abertos mais populares continuam os mesmos: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Além disso, incorpore variações de teste de suas linhas de assunto e conteúdo para melhorar suas taxas de abertura e cliques. Muitas plataformas de e-mail agora incorporam testes automatizados que farão uma amostra da lista, identificarão uma variação vencedora e enviarão o melhor e-mail para os demais assinantes.

Se sua empresa está lutando para projetar, testar e implementar e-mails responsivos móveis que estão gerando engajamento, não hesite em entrar em contato com minha empresa. DK New Media tem experiência na implementação de praticamente todos os provedores de serviços de e-mail (ESP).

Douglas Karr

Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

Artigos Relacionados

Voltar ao topo botão
Fechar

Adblock detectado

Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.