2

Criação e desenvolvimento de um email marketing correto + 6 dicas de como desenvolver um

Esse é a segunda das três postagens prometidas sobre email marketing.
1 Definindo tema e publico alvo (acessar a postagem anterior)
2 Criação e desenvolvimento (essa postagem aqui)
3 Envio e mensuração (acesse a postagem)

A criação é muito importante em uma campanha de email, onde deve observar principalmente o layout. Como alguns leitores de email (principalmente o Microsoft Outlook) são bastante limitados, portando a criação do layout deve ser sempre simples e ao mesmo tempo em que elegante e atraente e esse é o ponto mais difícil, pois como conseguir esse equilíbrio? Essa postagem visa responder a essa pergunta de forma bem clara, bem como dar dicas de uma boa estrutura (o que pode e o que não pode ser utilizado em um email marketing para que seja exibido nos principais programas de email como também nos provedores de email gmail e Hotmail), sem deixar de atrativo o email marketing.

O primeiro passo após definido o tema do email marketing conforme mencionado na postagem anterior deve observar três principais características que um layout de email marketing deve ter para a sua concepção, pois um dos maiores erros que tenho visualizado é a questão de algumas pessoas acreditarem que email marketing é a mesma coisa que uma página sendo aberta em um navegador, entretanto são elementos totalmente distintos e como elementos distintos, devem ser observados de formas diferentes:

1 – Plano de fundo: O primeiro quesito é o plano de fundo de um email marketing, esse deve ser em sua grande maioria sempre na cor branca dado que imagens de fundo não funcionam nos leitores de email e principalmente porque isso acaba agredindo visualmente a pessoa que recebe por mais bonito que seja a imagem. Se for utilizar um fundo com cor, de preferência a cores solidas e claras, existem muitas maneiras de chamar a atenção da pessoa e não é colocando um titulo com “tamanho 42” na cor vermelha em um fundo preto que irá ser.

Uso de degrade em plano de fundo podem até ser utilizado, desde que observado os locais onde melhor serão possíveis de utilizar e o degrade deve sempre ir para o branco. Por exemplo: O topo inicia em cinza claro indo para o branco e o rodapé vem do branco indo para a cor cinza, deixando o centro na cor branca. Para visualizar um exemplo. Clique Aqui.

 2 – Conteúdo: Não conte uma história do seu produto ou serviço enviando um email marketing com conteúdo extremamente longo dizendo que você faz isso há 10 anos, esse é outro erro grave que vejo, quantas pessoas irão parar para ler toda a história que contou no email? Seja breve, direto, chame a atenção em uma frase e destaque-a, por exemplo, se quero divulgar um produto de informática (um Tablet PC), é possível descrever o produto em uma frase e ainda torná-lo objeto de desejo, veja o exemplo : “Novas formas de curtir a Internet sem mouse e teclado ao alcance de seus dedos” ou também: “Curta mais a Internet usando somente os dedos”, ou seja, em uma frase simples eu simplesmente descrevi a principal característica de um Tablet PC.

Seguindo essa mesma linha, outro detalhe no conteúdo é não tente transformar um email marketing em uma loja virtual colocando muitos produtos, saiba quem é o seu publico e foque nos principais produtos.

Porque foque em seu publico? Existe diferença entre um publico e outro?

Com certeza existe diferença, por exemplo, caso o alvo é um publico feminino significa que precisa de um pouco mais de variedade de produtos, visto que mulheres normalmente tendem a procurar mais, entretanto como afirmado anteriormente não adianta mandar uma lista com 10 produtos, isso na verdade irá deixar a pessoa mais confusa e acabar não escolhendo nenhum produto, dessa forma uma melhor maneira de mostrar variedade chamando a atenção e sem deixar a pessoa confusa é demonstra uma variedade de uma mesma linha e alertar para que também tenha outras linhas, por exemplo:

