HTML

Listagem horizontal onde os itens de lista vão ficar sempre com tamanho igual (se baseando na altura do maior dos itens): utilizando somente HTML e CSS.

Seria uma listagem no modelo da Americanas.com e Submarino – Porém quando verifiquei o código desses sites vi que não era o ideal, pois utilizam um monte de ULs separadas para cada linha: sendo que deveria ser somente 1.

Pontos positivos – Lista com Display Inline-block

• Todos itens da linha se adaptam ao tamanho do maior;
• Sem float: sem preoupações com clear, contemfloat, etc;
• Possível listar tudo utilizando somente uma UL;

Pontos negativos – Suporte

• Hack para IE6;
• Hack/script para IE7;

Veja o exemplo de como vai ficar: Listagem horizontal com itens de mesma altura.

Código HTML

Somente uma listagem UL com items LI contendo uma imagem e um parágrafo.

  <!-- abre listagem -->
    <ul>
      <li>
        <img src="imagens/listagem-item1.jpg" alt="Quadro em aquarela 1" />
        <p>Quadro em Aquarela 60x60px. Pode ser comprado em até <strong>6x no cartão</strong> ou à vista com desconto de <strong>50%</strong> - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item2.jpg" alt="Quadro em aquarela 2" />
        <p>Esse item é uma obra de arte fantástica em Aquarela 60x60px - por Kasper Jeppesen, 2010</p>
      </li>
      <li>
        <img src="imagens/listagem-item3.jpg" alt="Quadro em aquarela 3" />
        <p>Obra em Aquarela</p>
      </li>
    </ul>
    <!-- fecha listagem -->

E o CSS:

  #limites ul { list-style: none; letter-spacing: -3px;}
  #limites ul li { display: inline-block; width: 100px; margin: 10px 0; padding: 20px; border-top: 1px #fff solid; text-align: center; vertical-align: top; letter-spacing: normal; zoom: 1; }
  #limites ul li p { text-align: left; }

• Letter-spacing com valor negativo na UL, pois o display insere automaticamente alguns pixels de margem entre os elementos. Esse valor é zerado novamente no LI (normal).
• Todos itens se alinham ao topo
• Paddings com a borda simulam a união dos elementos

Se for testar nos IEs até agora, vai encontrar um BUG como esse:

Quebra de layout nos IEs

O quadro vermelho indica a quebra, pois esses navegadores não suportam o DISPLAY inline-block corretamente.

Não se preocupe – para concertar isso é só usar um hack para o IE6:

  * html #limites ul li { display: inline; }

