Podcast de design de email nº 60: Como o CodePen aborda design e marketing de email com Chris Coyier

Publicados: 2017-05-05

No 60º episódio do The Email Design Podcast, os apresentadores Kevin Mandeville e Jason Rodriguez sentam-se com o guru do CSS Chris Coyier para discutir como a CodePen aborda o design e o marketing de e-mail e as reflexões sobre o desenvolvimento de e-mail em HTML a partir das perspectivas dos web designers. Acompanhe e participe da discussão no Twitter usando #EmailDesignPodcast.

Assista ao vídeo completo acima ou ouça a versão somente áudio abaixo.

Baixe o MP3

Neste episódio:

  • (1:44) Como você aprendeu HTML e CSS? Chris realmente teve aulas de programação no colégio e passou a estudar na faculdade. Em última análise, ele não gostava de programação back-end e mudou para uma especialização em arte. Ele acabou entrando em HTML e CSS a partir da construção de sites WordPress, incluindo seu famoso site CSS Tricks.
  • (8:05) Você aprendeu algum recurso inicial? Chris é um grande fã de Dan Cederholm e de seu livro Bulletproof Web Design.
  • (09:27) Qual foi sua principal inspiração para criar truques de CSS e qual foi sua visão para isso? Chris diz que a ideia original era criar um monte de sites WordPress com conteúdo de tecnologia popular, como o InDesign Help para gerar tráfego e ganhar dinheiro com eles. CSS Tricks não era muito popular inicialmente, mas era o que Chris realmente gostava e queria manter como um diário pessoal de suas aprendizagens ao construir todos esses sites diferentes.
  • (11:48) O que é CodePen? CodePen é um “playground para a web front-end”. Ele funciona permitindo que você crie “canetas”, que são conjuntos de HTML, CSS e JavaScript, e também é uma rede social para desenvolvedores, semelhante a um Dribbble para código ou mesmo um Litmus Builder para desenvolvimento de front-end. Mais recentemente, eles lançaram Projetos, que permitem que você trabalhe em um ambiente de desenvolvimento de front-end local.
  • (14:30) Qual é a visão do CodePen? É um ato de equilíbrio. A CodePen quer crescer como empresa, mas também precisa manter sua comunidade forte, feliz e saudável. Especialmente como uma pequena equipe de oito pessoas com recursos limitados, eles realmente precisam se concentrar nas principais prioridades.
  • (17:15) Como é o marketing por email na CodePen? Que tipo de e-mail você envia? Um esforço recente por e-mail foi o CodePen Spark, uma coleção semanal das Canetas recentes mais legais. Na verdade, a CodePen construiu um CMS personalizado para ajudar a gerenciar e construir o e-mail, que também publica no site da CodePen para arquivos. O e-mail é construído a partir de templates Rails que obtêm CSS embutido e compilado a partir dos dados CMS. Chris então insere o e-mail no Litmus para testar e fazer os ajustes necessários. CodePen usa Sparkpost para enviar seus e-mails. Projetos recentes que Chris espera fazer para e-mail na CodePen é mesclar suas preferências de e-mail dentro do aplicativo da web CodePen e construir e-mails de integração e acionados com base na atividade do usuário.
  • (23:53) Como você avaliou a construção de soluções personalizadas em comparação com a compra de outras plataformas e serviços de e-mail? Chris acha que a maioria dos provedores de serviço de e-mail é muito cara para justificar. CodePen tem o desafio único de ter uma equipe pequena, mas uma grande base de usuários de mais de 1 milhão, onde os custos são realmente altos. Portanto, para o CodePen no momento, faz mais sentido investir seu tempo na construção de suas ferramentas.
  • (28:31) Como você planeja os e-mails que enviará? CodePen usa o Google Docs para planejar atividades de marketing por e-mail.
  • (32:47) Você sabe qual é a composição do seu público de assinantes? CodePen não presta muita atenção ao seu público de assinantes no momento e simplesmente se concentra em fazer o e-mail renderizar em todos os clientes de e-mail populares. Eles abordam o desenvolvimento de e-mail usando uma abordagem que prioriza os dispositivos móveis.
  • (35:00) Quais são seus principais pontos fracos com design e desenvolvimento de e-mail? Como poderia ser mais fácil para você? Chris luta para descobrir qual é a camada certa de abstração para emails em HTML. Ele não quer construir manualmente e-mails em HTML, mas não quer ficar tão abstraído a ponto de ser muito removido e difícil de localizar ou editar erros durante a solução de problemas. Ele acredita que a única fonte da verdade deve ser Litmus no processo de teste.
  • (36:59) Como você tenta resolver os problemas de renderização que encontra? Chris encontrou recentemente um bug do Outlook com um bloco de espaço aleatório de aproximadamente 100 pixels. Chris não viu nenhum bug no código em si e não sabia como pesquisar esse tipo específico de bug online - ele apenas usou o Litmus para tentar várias coisas para solucionar problemas até que fosse renderizado corretamente.
  • (39:10) Qual é o bug mais estranho que você encontrou? Chris teve problemas ao usar imagens de retina em e-mails, principalmente por causa do comportamento do Outlook e de fazer com que funcionassem corretamente para e-mails responsivos.
  • (41:13) Como você avalia o sucesso dos e-mails do CodePen? Dada a natureza de sua equipe pequena e sem uma pessoa dedicada de marketing por email ou analítica na equipe, eles não olham para a análise de email de cada email. Eles abordam isso a partir de uma visão mais qualitativa do feedback dos usuários.
  • (45:00) Por que o mundo do web design tem uma visão negativa do e-mail em HTML? Chris diz que não é nenhum mistério por que a web odeia e-mail: porque não é moderno e eles não podem codificar da maneira que desejam. Ele também aponta para o fato de que, mesmo em web design, as pessoas não gostam de testes entre navegadores. O teste de renderização não é uma parte agradável do trabalho para a maioria e isso é ampliado quando se trata de e-mail.
  • (48:54) Como podemos educar mais o mundo da web sobre e-mail? Chris acredita que seria benéfico mostrar quanto e-mail evoluiu no suporte de renderização e como ele pode ser simples. Ser capaz de dizer que você não precisa embutir CSS ou usar tabelas teria um grande impacto na percepção do e-mail.

Siga o Podcast de design de e-mail

  • Siga no SoundCloud
  • Assine no iTunes
  • Inscreva-se no YouTube

RECEBA O MAIS RECENTE ENTREGUE DIRETAMENTE NA CAIXA DE ENTRADA

Quer obter mais dicas e conselhos como este? 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.