bento icon close
Resumo
Livre blanc responsive

Versão digital gratuita

E-mails responsivos

Otimize suas campanhas para dispositivos móveis

Os usuários e seus smartphones

Os celulares foram introduzidos no mercado em 1992 pela IBM e foram amplamente divulgados pela Apple em 2007. Agora, os smartphones são parte integrante da vida das pessoas ao redor do mundo.

2.3

bilhões em 2017

O número de usuários de smartphones aumentou de 1,57 bilhões em 2014 para 2,32 bilhões em 2017(1).

O celular tornou-se uma ferramenta de comunicação essencial para todos. Este produto revolucionário seduziu as pessoas desde o início. Com esse fenômeno, as atividades sociais tomaram um novo rumo. Um smartphone é agora um assistente pessoal para metade dos usuários móveis.

62% dos usuários móveis estão na faixa etária de 18-34(2).

3 de cada 4 usuários usam seus telefones para navegar na internet quase todos os dias(3).

Em 2018, estima-se que 36% da população mundial usará smartphones(1). Graças ao Wifi, 3G e 4G, é mais fácil ter acesso à Internet em dispositivos móveis.

Em um dia, um usuário médio verifica seu dispositivo 221 vezes(2).

221

vezes por dia

Um estudo sobre o uso de smartphones foi liderado pela Tecmark no Reino Unido em setembro de 2014. Eles descobriram que os smartphones são os gadgets mais utilizados em nossas vidas diárias.

2000 usuários foram questionados e descobriu-se que cada um deles verifica seu telefone 221 vezes ao dia

Seus hábitos:

