Jvchequer 63 Postado Agosto 27, 2010 Share Postado Agosto 27, 2010 Desenhar e enviar newsletters em HTML pode ser complicado. O código lido pelos sites e aplicativos de e-mails são ainda muito limitados, comparado com navegadores web. Ou seja, você precisa constantemente adaptar o seu modo de criar templates para e-mails. Eis algumas dicas de como você pode melhorar suas newsletters. Use estilos CSS inline Pode esquecer usar páginas CSS externas ao enviar e-mails personalizados. A melhor solução é declarar o CSS dentro dos seus tags HTML. Como por exemplo: <p style=”color:#000;”>. Se você declarar a folha de estilos no cabeçalho, aplicativos online (como o Gmail) não vão conseguir fazer aquilo que você pediu. Limite a largura do seu template Quando estiver criando um template para suas campanhas via e-mail, não esqueça que muitos lêem suas mensagens em apps online (Gmail, Hotmail, YMail, etc). Estes geralmente possuem uma barra lateral que consome um certo espaço. Procure não passar de 600 pixels de largura. Evite de usar imagens demais Muitos dos aplicativos de e-mails bloqueiam imagens e dão a opção ao usuário liberar a visualização, então procure não depender demais de imagens para que seus usuários não vejam um e-mail em branco. Ofereça um link para cancelar a assinatura Tenha bom senso: não force seus leitores a receberem seus e-mails caso não queiram. Seria como se um vendedor trancasse a porta assim que você entrasse na loja. Além do mais, não oferecer uma opção de cancelar pode ter seu newsletter caracterizado como spam. Ofereça uma versão web Algumas vezes o código chega zoado ao usuário. Ofereça um link para visualizar o e-mail online que pode ter mais recursos. Não use Flash Quase todos os aplicativos de e-mail não conseguem ler objetos em Flash, então evite a todo custo inserir algo assim na mensagem. Nossa newsletter - o Exército do Design Sugira que seus leitores entrem em contato Fazendo isto, você os convida para que tenham um relacionamento mais próximo com você, além de que ajuda a evitar que suas mensagens vão para a pasta de spam do usuário. Não use formulários Como no Flash, a maioria dos aplicativos de e-mail não conseguem renderizar formulários. Prefira utilizar um link para um formulário online. Configure o tamanho de imagens Adicionando a configuração de width e height em suas imagens ajuda a manter o layout mesmo quando imagens não são mostradas. Use texto alternativo nas imagens Caso as imagens não apareçam, o usuário pode pelo menos saber o que ele não está visualizando. Use a tag alt em suas imagens. Não use PNGs com transparência Alguns aplicativos não mostram transparência de PNGs, outros nem sequer mostram PNGs, então por que colocar? Infelizmente, os aplicativos ainda tem muito a evoluir. Não use imagens em CSS Imagens de fundo pelo CSS (como background:url(imagem.jpg);) não funciona nos aplicativos, então evite. Se precisar de um fundo, prefira usar uma cor chapada. Tenha uma versão em texto Ofereça uma versão em texto simples do seu e-mail para os que não conseguem visualizar HTML. Uma tabela interessante sobre a compatibilidade de códigos HTML e CSS nos diferentes softwares e aplicativos online de e-mails é este do Campaign Monitor. E caso você tenha interesse em receber uma newsletter pra servir de inspiração, que tal se cadastrar no nosso, o Exército do Design? Lá temos sorteios, artigos exclusivos e muito mais! Adaptado de: Designer Daily Ajude o Design Blog! Vote em nós no prêmio Top Blog 2010! Não custa nada e demora menos de dois minutos! Artigos relacionados Como estragar seu site – parte 2 Como estragar seu site – parte 1 Hierarquia visual de elementos Design Blog Podcast – Episódio 02 Cantos arredondados para qualquer navegador </img> </img> </img> View the full article Link para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados