Como enviar uma versão oculta do seu e-mail que somente a Apple Watch verá

O usuário do Litmus, Dan Foody, descobriu algo muito interessante sobre o Apple Watch. Existe uma maneira de enviar uma versão oculta de sua campanha de e-mail que apenas o Apple Watch exibirá. Isso dá a você muito mais flexibilidade em seu design.

Normalmente, o Watch exibe apenas a parte do texto simples do seu e-mail. Isso acontece por causa de uma peculiaridade. Quando o Watch percebe uma imagem remota em seu e-mail, ele considera o HTML muito complicado, então mostra a versão em texto simples. Para referência, uma imagem remota é uma imagem que não está incorporada no e-mail, mas sim carregada de um servidor usando uma tag <img> padrão - 99% das imagens em e-mails são carregadas dessa forma. Lembre-se, estamos exibindo e-mail em um relógio aqui, pessoal. Precisa ser simples!

Então, qual é o segredo?

Primeiro, um pouco de fundo. Os emails em HTML normalmente contêm duas partes - HTML (tecnicamente com um tipo de conteúdo text / html ) e texto simples ( text / plain ). A Apple, em um e-mail recente aos clientes, usou uma terceira parte: text / watch-html .

Se você incluir uma parte HTML adicional em sua mensagem, com o Content-Type “ text / watch-html ”, o Watch usará a parte Watch adicional em vez da parte Texto Simples quando a parte HTML for inadequada. Você pode precisar de ajuda de seu ESP ou provedor de correio para configurar a terceira parte do Watch. Você também pode tentar enviar para si mesmo um e-mail habilitado para Watch com PutsMail, que suporta uma terceira parte watch-html . Agora você pode criar conteúdo exclusivamente para o Watch!

Watch-html em ação

Pegamos nosso último boletim informativo e adicionamos uma parte watch-html . Em todos os outros clientes de e-mail, parecia que nada havia acontecido.

Mas, no Apple Watch, pudemos mostrar uma versão específica e personalizada que utilizou o suporte de rich text do relógio.

Quão bom pode o e-mail realmente parecer em um relógio?

Seus e-mails podem ficar melhores com essa técnica, mas ainda é bastante limitada. A maneira mais simples de pensar no suporte a HTML do Watch é apenas decoração de texto. Você pode criar uma formatação mais agradável, mas não vai recriar um layout de várias colunas completo.

Verifique o HTML usado para construir o e-mail de exemplo acima. Você notará que quase não há elementos de nível de bloco. Na verdade, quase não se parece com HTML. Isso tudo se deve à maneira como o Watch analisa o HTML em uma visualização de rich text.

Como o Watch não é capaz de exibir HTML, ele realmente faz com que o iPhone traduza o HTML em rich text antes de entregá-lo ao Watch. Isso é muito semelhante aos visualizadores de rich text que alguns podem se lembrar dos primeiros dias do Lotus Notes e AOL. É essencialmente texto simples, com algum suporte a conteúdo rico.

Dicas de formatação

Em vez de tags de parágrafo, simplesmente crie um parágrafo na fonte do seu e-mail. Não use estilos ou marcas fortes para aumentar o peso da fonte, use <b> em vez disso. Divs não são necessários, nem a maioria dos estilos (com exceção das cores de texto que não são pretas) são respeitados. Certifique-se de evitar recuos ou outra organização em seu HTML - o relógio inclui esse espaçamento extra na mensagem.

Aqui está nosso resumo do que é compatível até agora:

Conceito de Rich Text	Assistir HTML
Audacioso	<b> Texto </b>
Itálico	<i> Texto </i>
Sublinhado	<u> Texto </u>
Cor da fonte	<span style = ”color: # 00800;”> Texto </span> Texto definido como preto (# 000000), ou não especificado, será convertido em branco (#FFFFFF). Outras cores são suportadas.
Alinhamento	<div style = ”text-align: right;”> Texto </div> Apenas esquerda, centro e direita são suportados.
Citando	<blockquote type = ”cite”> Texto </blockquote> Aninha as cotações em até 7 níveis de profundidade, nenhum recuo ocorre, mas o sombreamento indica o nível de cotação.
Lista Numerada	<ol> <li> Item 1 </li> </ol>
Lista com marcadores	<ul> <li> Item 1 </li> </ul>
Imagens	<img src = ”cid:…”> Texto </blockquote> Apenas imagens incorporadas são suportadas e o suporte real é muito problemático. Mais sobre isso abaixo.

Suporte de imagem

