Facebook
Twitter
Copiar link
14/10/2016
01/04/2024 
Milhares já recebem nossa news. Vai ficar de fora?
Cadastre-se e receba os melhores conteúdos sobre e-mail marketing e e-commerce.
Compartilhe via:
- Finalmente: Gmail agora suporta design responsivo!
Voltar
Finalmente: Gmail agora suporta design responsivo!
- 14/10/2016
- 3 min de leitura
Mailbiz
Siga no Linkedin
* 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.
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.
Compartilhe esse artigo