Newsletter Responsivo

Fazer um e-mail newsletter usando HTML é montar um código de maneira antiga, usando técnicas ultrapassadas e não muito semânticas. Isso porque muitos leitores de e-mail não lêem corretamente alguns parâmetros de CSS, ou seja, a recomendação aqui é realmente cometer algumas heresias como colocar estilos direto no HTML e utilizar (argh) tabelas para dados não tabulares.

Para montar um projeto de e-mail newsletter responsivo nós continuaremos desenvolvendo o código desta maneira antiga, infelizmente.

Media Queries salvam o dia

A parte divertida é que diversos dispositivos mobile aceitam Media Queries e interpretam o CSS de uma maneira bem mais lógica. E isso nos permite criar estilos mais avançados usando o !important no CSS para sobrepor os parâmetros de estilo que determinamos no HTML. Ou seja, dá para aplicar aqui o principio de progressive enhancement.

É claro que não são todos os programas e dispositivos que aceitam Media Queries e parâmetros de CSS mais atuais. Para estes dispositivos, o seu e-mail terá o mesmo layout determinado para desktops.

Veja abaixo a lista de dispositivos que aceitam Media Queries em seu leitor de e-mail padrão.

Algumas dicas práticas para o Layout

Para desenvolver, não apenas um template de e-mail em HTML, mas qualquer projeto de design responsivo é necessário ter em mente que o seu trabalho será acessado pelos mais diferentes tipos de usuário. Não existem apenas iPhones e iPads… Qualquer modelo de dispositivo móvel vendido atualmente, até o tablet chinês que meu sobrinho ganhou em seu aniversário de 6 anos, tem um leitor de e-mails. O ideal aqui é é englobar o maior número de dispositivos possíveis.

Para garantir uma boa user experience, precisamos levar em consideração alguns pontos:

Tamanho mínimo do texto
– Em muitos aplicativos de leitura de e-mail, como o do iPhone, o tamanho mínimo da fonte é de 13px. Isso significa que, se você utilizar um tamanho menor, ele irá converter o texto automaticamente para 13px.

Não faça algo menor que a ponta de um dedo
– Recomenda-se que para ícones clicáveis uma área mínima de 44×44 pixels. Este tamanho irá facilitar o usuário de acessar o item com o dedo sem clicar acidentalmente em outros ícones.

Medidas relativas sempre
– Prefira usar medidas em porcentagem para as larguras dos elementos. Isso pode garantir que ele seja acessível em dispositivos com a tela em tamanhos não previstos nos seus media queries.

Evite layouts em colunas
– Em se tratando de desktops, a largura recomendável de um e-mail template é 640px. Neste caso é possível dividir o layout em colunas pois o espaçamento e as margens de um leitor de e-mails em um computador são grandes o suficiente para uma leitura confortável. Já em um smartphone não é recomendável o uso de um layout com várias colunas pois o tamanho reduzido da tela contribui pra uma sensação claustrofóbica, fazendo os elementos parecerem aglomerados.

Crie uma experiência única
– Apesar da alta resolução da atual geração de smartphones, como é o caso do o iPhone 5 (568px em formato landscape), é interessante pensar em um design diferenciado, já que a experiência do usuário ao interagir com um layout muda completamente só pelo fato de estar em um dispositivo com tela sensível ao toque.

Go mobile
A maior parte dos clientes de e-mail para desktop não são adaptáveis para tamanhos de tela menores que 960px. Basta tentar redimensionar a janela do Gmail, por exemplo, para verificar que este é o último ponto de quebra disponível para computadores. Nosso foco aqui será, portanto, apenas os dispositivos móveis. Sendo assim, o media querie que utilizaremos é @media only screen and (max-device-width: [insira a largura maxima aqui]) . Isso fará com que as mudanças de layout sejam vistas apenas em dispositivos móveis.

Tudo é !important
Clientes de e-mail antigos não entendem CSS. Por isto é necessário determinar um conjunto de estilos básicos no próprio HTML. Nosso CSS ficará para os softwares e aplicativos mais modernos, capazes de entender media queries. Portanto não se esqueça da tag !important. para os estilos que você deseja sobrescrever.

Já faz tempo que a internet não está mais apenas nos computadores. Smartphones, tablets, televisores e videogames portáteis são dispositivos comuns no dia-a-dia dos usuários. E ler e-mails é uma das atividades mais corriqueiras. É bem difícil prever quais serão os tipos de midia do futuro, mas o fato é que não podemos mais considerar a web como algo restrito a uma caixinha com 1024 pixels de largura. Apresentar um layout adequado para cada tipo de mídia deixa de ser um luxo e passa a ser uma obrigação. A minha aposta é que com o tempo seja tão essencial como desenvolver códigos semânticos, por exemplo.

Da mesma forma que acontece com os browsers, a medida que os clientes de e-mail antigos passam a ser abandonados as opções de estilização ficam cada vez mais interessantes. A tendência é que as novas tecnologias leiam códigos cada vez mais complexos. É nossa responsabilidade, portanto, oferecer aos usuários sempre a melhor opção de usabilidade e acessibilidade. Em telas grandes e pequenas. Em sites e emails.

Dicas para tornar o e-mail marketing ainda mais poderoso

Criar um bom relacionamento entre o cliente e a loja, empresa ou prestadora de serviços se torna algo cada vez mais importante – e a internet ajuda, e muito, nesse processo. Porém, muitas empresas parecem tentar tomar sopa com garfo quando o assunto é vendas e relacionamento online.

Você já tentou tomar sopa com um garfo? Não dá, não é? Sopa e garfo não se encaixam, não combinam. O garfo é ótimo para comer carne, macarrão e tantas outras coisas... Mas ele não foi feito para tomar sopa e, por isso, não cumpre seu papel. E o que esse negócio de sopa e garfo tem a ver com marketing digital? Mais do que você imagina.

Existem várias estratégias e plataformas de marketing digital, porém atualmente a mais efetiva para a criação de relacionamentos e vendas é o email marketing. Essa é uma das ferramentas que trazem mais resultados para o Digaí.

Mensalmente, as campanhas de email marketing nos geram centenas de visitas e várias vendas. Em janeiro, por exemplo, os emails trouxeram 1835 visitas e foram responsáveis por 88% do faturamento do Digaí. E o melhor de tudo: por ser uma ferramenta extremamente barata, o ROI (retorno sobre investimento) é altíssimo.

Porém, percebo que o email marketing é subvalorizado. O boom das mídias sociais fez com que elas ficassem em evidência entre os profissionais, que muitas vezes desconhecem o verdadeiro potencial do email marketing. Por conta disso, ofereço algumas dicas sobre essa poderosa ferramenta.

O AAA do Email Marketing

O funcionamento do email marketing consiste em um funil: Você tem uma lista com vários assinantes e faz um disparo para ela. Apenas parte destes (20%, por exemplo) abre as mensagens e um grupo ainda menor faz o "ideal" - responder a mensagem ou clicar em um link.

Por conta disso, costumo dizer que temos que focar em 3 "A's" quando estamos fazendo email marketing: Assinantes, Abertura e Ação. Pensar nesta ferramenta dessa forma é interessante porque permite analisar cada etapa isoladamente, identificando formas de melhorar. Nosso desafio como profissional de marketing digital é aumentar o número de Assinantes, a Abertura e a Ação por parte do público. Algumas dicas para melhorar esses A's são:

Assinantes: Apenas parte das pessoas que estão na nossa lista abre nossas mensagens, então o tamanho da lista é algo bastante importante. Ciente disso, nunca pare de aumentar sua lista, oferecendo benefícios para aqueles que lhe seguem, como um vídeo, e-book, dicas exclusivas, newsletter com ofertas, etc. Porém, não caia na tentação de colocar na sua lista pessoas que não se cadastraram para receber seus e-mails – seja ético e mantenha positiva a visão da sua empresa.

Abertura: Não adianta ter uma lista enorme se quando você manda uma mensagem poucas pessoas abrem. Então, para aproveitar o máximo da sua lista, você precisa aumentar sua taxa de abertura. Para isso, fique atento ao remetente: ele precisa passar confiança e ser facilmente identificado pelos leitores. Outra dica importante é definir um assunto interessante, que crie curiosidade para as pessoas abrirem o e-mail, assim como evitar imagens desnecessárias ou mensagens pesadas no e-mail.

Ação: da mesma forma que não adianta uma lista grande com pessoas que não abrem suas mensagens, também é inútil ter uma boa taxa de abertura se os assinantes não fazem o que você deseja. Para isso, a melhor atitude a ser tomada é pedir, sem medo ou vergonha, a ação dos leitores. Você precisa tornar explícito seu interesse para que eles respondam suas mensagens, cliquem em links ou façam uma compra.

Solicite um orçamento


Por favor, digite o código da imagem
captcharefresh

Powered by ChronoForms - ChronoEngine.com