Responsive_Email_Layout___Cover_Image
timer ~ 9 minutos de leitura
90165 visualizações
20 dezembro 2021

Nova Era do Design de E-mail Otimizado para Celular

Stripo / Blog / Nova Era do Design de E-mail Otimizado para Celular

O design de e-mail responsivo não é nenhuma surpresa atualmente, pois todos nós sabemos que a compatibilidade com dispositivos móveis, também conhecida como otimização para dispositivos móveis, não é apenas agradável, e sim uma obrigação. E todos nós seguimos esta regra de ouro — certifique-se de que seus e-mails sejam otimizados para dispositivos móveis.

Mas você sabia que o design responsivo vai muito além da opção “encaixar na tela do celular”? Você pode aplicar tamanhos de fonte a cabeçalhos, cópias regulares, botões etc., que diferem da versão desktop do seu e-mail. Você também pode trabalhar em preenchimentos internos dentro de espaços e ocultar/desativar certos elementos em dispositivos móveis. 

Como fazer isso sem habilidades de codificação — mostraremos a seguir.

1. ​​ Ocultando/habilitando elementos de e-mail em desktops e dispositivos móveis

A Stripo permite que você oculte alguns elementos em dispositivos móveis e, ao mesmo tempo, oculte outros elementos em dispositivos de desktop. Isso significa que você escolhe quais elementos serão exibidos em dispositivos móveis e quais serão exibidos somente em dispositivos desktop.

Existem várias razões pelas quais você pode precisar dessa opção. Por exemplo, para ocultar algumas guias de menu em dispositivos móveis para evitar a rolagem horizontal, que pode aparecer se você aplicar um tamanho de fonte grande ao texto. Ou para ocultar um espaçador vertical se você o usou para dividir visualmente os elementos que são colocados em uma linha.

Como fazer isso com a Stripo:

  • clique no elemento que você deseja mostrar/ocultar para dispositivos móveis;

  • no painel Configurações, você encontra a opção “Ocultar elemento”;

  • clique no ícone “Dispositivo Móvel” ou “Desktop”.

Layout responsivo de e-mail_ocultando e habilitando elementos em dispositivos móveis

Só para mostrar como funciona, construímos um e-mail com espaçadores entre as fotos em dispositivos desktop e os desativamos em dispositivos móveis.

Como criar um layout de e-mail responsivo_Versão da área de trabalho_com espaçadores

(Versão desktop, com espaçadores)

Como criar um layout de e-mail responsivo_Versão móvel_sem espaçadores

(Versão móvel, sem espaçadores)

Experimente a nova era da otimização para dispositivo móvel  
Inicie

2. Estilos de design para cópia de e-mail

Para tornar os seus textos de e-mail totalmente legíveis em qualquer dispositivo, você pode querer aplicar um tamanho de fonte a qualquer parte de sua cópia que seja maior ou menor do que a mesma em um desktop.

Você pode fazer isso na guia “Formatação móvel”.

Design de e-mail responsivo_Definição de estilos móveis com Stripo_Sem código

Na guia “Formatação móvel”, você pode aplicar o tamanho da fonte a:

  • cópia do cabeçalho;

  • cópia do conteúdo;

  • cópia do rodapé;

  • cópia da área de informações;

  • guias de menu;

  • títulos 1-3.

Para o último item, você também pode escolher um alinhamento de texto necessário: Direita, centro ou esquerda.

Emails otimizados para celular_Trabalhando nos estilos de títulos

Todos esses estilos serão aplicados apenas à versão móvel do seu e-mail e não afetarão os estilos de design que você definiu na seção "Configurações Gerais", na guia "Aparência" da versão para desktop.

Só para lhe mostrar como funciona, construímos um pequeno e-mail com um menu e um título nele.

Desktop_Tamanho da fonte do menu é de 12 pixels

(Desktop, menu 14 px, heading 64 px)

Celular_Tamanho da fonte do menu e cabeçalhos

(Dispositivo móvel, menu 18 px, título 36 px)

