9 truques para projetar o boletim informativo HTML perfeito

Um boletim informativo por e-mail é a maneira perfeita de manter contato com seus clientes ou seguidores. Muitas vezes, sua empresa ou site terá várias atualizações de produto ou possivelmente futuros eventos que você gostaria de compartilhar. É sempre possível postar novas informações em seu blog ou nas mídias sociais, mas seu público pode ir tão longe até você. Neste caso, e-mail certamente não é tecnologia morta, apenas potencial inexplorado.

O processo de criar e enviar um boletim informativo é muito mais fácil do que se imagina, mas para criar um modelo personalizado e criar seu próprio código - isso pode demorar um pouco mais.

Nós compilamos algumas dicas fantásticas para você projetar boletins HTML de alta qualidade como nunca antes. Mesmo se você é um novato no assunto, você certamente encontrará algumas informações valiosas para você começar no processo de marketing por e-mail..

Objetivos de um boletim informativo

Antes de entrar nos aspectos do design, devemos esclarecer seu propósito de criar um boletim informativo. Dependendo do tipo de site que você executa, as informações contidas em seu boletim podem variar drasticamente de outras, mas o objetivo principal de um boletim informativo é entregar atualizações convenientes diretamente na caixa de entrada do seu leitor.

É provável que usuários pesados da Internet verifiquem seus e-mails mais de duas vezes por dia. Mesmo aqueles que estão constantemente ocupados terão tempo para passar suas mensagens pelo menos uma vez por dia. Este é o momento perfeito para captar atenção mesmo sem exigir visitas ao seu site. Mesmo que ninguém esteja clicando em seus links, a informação é ainda recebeu, o que é ótimo para construir uma marca.

Considere alguns dos tópicos que você precisaria oferecer em seu design. Você está incluindo links para inscrição para o seu serviço; possivelmente links de blogs ou artigos publicados recentemente em seu site? O layout da sua newsletter irá refletir como você deseja que seus leitores respondam, mas no final você está procurando aumentar o interesse e passar algumas informações interessantes para as massas..

1. Utilize tabelas em seus layouts

Isso pode parecer um pouco contraditório em relação aos padrões atuais da Web, mas os e-mails ainda são arcaicos em seus mecanismos de renderização, portanto, é preciso construir modelos mais antigos. Infelizmente as mesas são a maneira mais fácil para que tudo funcione corretamente entre os vários clientes de email. Dependendo do seu conhecimento sobre a criação de layouts baseados em tabelas, isso pode ser uma boa notícia!

Você também pode se perguntar por que div e outros elementos de bloco não são uma boa ideia. A maioria dos clientes de e-mail construído para remover qualquer CSS estranho conteúdo. Isso significa que você não poderá usar muita coisa, exceto para CSS inline (e até mesmo apoio total é de má qualidade). Clientes como o Microsoft Outlook 2007 e o Gmail do Google têm suporte insuficiente para elementos flutuantes e posicionamento direto.

A melhor solução seria aninhar várias tabelas dentro de si. Preenchimento e margens não são definidos para uma escala específica entre muitos clientes de email. Esta é uma razão para ficar usando width = "value" em todos os elementos da célula da sua tabela. Eles sempre exibirão a mesma largura, não importando qual cliente de e-mail seus leitores estejam usando, então é muito mais segura e mais consistente definir preenchimento e margens usando células da tabela vazia.

2. Posicionamento de Largura Fixa

Você tem algumas opções ao criar os rascunhos do layout do boletim informativo, mas a melhor opção a seguir é para definir larguras fixas para sua tabela contendo. Existem muitas resoluções variadas de monitor - você não será capaz de agradar a todos. Se você não tem elementos particulares com larguras estáticas, você sempre pode usar width = "100%" na sua mesa contendo. Isso permitirá que seu conteúdo preencha toda a largura de todos os clientes de email.

No entanto, para muitos este método é um pouco laxo demais. Boletins informativos construtivos vai exigir uma largura fixa na maioria dos casos, especialmente se você estiver usando banners e imagens definidas para um tamanho específico. Eu recomendo trabalhar com 500px - largura máxima do documento de 600px. O tamanho de tela horizontal do iPhone e alguns modelos do BlackBerry são limitados a 320px, portanto, mesmo a 500px, seu modelo de e-mail será reduzido para caber corretamente.

Considerando que muitos usuários móveis optam por ver emails sem HTML de qualquer maneira, isso não deve ser um grande problema. Os usuários de clientes de desktop e webmail provavelmente terão uma configuração semelhante, independentemente do sistema operacional que usam. Quando em dúvida crie alguns designs de modelo e escolha as que você mais gosta!

3. Unidades de Pixel

A menos que você use elementos fluidos em seu boletim informativo, é provável que você precise dimensionar algumas coisas. Tente mantê-lo em pixels (px) em vez de em outro tipo de unidade. As porcentagens podem se misturar facilmente com os muitos clientes de webmail e janelas de software. Com menos elementos de página, layouts de fluidos podem sair ilesos, embora com alguns bugs.

Mas os pixels são sempre uma coisa certa. Trabalhando dentro do limite de largura máximo de 600px, você pode realmente inserir muito conteúdo dentro dele. A exposição é mais fácil se você dividir seus layouts em duas ou três colunas e sempre escrever seus tamanhos em pixels. A única exceção pode ser tamanhos de fonte Onde ems pode apoiar melhor os seus leitores, mas em dimensionamento diferirá de forma semelhante percentagens seria - assim Para simplificar, siga os alinhamentos baseados em pixels.

4. As Possibilidades com CSS

Pode parecer que o design de e-mail está destinado a destruir o uso de estilos CSS. Embora haja muitos recursos não suportados, o CSS ainda é perfeitamente aceitável em muitos casos. O Campaign Monitor possui uma linda tabela de propriedades CSS suportadas, listadas pelo cliente de e-mail. Todos apoiarão o básico como família de fontes e estilo de fonte, então você pode pular o tag se você quiser.

Seja cauteloso com seus estilos de fonte para não ultrapassar os limites. Se você se sentir desconfortável com os estilos in-line, sempre será possível usar a tag de fonte HTML, mesmo que ela tenha sido preterida. Se você é um designer CSS, não precisa sair do sistema, mas qualquer código CSS abreviado pode resultar em projetos com erros. Como um exemplo fonte: 12px / 14px Arial, sans-serif; A taquigrafia pode ajudar a economizar muito espaço, mas não é totalmente aceita para design de email, mesmo quando usada com estilos in-line.

Até mesmo suas escolhas de cores deve ser escrito longhand. Cores hexadecimais como #ccc ou # e3f deve ser escrito por completo como #cccccc ou # ee33ff, respectivamente. Se você pode construir o que você precisa sem CSS, eu recomendaria esse caminho, mas não me esquive completamente do CSS nos projetos de email porque, ao contrário da crença popular, ele é suportado na maioria dos casos.

5. Melhores Práticas de Links de Ancoragem

Você certamente desejará incluir alguns links em seu boletim informativo. Estes podem ser links externos para outras páginas da Web ou talvez links que levem às páginas mais populares do seu site. Além disso, a maioria dos rodapés conterá um link de cancelamento de inscrição para seus leitores optarem pelo processo de e-mail, mas como você deve lidar com todos esses links em seu design??

Bem, deve-se notar primeiro que os clientes de e-mail são muito meticulosos com seus projetos. Muitos optarão por substituir seus estilos de link, mesmo com CSS inline. Um truque legal é inclua a cor inline e uma tag span adicional no elemento âncora. Se a cor e o estilo de seus links forem importantes para o design geral, você precisará tomar a precaução extra. Eu adicionei um pequeno exemplo de código abaixo:

algum texto de link

