Artigo inicialmente escrito como linha geral para palestra que dei na UNIP (SP) em 06/10/03 durante a ECO, revisado com atualizações mínimas em 9 de julho de 2006 para ser publicado na nova versão deste site, o carolina.vigna

Por que CSS, tableless e traquitanas similares?

3,45 milhões de conexões de banda larga no Brasil. (IDC, jan/06) 627 milhões de pessoas (10% da população mundial) já compraram pela web. (ACNielsen, nov/05) 19 horas por dia é a média brasileira de navegação residencial. (Ibope//NetRatings, mai/06) 19,9 milhões moram em residências com pelo menos um computador com acesso à web. (Ibope//NetRatings, dez/05) 12,2 milhões de pessoas utilizam a internet em casa no Brasil (Ibope//NetRatings, dez/05) 4,7 milhões de brasileiros já fizeram pelo menos uma compra pela internet (e-bit – fev/06) 72,9% dos usuários do Orkut são brasileiros (Orkut – jan/06) 17,2 milhões de brasileiros navegam diariamente (Ibope//NetRatings – nov/05) 6,5 bilhões de pessoas acessam a internet em todo o mundo (Internet World Stats – dez/05)

Hoje temos mais de 20 milhões de internautas brasileiros. Aproximadamente 1/6 destas pessoas possuem acesso à banda larga. Nem todos possuem o mesmo conhecimento das ferramentas disponíveis no mercado. Nem todos falam inglês. Nem todos possuem a mesma compreensão de símbolos e signos. Nem todos usam os programas da Microsoft®. Nem todos possuem placas de vídeo potentes. Nem todos estão com tempo. Todos precisam ter acesso à informação.

Ah, o seu público é “AAA” e tem banda larga e então você acha que não precisa criar um design voltado para acessibilidade? Certo… O seu público é o primeiro a querer usar internet em um palm ou no celular. E o seu visitante, rico ou pobre, vai querer ter acesso à informação no seu site com a mesma facilidade em um 286, em um G5 ou em um celular. Não importa para quem você julga que o seu site se destina. O que importa é que esta pessoa consiga te achar. E, para isto, os mecanismos de busca precisam te encontrar. O seu site pode ser encontrado e lido com facilidade usando tabelas, imagens, animações e até mesmo Flash. Para isso, basta se preocupar com SEO (Search Engine Optimization) e colocar uma informação textual no seu site. Esta informação textual pode perfeitamente coexistir com qualquer outro tipo de informação que você queira. A maneira mais fácil de fazer isso é usar XHTML mas existem muitas outras. A tendência é que isso fique cada vez mais fácil de fazer. O que muda é a forma de pensar a web. A questão da acessibilidade é muito mais filosófica do que técnica. Com meia dúzia de sites de referência ou uns poucos bons livros (recomendo especialmente o do Eric Meyer) você domina a parte técnica. Você precisa querer desenvolver sites de fácil acesso e indexação. Um erro comum é achar que hotsites (sites de duração limitada, normalmente feitos para uma determinada promoção) seguem uma ideologia à parte quando, justamente ao contrário, são estes sites que mais precisam de uma indexação rápida e fácil. O visitante normalmente não decora o endereço do seu site em pouco tempo e a grande maioria utiliza mecanismos de busca para encontrá-lo. Não se iluda, não ache que porque você gastou pequenas fortunas com outdoors e anúncios na tv o seu inesquecível endereço vai ficar na cabeça do seu público até chegar em frente a um computador. A necessidade e/ou o desejo do seu visitante, por outro lado, andam com ele desde o seu lindo outdoor até o micro da casa dele. Vamos supor, por exemplo, que eu resolva fazer um hotsite para anunciar que a minha pasta de dente para gatos agora tem dois novos sabores: fígado e salmão. O meu cliente não vai lembrar o endereço do site imediatamente. Ele vai primeiro procurar por “pasta dente gato”. Seria bom que logo na primeira página do mecanismo de busca ele já encontrasse o que procura. Para que isso aconteça, o meu site precisa ser fácil de ser lido pelos searchbots. Tudo na internet funciona sob o mesmo protocolo e vai ser visto da mesma forma: com um browser. Este browser pode ser uma infinidade de programas e pode até mesmo ser invisível para o usuário, mas terá, necessariamente, alguém mostrando para o seu visitante o que está em outro lugar, ou seja, o que está no seu site. O seu visitante não tem o menor interesse em saber se o site que ele está vendo foi feito em tableless, com css, se está cheio de nested tables, se foi feito no programa x ou à unha. O que ele quer é achar o que ele procura. E o que ele procura é totalmente irrelevante para o processo de acesso à informação. Tornar o seu site acessível não tem relação com a informação visual dele. Você pode perfeitamente ter um site com look’n’feel (jargão para “gostosinho” no meio publicitário) e ainda assim ser fácil de achar, de ler, de entender, em qualquer plataforma. Quanto mais fácil de achar for o seu site, mais popular ele vai ser. E quanto mais popular ele for, mais acessos ele vai ter. Existem, então, várias formas de otimizar este acesso à informação. A primeira delas é o que chamamos de “código semântico”. Este é um nome legal para dizer que é um código fácil de ler. Se você, humano normal, consegue ler o código, com certeza todo mundo vai conseguir ler (e por todo mundo eu quero dizer todas as máquinas). A maneira mais fácil de tornar o seu código simples de ler é tirar dele todas aquelas tags de fonte, de alinhamento, etc. Você deve estar se perguntando como vai conseguir fazer com que o seu texto apareça como você quer. Ora, muito fácil: separe a informação da formatação com css. Usar uma folha de estilo (css) tem, sob o meu ponto de vista, duas vantagens básicas: 1 – o seu código fica pronto pra viagem e; 2 – é mais fácil e rápido de atualizar depois. Você pode usar css e ainda usar tabelas como elemento de diagramação. Só acho uma grande besteira. Talvez a melhor coisa do css é que você pode alterar um site inteiro atualizando um único arquivo texto. E esta alteração pode ser também de posição e (in)visibilidade dos elementos se estes estiverem fora de uma tabela, em uma div. A div é colocada na página com coordenadas, tanto do topo, tanto da esquerda. E estas coordenadas podem ser definidas dentro do seu css. Desta forma, você passa a ter controle total (e muito rápido) sobre todos os elementos de diagramação/formatação do seu site com um único arquivo texto simples que pode ser lido e alterado em qualquer lugar com qualquer programa. Isto se traduz em simplicidade, em rapidez, em dinamismo, em liberdade e, consequentemente, em dinheiro. Você pode, ainda, se dar ao luxo de fazer vários lay-outs diferentes e permitir que o seu visitante escolha qual gosta mais, com um simples style-switcher você consegue que o seu site tenha aparências completamente diferentes, funcionando como skins. É simples: quanto menos tempo você gastar para atualizar o seu site, menos dinheiro ele custará para você. Quanto mais visibilidade ele tiver, mais retorno você vai ter. Com tudo isso, era meio que esperado que surgisse alguém decidido a regulamentar e documentar esta abordagem. Já existe, é o W3C – World Wide Web Consortium – que documenta, regula, valida e escreve os css. Por escreve os css eu quero dizer exatamente isso, são eles que criam a linguagem do css, são eles que vão lá e escrevem e criam as coisas que o css faz. Como eu gosto sempre de beber na fonte, assino a lista dos desenvolvedores deles para acompanhar de perto o que está vindo por aí. O site deles é a referência mais importante para quem está querendo aprender. Desenvolvam sites semânticos e economizem o seu tempo (sem retrabalho e com atualização rápida) e o tempo do seu visitante (sites com esta abordagem ficam entre 25 e 50% menores). Desenvolvam sites semânticos e falem para usuários de qualquer sistema operacional, em qualquer plataforma, em qualquer mídia. Desenvolvam sites semânticos e se tornem democráticos e disponíveis. Desenvolvam sites semânticos e parem de perder dinheiro. Sites também têm ergonomia. Vocês precisam adaptar os sites ao usuário e nunca o usuário ao site. O conteúdo é o mais importante. A web é a democratização da informação. Não é a democratização do flashzinho-bonitinho-que-pisca. Um site, assim como qualquer mídia, não sobrevive sem conteúdo. A internet é causa e consequência da libertação da informação. Certifique-se de que o seu usuário tem acesso a ela.