Otimize os textos em seus e-mails para torná-los totalmente legíveis em todos os dispositivos 
Inicie

3. Estilos de design para botões de CTA

Não há necessidade de dizer que os botões de CTA são o elemento-chave em todos os e-mails uma vez que eles permitem que os usuários realizem as ações necessárias, direcione-os ao nosso site, etc. Isso significa que precisamos torná-los visíveis e fáceis de clicar.

Na guia “Formatação móvel”, você pode:

  • definir uma fonte maior para seus botões — no controle de Tamanho de texto do botão;

  • habilitar a opção "Botões de largura total" para ajustar o botão à tela do celular do usuário.

Emails otimizados para celular_Largura do botão

Ao fazer isso, você garante que seus botões sejam perceptíveis e clicáveis ​​em dispositivos móveis.

Só para lhe mostrar como funciona, construímos um pequeno e-mail com um botão de CTA.

Design de e-mail responsivo_Botões em desktops

(Desktop, tamanho da fonte do botão 18 px)

Emails otimizados para celular_Botão de largura total

(Dispositivo móvel, tamanho da fonte do botão 22 px)

Se você habilitar a opção “Botões de largura total”, você também pode definir seus preenchimentos superior e inferior, também conhecido como espaço interno entre a borda do botão e o texto dentro dele.

Importante

Atualmente, nossa equipe de desenvolvimento está trabalhando na nova versão do editor. A Nova Stripo permitirá que você trabalhe no design de uma versão necessária do seu e-mail — desktop ou dispositivo móvel. Para isso, basta alternar para o modo necessário e aperfeiçoar seu e-mail.

Experimente a nova versão do editor de e-mail Stripo agora 
Experimente

4. Alinhamentos de elemento

Alguns elementos podem parecer bons em dispositivos desktop quando alinhados ao centro, mas podem parecer ruins em dispositivos móveis. Portanto, você pode querer definir um alinhamento diferente para certos elementos em dispositivos móveis e de desktop.

Como fazer isso com a Stripo:

Por favor, esteja informado que esta opção funciona para elementos de e-mail, como textos, botões, vídeos e imagens*. E nunca para contêineres, estruturas e faixas inteiras.

  • clique em um elemento de e-mail necessário em seu modelo;

  • no painel Configurações, você verá o ícone “Dispositivo móvel”;

Layout de e-mail responsivo_Configurando o alinhamento para dispositivos móveis

  • clique nele para ativar as configurações do elemento escolhido;

  • escolha um alinhamento necessário.

* A opção de alinhamento funciona apenas para esses vídeos e imagens, quando há algum espaço restante no contêiner, como preenchimentos internos. Se a imagem ou o vídeo ocupar todo o contêiner, a opção de alinhamento não estará ativa. 

Só para lhe mostrar como funciona, alinhamos as imagens ao centro para desktops e as alinhamos à esquerda para celulares.

Centralizar imagens alinhadas em dispositivos de mesa_Como criar um e-mail responsivo

(Desktop, imagens alinhadas ao centro)

Imagens alinhadas à esquerda em dispositivos móveis

(Dispositivo móvel, imagens alinhadas à esquerda)

5. Preenchimentos 

Às vezes, você deseja deixar o design do seu e-mail “limpo” com muitos espaços em branco. Às vezes, você usa preenchimentos para contêineres e estruturas/linhas para preenchê-los com um plano de fundo colorido. Tudo isso parece bom em dispositivos desktop, mas em dispositivos móveis apenas faz com que esses elementos pareçam menores ou pode piorar um pouco a aparência do seu e-mail. 

Sendo assim, você pode querer se livrar deles para dispositivos móveis.

Por favor, esteja informado que os preenchimentos funcionam para contêineres e estruturas.

Como fazer isso com a Stripo:

  • clique em um elemento necessário em seu modelo de e-mail;

  • no painel Configurações, encontre o ícone “Dispositivo móvel”;

  • clique nele para ativar as configurações para celulares;

Configurando Paddings para Dispositivos Móveis

  • defina o valor necessário para seus preenchimentos.

