Blog de Email Marketing

Conteúdo

Email Marketing animado com Marquee

Juliana Padron Por Juliana Padron em 20.02.2013

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:


111,111,111 x 111,111,111 = 12,345,678,987,654,321.

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 Sim
Outlook 2000 Sim
Outlook XP/2002 Sim
Outlook 2003 Sim
Outlook 2007, 2010 Não
Outlook 2011 Sim
Outlook 2013 Não
Lotus Notes 8.5 e 8.0 Sim
Thunderbird Não
Mobile Suporte a Marquee
iPhone Sim
iPad Sim
Android Sim
BlackBerry 5 OS Não
Symbian Sim
Windows Phone Sim
Webmails Chrome Internet Explorer Firefox
Gmail Não Não Não
Outlook.com Sim Sim Não
Yahoo! Mail Sim Sim Sim
BOL Sim Sim Sim
UOL Sim Sim Sim
Terra Sim Sim Sim
R7 Sim Sim Sim

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

Atualização de 27.10.2016 às 15h30: Depois da publicação deste artigo, as propriedades de 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.

Eu sou um recurso muito moderno.

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 Sim
Outlook 2000 Não
Outlook XP/2002 Não
Outlook 2003 Não
Outlook 2007, 2010 Não
Outlook 2011 Sim
Outlook 2013 Não
Lotus Notes 8.5 e 8.0 Não
Thunderbird Não
Mobile Suporte a Marquee
iPhone Sim
iPad Sim
Android Sim
BlackBerry 5 OS Não
Symbian Não
Windows Phone Não
Webmails Chrome Internet Explorer Firefox
Gmail Sim Não Não
Outlook.com Sim Não Não
Yahoo! Mail Não Não Não
BOL Sim Não Não
UOL Sim Não Não
Terra Sim Não Não
R7 Sim Não Não

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!

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações