30 / 68
POST
DO DIEGO
DEV WEB
30
Cargo:
Criador do
Tableless.com.br e
coordenador de
Front-end na Locaweb
Contato:
diego@
tabeless.com.br
Twitter:
@diegoeis
DIEGO EIS
ão é só porque você precisa
fazer e-mails com tabelas
que vai desdenhar das boas
práticas que aprendeu na
HVFROD 2 FµGLJR ëQDO GH
XP QHZVOHWWHU SRGH ëFDU
maior e tão complexo quanto o de um
site institucional simples. Outro ponto
importante é que você vai fazer muitas
alterações até esse e-mail ser publicado
e, provavelmente, vai precisar duplicá-lo
quando alguém tiver a necessidade de
enviar novas mensagens.
Minha estratégia é usar as tabelas como
os divs. Afinal, é fato que não há como fugir
delas, e isso já causa um desconforto muito
grande por causa da quantidade de código
gerada. Abaixo, segue a primeira das duas
maneiras que uso no Grupo Locaweb e nos
projetos do Tableless.
CSS INLINER
Alguns clientes de e-mail (ei, Gmail)
ignoram a tag style no HEAD ou no BODY. Eu
não os culpo: como mostraria um layout dentro
dele mesmo, sem que o CSS e o código não
quebrassem o layout do seu sistema? Esse é um
GHVDíR SDUD RV FOLHQWHV GH H PDLO EDVHDGRV HP
web, como é o caso do Yahoo! Mail e do Gmail.
Para acabar com o problema pela raiz, eles
simplesmente estripam a tag style do HTML do
e-mail marketing, aceitando apenas o atributo
style diretamente nos elementos. O problema é
que seu trabalho é fazer newsletters, então é
preciso reutilizar o código.
Por isso, o fluxo de desenvolvimento de
e-mails precisa ser parecido com a criação
em ambientes normais, usando um CSS
externo, dividido por módulos e por aí vai.
Embora fazer manutenção deixe o HTML
um horror, o CSS é a parte em que você
passará mais tempo. Por isso, tem de
estar organizado.
Para resolver esse problema, existem
serviços online que pegam o código CSS
externo e colocam diretamente nas tags do
seu HTML. Dependendo do seu layout, o HTML
íQDO Q¥R YDL íFDU ERQLWR PDV LVVR Q¥R LPSRUWD
pois a função dele aqui é simplesmente ser
bem renderizado nos clientes.
Existem três serviços que fazem a mesma
coisa: o Inliner do PutsMail, o CSS Inliner
Tool do MailChimp e o Inliner do Campaing
Monitor. Mas eu prefiro usar um plugin de
Gulp no build local dos e-mails para fazer
esse trabalho: o Gulp Inline CSS.
Se você prefere Grunt, recorra ao Grunt
Inline CSS. O problema é que, até a escrita
deste artigo, esse plugin dependia de outro
chamado Juice, que faz a mágica por baixo
dos panos e que estava dando uns paus
loucos no Mac. Se você tiver paciência para
testar, existem vários outros lá no NPM.
Última parte na próxima edição.
N
[
MINHA
ESTRATÉGIA É
USARASTABELAS
COMOOSDIVS.
AFINAL, É FATOQUE
NÃOHÁCOMO
FUGIRDELAS, E
ISSO JÁCAUSA
UMDESCONFORTO
MUITOGRANDE
PORCAUSADA
QUANTIDADEDE
CÓDIGOGERADA
]
E-MAILMARKETING:
TESTES E CSS INLINER
PARTE 2
LW
REVISTA LOCAWEB