illustration
  • Verificar a previsão do tempo
  • Ler e-mails
  • Consultar redes sociais
  • Inspecionar sua agenda
  • Criar uma lista de tarefas
  • ...
  • Com todos os aplicativos disponíveis em nossos smartphones, este dispositivo tornou-se muito útil em nossas vidas diárias.

    O Mercado de smartphones

    Os smartphones estão vendendo mais do que celulares simples: 49,5% da população prefere usar smartphones(1). O número de smartphones continua aumentando a cada ano: Em 2018, 1,5 bilhões de smartphones foram vendidos em todo o mundo, em comparação com 680 milhões em 2012(2).

    NÚMERO DE SMARTPHONES VENDIDOS EM TODO O MUNDO (2)

    illustration
    infos

    O número de usuários de smartphones tem aumentado a cada ano. Estima-se que em 2018, 2,16 bilhões de pessoas estarão usando smartphones em comparação com 1,31 bilhões em 2013 (1).

    SISTEMA OPERACIONAL

    O iOS da Apple foi o principal sistema operacional por um longo tempo, mas tem perdido espaço nos últimos anos. Por alguns anos, o Android vem assegurando a maioria da quota de mercado do sistema operacional móvel. Ele ganhou popularidade entre os usuários de smartphones por seus vários recursos.

    Com 64,76% de participação de mercado, o Android está na posição de liderança, seguido pela Apple com 32,93%(1).

    Participação de mercado de sistemas operacionais móveis(1)

    os

    OS10 SMARTPHONES MAIS VENDIDOS DO MUNDO

    Desde que o iPhone 6 foi lançado em setembro de 2014, os smartphones da Apple são os mais vendidos.

  • Apple – iPhone 6S
  • Apple – iPhone 7
  • Apple – iPhone 7+
  • Apple – iPhone 6S+
  • Samsung – Galaxy S7 edge
  • Samsung – Galaxy J3
  • Oppo – A53
  • Samsung – Galaxy J5
  • Samsung – Galaxy S7
  • Samsung – Galaxy J7
  • A leitura do e-mail em dispositivos móveis

    88%

    no mundo todo

    88% dos e-mails são lidos em dispositivos móveis (1).

    Mais e-mails são lidos em celulares a cada dia, 37% dos e-mails foram lidos em smartphones em 2014 em comparação com 31% em 2013 e 17% em 2012, mostrando um crescimento de 117% em 2 anos(1). Em 2017 uma pesquisa da Litmus aponta que 54% de todos os emails são lidos em um dispositivo móvel(2).

    graph

    A qualquer hora do dia você pode verificar seus e-mails do seu celular.

    os

    3 MANEIRAS DIFERENTES DE VERIFICAR E-MAILS EM UM SMARTPHONE

    Existem várias aplicativos que permitem a leitura de e-mails no smartphone:

    1. Aplicativos de e-mail nativos

    A maioria dos usuários de celular usa seus aplicativos de e-mail nativos para verificar e-mails. Para o iPhone, o aplicativo é chamado de Mail e para o Android, é chamado de Email.

    emails

    O usuário só terá que configurar o aplicativo de e-mail, já que ele já está instalado em todos os smartphones. Ele permite reunir vários endereços de e-mail, o que é conveniente quando temos mais de uma conta de e-mail.

    smartphones

    2. Aplicativos de e-mail

    No momento, todos os clientes de e-mail têm seu próprio aplicativo. Mesmo que os recursos sejam semelhantes ao aplicativo de e-mail nativo, a usabilidade e o conteúdo variam para cada um.

    Os usuários somente precisam fazer o download do aplicativo e configurar o seu email.

    Cada aplicativo e cada cliente de e-mail tem sua própria maneira de interpretar o código HTML e exibir seu conteúdo.

    smartphones

    3. Navegador da Web

    É possível acessar sua caixa de entrada de e-mail a partir do navegador da web Safari em iPhones ou do Internet Explorer no Android. Ambos instalados por padrão.

    navigateur

    No navegador, o usuário pode acessar sua conta de email.

    smartphones

    CONTEXTOS TÉCNICOS QUE VOCÊ DEVE SABER

    illu-techniques

    A navegação em telas sensíveis ao toque é muito intuitiva. Mas nem sempre é fácil de usar e pode ser irritante às vezes se o conteúdo não é adaptado para o dispositivo usado. Os dedos não podem ser tão precisos quanto o mouse do computador, então existem algumas regras a respeitar no design de seus e-mails e websites:

    1

    Os elementos clicáveis devem ser visualmente identificáveis: ao contrário de um mouse onde você pode identificar instantaneamente um elemento clicável, não sabemos quais elementos são clicáveis ao usar uma tela sensível ao toque. É por isso que você deve se certificar de que seus links estão sublinhados e seus botões CTA visíveis (colorido, em forma retangular ou borda arredondada...). Recomendamos que você use um tamanho mínimo de 44X44 pixels para seus botões CTA.

    2

    Crie espaço em torno de seus links clicáveis: será difícil distinguir links se eles estiverem muito próximos uns dos outros. Seus contatos podem se sentir irritados se clicarem em um link que não era o desejado.

    3

    Uma vez que as telas do smartphone são menores, é desagradável rolar para baixo para verificar a mensagem inteira. Encurte seu conteúdo para facilitar a leitura do e-mail.

    Um pré-cabeçalho é o texto em cima do seu e-mail. Na maioria das vezes, ele é usado para colocar um link para exibir a mensagem em um navegador. Geralmente, a sentença é algo semelhante a «visualizar este e-mail no navegador». A maioria dos profissionais de marketing não exploram este espaço idealmente, porque eles podem não saber que os aplicativos de e-mail para iPhone e Android exibem o início do pré-cabeçalho logo após a linha de assunto. Use esse espaço para adicionar mais informações complementares além de sua linha de assunto e convencer seus destinatários a abrir sua mensagem.

    smartphone

    Para garantir que seu e-mail seja exibido corretamente em smartphones, recomendamos usar fontes como Verdana ou Arial. Essas fontes são fáceis de ler em uma tela. Para os recursos visuais, recomendamos aplicar contrastes fortes. Pequenos contrastes não são adequados para telas pequenas, isso dificultará a leitura. Você também deve pensar nos destinatários que irão abrir o seu e-mail logo que acordarem, para que as cores não sejam muito forte para os olhos. Evite certas cores como o amarelo, que pode ser desagradável para a leitura

    Por que é importante fazer um e-mail responsivo

    Dependendo das funcionalidades de suporte do aplicativo usado para ler e-mails, uma campanha não responsiva poderá ser exibida de duas maneiras:

    responsive
  • Em um tamanho menor
  • A largura de um documento é redimensionada para uma tela pequena. Você verá toda a newsletter de uma só vez, o que lhe permite obter uma boa visão geral do posicionamento dos diferentes módulos, mas será completamente impossível ler qualquer texto ou clicar em um link sem o zoom.

  • Em um tamanho maior
  • A largura do e-mail não se adapta à largura da tela e você vê o conteúdo em seu tamanho real. As palavras e frases são legíveis, mas os blocos de texto ficam encurtados ou são movidos. A hierarquia das informações não é clara, e será difícil orientar a leitura da mensagem.

    Você terá que diminuir o zoom para entender a estrutura da mensagem e identificar as informações.

    Essas restrições não estão exclusivamente vinculadas ao e-mail marketing, mas sim às características de uma página da web. Quando você está checando uma página da web que não é otimizada para um smartphone, você vai enfrentar os mesmos problemas. Quem nunca enfrentou essa dolorosa experiência com um cardápio ou uma pesquisa?

    Para evitar que seus leitores precisem de zoom, você deve controlar a exibição, integrando a propriedade meta viewport à tag < HEAD > no código HTML. Isso garantirá que o seu conteúdo se adapte automaticamente à largura do dispositivo usado.

    Exemplo :

    <meta name="viewport" content="width=device-width, initialscale=1">

    width : tamanho da tela em pixel

    O objetivo do design responsivo é otimizar um site ou um e-mail para todos os tipos de dispositivos. Isso pode ser feito para cada dispositivo separadamente ou por grupos de telas semelhantes.

    Como torná-lo responsivo?

    Existem muitas maneiras possíveis. Vamos explicá-las nos capítulos seguintes.

    E-mail fluído

    O QUE É UM E-MAIL FLUÍDO?

    Um e-mail fluído tem um layout adaptado para telas pequenas e grandes. O conteúdo é redimensionado automaticamente para o dispositivo utilizado sem introduzir qualquer alteração na estrutura da página. Se seu e-mail já é composto em apenas uma coluna, você pode usar um e-mail fluído.

    email

    Para adaptar seu e-mail a diferentes tipos de dispositivos, você deve definir as dimensões de seus elementos em porcentagens.

    illu-pourcent

    O código a ser usado:

    style = "width : 80%; max-width : 600px; height : auto;"

    width : largura da imagem em porcentagem para telas pequenas

    max-width : largura máxima da imagem para telas maiores e computadores

    height : altura automatizada para manter a proporção da imagem

    Cuidado: max-width e min-width não são compatíveis no Outlook 2007, 2010 e 2013.

    E-mails responsivos usando Media Queries

    Media Queries são fundamentais quando se trata de adaptar o conteúdo de um e-mail para dispositivos móveis. Seu recurso CSS3 permite identificar a largura do dispositivo e, portanto, aplicar um conteúdo diferente.

    Este método amplamente utilizado consiste em segmentar o tamanho de pixel CSS da tela:

  • min-device-width : largura de tela mínima em pixels CSS
  • max-device-width : largura máxima da tela em pixels CSS
  • Código a ser usado:

    @media only screen and (max-device-width : 480px)

    Neste exemplo, definimos o limite para 480 pixels. Isto significa que os e-mails abertos em celulares com uma largura inferior a 480px CSS exibirá uma versão otimizada.

    Media Queries oferecem múltiplas combinações. Aqui estão 2 possibilidades a ter em mente:

    Seleção baseada na orientação do dispositivo (retrato ou paisagem)

    Exemplo :

    @media(max-device-width : 480px) and (orientation :portrait) {

    /* Largura inferior a 480px e orientação vertical */

    }

    Seleção baseada na resolução da tela ou na relação de pixels

    Exemplo :

    @media (min-device-pixel-ratio: 1.5) {

    /* Tela superior a 144dpi */

    }

    illu-adapt

    DEFININDO A LARGURA DE UM EMAIL RESPONSIVO

    Aqui está uma visão geral de diferentes smartphones no mercado (em negrito são os celulares mais vendidos em setembro de 2014):

    A largura do smartphone em pixels CSS corresponde à 3ª coluna.

    tableau

    QUAIS CELULARES E APLICATIVOS SÃO COMPATÍVEIS?

    Media queries testadas em:

    Aplicativo padrão em

    Android 2.3

    Android 4

    BlackBerry 9930

    iPhone 5S com iOS 7

    iPhone 5S com iOS 8

    iPhone 6 com iOS 8

    iPhone 6 Plus com iOS 8

    Gmail App

    Android 5

    iOS 7

    iOS 8

    Yahoo App

    iOS8

    TouchDown App

    Android 5

    Safari

    Gmail

    Yahoo

    Outlook.com

    Compatibilidade

    Compatibilidade

    Compatibilidade

    Compatibilidade

    Compatibilidade

    Dependendo do tipo de sistema operacional, certas regras não são levadas em consideração como Media Queries. Teste sua campanha no seu celular para verificar se tudo funciona bem.

    CÓDIGO PARA EMAIL RESPONSIVO

    As Media Queries devem ser integradas na tag < HEAD > da mensagem dessa forma:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf8">

    <style type="text/css">

    @media only screen and (max-device-width : 480px) {

    .conteneur{

     width: 80% !important;

    }

    .titre-rouge {

     color: #F00 !important;

    }

    .img-mobile {

     width:80%! important;

    }

    .colonne{

     width:80% !important;

     display:block !important;

    }

    .cacher-mobile{

     display:none !important;

    }

    </style>

    </head>

    Seguido pela tag < BODY > mostrando o conteúdo do e-mail

    Em Media Queries, indique como seu e-mail deve ser exibido com recursos especiais:

  • A classe CSS «container» permite fixar a largura da tabela em porcentagem, indicamos 80% aqui
  • A classe CSS «title-red» permite que você altere a cor do título na versão para celular
  • A classe CSS «img-mobile» permite que você redimensione a imagem, em porcentagem, dependendo da largura da tela, indicamos aqui 80%
  • A CSS «column» permite que você tenha um e-mail em uma coluna em vez de 2 colunas
  • A CSS «hide-mobile» permite esconder elementos da versão tradicional na versão para celular
  • Cada classe CSS deve ser introduzida na parte < BODY > do código HTML, dependendo dos elementos que você deseja alterar. A regra de prioridade !Important deve ser adicionada à Media Query, para que o estilo específico seja priorizado no lugar do estilo indicado na tag < BODY >.

    Aqui está um exemplo:

    <body style="padding:0; margin:0">

    <table class="conteneur" align="center" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td style="padding:15px 0">

    <p class="titre-rouge" style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:30px"><strong>Responsive design</strong></p>

    </td>

    </tr>

    <tr>

    <td style="padding-bottom:20px"><img class="img-mobile" src="image.jpg" width="600" height="150"></td>

    </tr>

    <tr>

    <td>

    <table class="conteneur" width="600" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td class="colonne" style="line-height:20px">

    <p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:16px"><strong>Titre</strong></p>

    <p style="font-family:Arial, Helvetica, sans-serif;color:#000; font-size:12px">

    Lorem Ipsum é simplesmente um texto falso usado para marcação de espaço.</p>

    </td>

    <td width="15px" class="cacher-mobile"> &nbsp; </td>

    <td class="colonne" style="line-height:20px">

    <p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:16px"><strong>Titre</strong></p>

    <p style="font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px">

    Lorem Ipsum é simplesmente um texto falso usado para marcação de espaço.</p>

    </td>

    </tr>

    </table>

    </td>

    </tr>

    </table>

    </body>

    </html>

    EXEMPLOS DE E-MAILS ADAPTATIVOS

    Newsletter Mailify

    newsletter

    Email marketing criado pela agência Mailify EMDE

    emailing

    EmailBuilder, um editor responsivo

    Com o EmailBuilder Mailify, você cria newsletters em um piscar de olhos!

    O editor gráfico revolucionário do Mailify orienta você passo a passo através da criação de uma newsletter. Tudo que você tem a fazer é arrastar e soltar o texto e/ou blocos de imagem, e seu layout é criado em minutos!

    builder

    CRIE NEWSLETTERS RESPONSIVAS

    responsive

    Com o EmailBuilder do Mailify, sua newsletter é automaticamente adaptada para ser exibida corretamente em smartphones. A ferramenta otimiza a criação gráfica e permite que você visualize sua newsletter no formato de dispositivos móveis em tempo real.

    Você pode criar uma newsletter a partir do zero, ou escolher um modelo base para trabalhar:

    base

    Layouts criado por designers também estão disponíveis:

    modèle

    Seja criado a partir do zero ou escolhido da biblioteca de templates Mailify, cada criação é automaticamente adaptada para smartphones:

    adapté

    O conteúdo do e-mail é criado e atualizado instantaneamente para ser responsivo em celulares.

    O EmailBuilder está disponível no Software Mailify. Faça o download e descubra a ferramenta. https://app.mailify.com/creation/

    emailbuilder

    Conclusão

    Ler e-mails em smartphones tornou-se um hábito entre os usuários de dispositivos móveis. Se as empresas ignoram este comportamento do consumidor, a sua comunicação por e-mail pode sofrer graves consequências.

    Os e-mails podem ser responsivos para todos os dispositivos usando os métodos apresentados anteriormente.

    Criando e-mails responsivos, você estará facilitando a leitura em dispositivos móveis para os seus contatos.

    Apresentação do Mailify Sunrise

    Como uma ferramenta líder de e-mail marketing na Europa, o Mailify ajuda as empresas a criar e gerenciar suas campanhas de marketing digital.

    Desde 2001, o software vem evoluindo continuamente para atender às necessidades e expectativas dos usuários, tornando-se hoje uma ferramenta de marketing «tudo-em-um»: e-mail marketing, marketing SMS, automação de marketing, envio preditivo, análise anti-spam, FormBuilder, estatísticas avançadas, etc.

    Todas essas funcionalidades tornam o Mailify Sunrise uma ferramenta completa, simples de usar e líder de mercado.

    Como um verdadeiro especialista em e-mail marketing, Mailify fornece conselhos e melhores práticas através de seus whitepapers, artigos de blog e webinars.

    O SOFTWARE: MAILIFY SUNRISE

    sarbacane

    A ferramenta foi completamente atualizada e integra novos recursos, permitindo que as empresas gerenciem facilmente seu e-mail marketing.

    Mailify permite que você:

    icone

    Gerencie suas campanhas de newsletter localmente com o aplicativo ou on-line.

    icone

    Crie e-mails incríveis sem esforço.

    icone

    Automatize seu marketing como as grandes empresas

    icone

    Exiba seus formulários com pop-ins inteligentes

    icone

    Veja facilmente todos os indicadores de desempenho de suas campanhas.