Email Marketing animado com Marquee
Templates de email marketing usam HTML old-school, e textos animados com marquee (igualmente old school) chamam a atenção no email marketing.
Sim, eu sou antiga e sou da época em que usar marquee era o último grito em Paris para páginas web. Se você não se lembra ou não conhece, marquee é esse tipo de animação:
Dentro da tag marquee, você pode colocar um link, uma imagem ou até mesmo um parágrafo. Porém, de nenhuma dessas formas o seu código HTML será válido pelo W3C, visto que o elemento marquee é considerado obsoleto.
A animação é exibida corretamente em todos os browsers, mas o validador do W3C irá apresentar alguns erros quando você validar o seu código HTML, indicando que não existe um elemento marquee ou seus atributos na documentação do HTML.
Relembrando os tempos áureos de uso do marquee em websites, imaginei como seria sua aplicação nos dias de hoje, em Email Marketing. Eis os resultados dos testes:
| Desktop | Suporte a marquee |
|---|---|
| Apple Mail |  |
| Outlook 2000 | |
| Outlook XP/2002 | |
| Outlook 2003 | |
| Outlook 2007, 2010 |  |
| Outlook 2011 | |
| Outlook 2013 | |
| Lotus Notes 8.5 e 8.0 | |
| Thunderbird | |
| Mobile | Suporte a Marquee |
|---|---|
| iPhone | |
| iPad | |
| Android | |
| BlackBerry 5 OS | |
| Symbian | |
| Windows Phone | |
| Webmails | Chrome | Internet Explorer | Firefox |
|---|---|---|---|
| Gmail | |
|
|
| Outlook.com | |
|
|
| Yahoo! Mail | |
|
|
| BOL | |
|
|
| UOL | |
|
|
| Terra | |
|
|
| R7 | |
|
|
Perceba que, nos webmails, o suporte ao elemento marquee depende também do browser em que o webmail é acessado.
Caso você queira fazer seus próprios testes ou usar a animação de texto em marquee no seu email marketing, use esse código:
Experimente outros efeitos do marquee trocando os valores dos atributos loop, behavior, scrollamount e direction.
Marquee com CSS3
marquee foram removidas das especificações do CSS3, portanto, estas instruções não funcionarão. Para animar textos de forma semelhante ao marquee, o W3C recomenda utilizar as propriedades de animação do CSS, que não funcionam em email marketing.Apesar do elemento marquee ser considerado obsoleto para o HTML, o CSS3 traz propriedades de criação e formatação de marquee, o que faz sentido, já que marquee não é um elemento semântico (como p, div, table, strong etc), mas sim, puramente estético.
As propriedades em CSS relacionadas à criação e formatação de marquee são: marquee-style (equivalente ao atributo behavior da tag marquee em HTML), marquee-speed, marquee-play-count e marquee-direction. A propriedade overflow-x também traz o valor marquee-line.
O interessante é que o CSS3 possibilitará criar animações do tipo marquee mais “avançadas” com sobreposição de textos, separação de parágrafos e outras transformações.
Este segundo cenário não é muito animador para usar em email marketing porque se até mesmo os browsers ainda oferecem suporte limitado a CSS3, sendo necessário usar webkit e outros vendor prefixes para muitas propriedades, que dirá os programas de email.
De qualquer forma, fiz os testes e eis os resultados para avaliação do suporte dos programas de email a marquee em CSS3:
| Desktop | Suporte a marquee |
|---|---|
| Apple Mail | |
| Outlook 2000 | |
| Outlook XP/2002 | |
| Outlook 2003 | |
| Outlook 2007, 2010 | |
| Outlook 2011 | |
| Outlook 2013 | |
| Lotus Notes 8.5 e 8.0 | |
| Thunderbird | |
| Mobile | Suporte a Marquee |
|---|---|
| iPhone | |
| iPad | |
| Android | |
| BlackBerry 5 OS | |
| Symbian | |
| Windows Phone | |
| Webmails | Chrome | Internet Explorer | Firefox |
|---|---|---|---|
| Gmail | |
|
|
| Outlook.com | |
|
|
| Yahoo! Mail | |
|
|
| BOL | |
|
|
| UOL | |
|
|
| Terra | |
|
|
| R7 | |
|
|
Da mesma forma que o GIF animado, é possível incorporar animações de texto em marquee ao email marketing de forma que pareçam caricatos ou amadores. Basta usar a criatividade!