Efeitos de focalização são não suportado no Outlook 2007/2010, Gmail, iOS ou Android. Você ainda pode querer incluir o a: hover estilo para todos os clientes de suporte: Outlook 2000/2003, Hotmail, Apple Mail e Yahoo! mail, mas pessoalmente eu não vejo muito benefício na experiência do usuário parcial, uma vez que os seletores de âncora não são fortemente suportados, eu recomendo apenas oferecendo 2-3 cores de links usar em todo o seu design.

Como presunção, os usuários também esperam que seus links sejam abertos em uma nova guia ou janela. Idealmente o target = "_ blank" atributo deve ser suficiente para todos os navegadores reconhecerem essa funcionalidade, e a inclusão desse atributo em seus links de âncora não deve afetar negativamente o software de e-mail, como o Lotus Notes, ou o Outlook..

6. Teste em todos os principais clientes

Um estudo recente dos clientes de e-mail mais populares (feito pelo Campaign Monitor) mostra dez dos clientes de e-mail mais populares no ano passado. Pode parecer um pouco entediante, mas designers deve adquirir o hábito de verificar suas newsletters em todos os principais clientes de e-mail, pelo menos em alguns dos clientes mais comuns, como Gmail, Hotmail ou Yahoo! Enviar.

Isso não inclui apenas o webmail, mas também o software operacional no Mac OS X e no Windows. Ainda de acordo com o diagrama deles Correio do iOS e Android Os dois entraram na lista dos 10 melhores nos últimos anos. De fato, o iPhone, o iPod Touch e o iPad classificam o segundo lugar entre os mais populares no Outlook! Infelizmente não existe uma maneira de testá-los sem possuir um dos dispositivos - então você terá que se contentar com outras opções.

Um bug com o suporte móvel vem em muitos modelos de iPhone e Android. A renderização de email móvel geralmente redimensione o texto dentro do seu modelo. Isso pode não afetar muito seu design, mas pode ser irritante para alguns leitores. Usando o CSS -webkit-text-size-adjust: nenhum;, vai garantir um tamanho de texto padrão uniforme em todos os mecanismos de análise sem precisar testá-lo.

Se você conhece algum amigo ou colega que usa software alternativo, você pode peça sua ajuda para testar o boletim informativo. Você também pode envie-lhes uma cópia do e-mail para verificar o dispositivo ou emprestar o dispositivo para limpar ativamente os erros de codificação. Felizmente o Outlook oferece uma versão de instalação do Mac para que você não precise rastrear um usuário do Windows para essas otimizações, mas quando se trata do Lotus Notes ou do Windows Mail, você pode estar sem sorte.

A alternativa é pagar por uma solução como Visualizar meu e-mail, infelizmente eles não fornecem nenhuma conta de demonstração gratuita, mas seu serviço é bem conhecido por oferecer ótimas visualizações do seu design. E-mail no Acid é um serviço similar que oferece uma conta gratuita, mas não permite que você teste em todos os clientes, o que acaba com o propósito. Os serviços de renderização on-line devem ser úteis se você precisar testar muitos modelos de boletim informativo a longo prazo sem o uso de computadores alternativos, no entanto, eles não são fundamentais. não se estresse se você não pode testá-los todos!

7. Sempre oferecer exibições baseadas na Web

Os leitores nem sempre poderão (ou estarão dispostos) a ver seu e-mail nativamente. Oferecendo outra versão em algum lugar na Web dará uma sensação de facilidade e compatibilidade. Esse processo não pode ser totalmente automatizado, a menos que você queira incluir um texto simples versão.

Dessa forma, você faria tira todas as tags HTML a partir do layout do boletim informativo. Você não seria capaz de incluir links ou estilos para nada. Todo o conteúdo seria simplesmente ser apresentado como um arquivo de texto simples para leitores sem os recursos de renderização. Esta é certamente uma boa alternativa, mas quando você oferece uma versão Web completa do mesmo boletim tira o dano causado por qualquer bug de renderização. A maioria dos leitores estará executando um navegador da Web atualizado, no qual você pode estilizar e construir sua newsletter e aperfeiçoá-la..

