Na última edição da Campus Party, fiquei encarregado de abrir as atividades na área de design com a palestra sobre Padrões Web.
Após a palestra, e depois de bater papo com muita gente por lá, cheguei a triste conclusão de que muitos profissionais ainda desconhecem os Padrões Web, e desenvolvem sites a moda antiga (usando tabelas para diagramar o layout).
Para contribuir na mudança desse quadro, este artigo é o primeiro de uma série sobre web standards ao qual estarei escrevendo. E para ter certeza de que vou ajudar a esclarecer as dúvidas sobre esse assunto, deixo aberto o espaço para a sugestão de temas para os próximos artigos.
Resistência aos Padrões Web, ou amor as tabelas?
Pior do que perceber que ainda hoje muitas pessoas desconhecem os Padrões Web e suas vantagens, é perceber que existem pessoas que conhecem, porém resistem a elas, com argumentos (sem fundamentos) de que desenvolver sites com o uso de tabelas para diagramar o layout é melhor e mais produtivo.
Esses dias andou pipocando pelas listas de discussão um artigo chamado Why CSS should not be used for layout, escrito por um tal de Ron Garret, no qual ele tenta justificar que o CSS não serve para diagramar layouts, e afirma que o uso de tabelas é melhor para tal finalidade.
Essa forma de pensar mostra que muitas pessoas têm a visão equivocada de considerar o design como mera produção estética, e desconsideram a concepção de projeto. Como escrevi em outro artigo, além da questão estética, o design engloba a criação de um produto funcional, usável, eficiente e economicamente viável.
Uma estrutura de informação, como documentos escritos em HTML ou XML, deve conter apenas marcações com devido significado (semântica). Adicionar marcações sem significado em um site pode ser comparado a adicionar diversas páginas em branco a um livro: aumentaria inutilmente o tamanho do mesmo, e não teriam sentido algum para o leitor. É justamente isso que acontece com o uso das tabelas para diagramar o layout.
Podemos dizer que o HTML não é uma linguagem de marcação verdadeira, pois sua sintaxe prevê (limitadas) marcações para formatação. Uma linguagem de marcação deve apenas estruturar a informação (como o XHTML), enquanto a apresentação deve vir de um documento específico (CSS).
A maior dificuldade no uso do CSS para diagramação das páginas vem da incapacidade dos navegadores, não só no suporte a linguagem, como na padronização do efeito renderizado. O IE6 suporta apenas 51% das propriedades do CSS 2.1, o IE7 apenas 56%, o Firefox 2 suporta 91%. O IE6, que ainda é o navegador mais usado, também suporta apenas 73% do HTML/XHTML, 50% do DOM e 10% do CSS 3. Mais informações sobre essas estatísticas podem ser vistas em http://www.webdevout.net/browser-support).
O CSS não é perfeito, as empresas que desenvolvem os navegadores não colaboram no suporte, e a W3C não é nenhum exemplo de discussões promissoras em prol a padronização. Lembrando que a W3C não se resume apenas aquele tiozinho carismático de ideais livres que inventou a web, mas de diversas empresas com interesses não tão nobres (quem chegou a acompanhar discussões sobre o uso dos codecs Ogg Vorbis e o Ogg Theora como padrão nos navegadores, para o uso da nova tag <video></video> no HTML5, sabe do que eu estou falando).
A vantagem do uso de Padrões Web
Recortar um layout em softwares como o Fireworks, e exportar diretamente para HTML com tabelas pode parecer fácil e rápido. Porém o código gerado torna-se incompreensível, sem uma sequência lógica da informação ou significado, além de ser muito maior que o necessário.
O uso dos Padrões Web propicia um melhor custo-benefício. As vantagens do uso de padrões e da separação das camadas de conteúdo (HTML), apresentação (CSS) e comportamento (Javascript) são evidentes:
- Com arquivos menores e as camadas de apresentação (CSS) e comportamento (Javascript) no cachê do navegador, teremos um carregamento mais rápido das páginas, além de menores custos de hospedagem.
- Com a formatação de todas as páginas baseadas num mesmo arquivo CSS, teremos uma melhor consistência visual, e possibilidades de manutenção e redesign mais baratos e eficientes.
- Com marcações mais semânticas (usadas com seu devido significado) e com as informações do documento estruturadas em uma sequência lógica, teremos melhores resultado nos mecanismos de buscas, além de melhor acessibilidade e interoperabilidade entre diferentes dispositivos.
Exemplos práticos dessas vantagens:
- A Legal & General, uma das primeiras empresas a aplicar em seu site as “Diretivas para acessibilidade Web” (Web Content Accessibility Guidelines) da W3C, e os resultados foram que as taxas de conversão aumentaram 300%, custos de manutenção caíram 66%, listagem natural nas buscas aumentou 50% e o carregamento das páginas ficou 75% mais rápido (fonte: RevistaW).
- A ESPN, quando migrou seu site para os Padrões Web, reduziu cerca de 50Kb em cada página, economizando 2 Terabytes de banda por dia (fonte: Mike Davidson).
Quanto a beleza dos sites feitos com CSS, é indiscultivel que as possibilidades são enormes, e muito mais eficiêntes que a formatação possibilitada com o uso de tabelas no HTML. Exemplos disso podem ser vistos na galeria CSS Zen Garden ou em sites como o Web Leed Design.
Se os Padrões Web ainda não são o ideal, é o que de melhor temos hoje para o desenvolvimento de páginas para a web. Linguagens como o CSS tem sempre mil possibilidades. A limitação está no desenvolvedor.
