Distribuir e conquistar: ferramentas para criar e testar boletins

Digitar e-mails é uma dor. O layout e o teste de letras adaptativas com interativo (por exemplo, com formulários e controles deslizantes) são um problema. No entanto, nem tudo não é tão ruim se você escolher as ferramentas certas. Neste artigo, falarei sobre estruturas de email - MJML e Foundation for Emails - e meus recursos favoritos para testar listas de discussão - Litmus e Email On Acid .

No artigo anterior, aprendemos como a história do boletim começou e qual o papel do Outlook nele e também descobrimos qual interatividade podemos adicionar ao boletim agora e qual no futuro. Este artigo irá falar sobre ferramentas para quem lida com listas de discussão hoje.

Digamos que você queira criar a newsletter

A primeira opção: criar um novo documento HTML, pegar um clichê pronto (por exemplo, o popular Cerberus ou o Responsive Email Framework ) e sentar para escrever tabelas com estilos embutidos, google no processo de falta de hacks ou correções para um layout que de repente foi para algum Gmail para Android. Essa opção é adequada se você possui alguma experiência no layout de letras, tempo livre suficiente e a tarefa é o layout de uma letra única e simples.

Um exemplo de modelo de carta "pronto para uso" disponível no Cerberus

A segunda opção: use o editor online para criar um modelo (por exemplo, Mosaico ou Stripo ). Esta é a maneira mais fácil. É perfeito se você não é um desenvolvedor ou se se depara com o layout pela primeira vez e o layout da carta é bastante simples. Quase todos os editores online fornecem modelos prontos e também incluem hacks no código-fonte do modelo para a operação correta de emails em clientes populares de email. Mas essas ferramentas praticamente não permitem personalizar o layout da letra para o layout específico e geralmente oferecem muito pouco controle do código e da aparência da letra.

Alterações no modelo de carta no designer de mensagens do Stripo

Terceira opção: use uma estrutura de email. Se você precisar criar regularmente o boletim, se o layout das cartas é complicado e os requisitos são rigorosos, e se deseja automatizar seu fluxo de trabalho e em parte o processo de desenvolvimento da carta, essa opção é para você. Vou falar sobre as duas ferramentas mais poderosas: MJML e Foundation for Emails (conhecida como Ink em sua juventude).

Utilizamos uma estrutura de email pronta. Mjml

• Github: mjmlio / mjml
• Desenvolvedor: Mailjet
• Data de lançamento: 2016
• Licença: MIT
• Popularidade: 7662+ estrelas
• Predefinição: MJML

As principais idéias incorporadas na estrutura:

1. modelos responsivos prontos para uso,
2. simplificação do trabalho com código por meio de seu próprio mecanismo de modelo,
3. um conjunto de componentes prontos para uso dentro da carta,
4. integração conveniente no processo de desenvolvimento da lista de discussão.

A estrutura usa o mecanismo de modelo com o mesmo nome. É simples e ao mesmo tempo muito poderoso. Esqueça a tabela de tags, thead, tbody, th, tr, td. Esqueça que os estilos precisam ser escritos em linha. Esqueça a estrutura complexa ilegível do código da letra. Aqui está a aparência do seu email usando MJML:

<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml> 

Em vez de construções complexas de tabelas HTML de diferentes níveis de aninhamento, basta escrever algumas linhas que, quando o projeto for construído, serão transformadas em um código HTML válido da letra "temperado" com todos os hacks necessários.

O MJML fornece plug-ins para editores de texto populares - Visual Studio Code, Atom e Sublime Text. Eles adicionam realce de sintaxe de idioma, um linter e uma guia com uma visualização do tipo de letra diretamente no próprio editor.

Se você não deseja se preocupar com editores de texto ou de texto, existe um aplicativo oficial de desktop multiplataforma separado, com um editor de código completo, um visualizador de modelos prontos para cartas e uma visualização ao vivo da sua carta.

Além de um conjunto de componentes padrão (como um botão ou carrossel), existem componentes personalizados prontos (por exemplo, um componente para desenhar gráficos). Você pode encontrar utilitários úteis na página de complementos da comunidade , como o carregador MJML para WebPack ou a ferramenta de integração para o aplicativo Laravel MJML. E não faz muito tempo, no status beta, tornou-se possível usar a API MJML para gerar emails diretamente, por exemplo, dentro de um aplicativo móvel. A coisa é bastante específica, mas certamente encontrará seu usuário.

