Perguntas e respostas sobre webinar com e-mail responsivo 101: Noções básicas de HTML e CSS

À medida que a abertura de dispositivos móveis continua a crescer (eles aumentaram mais de 500% nos últimos quatro anos!), Também aumentou a conversa sobre estratégias de e-mail móvel, como design responsivo. Em nosso webinar Responsive Email 101: HTML and CSS Basics, demos uma olhada no panorama do e-mail móvel, os fundamentos da criação de e-mails responsivos e por que essas técnicas são cruciais para melhorar a experiência do assinante. Também cobrimos o suporte ao cliente de e-mail e demonstramos como codificar um e-mail responsivo do zero.

Não foi capaz de fazer isso? Não se preocupe. Gravamos tudo! Além disso, até disponibilizamos os slides.

Obtenha os slides + gravação →

Tínhamos a casa cheia para o webinar, então, embora tentássemos responder a todas as perguntas que podíamos durante a parte de perguntas e respostas, não conseguimos responder a todas. Abaixo, reunimos algumas das perguntas mais frequentes.

COMEÇANDO A UM DESIGN RESPONSIVO

Você acha que o aumento das aberturas para dispositivos móveis atingiu sua saturação ou você acha que vai continuar a aumentar?

Embora tenhamos visto um grande salto nas inaugurações para dispositivos móveis nos últimos quatro anos - mais de 500% - já vimos seu crescimento começar a se estabilizar um pouco. No entanto, acreditamos que a abertura de dispositivos móveis continuará crescendo lentamente com a proliferação de mais dispositivos móveis.

Qual é a diferença entre design fluido, adaptativo e responsivo?

O design fluido consiste em larguras relativas sem consultas de mídia. O design adaptativo consiste em larguras fixas ou relativas em múltiplas janelas de exibição / pontos de interrupção. O design responsivo consiste em larguras relativas em múltiplas janelas de exibição / pontos de interrupção. Aqui estão alguns ótimos recursos para ajudá-lo a entender melhor as diferenças entre eles:

• Escalável, fluido ou responsivo? Compreendendo as abordagens de e-mail móvel
• Fixo x fluido x adaptativo x responsivo
• Qual layout? Estático, líquido, adaptativo ou responsivo?
• Liquidapsive

Qual abordagem tem o melhor suporte ao cliente de e-mail - fluido, adaptável ou responsivo?

De uma perspectiva de suporte puro, emails fluidos têm o melhor suporte. Tanto o design adaptativo quanto o responsivo requerem o uso de consultas de mídia, que têm suporte limitado.

No entanto, isso não significa que o design fluido seja a melhor abordagem para e-mails. O design fluido é um bom meio-termo para a criação de uma versão móvel de um e-mail, mas mantém o design de largura total do e-mail em seu núcleo. Realmente se trata de seu público específico, onde eles abrem seus e-mails e sua estratégia de design para otimizar as experiências de seus assinantes.

O que é uma consulta de mídia?

Uma consulta de mídia (@media) é uma declaração condicional que aciona um conjunto de CSS para um conjunto específico de regras. Você pode aprender mais sobre consultas de mídia e e-mail com os seguintes recursos:

• O guia prático para design de e-mail responsivo
• Noções básicas sobre consultas de mídia em e-mail HTML

Existem dados sobre o efeito que o design responsivo tem nos e-mails?

Pode apostar! Recentemente, fizemos um relatório com o MailChimp sobre o efeito que o design responsivo e o teste de e-mail têm sobre os cliques. Descobrimos que o design responsivo resulta em um aumento de 15% nos cliques para usuários de celular.

Com suporte misto e tantas soluções alternativas, mudar para um design responsivo parece opressor. Como eu começo?

Com esse suporte limitado dos clientes de email atuais, o design de email responsivo pode ser difícil de implementar. Nossa primeira recomendação é educar-se tanto quanto possível sobre design de e-mail responsivo antes de mergulhar. Recomendamos verificar os recursos em MailChimp, Campaign Monitor e Litmus para ajudar a guiá-lo.

Se você não se sentir confortável mergulhando direto no desenvolvimento real de e-mail responsivo, considere usar editores de e-mail simples de arrastar e soltar para criar seus e-mails. Produtos como StampReady, Canvas e MailChimp simplificam a codificação de e-mail para você.

Se você se sente confortável em mergulhar no código, dê uma olhada no Litmus Builder, um editor de código construído especificamente para design de e-mail. Experimente implementar técnicas básicas de e-mail responsivo para começar - isso fornecerá uma ótima experiência para usuários que abrem seus e-mails em clientes que oferecem suporte a design responsivo (principalmente dispositivos Apple).

