Scribd Logo
Unggah

Selamat datang di Scribd!

  • Boas Práticas Na Criação de Templates de Email em

    Diunggah oleh

    André
    9 tayangan4 halaman
    Boas praticas na criação

    Judul Asli

    Boas Práticas Na Criação de Templates de Email Em

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Boas praticas na criação

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    9 tayangan4 halaman

    Boas Práticas Na Criação de Templates de Email em

    Diunggah oleh

    André
    Boas praticas na criação

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Boas práticas na criação de templates

    de email em HTML
    Este artigo irá mostrar como dar maior visibilidade as
    suas mensagens, corrigindo visualização em clientes de
    email diferentes (hotmail, gmail, outlook, yahoo). E
    valiosas dicas de design e boas práticas na construção
    de templates.
     HTML para Web VS HTML para email marketing
     Design
     Boas práticas
    Assim como o artigo de como criar o seu template! aqui também se
    assume que você possui conhecimento básico de HTML e CSS. Para
    saber mais sobre HTML e CSSacesse os links indicados no final desse
    artigo. Para realizar o upload do seu template,clique aqui!.

    1 HTML para Web VS HTML para Email Marketing


    Todos clientes de email possuem sistemas de renderização diferentes
    entre si e nenhum é como o seu navegador. Por isso vamos ver as
    grandes diferenças entre codificar para websites e templates de email.

    1.1 Usando tabelas


    Sim, o HTML de email marketing usa tabelas. O layout
    por CSS simplesmente não irá funcionar, por isso, vamos deixar os <div>…
    </div> para outras funções que não a de layout.
    Exemplo de tabela com uma coluna para começo de estrutura:

    Você pode criar templates através do Mailee.me usando nossos modelos


    gratuitos. Aproveite o nosso criador editor HTML para alterar os
    templates da maneira que quiser.
    1.2 Estilo em linha (CSS declarations in line)
    Os clientes de email não permitem que o código html acesse arquivos
    externos por motivos de segurança. Por isso, CSS externos, arquivos de
    javascript, objetos como Flash e ActiveX serão ignorados e não serão
    exibidos.
    A única maneira de usar objetos externos é configurar links dinâmicos
    para visualização da mensagem no navegador. O que não é recomendado,
    uma vez que isto irá forçar o usuário para longe do ambiente de email.
    Mantendo o Design do template
    Para manter o design do seu template de email, você deve manter todos
    estilos em linha. Ou seja, não declarados no <head>…</head> ou em
    arquivo externo.
    Por isso, evite códigos css como.

    E utilize códigos com estilos in line.

    1.3 Mantendo a apresentação das imagens no fundo


    Live/Hotmail, Gmail e Outlook 2007 não apresentam imagens de fundo. A
    não ser que você utilize a imagem de fundo como fundo das tabelas.

    Exemplo de imagem de fundo da tabela

    Como os métodos atuais de animação não são aceitos pela maioria dos
    clientes de email, use .gif animados como imagem de fundo sempre que
    precisar deste recurso.

    1.4 Peculiaridades na renderização do Live/Hotmail, Gmail e


    Yahoo.
    O Hotmail pode apresentar dificuldades na largura da mensagem e o
    Yahoo! com cores dos links. Para corrigir use o seguinte código no topo
    do email:

    O Gmail possuí uma dificuldade com imagens, criando uma linha branca
    entre imagens que dependendo do contraste com a cor de fundo podem
    arruinar o design.

    Para corrigir, use o código style:“display: block;”.

    2 Design

    2.1 Assunto
    Email marketing é marketing direto, ou seja, não invasivo e personalizado.
    Para que os seus contatos vejam suas notícias, eles primeiro tem que
    optar por receber o seu email. No final, com sua mensagem na caixa de
    entrada, é necessário que eles também optem por abrir a sua mensagem.
    O que pode influenciar e bastante a abertura da sua mensagem é deixar
    bem claro quem é o remetente e qual é o assunto da mensagem.

    Observe uma típica caixa de emails:

    Remetente Seja claro e mostre quem você é, de maneira bem objetiva. Se


    você se apresentar com seu nome pessoal, não esqueça de adicionar ao
    assunto quem você está representando.

    Assunto Defina sobre o que está você está falando, adeque seu assunto
    ao segmento que está querendo atingir.
    EVITE
     Frases como: “clique aqui”, “Sigilo Absoluto”, “Dúvidas
    Conjugais”, “Grampo?”, “Tenha seu site na Internet”, “Ganhe
    dinheiro enviando emails”, “Trabalhe em casa”."
     Exclamações em excesso!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    2.2 Mensagens com apenas uma imagem


    Todos os grandes clientes de email possuem algum tipo de proteção
    contra mensagens que contenham apenas imagens. E se a sua
    mensagem chegar até a caixa de entrada, seu email pode ser confundida
    com uma mensagem vazia.

    Veja um exemplo:

    Para que a sua mensagem seja reconhecida rapidamente, sempre


    preencha o texto alternativo da imagem, para que ele seja visualizado
    quando a imagem não é exibida.

    Veja o exemplo com os alternativos a imagem configurado e texto puro:

    Use links dinâmicos topo das mensagens para que o receptor possa ver
    sua mensagem inteiramente renderizada no navegador, já que a
    mensagem pode ser alterada dependendo do cliente de email.

    3 Boas práticas
    Tipos de arquivos de imagens
    GIF Para textos personalizados, logos, transparencias.

    JPG Para imagens em tom contínuo (fotos, gráficos com gradientes).

    PNG Evitar o uso do formato PNG.


    Links
    Não há suporte aos pseudo-seletores como :hover, :active e
    :visited Utilize sempre que possível o texto azul e sublinhado.
    O que irá gerar:

    Melhorando a visibilidade dos campos editáveis


    Para apresentar os campos editáveis durante a edição no Mailee.me
    coloque o seguinte código no<head> de seu HTML:

    Anda mungkin juga menyukai