Esperar. O que acabou de acontecer com meu e-mail? Gravação de webinar

Quase todo designer e desenvolvedor precisa criar e-mails em algum momento de suas carreiras - queira ou não. Mas o grande número de clientes de e-mail - cada um com seus próprios problemas de renderização - deixa muitos balançando a cabeça em derrota, perplexos com o ataque de problemas de design de e-mail.

Tendo vivido muitos desses cenários, juntamos forças com Alex Mohr da Sendwithus para lançar alguma luz sobre os problemas mais comuns enfrentados por pessoas que não conhecem o e-mail e, mais importante, algumas soluções para esses problemas.

Se você não teve a chance de participar do webinar, “Espere. O que aconteceu com meu e-mail? ”, Não se preocupe. Você pode baixar os slides e conferir a gravação abaixo.

Vê slides e gravações →

Por mais que tentemos, não conseguimos responder a todas as perguntas feitas durante o webinar. E houve alguns ótimos. Então, estou usando esta oportunidade para responder a algumas das perguntas mais frequentes daqueles que estão apenas começando a dedicar-se ao marketing e design por e-mail.

Por que o Google e a Microsoft são tão ruins em renderizar e-mails?

Todos os clientes de e-mail têm problemas para renderizar algum HTML e CSS - as duas linguagens usadas para codificar campanhas de e-mail. Isso ocorre porque todos eles usam mecanismos de renderização diferentes. Os mecanismos de renderização são as partes subjacentes do aplicativo de e-mail que determinam qual código é renderizado na tela e como é realmente renderizado.

No caso do Gmail do Google, um pré-processador é usado para retirar partes específicas do código de um e-mail por razões de segurança. Embora quase todos os outros clientes de webmail já tenham descoberto isso agora, o Gmail essencialmente remove os estilos CSS incorporados no <cabeçalho> de um e-mail. E, como muitos designers usam esses estilos para determinar a aparência de suas campanhas, esses e-mails são prejudicados no Gmail.

Isso pode ser especialmente perceptível nos clientes móveis do Gmail, uma vez que as consultas de mídia - os gatilhos CSS usados ​​no design responsivo tradicional - residem nessa seção. É por isso que técnicas como codificação híbrida (ou esponjosa) foram desenvolvidas, como uma solução direta para os recursos de renderização pobres do Gmail.

No caso dos clientes Outlook da Microsoft, o problema está no fato de que o Outlook realmente usa o Microsoft Word como mecanismo de renderização. Isso mesmo, um editor de rich text usado por alunos e empresários é usado para renderizar código HTML e CSS (ou pelo menos tenta). Enquanto as versões mais antigas do Outlook usavam a versão instalada do navegador da Microsoft, Internet Explorer, para processar o código de e-mail, a partir do Outlook 2007, o Word tem sido usado para tornar a edição de rich text mais fácil para os usuários do Outlook.

Infelizmente para designers de e-mail, o Word tem suporte muito limitado para HTML e CSS que é comumente usado na web e em campanhas de e-mail. Este suporte limitado para padrões da web resulta em campanhas de e-mail que parecem quebradas no Outlook. Entender esse suporte é a primeira etapa para fazer com que os e-mails tenham uma boa aparência no Outlook ou em qualquer cliente de e-mail.

Aqui estão alguns recursos para ajudá-lo a entender melhor o suporte ao cliente de e-mail para HTML e CSS:

• Guia definitivo do Campaign Monitor para CSS
• Noções básicas sobre Gmail e CSS: Parte 1 e Parte 2
• Um guia para diferenças de renderização em clientes Microsoft Outlook
• Como dispositivos, sistemas operacionais, aplicativos e mecanismos afetam a renderização
• Problemas de renderização da área de trabalho? Concentre o teste inicial em um punhado de mecanismos de renderização
• Explicação da renderização de webmail: por que os pré-processadores são o inimigo

Como você lida com o Outlook não exibindo as fontes adequadas ao usar fontes da web?