Além disso, certifique-se de visualizar seus e-mails antes de enviar! Você pode enviar e-mails para si mesmo usando PutsMail ou ver como seu e-mail se parece em mais de 40 clientes de e-mail diferentes com Litmus.

Se você tiver alguma dúvida ou encontrar problemas de codificação com design de e-mail responsivo, vá até a Comunidade Litmus para obter ajuda.

Você recomenda alguma estrutura responsiva?

Sim! Recomendamos verificar o framework responsivo Ink do ZURB (atenção: este framework requer uma solução alternativa para renderizar corretamente no Outlook 2007-2013). Se você gosta de Sass, Faust Gertz fez uma versão Sass do Ink e Alex Ilhan tem uma estrutura de e-mail Sass chamada Zenith. Além disso, Dan Denney da Code School tem um fluxo de trabalho de e-mail incrível chamado Emayll e Brian Graves tem uma coleção incrível de Padrões de e-mail responsivos.

OTIMIZANDO PARA CLIENTES QUE NÃO SUPORTAM CONSULTAS DE MÍDIA

Se um cliente não suportar um design responsivo, o que será exibido nesse cliente?

Cada cliente de email processa emails de forma diferente, especialmente quando se trata de aplicativos de email móveis. Essencialmente, se eles não suportarem o design responsivo, ele voltará para alguma versão do e-mail de largura total. Às vezes, será uma versão de largura total "reduzida", às vezes será uma versão "ampliada" em escala, e às vezes um cliente como o Gmail pode aumentar automaticamente o tamanho da fonte para fazer uma versão "compatível com dispositivos móveis" do e-mail.

A melhor coisa a fazer é sempre visualizar seu e-mail antes de enviá-lo. Você pode enviar e-mails para si mesmo usando PutsMail ou ver como seu e-mail se parece em mais de 40 clientes de e-mail diferentes com Litmus.

Qual é a melhor maneira de abordar o design responsivo para clientes que não o suportam, como o aplicativo Gmail para Android? Que tipo de “backup” devemos ter?

Recomendamos tornar seus e-mails compatíveis com dispositivos móveis para começar. Isso significa ter uma quantidade mínima de conteúdo de email e design para um caso de uso móvel, como fontes e tamanhos de botão maiores. O design de uma coluna pronto para usar também facilita a renderização de seu e-mail para o aplicativo Gmail.

Para aqueles que estão familiarizados com as técnicas de codificação avançadas, a melhor maneira de desenvolver seus e-mails e contas devido à falta de suporte responsivo no aplicativo do Gmail é a “abordagem de codificação híbrida”. Basicamente, ele usa uma abordagem que prioriza o celular e aumenta o e-mail até a largura da área de trabalho usando alguns hacks específicos para e-mail. Você pode ler mais sobre como implementar a abordagem de codificação híbrida aqui:

• A abordagem de codificação híbrida
• Codificação híbrida redux - elevando a fasquia
• Lições duras sobre design de e-mail responsivo

CÓDIGO DE PERGUNTAS

Você pode colocar suas consultas de mídia em um documento CSS separado e vincular a esse documento na cabeça?

Não é recomendado usar folhas de estilo vinculadas (tag <link>) para e-mails devido ao suporte limitado ao cliente de e-mail. Todos os estilos devem ser incorporados no <head> de um e-mail.

Quais são os pontos de interrupção mais comuns para design de email responsivo? Quantos pontos de interrupção são ideais?

Com a maioria das aberturas ocorrendo em iPhones, é importante que seus e-mails comecem a implementar pontos de interrupção em um mínimo de 414 px, que é a largura do novo iPhone 6 Plus.

Não existe um número “ideal” de pontos de interrupção para um determinado projeto - tudo se resume ao seu projeto individual e à otimização da experiência para seus assinantes. É ideal contabilizar pelo menos um ponto de interrupção para tornar seu e-mail responsivo.

Você recomenda o uso de tabelas ou divs?

O design do email requer absolutamente o uso de um layout e estrutura baseados em tabela. O motivo para isso é a falta de suporte para <div> por clientes de e-mail, como os clientes de desktop do Outlook, no que se refere à estrutura e à base reais do HTML. Alguns clientes de email suportam <div> e podem ser extremamente poderosos para usar em certos hacks e soluções alternativas, especialmente para emails responsivos.

Você pode alterar os atributos align = “left” ou align = “right” em uma tabela usando consultas de mídia? Ou é apenas para mudanças de estilo?

Você não pode alterar tecnicamente o atributo de alinhamento HTML em CSS, mas existem outras soluções alternativas. Você pode envolver cada tabela individual em um <div> vazio e usar a propriedade float ou a propriedade display para trocar as tabelas. ActionRocket tem uma ótima postagem no blog sobre como usar essa técnica avançada.

