Atualização: Gmail lança suporte para design responsivo, estilo de fonte aprimorado + CSS para acessibilidade

Publicados: 2016-09-30

Nas primeiras horas da manhã de 30 de setembro, o Gmail começou a implementar mudanças para dar suporte ao que o mundo do e-mail tem clamado por tanto tempo: estilos incorporados e design responsivo.

Sobre o que estamos conversando?

Historicamente, o Gmail não oferece suporte a classes ou ids no <head> de um e-mail, o que forçou os designers de e-mail a usar CSS embutido para definir o estilo de seus e-mails. Agora, o Gmail oferecerá suporte a CSS incorporado com classes e ids, o que elimina a necessidade de CSS embutido no Gmail. Isso também significa que o Gmail finalmente oferecerá suporte a consultas de mídia - e e-mail responsivo.

Apenas acompanhando as notícias? Acompanhe nossas atualizações no Live Ticker conforme monitoramos o lançamento ou leia um resumo de todas as mudanças esperadas e o que elas significam para os comerciantes por email abaixo.

The Gmail Update Live Ticker

Esta é uma visão atual dos clientes de e-mail do Gmail que foram atualizados:

Cliente Gmail

Atualização lançada

Webmail para desktop

check-green

Webmail móvel

check-X

Aplicativo do Gmail para Android (conta do Gmail)

check-green

Aplicativo do Gmail para Android (conta do Gmail)

check-green

Aplicativo do Gmail para Android (conta POP / IMAP)

check-X

Aplicativo Gmail para iOS

check-green

Inbox by Gmail (webmail)

check-green

Inbox by Gmail (iOS)

check-green

Inbox by Gmail (Android)

check-green

G Suite Basic (antigo Google Apps for Work)

check-green

Edição gratuita do Google Apps (legado)

check-X

  • 7 de novembro, 11h30 EDT

Uma grande atualização do aplicativo Gmail para iOS inclui a atualização de renderização para suportar <style> e consultas de mídia! Todos os aplicativos móveis do Gmail agora oferecem suporte a e-mail responsivo. Também vemos todas as contas do G Suite com a atualização de renderização.

  • 12 de outubro, 9h EDT

Estamos começando a ver as contas do G Suite fora dos EUA (o que inclui o Litmus Previews) recebendo a atualização de renderização. Atualizaremos o gráfico de distribuição quando vermos que todas as nossas contas têm a atualização.

  • 4 de outubro, 9h30 EDT

Lançamos um gráfico de distribuição completo acima. Observe que o Gmail renomeou seus nomes de planos de conta.

Para contas do G Suite Basic (antigo Google Apps for Work), parece que as atualizações só foram lançadas para contas nos EUA. Para usuários do Litmus, observe que nossas visualizações de e-mail do G Suite Basic (ainda chamadas de Google Apps) usam contas do Reino Unido, que atualmente não receberam a atualização.

  • 4 de outubro, 4h EDT

A implementação para suportar consultas de mídia agora parece estar concluída nos aplicativos Gmail e Inbox by Gmail no Android. Embora algumas pessoas tenham notado mudanças no suporte à consulta de mídia em seus aplicativos iOS, o suporte ainda não é consistente em todas as contas.

  • 30 de setembro, 8h EDT

As mudanças também foram implementadas no aplicativo Gmail no Android. As aulas e as identificações estão sendo coletadas no cabeçalho do e-mail. Também vemos suporte a consulta de mídia para algumas contas do aplicativo Gmail para Android, mas o suporte não é consistente em todas as contas que testamos. O suporte pode ser implementado gradualmente entre as regiões.

Agora também estão sendo lançadas atualizações para o Inbox by Gmail, com suporte para ids e classes no cabeçalho do e-mail.

  • 30 de setembro, 5h30 EDT

O Gmail parece estar implementando atualizações em seu mecanismo de renderização gradualmente. Os clientes da web do Gmail oferecem suporte a classes e ids no <head> em todos os navegadores (Chrome, Safari e Firefox) e ambos estão sendo referenciados corretamente no HTML.

Também vemos suporte a consultas de mídia em clientes da web do Gmail:

Gmail para oferecer suporte a design de e-mail responsivo

Até agora, no entanto, nem as tags de estilo no cabeçalho do e-mail nem as consultas de mídia são suportadas pelo Inbox by Gmail ou pelo aplicativo Gmail.

  • 29 de setembro, 23:55 EDT

Está acontecendo! O Gmail começou a implementar mudanças em sua máquina de renderização. Fique atento às atualizações enquanto monitoramos o lançamento.

Divulgue as novidades →

O que essas mudanças significam para geeks de e-mail

