Ao longo do tempo, designers e desenvolvedores web tiveram que se adaptar a uma série de mudanças na web. Além das novas tecnologias que surgiram com o tempo e a infinita gama de opções para a criação e desenvolvimento de um site, nenhuma delas foi tão significante quanto as mudanças que chegaram com a nova onda de tablets e smart phones. A princípio o desafio era colocar todo o conteúdo de um site de maneira elegante em 800 x 600 px de resolução, depois os monitores ficaram mais finos e maiores, assim como as resoluções de monitor passaram a ser diferentes, 720 x 480, 1024 x 768 px, 1280 x 800 entre muitas outras. Porém a solução era relativamente simples, usar um modelo como base (1024 x 768 por exemplo) e trabalhar os layouts para mantêr a informação dentro dessas dimensões e usar a criatividade para ocupar melhor o espaço nos monitores de grande resolução que são uma minoria.

Porém hoje o desafio é diferente, além dos monitores de desktop e notebooks, temos também que pensar em como adaptar o conteúdo para a telinha de um smart phone e/ou uma tablet. Além das limitações tecnológicas impostas por esses aparelhos (como no caso do drama Apple X Flash) e a obrigatoriedade do uso de certos navegadores em determinados dispositivos.

O que fazer nessa situação já que um site deve atender a todas essas espectativas? Vender 2 versões diferentes para o seu cliente, uma convencional e outra para dispositivos móveis? Seria interessante, não? Um projeto, duas soluções diferentes, mais horas de desenvolvimento e de construção de layouts ($$$$$$$)! Porém um bom profissional tem a obrigação de pelo menos oferecer ao seu cliente a melhor solução. Se o cliente precisa de um hotsite em flash para fazer um jogo multiplayer ou permitir uma interação do seu usuário com a webcam, não há muito o que fazer, o problema por sí só já impõe limitações. Mas se o caso for outro? Se o cliente quiser apenas um site?

Estudando em como oferecer aos meus clientes a melhor solução, cheguei a algumas conclusões:

- Flash? NO WAY!

Eu amo o flash, trabalho com AS3 desde a sua origem e acho uma linguagem extremamente organizada e poderosa, porém há limitações para dispositivos móveis (certo sr. Jobs?). Até que esse problema seja sanado (ou não!) o flash deixa de ser interessante para sites, mas ainda é uma ferramenta muito útil e eficaz para criação de jogos, hotsites interativos, players stream, aplicativos mobile entre outras coisas.

- Então restou o apenas combo HTML/CSS/JS, certo? SIM!

Exato, essa é sem dúvida a melhor solução! Mesmo com algumas incompatibilidades cross-browsers (que já são bem menores hoje) e a ainda humilde tentativa da criação de padrões para seu uso, o HTML/CSS/JS ainda é a melhor solução para os dias de hoje. Afinal, webkit a parte, todo browser renderiza html.

- Outras tecnologias?

Existem outras possibilidades? Não, pelo menos por enquanto. Ou eu estou equivocado?

- O que isso muda para os designers?

Esqueçam a comodidade do “centraliza o conteúdo nessa área útil e deixa o resto pro scroll”. Não dá mais para pensar dessa forma, cabe aos verdadeiros webdesigners estudarem as resoluções dos dispositivos móveis e adaptar a arte para cada caso. Além da simplificação das interfaces para o melhor funcionamento em dispositivos móveis.

- E para os desenvolvedores?

Para os desenvolvedores de interface a coisa também não simplifica. Trabalhar com layouts diferentes dentro de uma mesma página não é só desafiador como exige também “criatividade” por parte dos mesmos afim de tornar a coisa toda possível.

- Solução.

Desafios fazem parte do nosso trabalho, trabalhar com internet é evoluir a medida que ela mesma evolui, é se reinventar e buscar novas soluções todos os dias. Mas nem tudo é tão difícil quanto parece.

Conversando sobre assuntos aleatórios com meu irmão um dia desses, ele me mostrou algo que estava faltando para a conclusão da minha pequena pesquisa, um site que disponibiliza um show case de vários sites que atendem essa necessidade, o mediaqueri.es.

Usando CSS3 Media Queries é possível importar estilos diferentes para cada resolução adaptando de maneira simples o layout do seu projeto para a resolução desejada. Simples! Até agora, a melhor solução que consegui achar.

Maiores informações sobre CSS3 Media Queries:

Media Queries no W3C (inglês)

Exemplos de CSS3 Media Queries no Web Designer Wall (Inglês)

Media Queries Crash Course no Net Tuts Plus (Inglês – Video)