Atenção:
Esse post foi feito em 2009. Ele fazia sentido nessa época. Nesse tempo muitas mudanças aconteceram, tecnologias ficaram mais evidentes e recursos técnicos passaram a oferecer novas possibilidades. Alguns itens (e creio que em breve quase todos) dessa lista não tem mais utilidade ou não tem tanto quanto no ano que foi escrito, mas mantenho o post por documentar a época e a história do blog.

Depois do post “10 dicas pro webmaster não querer te matar“, que teve diversos picos de acesso e cada dia bate novo recorde pro blog, resolvi inverter o foco e ajudar o webmaster a não ser decapitado e exposto em praça pública pelo designer. São leves toques (PARA OS WEBMASTERS) que, junto com o outro post, ajudarão a manter o clima de designers x webmasters calmo, feliz e com aroma de rosas so campo. Vamos lá:

1. Alinhamentos

Não existem coisas quase alinhadas. Ou estão ou não estão, inclusive ele existe pra isso: tornar duas coisas exatamente na mesma linha. Não tente justificar com “Ah, mas são só 3 pixels” se o resultado final ficar com cara de amador. Claro, isso se aplica quando não bate de frente com o item “6. Desapego com a arte” da outra lista de dicas.

2. Cores

Muitas vezes, na hora de usar o conta-gotas do seu software favorito para pegar a cor de algum elemento, você pode pegar a “cor errada”, ainda mais quando os layouts são distribuídos em JPG compactado ou algo equivalente. Na maior parte das vezes ele cria “borrões”, principalmente próximo a letras e bordas de ilustrações. Caso você clique nesses borrões acidentalmente para identificar o hexadecimal da cor, pode ter resultados diferentes a cada uma das páginas do seu projeto. Veja no exemplo a seguir que fiz com uma das imagens do post “Pensar com tipos“, três cores diferentes, retiradas da mesma letra A:

3. Compactação de imagem

É bem interessante alinhar com o designer (caso ele não as entregue recortadas) como as imagens serão compactadas pra web, seja em JPG, GIF, PNG 8 ou 24. As vezes as existem muitas perdas de qualidade ou cores essenciais para o projeto.

4. Tipografia

Não, Arial não é igual Tahoma e tampouco com a Verdana. Times New Roman não tem nada a ver com a Georgia. Ok, ok, as vezes é complicado de identificar pra quem não é acostumado, então vale a pena certificar-se de qual das tipografias é utilizada no projeto. Uma família trocada pode causar bastante estranheza por parte de quem vê, mesmo que não tenha o olho treinado. Fica aquela sensação de letreiro preto com letrinhas amarelas de padaria, onde sempre tem fontes diferentes pra compor o “menu”. Perceba como as famílias são diferentes:

5. Entrelinhas e entreletras

Muito comum ser ajustada entre os designers gráfcos, muitas vezes esses dois recursos essenciais não são aplicados na web ou não seguidos pelos HTMLers à risca. Os projetos que precisam colocar mais texto em menos espaços, como portais de conteúdo ou notícias, podem usar uma redução no entreletras (no CSS, letter-spacing) e/ou no entrelinhas (line-height no CSS) para resolver esse problema. Fique atento nessas medidas pra não parecer que “tem texto demais e tá quebrando o layout”

6. – Deixa que eu faço, é só um botãozinho? – NÃO!

Sem radicalizar nada, mas é bem complicado inventar um botão, cor de algo ou posicionamento quando teve um cara que ficou cinco meses pensando e executando só isso. Essa dica não é relacionada ao apego com o produto e sim com a garantia de identidade posta à prova no site todo, desde decisões de estrutura para todo o layout até a cor do link do canto do rodapé. Se precisar criar algo, chegou a hora de trabalhar junto com seu amiguinho designer de novo! Ó que beleza! Pra você entender como é ruim uma pessoa não treinada inventar esses designices, seria como, depois de meses e meses de trabalho árduo e códigos lipíssimos e organizados, vir um designer infeliz e mexer em tudo via Dreamweaver, pelo modo layout. Entendeu? Dói, né?

Mais alguém tem dica aí? Ah, aproveita pra comentar e enviar pros amiguinhos codeiros que você conhece.

Atenção:
Esse post foi feito em 2009. Ele fazia sentido nessa época. Nesse tempo muitas mudanças aconteceram, tecnologias ficaram mais evidentes e recursos técnicos passaram a oferecer novas possibilidades. Alguns itens (e creio que em breve quase todos) dessa lista não tem mais utilidade ou não tem tanto quanto no ano que foi escrito, mas mantenho o post por documentar a época e a história do blog.

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:

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“