{"id":23379,"date":"2023-07-14T07:59:00","date_gmt":"2023-07-14T07:59:00","guid":{"rendered":"https:\/\/vibetrace.com\/?p=23379"},"modified":"2023-08-30T21:24:04","modified_gmt":"2023-08-30T21:24:04","slug":"ultimate-guide-email-design-best-practices","status":"publish","type":"post","link":"https:\/\/vibetrace.com\/pt\/guia-final-melhores-praticas-de-design-de-e-mail\/","title":{"rendered":"O guia definitivo para design de e-mail: pr\u00e1ticas recomendadas para tamanhos de fonte e dimens\u00f5es de imagem"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p><\/p>\n\n\n\n<p><strong>Por que o design de e-mail \u00e9 importante<\/strong>: Import\u00e2ncia em com\u00e9rcio eletr\u00f4nico e marketing.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Fonte e tipografia<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tamanhos de fonte: <\/h3>\n\n\n\n<p>Tamanhos recomendados para e-mails em dispositivos m\u00f3veis e computadores<\/p>\n\n\n\n<p>Para facilitar a leitura do e-mail em dispositivos m\u00f3veis, geralmente voc\u00ea deseja manter os seguintes tamanhos de fonte:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Texto de corpo<\/strong>: 14-16px \u00e9 um bom intervalo. F\u00e1cil de ler sem zoom.<\/li>\n\n\n\n<li><strong>T\u00edtulos<\/strong>: 22-27px funciona bem para cabe\u00e7alhos. Voc\u00ea quer que eles se destaquem, mas n\u00e3o sejam opressores.<\/li>\n\n\n\n<li><strong>Subt\u00edtulos<\/strong>: Cerca de 18-22px. Eles devem ser maiores que o corpo do texto, mas menores que os t\u00edtulos principais.<\/li>\n\n\n\n<li><strong>Bot\u00f5es de CTA<\/strong>: o texto dentro dos bot\u00f5es deve ter pelo menos 14 px para facilitar o toque.<\/li>\n\n\n\n<li><strong>Letras mi\u00fadas<\/strong>: mantenha pelo menos 12px para que seja leg\u00edvel, mas claramente secund\u00e1rio.<\/li>\n<\/ol>\n\n\n\n<p>A legibilidade \u00e9 fundamental, especialmente para com\u00e9rcio eletr\u00f4nico, onde voc\u00ea deseja orientar o leitor a agir. Sempre teste seus e-mails em v\u00e1rios dispositivos para ter certeza de que est\u00e3o bem!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tipos de fonte<\/h3>\n\n\n\n<p>Serif vs. Sans-serif.<\/p>\n\n\n\n<p>Quando se trata de design de e-mail, a escolha entre as fontes Serif e Sans-Serif pode fazer uma grande diferen\u00e7a. Aqui est\u00e1 o resumo:<\/p>\n\n\n\n<p><strong>Fontes serifadas<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Exemplos<\/strong>: Times New Roman, Ge\u00f3rgia<\/li>\n\n\n\n<li><strong>Vibra\u00e7\u00e3o<\/strong>: Mais tradicional, muitas vezes visto como formal ou acad\u00eamico.<\/li>\n\n\n\n<li><strong>Melhor para<\/strong>: conte\u00fado de formato longo onde a legibilidade \u00e9 fundamental.<\/li>\n\n\n\n<li><strong>Mas<\/strong>: pode parecer confuso em telas pequenas, portanto use com cautela em e-mails m\u00f3veis.<\/li>\n<\/ul>\n\n\n\n<p><strong>Fontes sem serifa<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Exemplos<\/strong>: Arial, Helv\u00e9tica, Verdana<\/li>\n\n\n\n<li><strong>Vibra\u00e7\u00e3o<\/strong>: Moderno, limpo e casual.<\/li>\n\n\n\n<li><strong>Melhor para<\/strong>: Conte\u00fado curto e r\u00e1pido e legibilidade m\u00f3vel.<\/li>\n\n\n\n<li><strong>Por que<\/strong>: Mais f\u00e1cil de ler em telas pequenas e d\u00e1 um toque contempor\u00e2neo.<\/li>\n<\/ul>\n\n\n\n<p><strong>Dicas para design de e-mail<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consist\u00eancia<\/strong>: opte por uma ou duas fontes para manter o design coeso.<\/li>\n\n\n\n<li><strong>Fontes seguras para a Web<\/strong>: use fontes que sejam bem exibidas em todos os clientes de e-mail.<\/li>\n\n\n\n<li><strong>Hierarquia<\/strong>: use fontes ou estilos diferentes para t\u00edtulos e corpo de texto para criar hierarquia visual.<\/li>\n\n\n\n<li><strong>Teste<\/strong>: sempre teste como as fontes s\u00e3o renderizadas em diferentes dispositivos e clientes de e-mail.<\/li>\n<\/ol>\n\n\n\n<p>Dado nosso foco no com\u00e9rcio eletr\u00f4nico, voc\u00ea pode preferir o Sans-Serif por sua vibra\u00e7\u00e3o moderna e legibilidade m\u00f3vel. <\/p>\n\n\n\n<p>Mas se voc\u00ea estiver enviando conte\u00fado educacional, uma fonte Serif pode adicionar um toque de autoridade. Escolha com base na sua marca e mensagem!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Espa\u00e7amento entre linhas<\/h3>\n\n\n\n<p>O espa\u00e7amento ideal \u00e9 importante para a legibilidade do e-mail.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texto de corpo<\/strong>: procure usar 1,4 a 1,6 vezes o tamanho da fonte. Portanto, se o tamanho da fonte for 16px, o espa\u00e7amento entre linhas seria em torno de 22px a 26px.<\/li>\n<\/ul>\n\n\n\n<p><strong>Por que o espa\u00e7amento entre linhas \u00e9 importante<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Legibilidade<\/strong>: o espa\u00e7amento adequado entre linhas evita que o texto fique apertado, facilitando a leitura.<\/li>\n\n\n\n<li><strong>Skimabilidade<\/strong>: um bom espa\u00e7amento ajuda os leitores a folhear o conte\u00fado, que \u00e9 como a maioria das pessoas l\u00ea os e-mails.<\/li>\n<\/ol>\n\n\n\n<p>Dicas para espa\u00e7amento entre linhas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consist\u00eancia<\/strong>: mantenha o espa\u00e7amento entre linhas consistente em todo o e-mail para uma apar\u00eancia coesa.<\/li>\n\n\n\n<li><strong>T\u00edtulos e subt\u00edtulos<\/strong>: podem ter um espa\u00e7amento um pouco menor, pois geralmente s\u00e3o maiores e mais ousados.<\/li>\n\n\n\n<li><strong>M\u00f3vel<\/strong>: teste em diferentes dispositivos para garantir que o espa\u00e7amento fique bom em todos os aspectos.<\/li>\n<\/ol>\n\n\n\n<p>Para suas campanhas de e-mail de com\u00e9rcio eletr\u00f4nico, o espa\u00e7amento entre linhas pode ajudar a orientar o olhar do leitor para CTAs e informa\u00e7\u00f5es importantes. Ent\u00e3o, n\u00e3o negligencie isso!<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Imagens e m\u00eddia<\/h2>\n\n\n\n<p><strong>Tamanhos recomendados<\/strong> para imagens de e-mail<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Imagens de largura total<\/strong>: 600-800px de largura. Isso se ajusta \u00e0s larguras padr\u00e3o da maioria dos clientes de e-mail.<\/li>\n\n\n\n<li><strong>Imagens embutidas ou flutuantes<\/strong>: 200-300px de largura. Estas s\u00e3o imagens que ficam ao lado do texto.<\/li>\n\n\n\n<li><strong>Imagens de her\u00f3i<\/strong>: 800-1200px de largura. Estas s\u00e3o as imagens grandes e que chamam a aten\u00e7\u00e3o no topo.<\/li>\n\n\n\n<li><strong>Bot\u00f5es de CTA<\/strong>: pelo menos 44x44px para facilitar o toque no celular.<\/li>\n<\/ol>\n\n\n\n<p><strong>Outras dicas<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Propor\u00e7\u00e3o da tela<\/strong>: siga propor\u00e7\u00f5es comuns como 16:9 ou 4:3 para garantir que as imagens sejam bem dimensionadas.<\/li>\n\n\n\n<li><strong>Tamanho do arquivo<\/strong>: mantenha-o abaixo de 100 KB, se poss\u00edvel, para um carregamento mais r\u00e1pido.<\/li>\n\n\n\n<li><strong>Telas de alto DPI<\/strong>: considere telas retina e use imagens de resolu\u00e7\u00e3o mais alta, mas compacte-as para manter o tamanho dos arquivos baixo.<\/li>\n<\/ol>\n\n\n\n<p><strong>Formatos de imagem<\/strong> por e-mail<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JPEG<\/strong>: Bom para imagens complexas com muitas cores.<\/li>\n\n\n\n<li><strong>png<\/strong>: Melhor para imagens, textos e logotipos simples.<\/li>\n\n\n\n<li><strong>GIFs<\/strong>: Para anima\u00e7\u00f5es simples.<\/li>\n<\/ul>\n\n\n\n<p>Dado o seu foco no com\u00e9rcio eletr\u00f4nico, imagens n\u00edtidas e de carregamento r\u00e1pido podem tornar seus produtos atraentes e manter o usu\u00e1rio envolvido. Sempre teste em v\u00e1rios dispositivos para ter certeza de que est\u00e1 tudo certo!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Alt Text para imagens em e-mail<\/h3>\n\n\n\n<p>Acessibilidade<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Deficiente visual<\/strong>: os leitores de tela usam texto alternativo para descrever imagens.<\/li>\n\n\n\n<li><strong>Conformidade legal<\/strong>: ajuda voc\u00ea a atender aos padr\u00f5es de acessibilidade como ADA.<\/li>\n\n\n\n<li><strong>Bloqueio de imagens em clientes de e-mail<\/strong>: alguns clientes bloqueiam imagens por padr\u00e3o. O texto alternativo fornece contexto.<\/li>\n<\/ol>\n\n\n\n<p>Benef\u00edcios de SEO<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Classifica\u00e7\u00e3o de pesquisa<\/strong>: embora n\u00e3o afetem diretamente o e-mail, boas pr\u00e1ticas de texto alternativo podem ajudar na estrat\u00e9gia geral de SEO.<\/li>\n\n\n\n<li>Isso acontece quando voc\u00ea tem uma p\u00e1gina de arquivo p\u00fablico para os boletins informativos enviados<\/li>\n<\/ol>\n\n\n\n<p>Experi\u00eancia de usu\u00e1rio<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Internet lenta<\/strong>: se as imagens n\u00e3o forem carregadas, o texto alternativo fornecer\u00e1 contexto.<\/li>\n\n\n\n<li><strong>Esclarecimento<\/strong>: descreve a imagem se ela for complexa ou contiver informa\u00e7\u00f5es importantes.<\/li>\n<\/ol>\n\n\n\n<p>Melhores Pr\u00e1ticas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Descritivo<\/strong>: \u201cT\u00eanis de corrida femininos azuis\u201d \u00e9 melhor do que apenas \u201ct\u00eanis\u201d.<\/li>\n\n\n\n<li><strong>Conciso<\/strong>: Seja curto, mas informativo.<\/li>\n\n\n\n<li><strong>Palavras-chave<\/strong>: use palavras-chave relevantes, mas evite o excesso de palavras-chave.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Incorpora\u00e7\u00f5es de v\u00eddeo em e-mail<\/h3>\n\n\n\n<p>Adicionar v\u00eddeo no e-mail pode aumentar o engajamento, mas traz algumas ressalvas. Aqui est\u00e1 o que voc\u00ea pode cobrir:<\/p>\n\n\n\n<p>Os pr\u00f3s<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Noivado<\/strong>: os v\u00eddeos podem aumentar as taxas de cliques.<\/li>\n\n\n\n<li><strong>Informa\u00e7\u00e3o<\/strong>: \u00e9 mais f\u00e1cil transmitir informa\u00e7\u00f5es complexas ou apresentar um produto.<\/li>\n<\/ol>\n\n\n\n<p>Os contras<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Compatibilidade<\/strong>: nem todos os clientes de e-mail oferecem suporte a v\u00eddeos incorporados.<\/li>\n\n\n\n<li><strong>Tempo de carregamento<\/strong>: V\u00eddeos pesados podem retardar o carregamento de e-mails.<\/li>\n<\/ol>\n\n\n\n<p>Melhores Pr\u00e1ticas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Imagem substituta<\/strong>: use uma imagem em miniatura com link para o v\u00eddeo, caso a incorpora\u00e7\u00e3o n\u00e3o funcione.<\/li>\n\n\n\n<li><strong>CTA<\/strong>: adicione uma sobreposi\u00e7\u00e3o de bot\u00e3o de reprodu\u00e7\u00e3o para incentivar cliques.<\/li>\n\n\n\n<li><strong>Curto e doce<\/strong>: mantenha os v\u00eddeos breves, de prefer\u00eancia com menos de 2 minutos.<\/li>\n\n\n\n<li><strong>Reprodu\u00e7\u00e3o autom\u00e1tica<\/strong>: Geralmente evite; permitir que os usu\u00e1rios escolham reproduzir o v\u00eddeo.<\/li>\n<\/ol>\n\n\n\n<p>Como<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>HTML5<\/strong>: para clientes de e-mail compat\u00edveis, voc\u00ea pode usar tags HTML5 para incorpora\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>Servi\u00e7os terceirizados<\/strong>: Plataformas como Vibetrace e Mailchimp geralmente possuem op\u00e7\u00f5es integradas de v\u00eddeo.<\/li>\n<\/ol>\n\n\n\n<p>Alternativas para incorporar v\u00eddeo em e-mails<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Gifs<\/strong>: GIFs curtos e em loop podem proporcionar uma experi\u00eancia semelhante \u00e0 de um v\u00eddeo.<\/li>\n\n\n\n<li><strong>Miniatura vinculada<\/strong>: uma imagem est\u00e1tica vinculada a um v\u00eddeo hospedado em outro lugar.<\/li>\n<\/ol>\n\n\n\n<p>teste<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>V\u00e1rios clientes<\/strong>: teste como o v\u00eddeo aparece em diferentes clientes de e-mail.<\/li>\n\n\n\n<li><strong>M\u00f3vel<\/strong>: certifique-se de que seja compat\u00edvel com dispositivos m\u00f3veis.<\/li>\n<\/ol>\n\n\n<div class=\"gb-container gb-container-7b568b8d\"><div class=\"gb-inside-container\">\n\n<div class=\"gb-headline gb-headline-88b6c416 gb-headline-text\">Precisa de ajuda com o seu Email Marketing?<\/div>\n\n\n\n<div class=\"gb-headline gb-headline-01d03e37 gb-headline-text\">Oferecemos servi\u00e7os gerenciados desde a estrat\u00e9gia at\u00e9 a implementa\u00e7\u00e3o e acompanhamento. Normalmente obtendo um aumento de 15-25% nos resultados. Vamos ver como podemos ajud\u00e1-lo!<\/div>\n\n\n<div class=\"gb-button-wrapper gb-button-wrapper-b6496486\">\n\n<a class=\"gb-button gb-button-4f70dbbd gb-button-text vt-register vt-track-click\" href=\"https:\/\/vibetrace.com\/pt\/servicos-de-automacao-de-marketing\/\">Saber mais<\/a>\n\n<\/div>\n<\/div><\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Layout e estrutura para design de e-mail<\/h2>\n\n\n\n<p><strong>Layouts de coluna \u00fanica versus multicoluna<\/strong>: Pr\u00f3s e contras.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layout de coluna \u00fanica<\/h3>\n\n\n\n<p>Pr\u00f3s<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Compat\u00edvel com dispositivos m\u00f3veis<\/strong>: Mais f\u00e1cil de reduzir em telas menores.<\/li>\n\n\n\n<li><strong>Focado<\/strong>: orienta o leitor de maneira linear e direta.<\/li>\n\n\n\n<li><strong>Simplicidade<\/strong>: Mais f\u00e1cil de projetar e mais r\u00e1pido de carregar.<\/li>\n<\/ol>\n\n\n\n<p>Contras<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Conte\u00fado limitado<\/strong>: n\u00e3o \u00e9 ideal para mensagens complexas com m\u00faltiplas se\u00e7\u00f5es.<\/li>\n\n\n\n<li><strong>Menos Din\u00e2mico<\/strong>: podem n\u00e3o chamar a aten\u00e7\u00e3o de forma t\u00e3o eficaz quanto os layouts de v\u00e1rias colunas.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Layout de m\u00faltiplas colunas<\/h3>\n\n\n\n<p>Pr\u00f3s<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Rico em conte\u00fado<\/strong>: \u00f3timo para apresentar uma variedade de produtos ou t\u00f3picos.<\/li>\n\n\n\n<li><strong>Apelo visual<\/strong>: Mais din\u00e2mico e envolvente.<\/li>\n\n\n\n<li><strong>Hier\u00e1rquico<\/strong>: permite uma estrutura de informa\u00e7\u00e3o mais complexa.<\/li>\n<\/ol>\n\n\n\n<p>Contras<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Complexidade<\/strong>: mais dif\u00edcil de projetar e pode n\u00e3o renderizar bem em todos os dispositivos.<\/li>\n\n\n\n<li><strong>Muito pesado<\/strong>: Risco de desordem ou sobrecarga de informa\u00e7\u00f5es.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Dicas para seu foco no com\u00e9rcio eletr\u00f4nico<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Coluna \u00fanica<\/strong>: ideal para campanhas espec\u00edficas, como lan\u00e7amentos de produtos ou ofertas especiais.<\/li>\n\n\n\n<li><strong>Multicoluna<\/strong>: Ideal para newsletters ou apresenta\u00e7\u00e3o de uma gama de produtos.<\/li>\n<\/ul>\n\n\n\n<p>A escolha entre colunas \u00fanicas e m\u00faltiplas deve estar alinhada com sua estrat\u00e9gia de conte\u00fado, a complexidade de sua mensagem e as prefer\u00eancias de seu p\u00fablico-alvo. Sempre teste os dois layouts para ver o que funciona melhor com seu p\u00fablico de com\u00e9rcio eletr\u00f4nico!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Import\u00e2ncia do espa\u00e7o em branco no design de e-mail<\/h3>\n\n\n\n<p>No design, o espa\u00e7o em branco tem uma import\u00e2ncia especial. H\u00e1 muitas vantagens em usar espa\u00e7os em branco, mas para e-mail as mais importantes s\u00e3o:<\/p>\n\n\n\n<p><strong>Legibilidade e espa\u00e7o para respirar:<\/strong> O espa\u00e7amento entre texto e elementos facilita a digest\u00e3o do conte\u00fado.<\/p>\n\n\n\n<p><strong>Foco e aten\u00e7\u00e3o<\/strong>: o espa\u00e7o em branco pode direcionar o olhar do leitor para elementos importantes como CTAs.<\/p>\n\n\n\n<p><strong>Profissionalismo e apar\u00eancia limpa<\/strong>: Um design descomplicado parece mais profissional e confi\u00e1vel.<\/p>\n\n\n\n<p><strong>Experi\u00eancia do usu\u00e1rio e pass\u00edvel de leitura<\/strong>: ajuda os leitores a folhear o conte\u00fado, que \u00e9 como a maioria das pessoas l\u00ea e-mails.<\/p>\n\n\n\n<p><strong>Experi\u00eancia m\u00f3vel e f\u00e1cil de tocar<\/strong>: o espa\u00e7o extra facilita o toque nos bot\u00f5es em dispositivos m\u00f3veis.<\/p>\n\n\n\n<p>Para seus e-mails de com\u00e9rcio eletr\u00f4nico, o espa\u00e7o em branco pode ajudar a orientar o leitor sobre a\u00e7\u00f5es importantes, como fazer uma compra ou conferir um novo produto. N\u00e3o \u00e9 apenas um espa\u00e7o vazio; \u00e9 um elemento de design funcional!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Capacidade de resposta m\u00f3vel<\/h2>\n\n\n\n<p>Certificando-se de que fica bem em todos os dispositivos. H\u00e1 uma certeza maior de que <a href=\"https:\/\/vibetrace.com\/pt\/email-clients-usage-statistics-2023\/\" data-type=\"post\" data-id=\"17536\">dispositivos m\u00f3veis<\/a> s\u00e3o usados mais do que o desktop para ler e-mails.<\/p>\n\n\n\n<p>Garantir que seu e-mail seja responsivo e se adapte \u00e0s telas de dispositivos m\u00f3veis n\u00e3o \u00e9 uma op\u00e7\u00e3o, mas a maneira de come\u00e7ar a criar um e-mail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frases de chamariz (CTA) em e-mail<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Posicionamento de CTA<\/strong>: Onde coloc\u00e1-los para obter o m\u00e1ximo impacto.<\/li>\n\n\n\n<li><strong>Design de bot\u00e3o CTA<\/strong>: Tamanho, cor, texto.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Experi\u00eancia do usu\u00e1rio (UX)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tempo de carregamento<\/h3>\n\n\n\n<p>Import\u00e2ncia do tempo de carregamento do email (dependendo do tamanho e quantidade de imagens)<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Experi\u00eancia de usu\u00e1rio<\/strong>: e-mails com carregamento lento podem frustrar os usu\u00e1rios e reduzir o engajamento.<\/li>\n\n\n\n<li><strong>Usu\u00e1rios m\u00f3veis<\/strong>: eles est\u00e3o sempre em tr\u00e2nsito e n\u00e3o esperam por conte\u00fado lento.<\/li>\n\n\n\n<li><strong>Otimizar imagens<\/strong>: mantenha os tamanhos dos arquivos pequenos, mas com alta qualidade.<\/li>\n\n\n\n<li><strong>Minimizar c\u00f3digo<\/strong>: HTML\/CSS limpo e simples carrega mais r\u00e1pido.<\/li>\n\n\n\n<li><strong>E-mails mais curtos<\/strong>: embora possa ser mais f\u00e1cil tentar adicionar muito aos e-mails, mant\u00ea-los mais curtos \u00e9, na verdade, melhor.<\/li>\n\n\n\n<li><strong>Recorte de e-mail:<\/strong> certos clientes de e-mail (como o Gmail) cortam e-mails se eles ultrapassarem um determinado tamanho.<\/li>\n\n\n\n<li><strong>Teste<\/strong>: sempre teste os tempos de carregamento em v\u00e1rios dispositivos, clientes de e-mail e resolu\u00e7\u00f5es.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Navega\u00e7\u00e3o<\/h3>\n\n\n\n<p>Navega\u00e7\u00e3o por e-mail<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Descoberta de conte\u00fado<\/strong>: para e-mails mais longos, como boletins informativos, a navega\u00e7\u00e3o ajuda os usu\u00e1rios a encontrar o que lhes interessa.<\/li>\n\n\n\n<li><strong>CTAs<\/strong>: uma navega\u00e7\u00e3o clara pode orientar os usu\u00e1rios na a\u00e7\u00e3o.<\/li>\n\n\n\n<li><strong>Card\u00e1pio<\/strong>: para e-mails com muito conte\u00fado, um pequeno menu na parte superior pode ser \u00fatil.<\/li>\n\n\n\n<li><strong>Hierarquia<\/strong>: Use t\u00edtulos e subt\u00edtulos para dividir o conte\u00fado e orientar o leitor.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Acessibilidade<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Escolha de fontes no e-mail<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Escolha da fonte<\/strong>: fontes simples e limpas s\u00e3o mais f\u00e1ceis de ler.<\/li>\n\n\n\n<li><strong>Tamanho da fonte<\/strong>: opte por um tamanho leg\u00edvel, geralmente 14-16px para o corpo do texto.<\/li>\n\n\n\n<li><strong>Leitores de tela<\/strong>: teste seu e-mail com um software de leitura de tela para garantir que ele esteja acess\u00edvel.<\/li>\n\n\n\n<li><strong>Disponibilidade de fontes<\/strong>:<strong> <\/strong>ao usar fontes personalizadas (que n\u00e3o s\u00e3o instaladas por padr\u00e3o nos dispositivos), certifique-se de que os arquivos de fontes sejam carregados corretamente.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Contraste de cores<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Legibilidade<\/strong>: O alto contraste entre o texto e o fundo melhora a legibilidade.<\/li>\n\n\n\n<li><strong>Acessibilidade<\/strong>: Ajuda pessoas com defici\u00eancia visual ou daltonismo.<\/li>\n\n\n\n<li><strong>Texto versus plano de fundo<\/strong>: procure texto escuro em um fundo claro ou vice-versa.<\/li>\n\n\n\n<li><strong>CTAs<\/strong>: certifique-se de que os bot\u00f5es se destaquem, mas tamb\u00e9m sejam leg\u00edveis.<\/li>\n\n\n\n<li><strong>Ferramentas<\/strong>: use verificadores de contraste para testar suas op\u00e7\u00f5es de cores.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Por que o design de e-mail \u00e9 importante: import\u00e2ncia no com\u00e9rcio eletr\u00f4nico e no marketing. Tamanhos de fonte e tipografia: recomendado\u2026 <a title=\"O guia definitivo para design de e-mail: pr\u00e1ticas recomendadas para tamanhos de fonte e dimens\u00f5es de imagem\" class=\"read-more\" href=\"https:\/\/vibetrace.com\/pt\/guia-final-melhores-praticas-de-design-de-e-mail\/\" aria-label=\"Leia mais sobre O guia definitivo para design de e-mail: pr\u00e1ticas recomendadas para tamanhos de fonte e dimens\u00f5es de imagem\"> <\/a><\/p>","protected":false},"author":9,"featured_media":23395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[101,51],"class_list":["post-23379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce-email-marketing","tag-email-design","tag-guide","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/posts\/23379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/comments?post=23379"}],"version-history":[{"count":16,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/posts\/23379\/revisions"}],"predecessor-version":[{"id":23429,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/posts\/23379\/revisions\/23429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/media\/23395"}],"wp:attachment":[{"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/media?parent=23379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/categories?post=23379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vibetrace.com\/pt\/wp-json\/wp\/v2\/tags?post=23379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}