Em 31 de agosto de 2016, o Gmail anunciou que começaria a oferecer suporte à exibição de propriedades CSS: nenhuma; e suporte a <style> e consultas de mídia.

Esta é apenas uma parte de um esforço geral para expandir o suporte CSS no Gmail e dar aos designers de e-mail mais controle sobre como suas mensagens são processadas.

- Pierce Vollucci, gerente de produto do Google

Esta é uma grande notícia para a comunidade de e-mail e terá grandes implicações no design e desenvolvimento de e-mail.

GMAIL PARA APOIAR E-MAIL RESPONSIVO E <STYLE>

Historicamente, o Gmail não oferece suporte a classes ou ids no <head> de um e-mail, o que forçou os designers de e-mail a usar CSS embutido para definir o estilo de seus e-mails. Agora, o Gmail oferecerá suporte a CSS incorporado com classes e ids, o que elimina a necessidade de CSS embutido no Gmail. Isso também significa que o Gmail finalmente oferecerá suporte a consultas de mídia - e e-mail responsivo.

Em outras palavras, o código a seguir agora será processado 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> <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 de CSS com suporte na parte inferior desta postagem ou na documentação oficial do Gmail. Aqui está uma lista completa dos próximos suportes de consulta de mídia:

Tipos Suportados

  • tudo
  • tela

Consultas suportadas

  • largura mínima
  • largura máxima
  • largura mínima do dispositivo
  • max-device-width
  • orientação
  • resolução mínima
  • resolução máxima

Palavras-chave com suporte

  • e
  • só

O QUE ISSO SIGNIFICA PARA E-MAIL

Essas atualizações sinalizam um importante ponto de viragem no desenvolvimento e fluxo de trabalho de email, permitindo que designers e profissionais de marketing criem campanhas de email mais acessíveis sem a necessidade de CSS embutido.

Impacto no mercado: consultas de mídia em breve serão o padrão

Muitos e-mails dependem de consultas de mídia para ajustar o conteúdo e o design para criar uma experiência mais utilizável em uma ampla variedade de tamanhos de tela. No entanto, as consultas de mídia não funcionam em todos os lugares. A falta de suporte mais notável e frustrante historicamente veio do Gmail, que é famoso por remover o código do <head> junto com todos os estilos e consultas de mídia contidos nele.

Com o suporte do Gmail para consultas de mídia, mais de 75% dos clientes de e-mail suportam design responsivo . Esperamos que isso se torne a norma com outros clientes de e-mail como o Windows Phone seguindo o exemplo.

Necessidade reduzida de estruturas de layout hacky como Fab Four

Para combater a falta de suporte do Gmail para consultas de mídia no, os geeks de e-mail procuram soluções alternativas. Uma dessas soluções alternativas é a técnica Fab Four, que envolve a função CSS calc () e as três propriedades de largura, largura mínima e largura máxima.

Designers de e-mail, é hora de dizer adeus a essas estruturas de layout complicadas. Mas, lembre-se: você ainda precisa de tabelas para o Outlook. (Não criamos um padrão de e-mail ... ainda).

No entanto, o desenvolvimento híbrido / esponjoso ainda tem seu lugar no desenvolvimento de e-mail como uma estrutura básica para clientes problemáticos como o Outlook.

Diga adeus ao CSS inlining

Os estilos “embutidos” movem o CSS e as instruções de formatação associadas do bloco de estilo no <head> de seu e-mail para o <body> do HTML. Historicamente, se os estilos não fossem movidos em linha, o estilo do corpo do seu e-mail não seria exibido no Gmail.

no-inline-edited-03

Com essas atualizações, o CSS inlining não será mais necessário. Os designers de email agora podem usar estilos incorporados colocados no <head> de documentos HTML. CSS incorporado terá suporte em todos os principais clientes de e-mail.

Os e-mails ficarão mais acessíveis

A acessibilidade no email é essencial para o sucesso de uma campanha. Se um assinante não puder ler e interagir com seu e-mail, não haverá como ele agir.

Com suporte a CSS incorporado, os designers de e-mail podem separar o estilo do conteúdo e usar marcação semântica e acessível para seus e-mails.

Enquanto texto grande e botões amigáveis ​​ao toque ajudam a melhorar a acessibilidade, o mesmo acontece com a preparação de seu HTML para uso com um leitor de tela. Com isso em mente, garanta um equilíbrio saudável de texto e imagens em seu design e personalize o conteúdo escrito em seu e-mail para entregar a mensagem principal.

Com suporte adicional para configurações de leitor de tela baseadas em CSS, como pitch, pitch-range, speak-punctuation e speech-rate, o Gmail tornou ainda mais fácil para os profissionais de marketing tornar seus e-mails mais acessíveis.

O suporte à tipografia aumentará