A principal desvantagem da estrutura, ao mesmo tempo, é uma de suas vantagens: “capacidade de resposta”. A estrutura automaticamente e sem a intervenção do desenvolvedor cuida de como o modelo de carta se comporta em dispositivos com uma largura de tamanho de tela pequena. Isso se traduz em uma restrição de quatro colunas na grade e na falta de capacidade de ajustar o comportamento do layout responsivo para atender às suas necessidades.

Um detalhe pequeno, mas agradável: no site da seção com documentação, há uma seção com uma descrição semelhante ao CanIUse do suporte aos componentes MJML em vários clientes de email. Você pode verificar imediatamente no site e não se perguntar como a carta se comportará, por exemplo, no Outlook 2007.

Conclusão: o MJML é uma ferramenta muito poderosa e fácil de aprender para criar emails responsivos. As dificuldades podem surgir apenas se você precisar de uma personalização de modelo perfeita e perfeita em pixels.

Utilizamos uma estrutura de email pronta. Fundação para e-mails

• Github: zurb / fundação-e-mails
• Desenvolvedor: ZURB
• Data de lançamento: 2015
• Licença: MIT
• Popularidade: 6885+ estrelas
• Predefinição: Inky

Se você não é o primeiro ano no mundo do front-end, provavelmente já ouviu falar (mas - aposto que você mal o usou;)) sobre o Foundation for Sites . Essa estrutura, criada por desenvolvedores da empresa ZURB, há muito garante seu status como a segunda mais popular (depois do Bootstrap) entre as estruturas da Web de front-end.

O Foundation for Emails é feito pelas mesmas pessoas e é essencialmente parte do Foundation for Sites. Isso oferece a ele várias vantagens (uma grande empresa de desenvolvimento, uma comunidade bastante grande, tudo o que você gostou no Foundation for Sites) e várias limitações (tudo o que você não gostou no Foundation for Sites não gostará do Foundation for Sites Emails).

A primeira coisa a fazer se você decidir experimentar a estrutura é instalar o Foundation CLI:

npm install --global foundation-cli

Em seguida, você pode criar um novo projeto com o comando:

foundation new --framework emails

e comece a desenvolver a carta.

É verdade que você precisa aguardar alguns minutos até que todos os módulos e componentes necessários sejam carregados. Como um grande número de arquivos é baixado, não se surpreenda com o tamanho da pasta - um projeto vazio pesará mais de 400 mb. Além do cli, o Live Reload está disponível imediatamente, um modelo básico com todos os hacks necessários, modelos prontos e parciais, além de suporte ao SASS.

Estrutura do arquivo de projeto do Foundation for Emails

O FfE possui seu próprio mecanismo de modelo - o Inky. Em sua essência, ele faz o mesmo que o mecanismo de modelo MJML - simplifica o trabalho com tabelas aninhadas complexas usando tags abreviadas:

 <container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container> 

Existem cerca de dez tags no total, três delas são usadas para criar uma grade (veja o exemplo acima), a tag de grade de blocos é usada para criar uma grade de blocos, mais duas tags são um menu (menu e item) e os nomes de outras duas falam por si: botão e texto explicativo.

O FfE usa uma grade de 12 colunas, que pode ser simplificada para 2, 3, 4 ou 6 colunas e também permite que você defina o número de colunas separadamente para estados de dispositivos móveis e computadores.

O sistema de parciais e auxiliares é implementado usando o compilador de arquivos Panini, que internamente usa o mecanismo de modelo de guidão simples e conveniente.

Ao contrário do MJML, ao usar o FfE, duas versões da carta são criadas - uma para clientes de desktop e outra para dispositivos móveis. Em seguida, você decide em qual ponto de interrupção deseja alternar os estados de desktop / móvel e também pode ativar ou desativar todos os blocos de seu layout usando classes especiais: .hide-for-large e .show-for-large.

Conclusão: O Foundation for Emails fornece controle completo sobre o layout da carta, tanto para o desktop quanto para o estado móvel. Dificuldades podem surgir no processo de imersão na estrutura e na tentativa de lidar com suas sutilezas, uma vez que é bastante grande e complexa. Mas se você deseja controlar todos os aspectos do seu modelo - sua escolha é o Foundation for Emails.

Ferramentas de teste para boletins

Portanto, nossa newsletter está pronta. Parece ótimo em um navegador. E os clientes de email móvel e do Outlook? É hora de recorrer a serviços especializados para testar o boletim: Litmus e Email on Acid .

Teste do Boletim Litmus

O Litmus fornece um conjunto completo de ferramentas que você pode precisar ao testar listas de discussão. Esta é uma ide web para editar código html (Builder), um sistema de análise de correspondência e um conjunto de "listas de verificação" - ferramentas de teste de desempenho, verificação de spam por e-mail e muito mais.

