![\"mjml-logo-612x204.png\"](\"https:\/\/nearjob.com.br\/wp-content\/uploads\/2022\/06\/mjml-logo-612x204-1.png\"){kind=logo}
MJML, para ir al\u00e9m das tabelas HTML<\/h2>\n\n\n\n
Esse contexto t\u00e9cnico relativamente limitado n\u00e3o permite projetar e-mails complexos e compat\u00edveis com a maioria dos clientes (listar as possibilidades, etc.). Existem dezenas de sistemas de mensagens (Gmail, Outlook\u2026), v\u00e1rios navegadores mais ou menos atualizados (Chrome, Firefox\u2026), v\u00e1rios tipos de terminais (desktop, mobile), v\u00e1rios sistemas operativos, v\u00e1rias aplica\u00e7\u00f5es\u2026 para todas as telas \u00e9 um desafio. Um desafio ao qual a MJML tenta responder, atrav\u00e9s do desenvolvimento de uma norma, desenhada com um \u00fanico objectivo: a compatibilidade com todos os clientes. Thomas Deneulin, CTO da DeliPress, veio apresentar esta tecnologia promissora na Web2day.<\/p>\n\n\n\n
Uma linguagem de marca\u00e7\u00e3o dedicada ao design de emails<\/h2>\n\n\n\n
MJML \u00e9 uma linguagem de marca\u00e7\u00e3o, desenvolvida em JavaScript, de c\u00f3digo aberto e totalmente gratuita. O primeiro lan\u00e7amento data de 2016, foi projetado pelos desenvolvedores do Mailjet (MJML significa Mailjet Markup Language) que queriam facilitar a cria\u00e7\u00e3o de newsletters. Desde ent\u00e3o, a linguagem tem melhorado a cada lan\u00e7amento, apoiada por uma comunidade de desenvolvedores muito ativa (lan\u00e7amento de uma API, reescrita de c\u00f3digo sem React, desenvolvimento de novas funcionalidades, melhoria de compatibilidade, etc.).<\/p>\n\n\n\n
Uma linguagem f\u00e1cil de aprender<\/h2>\n\n\n\n
A quest\u00e3o do e-mail costuma ser a seguinte: o design de uma estrutura responsiva, mobile first, com tabelas HTML. Infelizmente, isso n\u00e3o \u00e9 suficiente para oferecer menus, carross\u00e9is ou menus sanfonados (muito usados \u200b\u200bem sites para apresentar perguntas frequentes ou para segmentar fortemente conte\u00fados que n\u00e3o se destinam a ser lidos como um todo). A MJML tenta responder a este problema oferecendo componentes chave na m\u00e3o adaptados ao design de emails.<\/p>\n\n\n\n
Uma linguagem pr\u00f3xima ao HTML\u2026<\/h3>\n\n\n\n
A linguagem \u00e9 muito semelhante ao HTML, tanto em sua estrutura quanto nos componentes suportados. Encontramos assim um head ( <mj-head><\/em> ) e um corpo ( <mj-body><\/em> ) composto por se\u00e7\u00f5es e colunas, um pouco como no framework Bootstrap, com um responsivo gerenciado automaticamente e estilos aplicados por padr\u00e3o para facilitar o design do template .<\/p>\n\n\n\n A cabe\u00e7a permite gerenciar os atributos padr\u00e3o dos v\u00e1rios componentes, em particular o estilo. Voc\u00ea pode criar e aplicar classes (embora isso n\u00e3o seja recomendado para criar emails em HTML) e at\u00e9 mesmo fontes personalizadas. Nesse caso, \u00e9 aconselh\u00e1vel cham\u00e1-los atrav\u00e9s do Google Fonts para evitar problemas de compatibilidade e disponibilidade.<\/p>\n\n\n\n No corpo, voc\u00ea pode adicionar v\u00e1rios componentes (texto, imagem, bordas, margens, tabelas, bot\u00f5es… S\u00e3o componentes b\u00e1sicos, permitindo integrar facilmente um texto, uma foto, bot\u00f5es e organiz\u00e1-los adequadamente com bordas e margens .Outros componentes v\u00e3o al\u00e9m: pensamos em mj-navbar<\/em> para criar menus reais em seus e-mails (hamb\u00farguer ou responsivo, como voc\u00ea escolher), em mjml-carousel para integrar carross\u00e9is (embora a compatibilidade n\u00e3o seja perfeita neste componente) e mj -accordion<\/em> para criar conte\u00fado em sanfona A linguagem \u00e9 projetada para se adaptar a todos os clientes: se o sistema do usu\u00e1rio n\u00e3o suportar a exibi\u00e7\u00e3o em sanfona, o texto ser\u00e1 desenrolado automaticamente para acessar todo o conte\u00fado (fallbacks).<\/p>\n\n\n\n O desenvolvimento dessa tecnologia \u00e9 interessante, pois al\u00e9m dos desenvolvedores do Mailjet, uma comunidade ativa a aprimora diariamente (h\u00e1 mais de uma centena de reposit\u00f3rios no GitHub). Existem pacotes para a maioria dos editores, pelo menos para realce de sintaxe. Um aplicativo tamb\u00e9m permite codificar em MJML e visualizar a renderiza\u00e7\u00e3o em tempo real. E se voc\u00ea usa Mailjet, pode inserir sua chave de API para enviar testes sem sair do editor. Uma API est\u00e1 dispon\u00edvel, bem como ferramentas para converter facilmente seus arquivos MJML em arquivos HTML.<\/p>\n\n\n\n Se voc\u00ea n\u00e3o \u00e9 um desenvolvedor, tamb\u00e9m pode usar ferramentas para projetar facilmente seus e-mails em MJML (Topol, DeliPress, GrapeJS\u2026). Em particular, o DeliPress permite criar facilmente e-mails com conte\u00fado do WordPress, sem sair do backoffice (inserir facilmente o conte\u00fado de um post, personalizar o design, etc.). Essa ferramenta pode ser do seu interesse se sua newsletter consistir em uma sele\u00e7\u00e3o de artigos do WordPress.<\/p>","protected":false},"excerpt":{"rendered":" Pens\u00e1vamos que tinham desaparecido, est\u00e3o mais do que nunca de volta: newsletters. As redes sociais ter\u00e3o tentado, em v\u00e3o, substitu\u00ed-los. Suas propriedades s\u00e3o agora apreciadas pelos profissionais de marketing, que imaginam usos espec\u00edficos e, \u00e0s vezes, cen\u00e1rios complexos para responder a todos os tipos de problemas. Este interesse renovado em newsletters est\u00e1 associado \u00e0 disponibilidade de novas possibilidades […]<\/p>","protected":false},"author":1,"featured_media":4078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[605],"class_list":{"0":"post-4076","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-sem-categoria","8":"tag-mjml"},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts\/4076"}],"collection":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/comments?post=4076"}],"version-history":[{"count":1,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts\/4076\/revisions"}],"predecessor-version":[{"id":4079,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts\/4076\/revisions\/4079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/media\/4078"}],"wp:attachment":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/media?parent=4076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/categories?post=4076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/tags?post=4076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u2026com a cabe\u00e7a\u2026<\/h3>\n\n\n\n
\u2026 e um body.<\/h3>\n\n\n\n
Uma comunidade ativa e ferramentas dedicadas<\/h2>\n\n\n\n
![\"mjml-editeur-612x375.gif\"](\"https:\/\/nearjob.com.br\/wp-content\/uploads\/2022\/06\/mjml-editeur-612x375-1.gif\")