Transcrições
1. Introdução: Meu nome é Fabio Carneiro. Eu sou o desenvolvedor de e-mail líder do MailChimp. Acho que até este ponto da minha carreira, já codifiquei... Acho que são apenas mais de 1100 e-mails. Isso provavelmente é demais, isso é muito. Hoje, vamos falar sobre como criar e-mails mais eficazes. O design é importante e não é apenas fluff. A pesquisa mostrou que as pessoas excluem e-mails feios. Então vale a pena fazer o esforço para torná-los bonitos. Lembre-se de que você está tentando criar uma impressão, criar confiança e fazer algo que as pessoas vão querer ler e voltar para você ao longo do tempo. Independentemente de você ser um comerciante, um redator, um desenvolvedor, um designer, ou se você dirige seu próprio negócio, isso será útil para você apenas porque ele lhe dará uma boa visão geral do que e-mail design é. As dificuldades inerentes a ela. Como você faz isso bem? E tipo do que entra nisso. Assim, no final desta classe você saberá a diferença entre e-mail e web design, você será capaz de determinar o design e assumir a finalidade do e-mail e você vai entender alguns dos princípios do design de e-mail responsivo. Se você está apenas começando com o e-mail, eu recomendo conferir a primeira classe do MailChimp no SkillShare, começando com o email marketing.
2. Seu projeto: O projeto nesta classe é compartilhar em e-mail qual design fez você tomar uma ação, ou fez você sentir algo. Então, eu recomendo que você compartilhe uma imagem de um e-mail, algo que você achou eficaz, e então escreva uma breve descrição de por que você acha que é um e-mail bom e eficaz. Só deve demorar alguns minutos. Basta usar sua própria caixa de entrada. Todos recebemos toneladas de e-mails todos os dias. Então, deve ser bem simples entrar e encontrar um que seja bastante eficaz e que você acha que funciona bem. Quando você estiver procurando um exemplo de um bom e-mail, faça algumas perguntas a si mesmo sobre ele. O e-mail tem um propósito específico? O seu conteúdo é adequado para esse fim? É compatível com dispositivos móveis ou responsivo? Todas essas coisas são blocos de construção para o que faz um e-mail parecer bom. Então, ao construir esta galeria de e-mails, você está basicamente criando uma página de inspiração. Você pode ver o que as outras pessoas sentem que funcionam bem, você obtém ideias para seus próprios projetos de e-mail, e você pode apenas obter uma visão melhor do que funciona bem, que as pessoas respondem
e, em seguida, implementar essas coisas em seu próprio trabalho. Se você estiver projetando seus próprios e-mails, você pode compartilhá-los e pedir feedback a outros alunos. Essencialmente, o que você está fazendo em um ótimo post é ensinar os outros. Essa é a melhor coisa que pode fazer, é ajudar outras pessoas a serem melhores.
3. Visão geral: Então, uma das primeiras grandes perguntas a responder é, qual é a diferença entre design de e-mail e web design? E na verdade é um grande golfo de diferença. Um web design é diferente e há uma espécie de construção para todos abordagem. Os sites tendem a ser bastante gerais no foco porque há um público inteiro lá fora que pode vir até você e você nem sempre sabe quem eles são. Mas o e-mail é, na verdade, o contrário. O e-mail é muito íntimo e muito focado e permite que você pegue seu público muito perto e porque você conhece seu público, você pode realmente tornar seu conteúdo muito mais relevante e eficaz. Do ponto de vista técnico, design de
e-mail é diferente do web design porque não é apoiado
pelos padrões atuais estabelecidos pelo W3C e porque você tem que oferecer suporte a clientes mais antigos, isso significa que você
vai ser construindo em tabelas em vez de divs e realmente usando técnicas mais antigas que eram mais populares no final dos anos 2000 do que são hoje. Apesar da diferença entre web e design de e-mail, existem princípios que traduzem. É só uma questão de se traduzem ou não totalmente, algo pode precisar de um pouco de ajuste. Só porque o design do e-mail é diferente e talvez um pouco mais velho, não
significa que você deve jogar fora da janela todos os bons princípios de design que você conhece. E-mail ainda faz parte
do ecossistema web maior e isso significa que as coisas que você faz para tornar um site bom, pode realmente traduzir e fazer um e-mail bom também. É importante lembrar que quando você está enviando um e-mail, você não está apenas enviando um site, pode parecer
que ele é um único site de veiculação, mas e-mails seu próprio canal com suas próprias considerações para o que torna bom design e bom conteúdo. Então, se você não é um desenvolvedor, você precisa saber todos esses pequenos detalhes sobre design de e-mail? Eu diria que você realmente deveria e isso é realmente só que quando você inevitavelmente tem que falar com um desenvolvedor, você sabe o que você está pedindo e você pode se comunicar eficazmente sem ter que empurrar ninguém para cima da parede. No mundo do e-mail, público-alvo significa tudo e um e-mail eficaz geralmente é direcionado para um público específico. A melhor maneira de determinar seu público é usar formulários de inscrição. Em um formulário de inscrição, você pode realmente segmentar por interesses específicos. Fazer perguntas às pessoas como, você é um desenvolvedor? Você é designer? Você é um pesquisador? E, fazendo perguntas simples, você começa a criar uma imagem de quem
é seu público e, em seguida, você pode realmente pegar esses dados e criar e-mails mais relevantes. Se você achar que seu público será principalmente desenvolvedores, por exemplo, você pode realmente tornar seu conteúdo muito mais técnico. Você pode geralmente tornar seu design muito mais simples também, modo que é a informação textual que se
destaca para os designers, por outro lado, pode apreciar algo que parece um pouco mais agradável e para o conteúdo para ser talvez menos técnico e mais subjetivo. Um e-mail deve sempre ser projetado com um propósito em mente, porque tudo o resto decorre desse propósito, o conteúdo que você escreve, como você o desenha, para
quem você envia, se você está tentando vender um produto, você não iria querer necessariamente perder todo o tempo contando uma história longa. As pessoas querem ver o seu produto. Eles querem ser capazes de comprá-lo. Se, por outro lado, você está enviando um boletim informativo, você pode estar bastante confiante de que as pessoas querem ler uma história. Assim, ser capaz de encontrar o seu público e design da finalidade, significa que você pode fazer um e-mail mais relevante do que qualquer site poderia esperar ser. Outro aspecto importante para o design de e-mail é o design responsivo. Isso ocorre porque mais da metade de todos os e-mails estão abertos em dispositivos móveis. Agora, o que é design responsivo? É essencialmente a idéia de que, independentemente do dispositivo ou tamanho da
tela em que seu e-mail ou até mesmo o site é visualizado, ele irá apresentar informações de uma forma que ainda é clara e concisa e faz sentido para esse meio. Se você quiser entrar no código você mesmo, há muitas considerações para design responsivo para e-mail. Você tem que lidar com clientes diferentes e como eles tratam código e é realmente apenas um monte de informações para esse fim, você pode realmente se referir a templates.mailchimp.com. É um guia que escrevi que responde ao grande, o que você precisa saber para o desenvolvimento de e-mail responsivo. Então, como isso tudo se traduz em estratégia de negócios. Bem, tudo se resume à experiência do usuário e conhecer seu público. Em primeiro lugar, seja humano. Lembre-se de que o e-mail é uma linha aberta de comunicação. É algo que nada mais combina. As redes sociais não fazem isso. Sites não fazem isso. Você tem acesso direto a uma pessoa, e-mail é uma conversa. O design é importante e não é apenas fluff. A pesquisa mostrou que as pessoas excluem e-mails feios ,
então vale a pena fazer o esforço para torná-los bonitos. Lembre-se de que você está tentando criar uma impressão, criar confiança e fazer algo que as pessoas vão querer ler e voltar para você ao longo do tempo. No seu núcleo, bom design e e-mail é sobre propósito. Você está guiando um destinatário para uma ação que você quer que ele tome e, por isso, seus projetos devem ser orientados para isso. Seu conteúdo e seus visuais funcionarão juntos em conjunto, mas é o design que chama a atenção de alguém primeiro.
4. Os princípios do design eficaz: Agora, vamos mergulhar em alguns dos princípios do design de e-mail eficaz. Uma das coisas mais importantes no design do e-mail é o texto. Independentemente de onde uma pessoa visualiza no e-mail, os textos são a única coisa que é renderizada de forma consistente. Não importa em que cliente de e-mail e e-mails visualizados, em que plataforma ele é visualizado, textos é a única coisa que sempre aparecerá. Então, é bom prestar atenção em como você trata textos porque se tudo mais falhar, é
isso que seu e-mail é. Idealmente, seus e-mails mensagem para se deparar sem imagens, então pense em seu e-mail como um todo e traduza isso no texto, faça a mensagem fácil de digerir, preste
atenção à tipografia e torne seu conteúdo fácil de ler. Em algo como um e-mail de forma longa, boa topografia é realmente importante porque você está pedindo às pessoas para dedicar um monte de tempo, o 're lendo seu conteúdo. É importante prestar atenção ao tamanho do tipo, às alturas de linha
e até mesmo à cor do texto, porque tudo isso faz um e-mail seja confortável para ler especialmente em telas menores. Nem todas as fontes são compartilhadas entre sistemas, Helvetica está presente em muitas máquinas Apple. Mas no Windows, é na verdade Ariel que é usado em vez disso. Então, é uma boa prática construir uma pilha de fontes onde você especifica algo como Helvetica e Arial e, em seguida, para o sans-serif para que seus textos sempre sejam exibidos da maneira que você pretende. É importante manter aqueles que são bem suportados em várias plataformas. letra como Helvetica e Arial e Georgia e Times New Roman lhe darão uma cobertura muito ampla em todos os sistemas e atuarão como uma prova de falhas no caso de você estar usando algum conjunto de fontes mais chique pode não estar presente em algumas máquinas. Outra opção é usar fontes da Web. Agora, estes são tipos de letra que você pode servir através da web que não estão necessariamente presentes em muitas máquinas de usuários. Se você usar fontes da Web, é importante fornecer um fallback para fontes seguras do sistema para que seu texto seja renderizado como você pretende, independentemente de o usuário ter
ou não acesso a uma fonte da Web específica. Uma ótima maneira de saber onde as fontes da Web funcionam é referindo-se à matriz de campanhas de
estilo no suporte de fontes da Web no e-mail. Eles fizeram muitas das bases para você,
então você sabe onde o trabalho e onde ele não vai, eu incluí o link nos recursos, então você pode se referir a ele mais tarde. Quando falo sobre ter uma fonte de fallback, quero dizer especificá-la no CSS, você escreve em seu e-mail. Então, se você estiver usando uma fonte web dizer como Open Sans do Google Fonts, você pode realmente voltar para Helvetica e, em seguida, Arial e, em seguida ,
sans-serif em sua pilha de fontes e
no caso de uma dessas fontes não está presente no sistema, seu e-mail vai voltar para o próximo que está disponível e assim seus e-mails serão renderizados como você pretende. É importante verificar quais opções você tem disponíveis para fontes, independentemente do provedor de serviços de e-mail. No MailChimp fazemos o trabalho para você fornecendo uma pilha de fontes automaticamente dependente da fonte que você selecionar como seu principal. Outra maneira de lidar com textos em seus e-mails é usando texto
baseado em imagem , que é uma ótima opção se você tem que ficar na marca. No entanto, tem algumas quedas. Então, se você tiver que usar texto baseado em imagem, certifique-se de fornecer um recurso de texto simples caso a imagem nunca carregue. O mais importante é sempre certificar-se de que sua
mensagem aparece e, se uma imagem não carregar e está cheia de texto, o usuário não a verá. Em última análise, sua melhor opção para conteúdo textual em e-mails é o texto normal. Mesmo que você use texto baseado em imagem, é importante fornecer uma alternativa. Outro uso de textos e
e-mails baseados em imagem vem na forma de chamadas à ação, como botões. Botões baseados em imagem sofrem as mesmas desvantagens que o texto baseado em imagem, o que
significa que, se a imagem nunca for carregada ,
um usuário nunca verá sua chamada à ação, então é bom codificar botões usando HTML e CSS. Se você estiver incluindo um botão em seu e-mail, é melhor codificá-lo usando HTML. Isso também é chamado de botão à prova de balas. Se você está procurando maneiras específicas de construir um botão, você pode consultar modelos em Mailchimp.com e há uma seção inteira sobre chamadas à ação e botões de escrita usando código. Agora, toda essa conversa sobre textos pode fazer parecer que imagens não são importantes no e-mail, mas isso não é verdade, elas são muito importantes. É só uma questão de encontrar um equilíbrio entre texto e imagens. Lembre-se de que as pessoas são visuais, então as imagens vão muito longe para tornar um e-mail eficaz. Se você estiver vendendo um produto, é uma ótima ideia ter uma imagem desse produto. Imagens também fornecem uma ótima maneira de adicionar movimento ao seu e-mail na forma de um gif não “jif”. Vídeo é o novo garoto no bloco e obter vídeo é mais fácil e fácil nos dias de hoje, Se você está em vídeo de marketing é uma escolha muito emocionante, mas ele vem com algumas desvantagens significativas. Primeiro, há os enormes custos de dados envolvidos no vídeo, de qualquer forma você corta, os vídeos são grandes em tamanho e, portanto, você está incorrendo em um custo de dados para o destinatário. Além disso, vídeos não são suportados em muitos clientes, uma ótima alternativa para vídeo e e-mail é gifs,. Eles renderizam em mais lugares, geralmente
têm menor impacto quanto ao tamanho dos dados, e fornecem a mesma quantidade de interesse visual. Outra grande diferença entre design de e-mail e web designers. O design de e-mail não pode ser perfeito para pixels, porque há toneladas de clientes de e-mail que você tem que
considerar e todos eles agem um pouco diferente um do outro. Eu gosto de chamar o design de e-mail a ciência exata da inexatidão. Como Bruce Lee disse: “Seja água meu amigo”. Isso significa que você tem que projetar seus e-mails para que haja um pouco de dar e receber de cliente para cliente, que seu design não seja perfeito de um cliente para o outro, mas funcione da melhor forma possível de um cliente para o outro. Independentemente das diferenças de renderização de cliente para cliente, seu e-mail ainda manterá sua fidelidade de design e embora ele ainda atinja seu propósito, independentemente de onde ele é visualizado. Devido às diferenças entre a forma como o cliente de e-mail renderiza estilos e o grande número de clientes de e-mail que existem, exatidão do design não é um objetivo viável, é melhor projetar com um pouco de flexibilidade em mente, para que seu design mantenha sua fidelidade independentemente do cliente de e-mail em que seu e-mail possa ser visualizado. Não há regras rígidas e rápidas para criar interesse visual em um e-mail. Bem, pode funcionar bem para uma marca e público em uma versão, pode não ser eficaz em outra, mas existem regras rígidas e rápidas sobre como tornar um e-mail
fácil de digerir, conciso, abrangente, cópia
bem escrita é muito importante, assim como otimizar seu design para trabalhar de forma eficaz em vários clientes.
5. Compre meus produtos e serviços: Então, agora que temos uma boa visão geral do que é o design do e-mail, vamos mergulhar um pouco mais e olhar para trás esses quatro tipos principais de e-mails. Então, o primeiro é o e-mail de compra, que é um e-mail baseado em e-commerce. Ele está focado em criar o incentivo para um destinatário gastar dinheiro. Se você está tentando vender algo, você está enviando um e-mail para me comprar. O segundo tipo é o e-mail leia-me. Sempre que você está tentando contar uma história; boletins informativos, anúncios da
empresa, esse tipo de coisa cai sob ler me e-mails. Esses caras estão confiando em direitos autorais realmente bons, que é mais fácil dizer do que fazer e boa tipografia apenas para tornar a entrega de conteúdo mais suave e fácil para o destinatário aceitar. O terceiro tipo é o e-mail de junte-se a mim. Estes são e-mails focados em eventos. Eles podem ser anúncios de eventos, solicitações de pesquisa. Essencialmente, um e-mail criado em torno de atrair o usuário a tomar uma ação seja para doar dinheiro ou para vir a um evento. Em seguida, o quarto é um pouco de um outlier, mas não é menos prevalente em todas as nossas caixas de entrada e é o e-mail transacional. Isso é basicamente qualquer e-mail que precisa fornecer informações focadas de um ponto para outro com base em transações. Então, recibos de pedidos, atualizações de envio, coisas assim, anúncios de segurança. O primeiro é o e-mail de compra. O e-mail buy me tem um propósito específico de construir uma atração para o usuário gastar dinheiro. Para esse fim, buy me e-mails são mais eficazes quando eles apresentam imagens claras e
bonitas do produto em simples calls-to-action, a fim de obter o destinatário para comprar um produto rapidamente. Se você é uma empresa de serviços, você pode não estar vendendo um produto individual, mas provavelmente ainda está falando sobre um recurso que é de interesse para um destinatário. Você pode tratá-lo da mesma maneira; fornecer imagens atraentes e explicar por que esse recurso específico do seu serviço vale o custo. O call-to-action no e-mail buy me é importante. Geralmente, deve ser algo como comprar, ou comprar-me, ou comprar agora. Encontrar o texto certo, no entanto, é apenas uma daquelas coisas que você terá que testar e ajustar ao longo do tempo. Algumas combinações de palavras podem funcionar melhor do outras e isso é tudo confirmado através de dados e tempo. Dê aos seus produtos espaço suficiente onde eles brilham por conta própria. Usar o espaço em branco efetivamente pode concentrar atenção do destinatário em um produto ou produtos específicos. Se você estiver vendendo vários produtos, organize-os em uma grade para que eles sejam
exibidos uniformemente e a apresentação seja apenas mais agradável no geral. Ao incluir uma imagem de um produto, faça algumas perguntas a si mesmo. É melhor incluir uma imagem reduzida de um produto ou é melhor
incluir uma imagem de close-up que mostre mais detalhes e características do seu produto? Estas são coisas que você tem que perguntar a si mesmo quando você está incluindo imagens em um buy me e-mail. Um dos maiores erros que eu vejo em comprar me e-mails porque eles ainda são imagem pesada, é a falta de texto. Clientes de e-mail que não carregam imagens quando o e-mail é aberto, você pode acabar com um e-mail que não faz muito sentido porque não
há textos que façam backup do que está incluído visualmente no e-mail. Comprar e-mails também são muito dependentes de conhecer o seu público. Certifique-se de que o e-mail enviado para esses segmentos específicos da sua lista é relevante para eles. Se você estiver enviando um e-mail que anuncie roupas masculinas, por exemplo, pense em como você projetaria um e-mail forma diferente de uma propaganda de roupas infantis. Se o seu e-mail tiver vários produtos, certifique-se de que estão todos, pelo menos, um pouco relacionados entre si. Enchendo um e-mail cheio de, digamos, 30 ou 40 produtos, apenas um exagero. Você pode não obter os resultados que você quer e as pessoas podem realmente não comprar nada só porque não há foco, não há clareza. Em vez de enviar um e-mail gigante para todos os fins para sua lista, segmente a lista e envie por interesse. Certifique-se de que o e-mail é relevante para os segmentos menores da sua lista. A hierarquia de um buy me e-mail é muito importante. Certifique-se de que as imagens do produto estão na parte superior do e-mail. Deixe as pessoas verem isso primeiro. Em seguida, faça backup com algum conteúdo textual para que, caso essas imagens não carreguem, as pessoas ainda tenham algo para se referir. Lembre-se da idéia de que as pessoas são visuais. Deixar que eles vejam seu produto primeiro significa que você está chamando a atenção deles imediatamente. Então, mantenha seus produtos no topo do seu e-mail. Com tudo isso em mente, vamos olhar para um exemplo de um e-mail de compra bem projetado, como este de GoldCoast Skateboards. Se você der uma olhada, a primeira coisa que você vê é o logotipo deles, bonito e grande. Tudo o que faz é reforçar o fato de que este e-mail vem de GoldCoast Skateboards. É só uma impressão de marca. A próxima coisa que você vê é esta declaração de 40% de desconto na parte superior do e-mail. É importante porque querem que as pessoas tirem vantagem desta venda. Eles fizeram bem, eles colocaram no topo. Em seguida, é seguido por algumas belas imagens convincentes. Nada muito perturbador, apenas algo simples que funciona bem com o design geral do e-mail. Depois dessa imagem, eles têm seu código de desconto e, em seguida, eles estão fazendo backup de todos os textos
baseados em imagem com algum conteúdo textual real para que, se as imagens falharem ao carregar, o usuário ainda sabe para que serve o e-mail. Sob esse texto, há um grande call-to-action e , em seguida, uma imagem final de uma seleção de seus skates. Que funciona como uma boa etiqueta no final do e-mail; ela diz, “Veja o que temos em oferta.” O design deste e-mail parece que se originou do modelo MailChimp. Parece apenas um simples e-mail de coluna que eles exportaram e modificaram para atender às suas próprias necessidades. O que torna este e-mail tão eficaz é o seu foco. Ele não está tentando me vender um monte de produtos diferentes, é apenas anunciando uma venda de 40% e ele faz isso com simplicidade de conteúdo, com algumas imagens convincentes, e com alguns apelos à ação agradáveis, ousados e claros. Se você está procurando bons exemplos de comprar e-mails em sua própria caixa de entrada, pense em como esses e-mails são focados. Eles estão tentando vender muitos produtos ou eles estão focados bem em apenas um ou uma pequena seleção de produtos relacionados? A imagem usada é convincente? Está claro? É uma boa foto de produto? Você está tendo problemas para decidir se eles estão tentando vender um casaco ou jeans porque o tiro é tirado de muito longe? Todas essas coisas são importantes. Quando você estiver olhando para esses e-mails, pense em como eles fazem você se sentir e pense se eles dirigem ou não para clicar no botão Comprar agora. Se assim for, então é um e-mail muito bem sucedido para me comprar. Se não, olhe e veja o que eles poderiam ter feito melhor e, em seguida, incorpore isso em seus próprios projetos.
6. Junte-se a mim: Então, passando para o nosso segundo tipo de e-mail principal, chegamos ao e-mail “Junte-se a mim”. Esses e-mails incluíam anúncios de eventos e solicitações de pesquisa, e foram projetados para incentivar o destinatário a dedicar uma medida de seu tempo, participando de um evento ou preenchendo uma pequena pesquisa. termos de design, um e-mail “Junte-se a mim” depende mais hierarquia de
conteúdo do que dos visuais para obter seu ponto de vista. Um bom e-mail “Junte-se a mim” tem todos os detalhes do evento ou pesquisa em direção ao topo, onde ele pode ser claramente lido e entendido imediatamente. Se o seu e-mail “Junte-se a mim” for para um evento, você deve ter a data e o local do evento em direção ao topo, e nunca ficar sob outro conteúdo. Se for uma solicitação de pesquisa, algumas frases descrevendo a finalidade da pesquisa são sempre úteis, seguidas da chamada à ação para completar a pesquisa em si. Nosso exemplo do e-mail “Junte-se a mim” bem projetado vem do Brother Moto. Se você der uma olhada nele, verá que é para uma festa de
lançamento e todos os detalhes pertinentes estão localizados na parte superior do e-mail. O endereço está no topo, seguido de uma breve descrição do que é o evento, neste caso, uma festa de lançamento, seguida da data e do endereço de onde será o evento. Abaixo dessa informação está um último apelo à ação, tendo a ver com vencer esta motocicleta. Todos os detalhes em torno disso também estão claramente definidos. Há um bom título claro e, em seguida, descrições curtas em ambos os lados
da imagem da motocicleta para que as pessoas saibam o que estão entrando para ganhar, seguido por essa chamada à ação na parte inferior. Todos esses detalhes no design e no conteúdo levam as pessoas a participar do evento. Se você não está necessariamente interessado em ir fora de mão, então talvez a chance de ganhar a moto vai realmente agir como esse empurrão para levá-lo para o evento. De qualquer forma, todas as informações que você precisa estão lá no e-mail e estão claramente dispostas. Nos e-mails “Junte-se a mim”, é muito importante equilibrar a aparência visual com eficácia
que fornecem informações sobre o evento ou a pesquisa. Neste e-mail do Irmão Moto, eles fazem um bom trabalho criando emoção para esta festa usando esta motocicleta pulando sobre carros, por exemplo, e equilibrando com as informações importantes sobre o evento em si. Se o seu e-mail “Junte-se a mim” for para uma pesquisa, então o plano de ação é a parte mais importante, porque você não está necessariamente pedindo às pessoas para comparecerem a um evento, você está apenas pedindo às pessoas que dediquem uma medida do seu tempo para preencher um pesquisa. Nesses casos, a chamada à ação é a parte mais importante, então eu recomendaria usar um botão em vez de um link complicado para enviar as pessoas para uma pesquisa.
7. Leia meus textos: Em seguida, é o nosso terceiro tipo de e-mail, o e-mail “Leia-me”. Esses e-mails funcionam muito bem se você estiver tentando contar uma história ou espalhar ideias. A coisa única sobre Leia-me e-mails, é que ele é realmente o único tipo que pode quebrar a regra de brevidade, que menor é melhor regra de polegar para e-mail pode realmente ser jogado fora da janela aqui. e-mails de formato curto e longo podem funcionar. Depende do público e do que eles estão procurando. Qualquer empresa pode enviar o e-mail Leia-me. Nem sempre se trata de vender um produto, às vezes você só quer contar uma história e se você tem uma história convincente para contar, é
provável que seus assinantes queiram ouvi-la. E-mails Leia-me são perfeitos para isso. Design sábio, os dois maiores fatores para o sucesso no e-mail Leia-me, são muito bem pensado tipografia e escrita realmente forte. diz respeito ao layout, um e-mail Leia-me tende a funcionar um pouco melhor quando é uma única coluna, embora isso não signifique que você não pode usar um layout de várias colunas. Basta ter em mente que o layout de várias colunas, funciona bem na impressão como jornais e pode não traduzir tão bem para a tela. Lembre-se, os leitores adoram a simplicidade. Portanto, o layout de coluna única pode funcionar melhor para você. Os e-mails de subtraction.com, por exemplo, qualifica um e-mail de formulário curto porque um conteúdo textual é abreviado. Há um parágrafo de resumo e, em seguida, um link para que você possa ler o resto do artigo neste site. MailChimps UX newsletter, por outro lado, é um e-mail de forma longa, onde todo o conteúdo está no próprio e-mail. Isso pode tornar um e-mail muito longo e é realmente dependente do que seu público quer. Para o boletim informativo UX, o público espera longos artigos sobre diferentes aspectos do design da experiência do usuário. Então, nós lhes damos isso no e-mail sem fazê-los ir a um site para ler o resto. Sua frequência de envio também pode desempenhar um papel em quanto tempo ou curto seu e-mail é. Se você estiver enviando mais e-mails, talvez mantenha-os um pouco mais curtos, para que as pessoas possam passar por eles mais rapidamente no ritmo que você envia. Se você estiver enviando menos frequentemente, o e-mail de formulário longo pode funcionar melhor para você. O boletim MailChimp UX, por exemplo, é enviado apenas a cada duas semanas, que as pessoas tenham tempo para ler os artigos longos e digerir o conteúdo antes que o próximo atinja sua caixa de entrada. Se você tiver links em seu e-mail Leia-me, é bom seguir algumas práticas recomendadas que governam links na Web como um todo. Certifique-se de que os links têm uma cor diferente do texto, mas não pare por aí. Certifique-se de que eles também são visualmente distintos do seu texto e use algo como um sublinhado ou uma cor de fundo que se distingue do resto do texto. Evite ter muitos links próximos, porque se seus e-mails visualizados em um dispositivo móvel onde as regras do dedo e não o cursor do mouse. Que as pessoas podem ter dificuldade em tocar em um link específico e só porque ele é chamado de e-mail Leia-me não
significa que você não pode incluir imagens. As imagens funcionam tão bem nesses tipos de e-mails como funcionam em outros, uma boa regra a seguir quando você está criando conteúdo para um e-mail Leia-me, especialmente quando as imagens são preocupantes, deve ser que o e-mail deve funcionar independentemente de ou não as imagens estão lá. Se você está incluindo imagens em seus e-mails Leia-me, lembre-se de que eles fazem o papel de suporte
ao conteúdo textual em vez do foco principal do e-mail em si. Você está Leia-me e-mail deve ler tão bem sem imagens quanto com.
8. Transaccionais: Nosso quarto e último tipo de e-mail é transacional. Estes são e-mails como recibos de pedidos, confirmações de
envio e avisos de segurança, e eles são usados para apresentar informações ou dados de forma simples e fácil de entender. E-mails transacionais são um pouco insignificantes porque eles têm suas próprias regras que regem o quão eficazes eles podem ser. e-mails transacionais devem ser focados no escopo e incluir apenas informações relevantes. Se você estiver enviando alguém como um e-mail recusado com cartão de crédito, você não deve incluir links para a publicação mais recente do blog ou para o produto mais recente, mantenha o e-mail focado na tarefa em mãos. Relacionadamente, e-mails transacionais também devem ser curtos, mas abrangentes. Isso significa que você cobre todos os detalhes importantes, mas não da maneira longa. Voltando ao nosso exemplo recusado de cartão de crédito, você não gostaria de incluir piadas ou conteúdo
mais leve em algo que é um assunto bastante sério. Um e-mail como esse funcionaria melhor com uma explicação simples do que aconteceu, seguido de detalhes sobre como corrigir o problema. Também é importante que os e-mails transacionais sejam práticos no design. Isso significa que eles devem ser facilmente imprimíveis. Eles devem ser responsivos e eles
também devem ter uma hierarquia de informações realmente forte. Uma boa regra para e-mails transacionais é incluir uma folha de estilo de impressão em seu CSS especialmente para e-mails que podem ser impressos com frequência, como uma fatura. Como os e-mails transacionais são tão diferentes dos outros três tipos de e-mails que discutimos, eles precisam ser tratados um pouco diferente também. Você pode enviar e-mails transacionais através do MailChimp, mas se você precisar enviar em um volume maior, você pode explorar Mandrill, um serviço que criamos especificamente para lidar com e-mails transacionais e suas necessidades específicas. Vamos dar uma olhada em um e-mail transacional bem projetado. Este é um e-mail de cobrança do MailChimp. Se você der uma olhada, você verá que é muito espartano no design. Nosso logotipo está no topo seguido um título muito claro que descreve o propósito dos e-mails, neste caso seu pedido foi processado. Mesmo que o design seja muito espartano, incluímos esta imagem de carimbo vermelho brilhante para que o usuário saiba, sombra de
dúvida, que seu pedido foi processado e eles pagaram sua conta. O resto do e-mail também é simples com foco na hierarquia de informações. O número da fatura é grande e está em negrito e abaixo disso, listamos o que o usuário pagou, e se ele recebeu algum desconto. Se um usuário precisar de mais detalhes do que isso, o negrito chamado de ação segue, permitindo que ele visualize essa fatura em sua conta e obtenha mais informações se precisar dela. Como você pode ver este e-mail é simples em design, mas também é muito eficaz. A simplicidade e a clareza das informações são fundamentais aqui.
9. Perguntas frequentes (e clientes de e-mail): Quatro nossa última grande lição, eu gostaria de abordar algumas das principais práticas recomendadas de design de e-mail. A primeira regra é saber e criar para o seu público. Lembre-se de que o público determina tudo no e-mail. Quanto mais você souber sobre eles, mais relevantes e melhores seus e-mails podem ser. No e-mail, tende a haver essa queda natural de interesse que ocorre ao longo do tempo. Portanto, é uma boa ideia que de vez em quando mude as coisas, seja no seu design ou no seu conteúdo para aproveitar o interesse dos leitores de vez em quando. Evite enviar e-mails que só existem imagens. É uma prática ruim que pode deixar muitos de seus usuários torcendo ao vento se as imagens não carregarem por qualquer motivo. Relatadamente, evite o texto baseado em imagem, mas se você não tiver uma escolha, certifique-se de fornecer uma alternativa com algum texto normal. Content-wise tentar ser gentil e pessoal. Adoro ler NextDraft, por exemplo, porque Dave Pell é um grande escritor. Ele acrescenta piadas, ele escreve cada edição como se fosse uma carta para mim, e isso me mantém muito mais engajado ao longo do tempo e estou
ansioso para cada edição antes mesmo de chegar à minha caixa de entrada. Tanto quanto você puder, tente se certificar de que alguém pode simplesmente clicar em responder ao seu e-mail e chegar a uma pessoa. Evite usar endereços como nenhum anúncio de resposta, se possível. Lembre-se que o e-mail é um meio de comunicação entre duas pessoas e você não deve atrapalhar isso. Quando estiver desenvolvendo e-mails, confira a distribuição de clientes de e-mail na lista para a qual você está enviando. Evite gastar muito tempo desenvolvendo para clientes difíceis que têm pequenas bases de usuários e, em vez disso, se concentrar naqueles que têm as maiores bases de usuários. É importante saber como diferentes clientes processam e-mails. Conheça o trabalho principal em torno de cliente para cliente para que você tenha menos dificuldade em desenvolver seu e-mail e lidar com clientes problemáticos. Se você estiver criando seus próprios e-mails, lembre-se de usar tabelas para estrutura versus divs. Esta é a principal diferença de desenvolvimento entre um site e um design de e-mail. Quando você estiver desenvolvendo e-mails, certifique-se de desenvolver para degradação graciosa primeiro e aprimoramentos progressivos em segundo lugar. O que isso significa é que você constrói primeiro para os clientes mais antigos menos capazes
e, em seguida, aprimora além daqueles para fornecer mais e melhores recursos para clientes mais recentes que possam lidar com eles. Teste de e-mail é um processo iterativo, que
significa que você terá que testar e testar novamente e testar novamente para certeza de que seu e-mail está sendo renderizado da maneira que você precisa para renderizar. Ao longo do tempo, todos esses testes permitem que você aprenda os prós e contras dos clientes de e-mail e o que funciona melhor em design para um e-mail. Tenha em mente que a eficácia de um e-mail pode não ser medida
adequadamente com apenas um ponto de dados. É melhor ter uma ideia de como um e-mail funciona ao longo do tempo. Só porque seu e-mail foi um texto vermelho bem executado em um dia, não significa que ele irá funcionar bem no outro. Há tantos fatores que entram em por que ou por que não um determinado e-mail foi eficaz. Evite tirar conclusões duras a partir de uma pequena amostra de dados. Dê um passo atrás e veja a visão longa do e-mail e lembre-se de testar, ajustar e ouvir o que seu público diz, que você
possa criar algo mais eficaz. Uma das melhores maneiras de testar o e-mail é fazê-lo você mesmo praticamente. Isso significa abrir contas de email em vários serviços, como o Gmail e o Outlook.com, e enviar o teste você mesmo para que você possa ver como o email é processado em sua própria caixa de entrada. Baseando-se nessa ideia de testes práticos é um laboratório de dispositivos, que é apenas uma coleção de dispositivos comuns que você usa todos os dias. Algo como um iPhone, um tablet ou uma máquina Windows e enviar e-mails para esses dispositivos para que você possa ver como eles são renderizados nessas caixas de entrada. Nesses casos, você pode recorrer a um serviço como o Liveness que faz testes de dispositivos para você e retorna uma captura de tela do seu e-mail em uma plataforma diferente. Se você é cliente do MailChimp, você tem acesso aos resultados do teste decisivo
na forma de inspeções da caixa de entrada no aplicativo. Se você optar por criar um laboratório de dispositivos, lembre-se de que se trata de criar a visão mais ampla possível da distribuição de clientes para o menor investimento possível. Isso significa que você deve comprar uma boa seleção de telefones Android e iOS e talvez até um tablet ou dois, então você tem uma boa visão geral de diferentes clientes de e-mail em diferentes plataformas. Os cinco principais clientes de email são email iOS, Apple Mail, Gmail, Outlook.com e Outlook desktop. Há uma ampla variabilidade entre a forma como todos esses clientes processam e-mails, de modo que evitar que o design perfeito de pixel é realmente importante. Os dois primeiros clientes, iOS mail e Apple mail são praticamente perfeitos, então você não precisa fazer muito que é fora do
comum no que diz respeito ao design e desenvolvimento. Gmail, por outro lado, apresenta um par de problemas significativos para se atentar. Primeiro, quando você escreve CSS para seu e-mail, tudo deve estar
embutido na própria marcação porque o Gmail não suporta um CSS embutido. Em segundo lugar, o Gmail também não oferece suporte consultas de
mídia que são essenciais para um design responsivo. Isso requer a criação de um e-mail de uma maneira específica para que eles sejam citados sem aspas, responsivos em uma plataforma que não o suporta. Para obter mais informações sobre essa técnica, você pode realmente se referir a templates.mailchimp.com, onde eu abordo em detalhes. Outlook.com e Outlook desktop, apesar de ambos serem da Microsoft, agem de forma muito diferente um do outro. Outlook.com está na verdade a par com e-mail
da Apple e iOS e que é um cliente de e-mail muito bom. Não há quaisquer armadilhas significativas para se atentar no Outlook.com, mas o inverso é verdadeiro para a área de trabalho do Outlook. Se há um cliente que os desenvolvedores de e-mail odeiam, é o Outlook Desktop, e isso é realmente porque ele é um cliente de e-mail desatualizado. O maior problema na área de trabalho do Outlook é que ele não usa um mecanismo de renderização HTML para renderizar HTML. Ele realmente usa o mecanismo do Microsoft Word que é um mecanismo de processamento de texto. Isso significa que há deficiências significativas nos elementos HTML e propriedades CSS que o mecanismo do Word oferece suporte. O que isso significa é que você provavelmente estará fazendo mais testes de seu email no Outlook para se certificar de que ele é renderizado corretamente. Então, novamente, certifique-se de evitar o design perfeito de pixel. Se você cumprir os princípios que falamos hoje, seu e-mail ainda pode ser muito eficaz independentemente de todas as variações de renderização de cliente para cliente. Espero que todas essas lições ajudem. Lembre-se de que, acima de tudo, desenvolvimento e o design de
e-mail são um trabalho difícil, então não desanime se você tiver um duro trabalho no início. Demorei um pouco para ficar bom nisso e você vai demorar um pouco para ficar bom nisso, mas pode ser feito. Eventualmente, o e-mail torna-se uma segunda natureza e é realmente fácil.
10. Considerações finais: Então, hoje falamos sobre as principais diferenças entre e-mail e web design, os quatro principais tipos de e-mail: por mim, leia, junte-se a mim e transacional, e cobrimos algumas práticas recomendadas para um design de e-mail em geral. Se você é novo no design de e-mail, certifique-se de conferir nossos modelos para que você possa ter uma boa olhada em diferentes tipos de layouts e diferentes maneiras de abordar e-mails de acordo com seus diferentes propósitos. Se você está mergulhando no desenvolvimento de seus próprios modelos, você pode baixar o nosso e dar uma olhada no código por conta própria e ver como eles funcionam, ver como eles são colocados juntos e depois experimentá-lo você mesmo. Você também pode se referir a recursos como templates.mailchimp.com e exemplos de diferentes técnicas de codificação que você pode usar em seus próprios e-mails. Também incluí muitos links para recursos que você achará úteis e que o ajudarão a se tornar um designer de e-mail melhor. Agora é sua vez de compartilhar um e-mail cujo design fez você agir. Compartilhe algo que você acha que foi evocativo e realmente causou uma impressão em você, e escreva um pouco sobre por que você acha que foi um e-mail tão eficaz. Certifique-se também de fazer perguntas e deixar comentários sobre os outros e-mails que são compartilhados na galeria, e iniciar discussões sobre o que é ou não um bom design de e-mail. Sinta-se à vontade para postar e-mails que você projetou
e construiu e pedir feedback do resto da turma. Lembre-se de que o e-mail pode ser um meio de comunicação íntima entre duas pessoas. É uma conversa, e um bom design de e-mail aproveita esse fato. Isso permite que você crie confiança e relacionamentos com seus assinantes.