Outra mudança importante que vem com essas atualizações é o suporte adicional para propriedades de fonte CSS. Por exemplo, o Gmail começará a oferecer suporte a atributos como contagem de colunas e lacuna de colunas, o que permite a criação de colunas de texto sem tabelas. Além disso, font-kerning e font-variant-caps habilitarão um estilo de fonte adicional. No entanto, não parece que as fontes da Web serão suportadas na próxima versão.

Suporte adicional para plano de fundo está chegando

O Gmail está introduzindo suporte adicional para propriedades de fundo CSS, como background-clip, background-position e, o mais importante, background-size. Com suporte para tamanho de fundo, os e-mails podem ter imagens de fundo escalonáveis ​​e responsivas.

TESTE SEUS E-MAILS NO GMAIL

Como essas mudanças afetarão seu e-mail? Use o Litmus para visualizar instantaneamente seu e-mail no Gmail - e mais de 70 outros clientes de e-mail. Observe que essas mudanças ainda não estão ativas, mas serão refletidas nas Visualizações do Litmus Instant assim que o Gmail as colocar no ar.

Experimente Litmus grátis →

Documentação Oficial

Pela primeira vez, um grande cliente de e-mail publicou documentação oficial de suporte em CSS e HTML. Este é um grande primeiro setor. Obrigado, Gmail!

As seguintes propriedades CSS serão suportadas no Gmail e Inbox by Gmail:

  • azimute
  • fundo
  • modo de mesclagem de fundo
  • clipe de fundo
  • cor de fundo
  • imagem de fundo
  • origem do fundo
  • posição de fundo
  • fundo de repetição
  • tamanho do fundo
  • fronteira
  • borda inferior
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • estilo border-bottom
  • borda inferior largura
  • colapso da fronteira
  • Cor da borda
  • borda esquerda
  • cor da borda esquerda
  • estilo borda esquerda
  • borda esquerda largura
  • raio de fronteira
  • fronteira direita
  • border-right-color
  • estilo de borda direita
  • border-right-width
  • espaçamento de borda
  • estilo de borda
  • borda superior
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • estilo border-top
  • largura da borda superior
  • largura da borda
  • tamanho da caixa
  • pausa
  • pausa antes
  • arrombamento
  • lado da legenda
  • Claro
  • cor
  • contagem de colunas
  • preenchimento de coluna
  • lacuna de coluna
  • regra da coluna
  • coluna-regra-cor
  • estilo de regra de coluna
  • largura da regra da coluna
  • coluna-span
  • largura da coluna
  • colunas
  • direção
  • exibição
  • elevação
  • células vazias
  • flutuador
  • Fonte
  • família de fontes
  • font-feature-settings
  • font-kerning
  • tamanho da fonte
  • font-size-ajustar
  • font-stretch
  • estilo de fonte
  • síntese de fontes
  • variante da fonte
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • espessura da fonte
  • altura
  • orientação da imagem
  • resolução de imagem
  • isolamento
  • espaçamento entre letras
  • altura da linha
  • estilo de lista
  • posição de estilo de lista
  • list-style-type
  • margem
  • margem inferior
  • margem esquerda
  • margem direita
  • margem superior
  • altura máxima
  • largura máxima
  • altura mínima
  • largura mínima
  • mix-blend-mode
  • ajuste ao objeto
  • posição do objeto
  • opacidade
  • contorno
  • cor de contorno
  • estilo de contorno
  • largura do contorno
  • transbordar
  • preenchimento
  • acolchoamento inferior
  • padding-left
  • padding-right
  • tampo de enchimento
  • pausa
  • pausa depois
  • pausa antes
  • tom
  • gama de tons
  • citações
  • riqueza
  • falar
  • speak-header
  • falar numeral
  • falar-pontuação
  • velocidade de fala
  • estresse
  • layout de mesa
  • alinhamento de texto
  • text-combine-upwrite
  • decoração de texto
  • texto-decoração-cor
  • linha de decoração de texto
  • text-decoration-skip
  • estilo de decoração de texto
  • ênfase do texto
  • texto-ênfase-cor
  • estilo de ênfase de texto
  • text-indent
  • orientação de texto
  • estouro de texto
  • transformação de texto
  • posição do sublinhado do texto
  • Unicode-bidi
  • alinhamento vertical
  • voz-família
  • largura
  • espaçamento entre palavras
  • modo de escrita

RECEBA O MAIS RECENTE ENTREGUE DIRETAMENTE NA CAIXA DE ENTRADA

Manteremos você informado sobre quaisquer alterações adicionais na implementação do Gmail e como isso afetará você. Assine nosso boletim informativo semanal e receba o conteúdo mais recente para profissionais de design de e-mail diretamente em sua caixa de entrada. Toda semana.