Gmail melhora suporte a responsividade em email marketing

DinamizeCapa, Dica, Dicas do Mail2Easy PRO0 Comments

css-gmail

Entenda o impacto positivo no Email Marketing

Quem trabalha com email marketing sabe: o Gmail tem sido um dos grandes limitadores na criação de peças de HTML, porque cria restrições bem rígidas, onde é necessário usar muito código, repetidas vezes, para driblar algumas dessas restrições que permitem um email minimamente responsivo.

Mas agora o cenário mudou pra melhor. Em 31 de Agosto de 2016, o Gmail começou a aceitar oficialmente CSS no email, tanto na versão web, quanto na mobile. Isso vai ajudar principalmente na responsividade para email marketing.

Então agora as coisas serão muito mais fáceis: você vai poder caprichar no layout sem tanto medo de que não funcione. A descrição desse novo poder de fogo no design de email marketing está aqui: https://developers.google.com/gmail/design/css
Mas nós vamos explicar tudo direitinho 😉

Confira nosso post sobre responsividade, que fala da importância deste fator no email:
http://www.dinamize.com/blog/responsividade-nao-e-padrao-e-obrigacao/
Porque isso é bom?

O CSS é uma tecnologia que permite muitos efeitos visuais interessantes, que se usados da maneira correta, dão um diferencial incrível nas suas ações. Boa parte do era possível fazer apenas numa landing page, passará também a ser possível no corpo do email exibido no Gmail.

O que exatamente eles vão liberar?

Estilos Incorporados em todas as versões do Gmail
Basicamente você vai poder determinar a aparência com muito mais facilidade dos botões, fontes, cores e imagens de fundo do seu email. A versão web já permitia parcialmente isso, mas a versão mobile simplesmente ignorava tudo, e exibia o design de uma forma bem diferente da original.

Uso de CLASSES e IDS nos elementos html
De uma forma geral, essa modificação aproxima o desenvolvimento de uma peça de email, do desenvolvimento de um site. Muito menos código envolvido, muito mais praticidade. Cada parte do seu email pode ser identificada e ter um estilo próprio.

Media Queries
A novidade mais esperada de todas. Com esse recurso é possível determinar os comportamentos de exibição em diversos dispositivos, como tablets, smartphones, desktops. Gmail está suportando query em relação a vários parâmetros como largura da tela, orientação (paisagem e retrato) e resolução.

Com o Gmail oferecendo suporte às media queries, mais de 75% dos clientes de email estarão prontos para o design responsivo. Isso certamente forçará o mercado a adotar o padrão.

logo_css3

Se você deseja detalhes de quais propriedades do css o Gmail liberou para uso confira aqui:
https://developers.google.com/gmail/design/reference/supported_css
Exemplo:


<html>
  <head>
    <style>
      .colorido {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colorido {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id="body">
      <p>E aí meu velho,</p>
      <p class="colorido">
       <strong>Olha só:</strong> Este texto será azul, se a largura da janela for menor que 500px e vermelho se for maior.    Media query funciona no Gmail viu!
      </p>
      <p>Gus</p>
    </div>
  </body>
</html>

Veja o exemplo online

Restrições da Novidade

Animações, transições e transformações não serão suportadas
Infelizmente, itens que dependem de recursos mais avançados de css, como sliders de imagens, gráficos interativos, não poderão ser implementados com total compatibilidade.


https://www.emailonacid.com/blog/article/industry-news/gmail-announces-style-and-media-query-support-what-this-means-for-you
https://litmus.com/blog/gmail-to-support-responsive-email-design

Conteúdo relacionado

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *