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!