Voltar
Facebook
Linkedin
Twitter
Copiar link
14/10/2016
15/04/2026 
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!
14/10/2016- 3 min de leitura
* 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.
Conteúdo
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.
Compartilhe esse artigo