As fontes da web, fontes veiculadas pela web em vez de instaladas no dispositivo do usuário, estão crescendo em popularidade. Como permitem que as empresas mantenham a marca com sua tipografia e incentivam o texto ao vivo, são uma ferramenta ideal para profissionais de marketing por e-mail. Infelizmente, eles não são suportados por todos os clientes de e-mail. E, no caso do Outlook, a falta de suporte leva a situações em que Times New Roman é exibida em vez de quaisquer fontes alternativas declaradas em seu HTML.

Abordamos esse problema antes com uma solução que requer uma classe HTML no texto afetado e alguns CSS específicos do Outlook. Embora essa solução ainda funcione bem, uma solução mais limpa e mais fácil de manter está ganhando força. Originalmente proposta pelo pessoal da Action Rocket, esta solução requer o uso de regras @ font-face para servir fontes e envolvê-las em uma consulta de mídia no cabeçalho do seu e-mail.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

Essa solução é uma abordagem excelente, pois não requer atributos de classe HTML que poluem seu código, ao mesmo tempo que garante que o Outlook retorne à pilha de fontes declarada. Confira o artigo original da Action Rocket para aprender mais sobre a técnica.

Como você evita que links azuis apareçam no celular?

Os dispositivos móveis são ferramentas úteis. Para torná-los ainda mais úteis, empresas como a Apple adicionaram um recurso ao seu cliente de e-mail que permite aos usuários adicionar informações rapidamente aos seus contatos, calendário ou aplicativos de mapas. Há boas chances de você ter visto algo assim em um e-mail:

Endereços, datas, horas e números de telefone específicos em forma de texto são destacados como links sublinhados em azul para mostrar que podem interagir com eles. Infelizmente, esses links azuis às vezes causam problemas tanto do ponto de vista de design quanto de acessibilidade. Quando o texto claro em um fundo escuro fica azul, esses links agora são difíceis (se não impossíveis) de ler, quanto mais interagir com eles.

Escrevemos antes sobre uma solução para esse problema que permite manter estilos nesse texto, mas, novamente, uma solução mais recente está ganhando popularidade. Acontece que incluir o seguinte snippet elimina os links azuis no iOS sem a necessidade de marcação adicional em seu HTML. Basta incluí-lo no cabeçalho do seu e-mail e mandar embora.

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Alguns participantes do webinar apontaram astutamente que o CSS acima visa especificamente os dispositivos Apple. Embora meus testes recentes tenham mostrado que os links azuis não têm sido um problema no Android, alguns membros da Comunidade Litmus tiveram problemas com o Android e o Gmail vinculando coisas como números de telefone. Confira a discussão da comunidade para ver algumas das soluções alternativas mais inteligentes.

Qual é a melhor maneira de lidar com imagens responsivas? Que tal imagens de retina?

À medida que mais pessoas adotam o design de e-mail responsivo, a necessidade de imagens responsivas aumenta. Meu melhor conselho para lidar com imagens responsivas é uma técnica que aprendi com Julie Ng, a desenvolvedora por trás do incrível Email Development Newsletter.

Basicamente, você declara as dimensões da imagem de várias maneiras na tag img. Para evitar que alguns clientes de e-mail exibam imagens retina maiores em seu tamanho real, você declara a largura usando o atributo de largura. Isso fornece uma boa largura de linha de base em pixels. Para e-mails responsivos, você declara a largura, largura máxima e largura mínima da imagem como CSS embutido. Aqui está um exemplo:

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

Naturalmente, você desejará fornecer algum texto ALT para quando as imagens forem desabilitadas e declarar display: block; para evitar espaços em branco desnecessários ao redor da imagem. Se precisar de controle adicional sobre a imagem, você pode direcioná-la com uma classe e CSS no cabeçalho do seu e-mail. Lembre-se de que CSS incorporado não é compatível em todos os lugares.

Quando se trata de imagens retina, sua melhor aposta é simplesmente criar suas imagens com o dobro do tamanho de exibição pretendido para a imagem em seu e-mail. Por exemplo, se você tem uma imagem de 600 x 200 pixels, deve criá-la e salvá-la como uma imagem de 1200 pixels x 400 pixels. Inclua-o normalmente em seu e-mail. O atributo de largura que mencionei antes impedirá que ele seja exibido como uma imagem absurdamente grande em clientes como o Outlook e suas imagens ficarão bonitas e nítidas em dispositivos com telas retina.

