Projetar a versão HTML da sua mensagem de email pode ser difícil, pois existem muitas combinações diferentes de cliente de email e sistema operacional por aí – e elas têm sua própria maneira de renderizar HTML. E realmente não há como ter certeza de qual cliente seus leitores usarão para visualizar suas mensagens.
Se o seu leitor tiver um endereço do Hotmail, geralmente é seguro assumir que ele estará lendo sua mensagem através do cliente da Web do Hotmail. Mas e os seus leitores com endereços de email particulares? Eles estarão usando o Microsoft Outlook? Será o Outlook 2000, Outlook 2003 ou Outlook 2007? Ou talvez ele esteja usando o Lotus Notes? E se ele tivesse o email do seu TLD encaminhado para uma conta do Yahoo? E ele está usando um Mac ou um PC?
Como você realmente não sabe as respostas para nenhuma dessas perguntas, ao criar suas campanhas por e-mail, é importante que você sempre projete para ter mais acessibilidade.
O Cascading Style Sheets (CSS) oferece a capacidade de tornar suas mensagens de email extremamente gráficas e atraentes. Infelizmente, ainda há suporte limitado ao r CSS com muitos clientes de email e em várias plataformas. Um dos maiores infratores de CSS é o Outlook 2007; e como os estudos mostram que até 75% dos leitores de email usam o Outlook, você não pode ignorar as falhas de renderização.
Infelizmente, o Outlook 2007 não oferece suporte a elementos flutuantes, amplamente usados no CSS para posicionar objetos. Portanto, é baseado em usar um layout baseado em tabela ao projetar suas campanhas de email. Pense em web design por volta do ano 2000. Se você é um novo designer e nunca lidou com tabelas antes, pode obter toneladas de informações sobre instruções no W3C.
Embora o Outlook 2007 ofereça suporte à propriedade, não recomendo que você o utilize para anexar sua folha de estilos. Pelo menos 50% dos seus leitores terão as imagens desativadas, o que significa que qualquer elemento vinculado não será vinculado – e isso inclui sua folha de estilos externa. Além disso, o Gmail, o Live Mail e o Hotmail não suportam elementos vinculados, por isso é uma boa ideia não usá-los de qualquer maneira. Em vez disso, defina todos os seus estilos na sua mensagem e nunca conte com uma folha de estilos externa para suas mensagens de email.
Onde, na mensagem, você deve definir seus estilos é outra história. O Live Mail procura a folha de estilos com o Hotmail procura a folha de estilos logo abaixo da tag. O Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage e Thunderbird aceitarão qualquer um dos canais, mas o Gmail não aceita nenhum deles.
A melhor opção é usar tags de estilo em linha. Estilo em linha significa simplesmente que o estilo para cada elemento deve ser definido individualmente. Em vez de definir sua folha de estilos dentro da sua cabeça, desta maneira:
ou até algo assim:
você definiria cada elemento individualmente, assim:
Ao definir esses elementos, lembre-se de que nem todas as propriedades CSS são suportadas em todos os clientes de email. Se você quiser apresentar uma mensagem consistente a todos os seus leitores, independentemente de como eles estejam lendo seu e-mail, limite-se a estas propriedades CSS:
. cor de fundo
. fronteira
. cor
. tamanho da fonte
. estilo de fonte
. variante de fonte
. espessura da fonte
. espaçamento entre letras
. altura da linha
. preenchimento
. layout da tabela
. alinhamento de texto
. decoração de texto
. recuo do texto
. transformação de texto
Essas propriedades são suportadas em Macs e PCs em:
. AOL
. Comitiva
. Gmail
. Live Mail
. Outlook 2003
. Outlook 2007
. Thunderbird
. Yahoo
As propriedades a serem evitadas incluem:
. imagem de fundo
. posição de fundo
. fundo de repetição
. colapso da fronteira
. espaçamento entre bordas
. inferior
. lado da legenda
. Claro
. grampo
. cursor
. direção
. exibição
. células vazias
. flutuador
. família de fontes
. altura
. esquerda
. lista-estilo-imagem
. posição do estilo da lista
. tipo de estilo de lista
. margem
. opacidade
. transbordar
. posição
. certo
. topo
. alinhamento vertical
. visibilidade
. espaço em branco
. largura
. espaçamento de palavras
. índice z
E agora, para ainda mais más notícias: o Lotus Notes e o Eudora têm um suporte terrível a CSS e mesmo muitas das propriedades CSS amplamente aceitas podem não ser renderizadas corretamente. E como cada vez mais leitores estão acessando e-mails em PDAs e outros dispositivos portáteis, você nunca pode estar 100% certo de como ou onde sua mensagem será lida. Portanto, sugiro que você sempre use as mensagens Multipart-Mime e inclua sempre um link para sua versão de texto na versão html da sua mensagem.
*** Deseja manter essas dicas à mão?
