Folhas de estilo em cascata e exibição de e-mail

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?

 

Você pode gostar também

More Similar Posts

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Preencha esse campo
Preencha esse campo
Digite um endereço de e-mail válido.

Menu