Algum conselho para quem deseja usar GIFs animados em um e-mail?

Vá em frente! GIFs animados são uma forma fantástica de adicionar movimento e interesse às suas campanhas de e-mail. Amamos tanto a técnica que escrevemos um guia extenso sobre o uso de GIFs animados por e-mail.

Basta entrar com o entendimento de que eles não são suportados em todos os lugares, mais notáveis ​​no Microsoft Outlook, que exibe apenas o primeiro quadro da animação. É uma boa ideia certificar-se de que qualquer imagem no GIF seja usada para fins ilustrativos, não para transmitir informações vitais aos assinantes. Esse tipo de informação deve sempre ser exibido como texto ativo no e-mail para que os assinantes possam lê-lo, mesmo quando coisas como GIFs e imagens estão desabilitadas.

Embora muitas pessoas pensem que os GIFs são apenas para diversão, muitas empresas de produtos estão usando GIFs animados para exibir interações com seus produtos e, essencialmente, ensinar as pessoas a usar os produtos antes mesmo de tocá-los. Aqui está um ótimo exemplo do MailChimp:

Os GIFs são um ótimo complemento para a caixa de ferramentas de todos os profissionais de marketing por e-mail. Uma palavra de conselho seria usá-los com moderação, no entanto. Se cada campanha contiver um monte de GIFs, eles rapidamente perderão o senso de surpresa. Use-os ocasionalmente quando realmente quiser chamar a atenção para uma campanha ou mostrar algo legal.

Qual é a sua opinião sobre o uso de vídeo em e-mail?

Assim como os GIFs animados, os vídeos podem ser uma excelente maneira de chamar a atenção do assinante. Infelizmente, os próprios vídeos têm ainda menos suporte em clientes de e-mail. Embora antes pudéssemos usar um fundo de vídeo em um e-mail, ele era compatível apenas com Apple Mail e Outlook para Mac.

No entanto, isso não deve impedir você de usar o vídeo em conjunto com o e-mail. As pessoas adoram vídeos e as empresas estão cada vez mais usando o marketing de vídeo como uma forma de aumentar o envolvimento com os usuários. A melhor maneira de usar vídeo em e-mail é incluir uma imagem estática do vídeo com um botão de reprodução na campanha de e-mail que leva a uma página de destino. Os usuários entendem imediatamente que é um vídeo e podem visualizá-lo na página de destino.

Embora o vídeo incorporado ao e-mail permita uma boa experiência do usuário, nossos amigos da Wistia destacaram por que as páginas de destino são a melhor solução.

• O vídeo em uma página de destino pode ser reutilizado em outro lugar. É um recurso de conteúdo permanente.
• As páginas de destino facilitam mais interações. Quando terminar de assistir a um vídeo em sua caixa de entrada, o que resta para você fazer?
• As pessoas podem compartilhar vídeos com mais facilidade nas páginas de destino.

Então, definitivamente use vídeo em suas campanhas de e-mail, mas, pelo menos por enquanto, aceite o fato de que isso não significa ver vídeos em um e-mail.

Existe alguma estrutura de email responsiva que você recomende?

Mencionamos alguns recursos para criar melhores campanhas de e-mail no webinar, mas definitivamente vale a pena repetir e expandir aqui.

No que diz respeito às estruturas e modelos de e-mail responsivo, há vários disponíveis:

• Cerberus de Ted Goas
• Projetos de e-mail do MailChimp
• Fundação do Zurb para e-mails
• MJML do Mailjet

Um dos nossos favoritos é o nosso próprio Slate, que inclui cinco modelos responsivos para uma variedade de cenários de envio. Seja qual for a opção que você escolher, certifique-se de testá-los em clientes de e-mail para ter certeza de que seus assinantes não terão nenhuma surpresa.

Ver os slides e gravações

Cobrimos muito terreno em: “Espere. O que aconteceu com meu e-mail? ” Junto com a identificação dos problemas de e-mail mais comuns e suas soluções, mencionamos a importância de testar cada e-mail e até examinamos como testar e-mails transacionais com Sendwithus. Se você perdeu da primeira vez, pode baixar os slides e ver a gravação abaixo.

Vê slides e gravações →