E um ajuste para o IE7 – em um CSS separado (se não lembra como fazer, é bom dar uma lida em Conditional comments para Internet Explorer:

  #limites ul li { display: inline; }

Pronto.
Temos uma lista semanticamente correta onde cada linha se adapta ao conteúdo do maior elemento.

Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

Sei que email marketing não tem muita ligação com Web Standards, mas todo mundo precisa saber que já existem projetos relacionados e também serve como um guia para produzir esse tipo de material.

Quais são os limites do email marketing utilizando HTML? O que podemos colocar de CSS também, levando em conta algo que funcione nos programas desktops e também nos webservices?

CSS

Pode ser utilizada a tag “style” no head ou no body (só não funciona no AOL MAC, Note 6, Gmail e Hotmail). Mas como no GMail isso não funciona, a dica é usar style inline. Como o Notes 6 tem um suporte mínimo, não levei ele em conta ok?

Propriedades CSS válidas para todos*:

• Background-color:
• Border;
• Border-collapse;
• Color;
• Display, Float e Height(só não funciona no Outlook 07);
• Font-family (não funciona no Gmail);
• Font-size;
• Font-style;
• Font-weight;
• Line height;
• Table-layout;
• Text-align;
• Text-decoration;
• Text-indent;
• Text-transform;
• Letter-spacing;
• Padding;

* Todos testados (Yahoo antigo/novo, Gmail antigo/novo, Live Mail, Hotmail, AOL Web, MobileMe.) / (Outlook (2003 e 07), Windows Mail, Mac Mail, Entourage (2004, 2008), Thunder-bird 2, AOL (9, 10), Mac).

Existem pessoas focadas nos webstandards para os emails: os chamados e-mail standards. Eles mostram screenshots de cada browser como resultados de seus testes, além de dizer o que falta para cada Email Client ficar show para suportar os standars. Ex.: Para o Google Mail ainda é necessário suportar o CSS no header, e não utilizar mais a técnica inline.

Estrutura HTML / CSS

Resumindo: Como construir um e-mail marketing utilizando pelo menos um pouco de webstandards?

• A estrutura deve ser em tabelas;
• Utilizar as propriedades que todos os emails clients aceitem (ou pelo menos a maioria deles);
• CSS inline (apesar de não ser standard, é o que podemos usar);
• Layout com largura fixa até 580px e a altura pode ser variável (dependendo do layout).
• Mesmo com todos os cuidados, é possível que o usuário veja a mensagem desconfigurada. Por isso um link do tipo “se você está vendo o email desconfigurado, acesse a outra versão.”

HTML: tags que devemos evitar

Tags HTML que não devem ser utilizadas, por não serem suportadas por muitos clientes de email: (segundo um HTML Email Guide que li).

• DOCTYPE
• HTML tag
• BODY tag
• Meta tags
• Head tag
• Base tag
• Link tag
• Script tag
• Title tag
• Applet tag
• Frameset tag
• Frame tag
• IFrame tag
• Comments

Template de E-mail Marketing HTML, utilizando o que falei nesse post. *No topo a mensagem para visualizar o outro formato do email, evitei usar o “clique aqui” por ser termos que são buscados para codificar como Spam.

. Esse template foi testado no GMail, Hotmail, YahooMail e no ThunderBird.

Se você tem dúvidas em quais clientes testar, pode dar preferência aos clientes que mais cresceram em 2009: iPhone, Apple Mail, Hotmail e Gmail – (fonte).

Link relacionado/fonte: Campaing Monitor.

Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

Quer saber como inserir vídeos do YouTube em seu site, mantendo seu código validado? Veja abaixo o código para fazer isso de maneira simples:

<!--[if !IE]> -->
              <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/id-do-video" width="425" height="344">
            <!-- <![endif]-->
            <!--[if IE]>
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="425" height="344">
              <param name="movie" value="http://www.youtube.com/v/id-do-video" />
              <!--><!--dgx-->
              <param name="loop" value="true" />
              <param name="menu" value="false" />
              <p>Seu navegador não suporta o vídeo.</p>
              </object>
<!-- <![endif]-->

Bom, como pode-se perceber, é só substituir o “id-do-video” pelo próprio id do vídeo, localizado na URL do mesmo. Simples, não é?

Porque utilizar botões expansíveis:

• Reduz número de arquivos;
• Reduz arquivos a serem baixados pelo usuário;
• Carregamento da página mais rápido;
• Reduz classes no HTML / linhas de CSS;
• Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Convencido disto, aprenda como fazer:

1. Criar a imagem do botão:
2. Dividir a imagem em 2 partes:
   • O botão será formado por duas peças: o lado esquerdo, e o direito.

   • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

     

     Botão expansível CSS - Passo 1

     Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

   • Selecione o lado direito
   • Abra um novo arquivo (só para ele)
   • Coloque a borda de um lado da imagem (cole no canto direito)
   • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
   • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
     
     

     Photoshop Redimensionamento

   • Salve como: botao_direito.png

3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

         <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
       

   - Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

4. Código CSS*:

         .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
         .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
       

Quem usa os botões expansíveis (HTML + CSS)?

• Construtora Tecnisa: ex.: botão de busca no topo.
• Porto Seguro: os botões verdes no meio do conteúdo.

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS

Para usar o atributo target="_blank" para que links abram em uma nova janela sem usar window.open() e ainda ter seu XHTML Strict válido, basta incluir o seguinte trecho de código no cabeçalho da sua página:

window.onload = function() {
  var links = document.links;
  for (var i = 0, s = links.length; i < s; i++) {
    if (links[i].rel == 'external') {
      links[i].target = '_blank';
    }
  }
};

Usando jQuery, o trecho de código que deve ser incluído é bem menor:

$(document).ready(function() {
  $('a[rel=external]').attr('target', '_blank');
});

Após usar este script, basta incluir o atributo rel="external" em seus links para que estes abram em nova janela:

<a href="http://www.webstandards.blog.br/" title="Melhor blog sobre Web Standards" rel="external">Blog Web Standards</a>

Obs: este script foi escrito por Gustavo Straube.

A renderização correta pelos navegadores depende, inicialmente, do DOCTYPE definido no início dos códigos HTML. Portanto é bem importante conhecermos as variações que podemos usar, de acordo com as necessidades impostas pelo projeto em questão:

HTML 4 STRICT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 TRANSITIONAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.1 STRICT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Gostaria de padronizar seus documentos HTML? Uma boa forma de começar seu código é com o nosso exemplo utilizado pela equipe, ao início de todos os projetos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="Carlos Eduardo de Souza" />
  <title></title>
  <link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>

Se o site precisar de uma versão específica para impressão, é só adicionar esta linha logo abaixo do CSS normal:

  <link href="css/estilo_print.css" rel="stylesheet" type="text/css" media="print" />

* Não usamos mais conditional comments para o Internet Explorer 7, salvo os casos em que seja realmente necessário.