Como você configura a página é inteiramente sua escolha. Alguns sites serão dedicar uma postagem inteira para duplicar o conteúdo do e-mail, talvez com algum informação adicional. Outros irão criar uma página separada fora do site principal sem quaisquer links diretos na navegação. Esse método pode ser benéfico, já que os leitores não se distrairão com o modelo de site principal ou o conteúdo da barra lateral..

8. Adicionando o Conteúdo da Imagem

As imagens são outro motivo para oferecer aos seus leitores uma solução baseada na web. Por padrão, os clientes de email estão definidos para retirar imagens do conteúdo. Se o seu endereço for adicionado a uma lista segura, todas as imagens serão exibidas por padrão, mas o usuário tem que aceitar essa configuração então certamente não é uma garantia. Somente verifique se as imagens não são necessárias como parte do conteúdo principal, mas incluído como um topping extra para a estética da página.

Depois de chegar à exportação de gráficos, há algumas dicas para criar imagens especificamente para e-mail. Você vai querer sempre defina os atributos width e height no seu img Tag. Sem estas especificações para, alguns clientes irão distorcer o conteúdo da imagem. A alt A tag também será útil, para que os visitantes saibam o conteúdo da imagem antes de ser carregada.

Como mencionado anteriormente, posicionar as imagens em seu e-mail pode ser complicado. Evite usar carros alegóricos a todo custo! A imagem align = "left" atributo funcionará muito melhor, ou alternativamente mapear as células da tabela exata para ajustar suas imagens na parte superior, esquerda ou direita de seu boletim informativo. Você não será capaz de obter uma combinação perfeita com tantos clientes por aí (especialmente clientes móveis), mas otimize suas imagens e mantenha os tamanhos dos arquivos pequenos para obter melhores resultados.

Quanto ao armazenamento de imagens, é recomendável que você mantenha todos os arquivos em seu próprio servidor da Web. Essa é a melhor opção em vez de usar outro host de imagem ou o upload dos arquivos para um serviço de boletim informativo on-line. Além disso, você deve separe o conteúdo de seus boletins informativos do resto de suas imagens em uma estrutura de pastas igual a / img / email ou / img / email / 2011.

9. Evite a pasta de spam!

Isso pode ser difícil de ouvir, mas nem todos os clientes de email são amigáveis com os boletins informativos. Há bilhões de e-mails enviados todos os dias e a maioria deles contém spam ou conteúdo mal-intencionado, portanto, essas medidas de segurança incorporadas na Caixa de entrada são claramente para precauções de segurança..

No entanto, quando se trata de marketing na Internet, você pode facilmente ser desencorajado a ver a sua última newsletter acabar com o lixo. Para reduzir as chances de isso acontecer, você deve limpe seu design para simplificar. Não faça imagens irritantes ou explodir o texto do título com centenas de palavras-chave.

Além disso, tente mantenha seu conteúdo breve e no tópico. Você não precisa incluir conteúdo completo para todos os seus artigos ou páginas. Tente adicionar uma frase ou duas com um link alternativo para o seu site no lugar de uma longa listagem. o Quanto mais breves forem os seus e-mails, maior a probabilidade de passarem pela inspeção de spam.

Galeria de Design de Newsletter

Que divertido seria um artigo de boletim informativo por e-mail sem alguns exemplos fantásticos? Há toneladas de designs e modelos de boletins informativos por e-mail para o check-out no Google. A Galeria de E-mail em HTML é uma fonte muito popular de inspiração.

Abaixo, incluímos capturas de tela dos muitos boletins informativos na galeria do Campaign Monitor. Espero que estes layouts fantásticos possam lhe proporcionar ótimas idéias para seus próprios projetos.

Divirta-se projetando seus boletins ideais!

Alerta para negócios