A "lista de verificação" mais importante - Visualização de E-mail - possibilita a verificação de e-mail em mais de 90 clientes de e-mail para computador / celular / web. Isso é feito em alguns cliques. Você precisa inserir o código da letra no Builder, clicar no botão de teste e selecionar os clientes de email necessários.

Recentemente, os desenvolvedores adicionaram um recurso interessante: o inspetor do código html processado pelo cliente de email (html processado). Parece um pouco com o inspetor das ferramentas de desenvolvimento do seu navegador favorito: você pode selecionar uma área específica da mensagem e ver seu código. Isso ajuda muito a analisar problemas específicos do cliente sem recorrer a edições ocultas e, em seguida, visualizar o resultado no Email Preview.

Ver HTML processado no Litmus

Encontrei duas desvantagens com o Litmus. A primeira é a falta de resposta da interface do usuário como um todo e a visualização de email fica lenta de tempos em tempos e faz com que você gaste muito tempo aguardando a criação da visualização e reinicie os testes.

Segundo menos: preço. A opção de assinatura mínima custará US $ 80 / mês. Além disso, o plano selecionado afeta diretamente o número de visualizações de letras que estarão disponíveis. Portanto, aconselho que você pense com cuidado se realmente precisa do Litmus ou se consegue uma alternativa mais barata.

Teste de e-mail em boletins ácidos

O segundo serviço que eu gostaria de falar é o Email On Acid . Pode ser chamado com segurança de "irmãozinho" de Litmus em quase todos os aspectos.

Julgue por si mesmo: existe um ide da web para editar o boletim, existem ferramentas para analisar a carta, há testes de spam e, é claro, também existem testes de email em mais de 70 aplicativos.

A pré-visualização das letras é feita quase da mesma forma que no Litmus. As diferenças são principalmente na aparência, as opções / configurações são um pouco menores, não há um inspetor do código da letra processada e outras ferramentas menos úteis. Mas a UI EoA é mais conveniente e fácil do que a do Litmus e funciona praticamente sem atrasos. O teste de e-mails ocorre cerca de uma vez e meia mais rapidamente.

Último fator importante: preço. O email no Acid é metade do preço do Litmus com funcionalidades muito semelhantes. E não há restrições quanto ao número de visualizações da sua carta. Estes são os vinhos indubitáveis ​​da EoA.

O que escolher?

As ferramentas descritas acima custam muito dinheiro. Na minha opinião, faz sentido usá-los continuamente apenas se você consistentemente, pelo menos várias vezes por mês, compor cartas bastante complexas e se tiver requisitos estritos para o suporte deles em vários clientes de email, especialmente os móveis.

Se você envia correspondências ocasionais, existem duas opções alternativas:

1. use Litmus / Email de avaliação no Acid por 7/14 dias (dependendo do serviço) - o dinheiro do primeiro mês será devolvido ao seu cartão;
2. use uma combinação de serviços menos populares que possuem planos gratuitos e teste manualmente os clientes de email.

Aqui estão alguns serviços que podem ser usados ​​gratuitamente, embora em uma extensão limitada:

1. PreviewMyEmail (Gmail para Chrome / FF / IE, Thunderbird, Apple Mail para iOS7);
2. InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010 / Outlook Express);
3. DirectMail (Outlook 2003, Gmail no IE);
4. Putsmail + PilotMailer (serviços on-line para enviar um código de carta para qualquer endereço, fácil de usar para testes manuais do boletim);

O que você escolher a longo prazo, o principal é que a ferramenta atenda às suas necessidades.

Conclusão

O escopo das ferramentas para o tipógrafo da lista de discussão atingiu esse nível de desenvolvimento quando não podemos apenas usar estruturas convenientes para o desenvolvimento de cartas e aplicativos para testá-las, mas também escolher as adequadas para nossas tarefas e capacidades.

Se você digitar letras raramente e elas geralmente forem simples - sinta-se à vontade para usar o padrão básico, digitar e testar “manualmente”. Como alternativa, use serviços gratuitos para teste.

Se você precisar lidar com a digitação de letras regularmente, e os layouts parecerem complexos e adaptáveis, o MJML e o Foundation for Email assumirão alguns dos cuidados. E o Limus e o Email on Acid economizarão muito tempo e células nervosas na tentativa de derrotar algum Outlook ou Gmail irritante no Android.

E qual o caminho que você escolhe? Compartilhe nos comentários.