Esta primeira versão do cliente de e-mail Watch tem alguns problemas bastante grandes quando se trata de imagens. Além do fato de que eles devem ser incorporados, existem alguns grandes truques a serem observados.

Há um bug na forma como as imagens são posicionadas que resulta na quebra da proporção da imagem. Quando o relógio redimensiona sua imagem incorporada, ele insere uma borda transparente de 2px (4px uma vez na tela retina). Infelizmente, ele faz isso dentro da imagem, causando distorção na imagem. Por exemplo, se você tiver uma imagem de 100x50px, o relógio irá redimensioná-la para 96x46px, falhando em preservar a proporção da imagem.

Você pode contornar esse problema redimensionando as imagens para 4px x 4px maiores (sem preservar a proporção da imagem). Neste exemplo, a imagem em sua parte HTML do relógio seria 104x54px. O relógio irá redimensioná-lo de volta para 100x50px. No entanto, isso resultará em alguma distorção.

Além disso, as imagens embutidas podem ser reposicionadas involuntariamente em qualquer lugar na visualização Watch. Se o relógio apresentar um soluço durante a renderização, você poderá encontrar sua imagem aparecendo no topo da linha de assunto, data ou até mesmo do nome!

Esperamos que a Apple conserte esses problemas em uma atualização de software em um futuro próximo, mas vale a pena manter essas limitações em mente. Se você experimentar a incorporação de imagens, lembre-se de usá-las apenas na parte Watch HTML, pois as imagens incorporadas têm suporte insuficiente para exibição na parte HTML exibida em outros clientes de e-mail.

Texto do Preheader

Há uma consideração final a ter em conta. Embora o Watch renderize o HTML do Watch, ele ainda usará a parte HTML padrão para o texto do pré-cabeçalho na visualização da caixa de entrada.

Usando watch-html em estado selvagem

Como você pode realmente usar essa parte HTML do Watch oculta? Você precisará da ajuda de seu ESP ou provedor de correspondência. A má notícia é que os ESPs ainda não oferecem suporte a isso - envie a eles um link para esta postagem! Incluímos os detalhes técnicos abaixo. Esperançosamente, agora que descobrimos os detalhes técnicos, veremos a adoção em um futuro próximo.

Como enviar um e-mail com uma peça watch-html

Se você está entregando e-mails em HTML ou está implementando isso para um ESP, vamos abordar os detalhes técnicos de como enviar e-mails que incluem uma parte HTML do relógio.

Para adicionar sua parte HTML do relógio, adicione uma terceira parte MIME adicional. Deve usar o Content-Type “text / watch-html” e deve estar embutido.

 Tipo de conteúdo: text / watch-html; charset = "utf-8"

Além disso, e isso é muito importante, você deve garantir que a parte Watch HTML apareça antes da parte HTML padrão em sua fonte de e-mail e depois da parte de texto simples. Se você incluir o HTML do Watch em outro lugar, o Apple Mail na área de trabalho renderizará o HTML do Watch como texto simples. Se você estiver tendo problemas para fazê-lo funcionar, verifique se o seu software de envio ou MTA não está reordenando as partes MIME.

Aqui está um exemplo de e-mail que implementa corretamente todas as 3 partes:

 De: [email protected]
Para: [email protected]
Assunto: Exemplo do Apple Watch
Tipo de conteúdo: multiparte / alternativa; limite = "seu-limite"

--seu limite
Tipo de conteúdo: texto / simples; charset = "utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

Esta é a parte do texto simples.

--seu limite
Tipo de conteúdo: text / watch-html; charset = "utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

<b> Esta é a parte HTML do relógio </b>

--seu limite
Tipo de conteúdo: text / html; charset = "utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Disposition: inline

<p> Esta é a parte HTML padrão </p>
<img src = ”algo remoto” />

--seu limite--

Finalmente, o relógio só voltará para sua parte watch-html se houver algo inadequado na parte HTML padrão. Uma imagem remota simples, como um bug de rastreamento ou uma imagem oculta, resolverá o problema.

Essa técnica funciona porque o Apple Watch tentará a parte text / html e, gradualmente, voltará às partes MIME, em busca de conteúdo adequado. Embora tenhamos nomeado nosso tipo de conteúdo “text / watch-html”, ele poderia, na realidade, ser chamado de qualquer coisa que comece com “text /”.

ENVIE A VOCÊ MESMO UM E-MAIL OTIMIZADO PARA ASSISTIR

PutsMail permite enviar um e-mail de teste para qualquer endereço sem um ESP. Ele também tem suporte para watch-html .