HTML e CSS para e-mails

A produção de html/css para e-mails não é nada trivial e a situação é ainda pior para quem já começou na vida de desenvolvimento para web mexendo com tableless. A tag <style>, por exemplo, não é suportada pelo gmail nem no <head> nem no <body>. Daí já dá pra perceber que o jeito é utilizar todos os estilos inline (usando o atributo “style” dentro de cada tag html).

Outro problema grave: o Outlook 2007 não suporta “float” nem “position” o que nos obriga a diagramar os elementos do jeito antigo, isto é, com tabelas. Outra restrição importante fica com o “background-image” que não é suportado nem pelo gmail nem pelo Outlook 2007, o que nos obriga a usar (argh!) o atributo “background” que não é mais utilizado para o desenvolvimento “normal”.

Resumo da ópera, para que a newsletter que o cliente pediu seja visualizada da forma certa você vai ter que:

  1. Diagramar o html com tabelas;
  2. Escrever todos os estilos em linha e
  3. Utilizar o atributo html (não é o css não hein!) “background”.

No campaign monitor tem uma lista (atualizada hoje por sinal) de todos os atributos suportados pelos diferentes clientes de e-mail, tanto desktop quanto web e mobile.

Estudo do layout gera CSS enxuto e bem feito

Muitas são as formas de começar o desenvolvimento do CSS de um site. Alguns vão fazendo junto com o (X)HTML e outros só depois dele pronto. Este artigo é um complemento à essas abordagens. Aqui você vai entender que é possível adiantar boa parte do CSS antes mesmo do HTML estar pronto.

Com os layouts em mãos você deve identificar tudo o que há de igual. Não tenha medo de perder muito tempo nesta parte, porque perdendo muito tempo aqui você economizará codificando. Existe sempre uma box com títulos na mesma fonte, com mesmo bullet? Os títulos das páginas são iguais? Qual é a fonte predominante do site? Bons designers pensam em layouts estruturados e cabe a você identificar esta estrutura, sendo ideal contar com a colaboração do próprio designer.

Os métodos e os passos podem variar, mas um caminho geral é o seguinte:

  1. Identificar o que é padrão ou pelo menos mais usado no site todo. Fonte predominante (font-family, font-size, color, etc.) podem ser atribuídos já ao body, poupando o trabalho de declarar tudo novamente pra cada elemento filho. É hora de averiguar se um elemento, por exemplo, a maioria dos links do site, também segue um padrão . Especificidades são facilmente sobrescritas, portanto pode ficar tranquilo.
  2. Identificar as áreas do site. Se, por exemplo, o site tem um cabeçalho, uma lateral esquerda e uma região de conteúdo faça o mesmo exercício do passo anterior pra cada uma delas.
  3. Elementos mais isolados. Se existe um certo tipo de box usado em várias áreas diferentes, mas que sempre segue um mesmo padrão é hora de identificá-lo. Veja também cada elemento da box, como título, listas, parágrafos, formulários, etc.
  4. Desempate. Se um elemento é usado de uma forma em duas das três áreas do site esse é o padrão. A forma como ele é usado na terceira área é exceção e, portanto, deve ser declarada separadamente.
  5. Igualdades. Se elemenos diferentes usam o mesmo estilo use vírgulas e declare os formatos uma vez só. Use declarações separadas só para as diferenças.

No primeiro momento é mais proveitoso nem declarar os atributos. Vá colocando no css apenas as chamadas. Exemplo:body {}
a {}
a:hover {}
div#header {}
div#header a {}
div#sidebar-left {}
div#sidebar-left a {}
div#sidebar-left p {}
div#sidebar-left form {}
div.box {}
div.box h2 {}
div.box p {}

Repare que neste momento você já decidiu alguns ids e classes, de acordo com o levantamento feito anteriormente. Na hora de montar o (x)html é só usar os ids e classes certas nos lugares pré-estabelecidos.

Fazendo o css desta forma, do mais abrangente ao mais específico (enfim, do jeito certo), você ganha em manutenção, em velocidade de codificação e em tamanho de arquivo.

PNG no IE 6 – Entenda como o problema é resolvido

ATENÇÃO: Para verificar a renderização do png no IE 6 use o próprio Internet Explorer 6 e não o Multiple IE (que por sinal não recomendo pra mais ninguém). Se não tiver acesso a um computador com esse browser é possível testar através do uso de uma máquina virtual.

O formato de arquivos PNG surgiu para substituir o limitado formato GIF, diferindo deste no suporte a canal alfa, no maior número de cores e na alta compressão possível. Por outro lado o Internet Explorer 6, navegador xing-ling ainda muito usado, não dá suporte nativo à transparência do PNG, mas é possível contornar esse problema com uma propriedade CSS.

