Lembro-me da primeira vez que vi um código de página da web gerado por um WYSIWYG (o que você vê é o que você obtém) … Tive uma sensação desagradável e pensei: “Como as pessoas podem tolerar isso?”
Talvez porque com pouco ou nenhum conhecimento técnico e com o mínimo de tempo e esforço, eles conseguem o que querem ver? Mas e se depois de usar tal ferramenta, com muita frustração, você não obtiver os resultados desejados?
Tive um cliente que usava uma ferramenta WYSIWYG para criar campanhas de e-mail em HTML e adivinhe … eles não estão obtendo os resultados que desejam ver. Os designs de e-mail em HTML são caóticos quando recebidos nos computadores dos leitores.
O problema
Os leitores do cliente usam o Lotus Notes para ler seus e-mails. O problema é que o Lotus Notes nem sempre exibe emails em HTML conforme o esperado. Em vez disso, ele exibe e-mails HTML em um formato de rich text proprietário. Isso significa que o Lotus Notes, como um leitor de e-mail, usa seus próprios padrões para renderizar e-mails em HTML que são bastante diferentes em comparação com todos os outros leitores de e-mail populares (ou seja, Gmail, Outlook, etc.).
Existem elementos HTML que o Lotus Notes simplesmente não entende. Para tornar as coisas mais complicadas, diferentes versões do Lotus Notes têm diferentes padrões de renderização. Isso significa que criar um modelo de e-mail em HTML que funcione para uma versão do Lotus Notes não garante que funcione em outras.
É por isso que os designers de e-mail em HTML mais odeiam o Lotus Notes – quase como o Internet Explorer para desenvolvedores da Web.
Descobertas na renderização de e-mail HTML do Lotus Notes
O Lotus Notes tem vários problemas com os padrões HTML amplamente aceitos devido à sua própria formatação de rich text. Aqui estão alguns desses problemas que podem ser encontrados se você pesquisar na web:
– COLSPANS. Esses são atributos das células da tabela para informar ao cliente de e-mail ou ao navegador por quantas colunas elas abrangem. Parece que o Lotus Notes não consegue entender isso e talvez seja necessário usar várias tabelas como uma solução alternativa.
– ALINHAMENTO CENTRAL. Usar funcionou muito bem no Lotus Notes 6.5.3. Mas não no Lotus Notes 6.5.4. Além disso, as tags em torno das tabelas também não funcionavam no 6.5.4. Podemos tornar as coisas mais simples como uma solução alternativa para que fiquem bem alinhados à esquerda em 6.5.4.<TABLE ALIGN="CENTER"><CENTER>
Outras possíveis soluções alternativas e boas práticas
Aqui estão algumas dicas úteis para criar e-mails em HTML para Lotus Notes:
– Use a tag de mesclagem do Mail Chimp para gerar automaticamente um link para a versão online de sua campanha do MailChimp. Os assinantes podem clicar neste link para visualizar sua campanha diretamente em seus navegadores da web. – Permita que seus assinantes escolham qual versão de sua campanha eles desejam receber ao se inscreverem em sua lista: HTML, Texto ou Celular. Se eles tiverem dificuldade para visualizar o e-mail em HTML, eles podem selecionar a opção Texto. – Mantenha seus designs simples para que, se falharem, seu e-mail ainda seja legível.*|ARCHIVE|*
Sugestão no fluxo de trabalho de criação de campanha
A ferramenta WYSIWYG que mencionei anteriormente é fornecida pelo Mailchimp. Essa ferramenta é ótima. Eu recomendo … se seus leitores não usam Lotus Notes.
A ferramenta arrastar e soltar do Mailchimp para criar campanhas de email gera código HTML que tenta fazer a campanha parecer boa em muitos programas de email populares. Infelizmente, o Lotus Notes não funciona bem com a maioria dos padrões de renderização de HTML desses programas.
Para garantir que a campanha terá uma boa aparência no Lotus Notes, temos que limpar o código que o Mailchimp gera.
Siga estas etapas para limpar o design de e-mail HTML:
– Salvar campanha como modelo. Para fazer isso, vá para a página Campanhas, edite sua campanha e clique em “Salvar como modelo”. Isso é necessário porque o Mailchimp só permite exportar para HTML a partir de modelos.
– Exportar modelo para HTML. Assim que a campanha for salva como um modelo, agora você pode exportá-la para um código HTML que podemos limpar. Vá para a página de Modelos, clique no botão suspenso ao lado do botão Editar no Modelo e selecione “Exportar como HTML”
– Limpe o Código HTML. Depois de selecionar a opção “Exportar como HTML”, um arquivo será baixado para o seu computador. Abra este arquivo em um Editor de Texto e faça o seguinte:
– Adicione elementos específicos do Lotus Notes.
– No código HTML que você baixou, você provavelmente encontrará uma linha com este código: <!--[if gte mso 9]>… substitua todas as ocorrências por <!--[if (gte mso 9)|(IE)]>
– Lotus Notes Microsoft Internet Explorer (IE) para processar e-mails HTML.
– Remova as regras de estilo destinadas a smartphones.
– No código HTML, se você encontrar regras @media {…} dentro das tags, você pode removê-lo. – Estas regras @media {…} são destinadas a smartphones e podem não funcionar bem com o Lotus Notes. – Faça regras de estilo CSS embutidas. Tanto quanto possível, aplique as regras de estilo encontradas dentro das tags como estilos embutidos nos elementos. No momento em que escrevia este blog, Mailchimp tinha um recurso embutido automático para fazer isso. Basta marcar a caixa de seleção nas configurações de design e o Mailchimp fará isso automaticamente para você.<style> ... </style><style> ... </style>
– Carregue o código HTML limpo no Mailchimp. Depois de concluir as etapas de limpeza, você pode voltar ao Mailchimp e criar uma campanha usando o novo e-mail HTML. Crie um Campain e escolha Email em HTML e cole o código do Editor de Texto que você usou.
– Teste a aparência do e-mail em HTML. Mailchimp fornece um recurso pago chamado Inbox Preview para ver como o email HTML é processado em vários programas de email populares. Se você estiver em uma conta gratuita, pode usar o modo de visualização. Outra opção é abrir uma conta no Litmus ( http://litmus.com ) que fornece capturas de tela do e-mail em HTML renderizado em vários programas de e-mail (incluindo versões do Lotus Notes).