Importante

Se você precisar de preenchimentos iguais para todos os 4 lados ao redor do elemento dentro da estrutura, basta configurá-lo uma vez aqui:

Paddings for mobile_One Value for All Lides

E esse valor será aplicado a todos os quatro lados do elemento.

Se você precisar definir valores diferentes para cada lado, clique no botão “Mais”.

Definindo diferentes valores de preenchimento para dispositivos móveis

Só para lhe mostrar como funciona, definimos preenchimentos para a versão desktop do nosso e-mail e nenhum para a versão móvel.

Enchimentos entre elementos em dispositivos móveis

(Desktop, preenchimentos entre duas imagens em uma linha e entre as linhas)

Configurando Paddings para Dispositivos Móveis_Valor Zero

(Dispositivo móvel, zero preenchimentos)

6. Inversão de elementos de e-mail para dispositivos móveis

Muitas vezes, você pode ver a seguinte ordem de cartões de produto em e-mails.

Design de e-mail responsivo_Pedido de elementos de e-mail na área de trabalho

Normalmente, os profissionais de marketing por e-mail os usam para diversificar seus e-mails promocionais.

Em dispositivos de desktop, esses cartões de produto têm uma aparência incrível. Mas em telas de dispositivos móveis, eles não ficarão bem e podem até ser um pouco confusos, já que o elemento localizado à esquerda em dispositivos de desktop, em telas de dispositivos móveis ficará acima do elemento localizado à direita em desktops. Dessa forma, os destinatários podem ver duas descrições de produto em uma linha, em vez de uma ordem mais lógica — snippet do produto, descrição, botão de CTA, snippet do produto, etc.

Aqui, você precisa inverter a ordem do contêiner para cada segunda linha.

Como fazer isso com a Stripo:

  • clique no ícone “Estrutura” de uma linha necessária;

O ícone de estrutura

  • no painel Configurações, alterne o botão "inversão de contêineres em dispositivo móvel”.

O botão de inversão de contêineres

É isso.

Só para lhe mostrar como funciona, habilitamos a opção “Inversão” para um e-mail e desabilitamos para o outro.

A opção de inversão de contêineres DESLIGADA

(Dispositivo móvel, opção de Inversão desativada)

A opção de inversão em_Design de e-mail otimizado para celular

(Dispositivo móvel, opção de Inversão ativada)

Esta imagem ilustra que a descrição segue o snippet do produto para todos os cartões — o pedido que pretendíamos ver.

7. Imagens responsivas

Ao projetar e-mail em HTML responsivo, a função mais simples que você pode usar é "Imagem responsiva"

Ao ativar esta opção, você se protegerá contra a rolagem horizontal desnecessária e logotipos enormes. 

Como fazer isso com a Stripo:

Por favor, esteja informado que esta opção está sempre ATIVADA por padrão. Portanto, se você deseja apenas que sua imagem se ajuste ao tamanho de uma tela de celular, não faça nada. Ou você pode querer apenas verificar se está realmente ativada. Claro que está ;) 

Imagem responsiva_opção ativada

Se você precisa que sua imagem, como logotipo ou ícone, permaneça pequena nas telas de dispositivos móveis, talvez seja melhor desativar esta opção.

Desativando a opção de imagem responsiva para dispositivos móveis

Só para mostrar como funciona, habilitamos e desabilitamos a opção “Imagem responsiva” para o mesmo logotipo de e-mail.

Opção de imagem responsiva DESLIGADA_Design móvel

(A opção “Imagem responsiva” ATIVADA)

Opção de imagem responsiva ON_Design otimizado para celular

(A opção “Imagem responsiva” DESATIVADA)

8. ​​Ativando/ desativando design de e-mail responsivo

Todos os modelos de e-mail que a Stripo oferece são totalmente responsivos por padrão.

Mas você pode desativar essa propriedade para um determinado modelo de e-mail seu. Na verdade, lançamos esta opção a pedido dos usuários.