Não vou publicar nenhuma solução aqui, mas explicar como todas elas funcionam (sim, elas funcionam da mesma forma). Para que a imagem fique transparente você deve sumir com a imagem em si e exibi-la somente com a propriedade filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<caminho_da_imagem>', sizingMethod='image');.

Você pode fazer isso com javascript, com comentários condicionais, com a propriedade CSS behavior ou com uma combinação de todas elas. Aqui no Melancia a logo do cabeçalho é um png e para que ela ficasse do jeito que está usei uma combinação de comentários condicionais e CSS. A imagem está dentro de um span que só existe nos IE < 7, por causa dos comentários condicionais – veja o código-fonte para entender melhor – e nesses navegadores (argh!) a imagem de dentro não é renderizada (display:none) e o span assume sua função.

Para uma solução mais genérica o uso do javascript é mais recomendado, até porque não afeta tanto a acessibilidade. E quer saber do que mais: está mais do que na hora do IE6 começar a sumir.

Para uma solução copy/paste esse site parece muito bom. A do behavior desse site é bem legal também.

Agradeço ao meu grande amigo/irmão Israel Teixeira pela sugestão de tema!

Dica CSS rápida para centralizar horizontalmente o layout

Post para alavancar minhas visitas. Sei que vai ter um montão de gente batendo aqui procurando por isso (liga risada maléfica)Muahuahua(desliga risada maléfica).

Uma das dúvidas mais populares de quem está começando a mexer com html e css é como centralizar seu layout. Existem muitas formas de fazer isso – algumas boas e outras nem tanto.

Começo pela melhor (a que eu uso e passo para quem trabalha comigo):

Width 100% no HTML body + margin 0 auto e clear both na div que envolve todo mundo

fica assim:

HTML, body {
width: 100%;
}
div#geral {
clear: both;
margin: 0 auto;
width: 775px; /* Não esqueça desse tamanho aqui */
}

A largura obviamente varia conforme a sua necessidade.

outra boa também é:

text-align no body e na div que envolve todo mundo

o código:

body {
text-align: center; /* Isso aqui é pro IE*/
}
div#geral {
margin: 0 auto;
text-align: left;
}

Uma que não recomendo usar, mas que tem um conceito útil para outras coisas é:

Position absolute com margin negativa da metade

Uma breve explicação: você coloca o layout começando no meio e “volta” com ele a metade do seu tamanho para que ele fique centralizado. Para layouts com largura de 770px, por exemplo, deve-se dar uma margem negativa de 385px.

O código:

div#geral {
position: absolute;
top:0;
left: 50%;
margin-left: -385px;
}

O princípio para centralizar verticalmente é o mesmo – 50% no top e “volta” com o layout pra cima com margin-top negativa, mas será que alguém ainda centraliza layout verticalmente?

Uma observação: onde tem div#geral você substitui com div#<id_da_div_que_envolve_tudo>.

Reli e faltou uma: a tag center. Simplesmente finja que não existe. É melhor.

Abraços!

Aprendendo XHTML e CSS – Um começo

Depois de tomar uma surra do TinyMCE no drupal 6 (faltava um patch para que a opção de desabilitar o rich-text aparecesse) estou postando de novo.

Um dos objetivos da criação do blog é poder passar dicas que gostaria de ter recebido no começo da minha vida de desenvolvedor web. Pra começar nessa carreira você precisa aprender HTML (direito, sem tabelas – só onde é necessário), depois CSS, Javascript (que não tem nada a ver com Java, por favor…), e alguma(s) linguagens de servidor (PHP, ASP, Java, etc).

No começo nada é fácil, você esbarra em expressões e conceitos que nunca viu e que logo de cara percebe que são importantes (SEO ou otimização para busca, validações da W3C, por exemplo) e vem aquela sensação de estar nadando num oceano, mas assim é a vida.

É possível ganhar dinheiro e se destacar na internet fazendo bem as coisas simples que as pessoas fazem de qualquer maneira e, por isso e para isso, é bom ter uma base de conhecimento bem sólida. Conhecimentos de (X)HTML e CSS nunca serão completos, sempre vem alguma coisa nova, uma combinação de coisas que dão um resultado que você precise ou ainda alguma maneira de fazer as coisas funcionarem no IE (acostume-se com isso: as coisas nem sempre funcionam bem no Internet Explorer – principalmente no 6).

Pra começar indico aqui um exercício simples proposto pela Visie nos seus cursos (foi postado no Tableless).

Ah! Uma observação: nos comentários o pessoal fez uma confusão sobre pagar ou não pagar para ver o exercício. É só se cadastrar (grátis) e acessar.

Bons estudos!