Com e-mails responsivos, como é o suporte para imagens de fundo? Quais são as dimensões ideais para salvar imagens de fundo se eu quiser que tenham largura total?

Imagens de fundo são muito bem suportadas para clientes de e-mail móvel. Não existem dimensões “ideais” para salvar imagens de fundo. Você deve sempre tentar ter tamanhos de arquivo relativamente pequenos para que seus assinantes possam baixar seu e-mail rapidamente. Você pode usar o recurso Verificação de imagem no Litmus para testar as velocidades de download de sua imagem.

Os estilos precisam estar alinhados para que funcionem com muitos dos clientes de e-mail?

sim. Vários clientes de e-mail removem qualquer estilo CSS no <head> dos e-mails, notavelmente o Gmail, tornando os estilos CSS inlining uma necessidade para e-mails.

É melhor usar pixels ou ems para o tamanho da fonte em e-mails?

É melhor usar pixels para definir tamanhos de fonte em e-mails, pois muitos clientes de e-mail não suportam ems.

É possível substituir imagens usando consultas de mídia?

É possível substituir imagens de fundo usando consultas de mídia, mas não imagens embutidas ( <img> tags).

Qual é a melhor maneira de otimizar imagens para que sejam renderizadas com nitidez em telas de retina?

Para retina, você normalmente deseja fazer a imagem com o dobro do tamanho de sua exibição final. Por exemplo, uma imagem de 100 × 100 deve realmente ter 200 × 200, mas deve ser reduzida para 100 × 100 usando atributos HTML ou estilo CSS. Normalmente, essa técnica deve ser usada apenas para imagens menores que precisam ser nítidas - não para imagens grandes, como fotos. Existem algumas grandes discussões na Comunidade Litmus sobre design para retina:

• Projetando para Retina
• Imagens com frases de chamariz e tela retina

Exibe: nenhum; ou exibir: bloco; trabalha em e-mail responsivo?

Não é uma questão de saber se a propriedade display funciona em e-mail responsivo, mas se ela é suportada por clientes de e-mail. Como a maioria dos CSS, é suportado por alguns e não por outros. Notavelmente, não é compatível com o Gmail.

Existe algum cliente de e-mail equivalente a “inspecionar elemento” de um navegador da web? Seria útil solucionar problemas em meus designs responsivos.

Não há um equivalente exato do "elemento inspecionar" de um navegador da web. No entanto, o recurso de teste interativo no Litmus é extremamente útil. Além disso, Litmus Builder possui funcionalidade de teste e reteste com 1 clique para tornar a iteração no e-mail muito rápida.

Caso contrário, recomendamos apenas a solução de problemas em um navegador WebKit (Chrome ou Safari). Como a maioria das aberturas móveis acontecem no WebKit, que tem ótimo suporte a CSS, desenvolver e solucionar problemas em um navegador WebKit é uma boa replicação do que acontecerá com esses clientes de e-mail.

O preenchimento é universalmente compatível com os clientes de e-mail?

O preenchimento é quase universalmente compatível com os clientes de e-mail. A propriedade de margem, por outro lado, não tem grande suporte. É altamente recomendável usar preenchimento.

Como você empilhar três colunas corretamente usando o alinhamento? Você deve usar o alinhamento central além de esquerdo e direito? Ou você não recomenda o uso de layouts de três colunas?

Sim, você pode empilhar três colunas em um design de email responsivo, embora suas opções para empilhá-las e revertê-las sejam mais limitadas ou mais difíceis de fazer do que um design de duas colunas. O alinhamento das tabelas depende de como você deseja empilhá-las, mas normalmente você alinharia todas as três tabelas à esquerda.

ActionRocket tem um ótimo post sobre uma técnica avançada para tabelas de empilhamento reverso.

LITMUS BUILDER

O que é Litmus Builder?

Litmus Builder é o primeiro editor de código do mundo desenvolvido para designers de email por designers de email. É totalmente gratuito criar, editar e compartilhar e-mails.

O Emmet está embutido diretamente no Litmus Builder?

Isto é! Nossa integração com o Emmet torna a codificação abreviada uma brisa.

Onde podemos encontrar modelos de email responsivos no Litmus Builder?

Litmus Builder tem uma galeria de mais de 20 modelos de e-mail na seção Modelos. Todos os modelos são totalmente gratuitos. Verifique nossa documentação de ajuda completa para Litmus Builder.

Experimente nossos modelos responsivos gratuitos e pré-testados

O e-mail responsivo permite que você ajuste seus designs para um público cada vez mais móvel. Simplifique seu processo de design de e-mail com um host de modelos gratuitos e pré-testados na Comunidade Litmus.

Apresentando os modelos da comunidade Litmus Comece sua próxima campanha com um dos modelos pré-testados do Litmus. Acesse os modelos →