neyRicardo

Quem mexe com diagramação, principalmente de revistas, jornais e impressos em geral, sabe a importância de se usar um grid. O trabalho fica com uma aparência mais organizada e harmônica.

Não vou me aprofundar nesse assunto não quero demorar muito nessa história, mas em essência um bom grid é regular, ou seja, todas as linhas do têm a mesma altura, assim como todas as colunas têm a mesma largura. E nesse espaço você dispõe o conteúdo de forma que o mesmo respeite as delimitações de espaço definidas pelo grid.

Pensando nisso, o web designer Nathan Smith desenvolveu um framework em CSS chamado 960 Grid System, que nos possibilita economizar tempo escrevendo menos código. Não vou explicar como funciona, para isso basta ir ao site do grid ao site e dar uma lida.

Já o utilizei algumas vezes e fiquei satisfeito com o resultado, mas confesso que tive que fazer algumas gambiarras pois o grid é um tanto inflexível. Em compensação muitos problemas dos diferentes browsers são prevenidos direto no código.

No pacote está incluso ainda um CSS de reset que, aliás, é o mesmo que eu citei no post anterior.

Em geral o grid realmente economiza código, mas não é definitivo, quero testar outros frameworks pra ver qual é mais útil e, quem sabe, desenvolver meu próprio grid se necessário.

Visão Geral: HTML mais limpo e padronizado, menos linhas de CSS pra escrever, menos tempo de código, limitações no layout.

Hoje, em uma conversa com meu ex colega de trabalho, Renan Teles, que comentou que gosta de ver dicas de desenvolvimento web aqui no blog, em especial técnicas de programação tableless.

Coincidentemente eu já vinha pensando em escrever algo sobre um assunto conhecido por poucos programadores e usado por menos desenvolvedores ainda: é o CSS Reset. Meu ex chefe, Carlos Gustavo (também conhecido como B1), foi quem me apresentou ao conceito, mas eu ainda não tinha tido tempo de estudar sobre o assunto e não utilizava. Depois, com mais tempo fui analizando e acabei montando um “pacote” que incluo em todos os sites que desenvolvo antes de começar a escrever os estilos.

Um CSS Reset é um documento CSS que pré define o comportamento e as propriedades de todos os elementos HTML a fim de que todos sejam renderizados de acordo com um só padrão, ao invés de deixá-los à mercê dos diferentes browsers.

A vantagem de ter um documento que ‘reseta’ todos os elementos é que você terá todos os objetos HTML se comportando da mesma forma em todos os browsers (ou pelo menos deveria). É como se todos os objetos fossem ‘zerados’ e estivessem prontos para receber suas instruções sobre como devem se comportar dali pra frente.

Consequentemente, você não precisa escrever tantos hacks pra ficar corrigindo akeles elementos rebeldes que aparecem de uma forma no IE e de outra no Firofox, por exemplo.

Agora vou me aprofundar e falar sobre este pacote que eu preparei e no final tem um link pra download do mesmo.

(Leia mais)

Isso foi o que Rachel Andrew, uma colunista britânica do site Digital Web Magazine “cuspiu” (acho que o melhor termo seria “vomitou”, ou daí pra baixo…) em seu artigo Everything You Know About CSS Is Wrong para o site.

(Leia mais)

Quem trabalha com Tableless sabe que nãoé tão complicado fazer um site inteiro sem usar tabelas, os problemas começam quando o seu código precisa ser Cross-browser, ou seja, seu site deve ser renderizado igualzinho (ou pelo menos com a mesma aparência) em vários browsers diferentes.

Pois bem, estava eu hoje a converter um layout quando me dei conta que estava com 6 (seis) browsers diferentes abertos:

• Internet Explorer 6
• Internet Explorer 7
• Mozilla Firefox 3
• Google Chrome
• Apple Safari 3.1 (Windows)
• Opera 9.5

Aí você pára e se pergunta: “Pra quê?!”.

E eu respondo: “Pra nada…”. Exatamente… PRA NADA!!!

Quem observa as estatísticas do Google Analytics dos sites que fez, vai perceber que menos de 10% dos usuários Windows usam o Safari, o Opera e o Chrome (provavelmente é você mesmo em um daqueles testes e revisões do layout recortado).

Outro detalhe: Quem é que testa o site no OS X e Linux?

Vamos fazer uma conta rápida: São 6 os browsers principais no Windows citados anteriormente, somados com o Safari, Firefox e Camino no Mac, no Linux temos o Firefox e o Conqueror (nem adianta tentar contar as distribuições de Linux, né? Vamos ficar só com os dois mesmo). Juntando tudo temos 11 browsers diferentes pra testar.

Mas como eu não testo em OS X e Linux, Vou reduzir a minha lista pra 3 browsers: IE6 (esse é o mais chatinho), IE7 e Firefox 3. Se você consegue fazer com que seu site tenha a mesma aparência sem bugs nestes 3 browsers a probabilidade de ficar com a mesma aparência em outros browsers é grande, então você só precisa dar uma navegada no final pra ver se tem algum bug que atrapalhe a visualização do site. Não que os outros sejam menos importantes. E não esqueça de dar uma olhada no Analytics pra conhecer os tipos de usuários que visualizam seu produto final.