{"id":20061,"date":"2019-07-16T00:00:00","date_gmt":"2019-07-16T00:00:00","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/modelos-de-e-mail-responsivos-para-usar-a-criatividade\/"},"modified":"2026-09-14T22:06:36","modified_gmt":"2026-09-14T22:06:36","slug":"modelos-de-e-mail-responsivos-para-usar-a-criatividade","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/pt\/blog\/email\/modelos-de-e-mail-responsivos-para-usar-a-criatividade\/","title":{"rendered":"Modelos de e-mail responsivos para usar a criatividade"},"content":{"rendered":"\n

O concurso foi encerrado. Agradecemos a todas as pessoas que participaram!<\/strong><\/p>\n\n\n\n

Lan\u00e7amos um monte de recursos novos nas \u00faltimas semanas, e as novidades n\u00e3o param de chegar com os nossos novos modelos de e-mail! Essa novidade permite adicionar, editar e armazenar seus modelos de e-mail no Mailgun, para que voc\u00ea n\u00e3o precise procurar no c\u00f3digo na pr\u00f3xima vez que for fazer uma pequena altera\u00e7\u00e3o. E isso j\u00e1 est\u00e1 dispon\u00edvel na nossa\u00a0nova UI<\/a>.<\/p>\n\n\n\n

Poder reverter para vers\u00f5es anteriores de um modelo ap\u00f3s a edi\u00e7\u00e3o, facilitar a colabora\u00e7\u00e3o entre diferentes equipes de uma organiza\u00e7\u00e3o, simplificar chamadas de API e renderiza\u00e7\u00f5es ao vivo s\u00e3o apenas algumas das formas como o novo recurso de modelos de e-mail facilita o seu dia a dia. E n\u00e3o ter\u00edamos esse recurso sem antes fazer uma pergunta:<\/p>\n\n\n\n

Por que trabalhar com modelos de e-mail?<\/h2>\n\n\n\n

Na maioria dos casos, a sua empresa cria alguns modelos de e-mail para usar em diferentes tipos de e-mails, e voc\u00ea continua usando esses modelos por um bom tempo, atualizando ocasionalmente o logotipo, o endere\u00e7o no rodap\u00e9 ou pequenos elementos de design.<\/p>\n\n\n\n

H\u00e1 dois grandes desafios nisso. Quando voc\u00ea come\u00e7a a criar modelos de e-mail, \u00e9 uma grande dor de cabe\u00e7a. Voc\u00ea tem que programar como se estiv\u00e9ssemos em 1999 e lidar com tabelas, CSS inline, CSS n\u00e3o suportado, al\u00e9m de pedir ajuda \u00e0 equipe de desenvolvimento de aplicativos… e a lista n\u00e3o para por a\u00ed. E, mesmo assim, as peculiaridades de diferentes clientes de e-mail (Outlook, \u00e9 com voc\u00ea mesmo!) podem acabar quebrando tudo.<\/p>\n\n\n\n

Vamos voltar um minuto a 2014: a \u00faltima vez em que fizemos um grande an\u00fancio sobre modelos. Lan\u00e7amos um\u00a0conjunto de tr\u00eas modelos de e-mail responsivos<\/a>\u00a0de c\u00f3digo aberto disponibilizado via reposit\u00f3rio no Github, na esperan\u00e7a de tornar a cria\u00e7\u00e3o de um modelo de e-mail do zero um pouco menos dolorosa.<\/p>\n\n\n\n

Hoje, j\u00e1 n\u00e3o mexemos mais naqueles modelos de e-mail porque eles cumprem o seu papel, as pessoas gostam deles, os usam e eles n\u00e3o s\u00e3o nada feios. Por\u00e9m, eles eram dif\u00edceis de encontrar se voc\u00ea n\u00e3o soubesse que existiam, e n\u00e3o resolviam o segundo grande desafio inerente aos modelos de e-mail, que \u00e9…<\/p>\n\n\n\n

Como manter e atualizar seus modelos de e-mail ao longo do tempo e colaborar com outros departamentos, se necess\u00e1rio, sem precisar vasculhar sua base de c\u00f3digo para encontrar exatamente o que voc\u00ea procura?<\/p>\n\n\n\n

Quando come\u00e7amos a construir a nova UI, sab\u00edamos que esse seria o momento ideal para come\u00e7ar a resolver a quest\u00e3o dos modelos. S\u00f3 precis\u00e1vamos criar um reposit\u00f3rio dentro do pr\u00f3prio Mailgun, para que voc\u00ea possa chamar facilmente um modelo sempre que quiser enviar um e-mail com um deles. Primeiro problema: resolvido.<\/p>\n\n\n\n

Agora, ser\u00e1 que conseguir\u00edamos facilitar um pouco mais a edi\u00e7\u00e3o de modelos existentes e adicionar mais alguns ao longo do caminho?<\/p>\n\n\n\n

Expandindo nossos modelos de e-mail<\/h2>\n\n\n\n

O Mailgun j\u00e1 contava com modelos para alguns e-mails transacionais de uso geral<\/a>, incluindo e-mails de a\u00e7\u00e3o, alertas por e-mail e e-mails de faturamento. Embora eles cobrissem o b\u00e1sico dos e-mails que a maioria dos remetentes usa, quer\u00edamos oferecer mais. O problema \u00e9 que n\u00e3o somos exatamente especialistas em design de e-mail. Essa n\u00e3o \u00e9 muito a nossa praia e, sinceramente, deveria ficar nas m\u00e3os de pessoas que amam fazer esses designs.<\/p>\n\n\n\n

Ent\u00e3o, decidimos nos unir \u00e0\u00a0Email Uplers\u00a0para preparar alguns novos designs mais ou menos na mesma \u00e9poca do lan\u00e7amento da nossa UI. J\u00e1 escreveram sobre\u00a0acessibilidade em e-mails<\/a>\u00a0conosco antes, e ficamos muito felizes quando aceitaram criar o design desses novos modelos.<\/p>\n\n\n\n

Com a parceria da Email Uplers, avan\u00e7amos na cria\u00e7\u00e3o de tr\u00eas novos modelos: recupera\u00e7\u00e3o de senha, confirma\u00e7\u00e3o de pedido e um modelo de newsletter.<\/p>\n\n\n\n

Al\u00e9m disso, a equipe do Mailgun queria incluir gatos de alguma forma, s\u00f3 pela divers\u00e3o. E foi assim que nasceram nossos mais recentes modelos.<\/p>\n\n\n\n

Os novos modelos<\/em><\/h3>\n\n\n\n
\"Forgot<\/figure>\n\n\n\n

O e-mail de recupera\u00e7\u00e3o de senha, embora seja tecnicamente um e-mail de a\u00e7\u00e3o, \u00e9 usado por quase todos os aplicativos e empresas. Com o design de um modelo criado pela Email Uplers especificamente para esse fim, voc\u00ea pode personalizar facilmente algumas cores, adicionar seu logotipo e pronto: agora \u00e9 poss\u00edvel criar um e-mail para redefinir a senha com algumas altera\u00e7\u00f5es simples no modelo.<\/p>\n\n\n\n

\"Cat<\/figure>\n\n\n\n

A cria\u00e7\u00e3o do e-mail de confirma\u00e7\u00e3o de pedido funcionou de forma semelhante \u00e0 do modelo de recupera\u00e7\u00e3o de senha. Um modelo de confirma\u00e7\u00e3o de pedido pode ser considerado uma ramifica\u00e7\u00e3o de um e-mail de faturamento, mas voc\u00ea precisa ajustar um pouco o texto e o layout para ficar mais parecido com um recibo e uma confirma\u00e7\u00e3o de pedido em vez de uma fatura.<\/p>\n\n\n\n

\"Newsletter<\/figure>\n\n\n\n

Por fim, pedimos que a Email Uplers criasse o design de um modelo de newsletter. O Mailgun n\u00e3o tinha nenhum modelo focado em marketing antes, mas grande parte da nossa clientela j\u00e1 havia demonstrado interesse.<\/p>\n\n\n\n

Esse modelo oferece um layout no formato de cart\u00f5es para destacar publica\u00e7\u00f5es de blog ou outros conte\u00fados, permitindo montar uma newsletter completa e come\u00e7ar a enviar e-mails promocionais de um jeito f\u00e1cil.<\/p>\n\n\n\n

Como usar as APIs de modelo de e-mail<\/h2>\n\n\n\n

\u00c9 bem prov\u00e1vel que, em algum momento, voc\u00ea precise atualizar os modelos que criou. A vantagem \u00e9 que voc\u00ea pode atualizar esses modelos no reposit\u00f3rio, alterar qual vers\u00e3o est\u00e1 ativa ou criar v\u00e1rias vers\u00f5es para testes A\/B.<\/p>\n\n\n\n

Al\u00e9m disso, o Mailgun tem algumas chamadas de API diferentes para modelos que voc\u00ea pode usar:<\/p>\n\n\n\n