Na posição de designer e também (ex) webmaster, eu colecionei ao longo do tempo detalhes que tiram qualquer webmaster do sério e as vezes podem ser evitados. Esses dias um grande amigo (e webmaster) foi até a minha mesa para lamentar as derrapadas (e QUE derrapadas!) que o designer fez nos lays que ele estava codificando. Aí comecei a relembrar da minha “coleção de detalhes” que ajudaria ambos os lados, além de permitir que o projeto ganhe em desenvolvimento e performance, principalmente em sites de conteúdo editorial. Aí vão os “10 mandamentos do webmaster feliz”, baseados em lays que virarão páginas HTML:

1. Cantos arredondados

O Firefox, Safari e Opera já tem interpretação para comandos CSS que fazem isso de modo bem simples, mas o Internet Explorer (até a versão 8 do navegador) não lê isso nem com reza, o que exige ser feito com imagem. Se todos os boxes nesse formato forem do mesmo tamanho até que não causa tanto problema. Entretanto se o “box” precisar aumentar e diminuir de acordo com a quantidade de texto/imagens de dentro, são necessárias várias imagens, o que gera mais requests de servidor e mais linhas de código para serem executadas. Se o projeto não perder TAAAANTO assim com cantos retos, dê preferência a eles.

2. Degradês

Os lineares horizontais e os verticais, tudo bem. Radial, cônico ou lineares em diagonal podem te custar um dente ou um nariz quebrado. A revolta se dá porque não existe código pra isso e o uso de imagens, muitas vezes desnecessárias, é necessário.

3. Drop shadow/Outer e inner glow

Além de qualidade visual duvidosa/forçada as sombras que são tão fáceis de serem feitas no Photoshop podem requerer linhas e linhas de código e diversas imagens para confeccioná-las. Se atrás desse elemento tiver uma textura ou cores diferentes, mais problemas ainda pela frente: As imagens transparentes (em PNG24 no Photoshop ou PNG32 no Fireworks) são mais pesadas e indigestas (pelo Internet Explorer 6) do que as opacas. Do mesmo modo das sombras “dropadas”, não existe glow em CSS. Tudo bem se ficar sem?

4. Tipografia no Photoshop x Tipografia no navegador

Os diversos tipos de suavização de texto no Photoshop nunca casam direitinho com o jeito que os browsers renderizam as páginas (as vezes tem até diferenças entre os browsers na renderização). Eu gosto de usar o “sharp” ou até o “none”, depdendendo do público alvo/browser mais utilizado do projeto.

5. Mapa de estilos

O sujeito que vai codificar a sua página não tem o olho treinado como o seu para identificar entrelinhas ou entreletras diferentes, tamanhos de fontes que mudam 1 ou 2 pixels nem as distâncias certinhas dos elementos do seu projeto digital. Criar uma imagem em GIF, JPG ou PNG com um mapa de estilos de todas as páginas ajuda o webmaster, otimiza o projeto e não te dá dores de cabeça póstumas, já que todas as medidas foram explicadas direitinho. Isso vale pra tudo: Dimensão das imagens, corpos de texto, títulos, links com e sem mouseover etc. Ah, também é legal alinhar as medidas do Photoshop com o webmaster (Edit, Preferences, Units & Rulers). Eu sempre uso em pixels. Um exemplo de elemento numa folha de estilos:

Exemplo de mapa de estilos

6. Desapego com a “arte”

Sei que os alinhamentos, posicionamentos e tudo mais são extremamente importantes, só que as vezes dá pra abrir mão de 2 ou 3 pixels (quando não ficam com aparência de falta de acabamento) num final de página ou numa diferencinha no crossbrowsing, não dá?

7. Transparências

Imagens transparentes com boa qualidade geralmente são em PNG24 (ou 32, no Fireworks). São mais pesadas e precisam de scripts pra funcionar no Internet Exploerer 6. Se remover a transparência não for tão grave quanto espancar a carinha angelical da sua filha de 6 anos, poupe o trabalho do webmaster e o peso do seu projeto. Boxes com contorno e preferencialmente de uma cor só pra cada podem ser feitos com CSS, levinho e feliz.

8. Grids

Especifique os grids do seu projeto e passe as medidas pro webmaster. Evite usar muitas variações de grid ao longo do site e delimite sempre o espaço do topo, mídias e rodapé. Cuidados especiais merecem as imagens com “anti alias”, pois elas as vezes aumentam um pixelzinho aqui ou acolá e a gente não percebe, mas na hora de recortar pode causar um desalinhamento ou até estrago de “quebrar a página”, principalmente quando as medidas estão bem justas.

9. JPG, GIF e PNG

Se você não quiser ter surpresas com a falta de cores de um GIF ou de um imagem granulada pela compactação de um JPG que deveria ser PNG, por exemplo, vale especificar o formato de saída que as imagens devem ter.

10. Aprenda HTML e CSS

Calma! Calma! Pô, que mancada xingar minha família! Eu sei que você odeia programar, mas nenhum desses dois é programação, só uma marcação, uma codificação. Não espero que você saia produzindo páginas e páginas, mas saber as dificuldades e limitações de ambas podem poupar retrabalhos e aumentar a produtividade entre designers e webmasters.

Evidente que nada disso eu acredito ser REGRA, apenas dicas. Você acha mesmo que existirão projetos que sombra e inner glow num box transparente com preenchimento degradê radial sejam necessários? Quero dizer… Se um dia você precisar disso tudo mesmo, pense com carinho se não tem algo errado com a sua vida. De qualquer modo, acredito que dependendo do projeto você designer possa abrir mão de alguma coisinha pra ajudar nossos amigos webmasters e espero que eles façam o mesmo.
Mas e você amigo webmaster e amigo designer? Tem mais dicas pra compartilhar? Então documenta isso nos comentários, vai?! :)
Leia também o post póstumo “6 dicas para o webmaster não ser morto pelo designer“