Um email marketing de cosméticos, trás seis produtos no centro sendo um batom, uma sombra, um rímel, um lápis para olhos, um lápis par lábios e um blush, veja que todos os produtos no exemplo são para o rosto (onde um poderá complementar o outro), mas se a empresa também tem cosméticos para o corpo, poderá colocar ao fim desses seis produtos a chamada: “Não deixe de conferir também nossa linha de cosméticos para o corpo. Clique Aqui”, ou seja, dessa forma é chamada a atenção para duas linhas diferentes dentro de um email marketing sem contar uma história, sem agredir visualmente e sobrecarregar o email marketing.

Mas e se o publico for masculino?

Quando o alvo é um publico masculino, o email marketing deverá ser totalmente diferente, normalmente nós (homens) gostamos de menos variedade e mais informação e detalhes (características) do produto, portanto o email marketing deverá ter foco em um ou no máximo dois produtos.

Como seria então esse email marketing?

Ele tem que ter mais fotos do produto (quatro é um bom número), onde a disposição no centro do email marketing é o de colocar uma foto de um ângulo do produto e uma descrição curta, mais abaixo outra foto e uma descrição que complemente a anterior.

Por exemplo, suponhamos que saiu um notebook exclusivo para “gamers”, ele deveria vir uma foto do produto e algumas descrições como processador, memória, tela e duração da bateria, abaixo viria uma segunda foto (de cor diferente da primeira) que descreveria: “esse notebook tem nas cores vermelha, preta e branca”, em uma terceira foto pode ter algumas chamadas como: “preparado para agüentar todo tipo de jogo com placa gráfica de 1gb de memória” e na ultima foto viriam o preço e algo como: “somente por esse email frete grátis, vai perder essa?”, sendo acrescidos ou não de algo como: “Leve também: mochila para carregar seu notebook”, que seria uma chamada para um produto adicional.

Veja que a construção do email marketing é totalmente diferente da anterior (que tem o foco em publico feminino).

Ao construir um email marketing com essas características é possível que ele tenha maior sucesso.

