El O design responsivo é vital hoje devido aos diferentes formatos para o qual um usuário enfrenta em seu tablet, celular e até mesmo computador. Esse design responsivo em email marketing e páginas de destino é mais do que importante para a comunicação omnicanal com nossos clientes.
Portanto, você deve levar isso a sério para levar diferentes modelos com larguras diferentes para chegar com o melhor design possível aqueles boletins informativos ou aquela página de destino onde os futuros clientes que queremos que eles convertam de nossos anúncios no Google ou no Facebook chegarão.
Design responsivo em email marketing
O marketing por e-mail é uma das formas de anunciar ofertas de produtos ou novas postagens criadas em nosso blog para assim, estreito de uma maneira mais profunda com todos os nossos seguidores.
O fato de esses boletins informativos serem responsivos significa que eles podem ser vistos perfeitamente de um celular, um tablet ou um computador. Por isso temos que tentar ter as ferramentas necessárias para que todos os elementos visuais estejam suficientemente harmoniosos para uma fácil leitura da newsletter.
Boletim IKEA
Responsivo significa que a exibição de uma página em diferentes dispositivos está sempre correta. Para isso temos ferramentas de e-mail marketing que nos ajudam a testar a newsletter criada em diferentes formatos e assim modificar valores como padding ou margin para que fiquem perfeitamente reposicionados à medida que vamos reduzindo a largura do nosso navegador.
No web design com CSS "Consultas de mídia" são usadas para projetar um site de acordo com o formato. Até 360px seria para um celular, e de 360px a 650px poderíamos fazer modificações para todos os usuários que veem nosso site de um tablet.
Alguns dos princípios de nossos boletins informativos de marketing por e-mail são:
- Uma hierarquia visual limpa: um título em H2 para deixar o texto no formato de parágrafo.
- Duas fontes diferentes: um para o título e outro para o texto torna nosso boletim informativo mais legível.
- El uso de cores para diferenciar título, texto e outros elementos: podemos ir gradualmente de um cinza escuro para um mais claro.
- Un CTA (Call to action) clara e distinguível: se o logotipo da nossa empresa for na cor vermelha, o CTA pode estar nesta cor enquanto o resto na cor complementar.
Damos a você um exemplo claro de um ótimo design responsivo em newsletter realizada pela Filmin e isso você pode ver na imagem fornecida. Tipografia nítida em branco e o texto em cinza muito claro que nos permite visualizar rapidamente os diferentes espaços nos quais somos convidados a ler se quisermos. O CTA não é que seja de outro mundo, mas ajuda com aquele ícone de jogo e que nos faz ver o que nos espera.
Espaços suficientes nas margens, branco como cor principal do texto e que se encaixa perfeitamente com o logotipo Da marca; rodeado por aquele cinza que o destaca. Uma imagem atraente que define o ponto para um boletim informativo que atrai desde o início. Espaços também são deixados nas laterais para que toda a largura da tela não seja "comida".
Em a versão desktop mantém esses princípios, deixando ainda mais espaço nos textos e deixando uma grande margem de cada lado:
Design responsivo em uma página de destino
Os os mesmos princípios podem ser usados no design responsivo de uma página de destino. É extremamente importante levar todo o tempo do mundo para escolher corretamente o template e seguir algumas regras de design:
- Simplicidade visual: Estamos falando sobre manter espaços em branco para colocar o foco nos CTAs.
- Imagens lindas e envolventes ao leitor, sem esquecer a resolução e que parecem perfeitos.
- A importância da cor e isso enfatizamos novamente.
Temos que trabalhar no design responsivo de uma landing page para um celular, tablet e desktop. Levar a tempo necessário para tentar novamente e novamente a cada mudança É visto nesses três formatos, já que podemos confiar em nós mesmos e esquecer que as alterações feitas no CSS ficarão horríveis no celular.
Página inicial do Hotjar
É um trabalho que pode ser entediante, mas é vital que reservemos um tempo para testar cada alteração. O uso de margens laterais e tente, na medida do possível, não perder as regras nos CTAs ou botões de ação:
- Que a distância em relação ao texto e a margem do botão é progressiva em todos os três formatos. Não é pequeno nem grande e tem a mesma altura.
- La proporção no tamanho do botão CTA com o resto dos elementos onde está localizado deve ser fornecido.
Um exemplo claro disso é o trabalho realizado pelo Shopify em sua página de destino no desktop e no qual você pode ver na versão móvel. Atenção ao uso de cores, espaços em branco e aqueles textos com seus tamanhos e tipografia adequados:
Uma série de dicas para ter uma página de destino melhor para sua empresa ou loja online e aqueles boletins tão importantes para obter as atualizações e promoções para seus usuários.