Finalmente: Gmail agora suporta design responsivo!

Publicado por: Mailbiz

Posted 14/10/2016

* Com informações do blog Litmus.

No final de setembro, o Gmail, maior provedor de e-mail gratuito do mundo, passou oficialmente a suportar o que todos os desenvolvedores de e-mail queriam: design responsivo.

Historicamente, o Gmail não suportava o uso de classes e ids no <head> de um e-mail, o que sempre forçou os desenvolvedores a usar CSS inline para aplicar os estilos desejados. Agora, o Gmail suporta o uso de CSS no <head> do e-mail, permitindo o uso de classes e ids, acabando com a necessidade de usar o CSS do modo inline. E, com isso tudo, obviamente veio também o suporte às “media queries” que trazem responsividade ao layout dos e-mails.

Segundo post no site Litmus , até 14/10/2016, quase todas as plataformas do Gmail já estavam com as atualizações rodando. Veja abaixo o status de cada plataforma em 14/10/2016:

O que muda na prática para os desenvolvedores de e-mail?

A principal razão para aplicar CSS em e-mails de modo inline (dentro dos elementos) era a falta de suporte do Gmail ao uso do <style< no <head< do e-mail. Com esta ótima mudança, agora é possível codificar o e-mail aplicando os estilos no cabeçalho. Veja o exemplo de um código que agora vai renderizar corretamente no Gmail:

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id="body">
      <p>Hi Pierce,</p>
      <p class="colored">
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

Você pode ver uma lista completa das propriedades CSS agora suportadas pelo Gmail neste link.

Impactos no mundo do e-mail marketing

Segundo o Litmus, estes são os principais impactos que teremos na indústria do e-mail marketing:

Mercado: Media queries logo serão o padrãoMuitos designers já confiam no uso de media queries para ajustar o conteúdo dos e-mails de modo a proporcionar uma melhor experiência de navegação independente do tamanho de tela do dispositivo. Porém, as medias queries infelizmente não funcionam em todos os lugares. O Gmail era, historicamente, a plataforma que mais frustrava por não ter esse suporte.Com esta mudança, agora cerca de 75% dos aplicativos de e-mail suportam design responsivo. Este deve ser o novo padrão de agora em diante.

Redução da complexidade ao codificar uma peça de e-mailPara combater a falta de suporte do Gmail às media queries, muitos desenvolvedores usavam técnicas de CSS complexas para tentar minimizar o efeito negativo na hora de visualizar o e-mail. Uma destas técnicas é o “Fab four”. De agora em diante, isso não faz mais sentido! Porém, é importante atentar que ainda é necessário codificar tabelas de modo diferente para visualização correta em clientes problemáticos, como o MS Outlook.

Adeus ao CSS inlineSim, finalmente não há mais porque usar o CSS de modo inline. Agora se tornou muito mais fácil aplicar os estilos, inserindo todas estas informações no <head> do e-mail.

E-mails se tornarão mais acessíveisSabemos que a acessibilidade do e-mail influencia diretamente no resultado de uma campanha. Se o contato não consegue visualizar e interagir corretamente com o e-mail, as taxas de engajamento (abertura e clique) despencam. Com o novo suporte a CSS do Gmail, ficará muito mais simples criar CTAs (botões) que se ajustam ao tamanho da tela. Por isso, mais do que nunca, procure garantir um equilíbrio entre texto e imagem em suas peças.

Novas opções de estilo para fontesOutra grande mudança no Gmail foi o suporte adicional à novas propriedades de fontes. O Gmail agora suporta o uso de propriedades como “column-count” e “column-gap”, o que permite a criação de colunas sem o uso de tabelas. Outros atributos como “font-kerning” e “font-variant-caps” trazem novas opções de estilização das fontes.

Enfim, esta foi uma grande notícia para o mundo do e-mail marketing. Agora é hora de se especializar mais ainda em CSS para proporcionar uma experiência de e-mail única e cada vez melhor aos usuários.

Descubra o significado de todos os termos importantes do mundo do e-mail marketing, acessando nosso Glossário de Email Marketing.

Para aprender mais sobre métricas de e-mail marketing, não deixe de baixar nossa Vídeo-Aula com Planilha de métricas gratuita.