Se você desativar essa opção, seu e-mail em dispositivos móveis será parecido com o de computadores desktop. Pode haver ou não rolagem horizontal e, com certeza, se houver três contêineres por linha em uma versão desktop do seu e-mail, os usuários verão a mesma quantidade deles em dispositivos móveis.

Como fazer isso com a Stripo:

Por favor, esteja informado que, por padrão, esta propriedade está sempre ATIVADA.

  • no painel Configurações, vá para a guia “Configurações Gerais”;

  • alterne o botão “Design responsivo” para desativar esta propriedade.

A opção de design responsivo

Só para lhe mostrar como funciona, habilitamos e desabilitamos a opção “Design responsivo” para o mesmo e-mail.

A opção de design responsivo DESATIVADA_Criando e-mail otimizado para celular

(Dispositivo móvel, a opção “Design responsivo” DESATIVADA)

Design responsivo_Opção ON_Stripo

(Dispositivo móvel, a opção “Imagem responsiva” ATIVADA)

Pensamentos finais

Como você pode ver, não requer nenhuma habilidade de codificação para construir um e-mail em HTML totalmente responsivo. Experimente você mesmo e deixe seus clientes vivenciarem a nova era do design de e-mail para dispositivo móvel.

Crie e-mails otimizados para dispositivo móvel para suas campanhas futuras 

Você talvez se interesse por

anterior próximo
banner9
06 junho · 15 minutos de leitura
10 Melhores Construtores de Modelos de E-mail para 2022

Todos os construtores de modelos de e-mail são parecidos? Agora você está confuso sobre qual escolher para suas campanhas de e-mail, não é? Não é à toa, pois são muitos. Iremos separar os construtores mais populares para encontrar seus recursos diferenciados para ajudá-lo a encontrar o melhor construtor de e-mail HTML para suas necessidades atuais. Vou tentar criar um modelo em todos esses editores com os mesmos arquivos de mídia para ver se os construtores diferem. Os melhores construtores de...

Design Marketing Modelos
24 maio · 18 minutos de leitura
Melhores fontes para E-mail: Dicas e Truques de Uso

Uma das preocupações mais marcantes no processo de produção de e-mail é a escolha da fonte correta. Peso, altura, largura, cor, forma, espaçamento... Tudo isso importa? Sim, é verdade, mas também uma das coisas mais importantes é escolher a fonte que seja legível. Neste post, iremos lhe mostrar como escolher a melhor fonte profissional para e-mail. Desenhe e-mails elegantes com Stripo em pouco tempo com nossos modelos pré-construídos Navegue   Fontes de e-mail HTML: Regras gerais a serem seguidas Existem...

Design Modelos
Greatest Examples of GIF animations in Emails_Cover Image
27 outubro 2021 · 10 minutos de leitura
16 ótimos exemplos de GIFs animados em e-mails

GIFs em e-mails serão de grande utilidade se você quiser mostrar seu produto, chamar a atenção dos usuários para determinados elementos ou apenas decorar levemente seu texto. Neste artigo, fornecemos alguns dos melhores exemplos de animação gif de e-mail. Exemplos de GIFs animados em e-mails Aqui está um compilado dos melhores exemplos com GIFs em e-mails. Cada GIF cumpre sua missão. 1. Adidas (Fonte: E-mail da Adidas) A Adidas usou animações de e-mail para mostrar quais opções de cores eles...

Design Marketing
08 abril 2021 · 17 minutos de leitura
14 Melhores exemplos de design de assinatura de email

Boas assinaturas de email nos ajudam a construir nosso negócio e a causar uma boa impressão nos clientes. Como este é o último elemento que as pessoas visualizam nos emails, devemos fazer com que nossas assinaturas pessoais sejam criativas e memoráveis. Vamos examinar os melhores exemplos de assinaturas de email e seu uso apropriado em emails e templates de newsletter para emails. Deve-se mencionar que todos os tipos de negócios demandas assinaturas de email profissionais com as informações de contato...

Design Marketing Modelos
Esteja sempre a par das notícias, guias, artigos e manuais de marketing de e-mail