3 – Itens obrigatórios: Ao criar um email marketing nunca deve se esquecer alguns itens obrigatórios e que devem constar em todo email marketing que é a opção de visualizar o email marketing corretamente caso aconteça do email marketing por quaisquer motivos não puder ser visualizado no email da pessoa e a opção para que o usuário deixe de receber o email marketing de forma fácil e simples (e não aquelas famosas mensagens: “Responda esse email com assunto remover” e que nunca resolvem efetivamente, essa opção tem que ser resolvida em um clique e sem o usuário precisar digitar seu email.

Desenvolvimento do email marketing:

… Continue lendo

0

Hacks para Internet Explorer, Firefox, Chrome

Como comentei no post anterior (anteriormente em…)

Hacks para navegadores

Hacks, em uma tradução mais coloquial podemos dizer que são as nossas tradicionais “gambiarras” (tenta explicar o que é essa palavra para um americano ou japonês). Portanto utilizar de gambiarras para fazer algo funcionar não é algo muito bom, entretanto alguns navegadores (leia Internet Explorer) “teimam” em renderizar os elementos em posições ou estruturas diferentes das que foram formatadas, devido à construção dos pixels e entendimento dos espaçamentos e posicionamento (principalmente).

Eu sou totalmente contra o uso de Hackes, pois acredito que possa ser possível criar formatações que funcione em todos os navegadores de forma uniforme, entretanto às vezes acontecem formatações inesperadas como “quebra” de um elemento ou em alguns casos (como já aconteceu comigo) o desaparecimento do elemento.

A primeira maneira de hack e talvez seja a melhor dentre os piores é o uso dos “Comentários condicionais”, onde é possível atribuir uma folha de estilos secundaria ao qual somente será incorporada caso o navegador seja da versão em que o comentário foi condicionado.

Como o navegador que costuma gerar mais problemas é o Internet Explorer, irei começar com ele:

Comentário condicional para IE6 e IE7:

IE 6:      

1
2
3
4
5
<!--[if <strong>lt</strong> IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->

IE 7:

1
2
3
4
5
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen">
<![endif]-->

Dica: lt = menor que(less than), lte = menor ou igual a(less than or equal too)

 

Ao adicionar essas linhas dentro da sua tag HEAD, os arquivos  ie6.css e ie7.css somente serão incorporados à sua página, caso o usuário esteja utilizando o Internet Explorer 6 ou Internet Explorer 7 (respectivamente aos arquivos).

Dentro desses arquivos é possível subscrever a formatação de um elemento, fazendo com que esse elemento no navegador X tenha um comportamento diferente.

Exemplos:

1
2
3
4
5
6
7
8
9
10
11
div#teste {
     width: 50px;
     height: 50px;
     background: #999999;
     margin-top: 5px;
}

Na demonstração acima tem um elemento de divisão (uma div) com as dimensões de 50 pixels de altura e 50 pixels de largura uma cor de fundo cinza e uma margem de 5 pixels no topo e supostamente essa margem no topo não corresponde de forma igual nos navegador IE 6 e IE 7, dessa forma basta ir nesse arquivos e adicionar o mesmo elemento:

1
div#teste { magin-top: 10px !important;  }

E adicionar uma nova margem ao mesmo elemento. O uso do “!important” ao contrário do que muitos afirmam que é um Hack, o “!important” não é um Hack, é dar aquela formatação uma importância maior do que qualquer outra formatação (inclusive formatação “inline” do elemento).

É necessário sempre o uso do “!important” nos arquivos de CSS direcionados para os navegadores?

Na verdade não, irá depender de como está à ordem de incorporação dos seus CSS. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen">
<![endif]-->

<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->

Nesse exemplo acima não será necessário o uso do “!important”, devido ao CSS padrão ser incorporado primeiro aos CSS de “Hack”, portanto, tudo que estiver no CSS de “Hack” irá sobrescrever os elementos.

Mas se fosse o contrário:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie/ie7.css" type="text/css" media="screen">
<![endif]-->

<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

Nesse segundo caso já seria necessário o uso do “!important”, pois o que estiver no CSS de “Hack” será sobrescrito pelo CSS padrão.
Também é possível adicionar um comentário condicional para incorporar um css para navegadores diferentes do Internet Explorer:

1
2
3
4
5
6
7
<![if !IE]>

<link href=”css/diferentes-ie.css” rel=”stylesheet” type=”text/css” />

<![endif]>

Dessa forma o css somente será incorporado se o navegador não for o Internet Explorer.

Outras formas de Hack:

… Continue lendo

0

Suporte ao Internet Explorer 6, ainda é necessário?

ie6
ie6

Após algum tempo sem escrever por falta de tempo, estou retornando e começo com um artigo polêmico: “IE6 nunca morre?”. Infelizmente para nossa infelicidade é verdade, o IE6 ainda está presente em quase 2% dos computadores de todo o Brasil com acesso a internet, esses são dados da própria Microsoft no site: http://www.ie6countdown.com/, que para quem não conhece, é um site que demonstra o quanto o ie6 ainda é utilizado no mundo, sendo que o ie6 já tem 10 anos (isso, você não leu errado, 10 anos) e ainda é “uma pedra no sapato” para nós desenvolvedores web.

                 E meus projetos ainda devem dar suporte ao ie6? Sinceramente preferiria dizer que não, entretanto haverá “casos e casos”, por exemplo, se o seu projeto ou o projeto de seu cliente não terá uma visibilidade (divulgação) nacional ou internacional, esse tipo de suporte se fará desnecessário, uma vez que a probabilidade de diversas pessoas utilizando o ie6 acessarem o projeto é pequena, mas se for o contrario, o projeto poderá precisar de maiores cuidados, inclusive eu já vi alguns projetos com mais de 60 mil visitas apenas por usuários de ie6.

E como dar esse tipo de manutenção? Vamos recorrer (sinceramente não gosto desse termo) as famosas “gambiarras” e tudo que nós (principalmente) brasileiros sabemos muito bem fazer (entenda isso como saber sobreviver as mais diversas condições, ou seja, desenvolver e criar sobre condições inimagináveis).

… Continue lendo