Mar 5, 2009
Como fazer newsletters?
Nunca tinha feito tal coisa, muito menos “à mão” mas por estes dias tive necessidade de elaborar uma newsletter. Pensei: pego numa qualquer que tenha recebido, olho para o código fonte, altero e está feito. Mal imaginava eu que programar uma newsletter nada tem a ver com o fazer uma página web igual. Porquê? Basta dizer que não existe suporte CSS. Ou melhor, suporte para tudo o que não seja inline css.
Então depois de algumas cabeçadas na parede cheguei às seguintes conclusões:
- O que não se deve fazer:
- Não usar folhas de estilo externas <link rel=”stylesheet”> ou sequer no próprio html. Nem vale a pena tentarem, é simplesmente ignorado.
- Li algures para não usar atributos na tag <body>. A mim parece-me que o resultado de colocar atributos ou não nesta tag varia conforme o leitor de email utilizado. O que se confirma no guia no fim do post.
- O que se deve fazer:
- Tabelas e mais tabelas. Usar tabelas para construir todo o layout. Apesar de todo o design web moderno se basear em <div> aqui não conseguimos escapar das velhinhas tabelas. Até se pode tentar mas é capaz de ser mais uma perca de tempo que outra coisa. No entanto um div aqui e acolá com as devidas propriedades pode dar jeito
- Usar css inline nas tags <td>. Isto vai permitir elaborar emails mais bonitinhos. CSS inline funciona mas lá se vão o a:hover, a:visited, etc a menos que se use por exemplo onmouseover=”this.style.textDecoration = ‘underline’” mas acho que nem vale a pena experimentar. Se alguém o fizer que diga o resultado
- Tentar declarar quantos atributos das tabelas quanto possÃvel. Existem muitos clientes de email e se estiver explicito o que o programa deve fazer com o código melhor.
- Testar o email: eu enviei para o gmail, thunderbird e hotmail.
- Quanto a imagens?
- Usei imagens de fundo com sucesso em todos os leitores que utilizei. É possÃvel que não funcionem em leitores mais antigos. Existe sempre o link para consultar a newsletter online (em todos os browsers menos o IE
) - Convêm dar os atributos de altura e largura assim como para o alt.
Fico-me por aqui e deixo um guia bastante útil: Guide to CSS support in email clients (2008)
e ainda How to Code HTML Email Newsletters
Artigos relacionados:
