Como temos feito sites até agora.

Com o briefing em mãos iniciamos a fase de pesquisa e conceituação. Em seguida, criamos a Arquitetura da Informação (AI) que nos dará as diretrizes do conteúdo que será produzido, páginas que serão criadas, itens do menu de navegação etc. Com base na AI se projetam os Wireframes, que definem a hierarquia das informações baseadas nos objetivos do projeto e em conceitos como a Usabilidade.

“A usabilidade é um atributo de qualidade relacionado à facilidade de uso de algo. (…)”. (NIELSEN, Jakob. Usabilidade na Web.)

Apenas agora o Designer entrará em ação trazendo seus conhecimentos sobre: teoria das cores, semiótica, composição, tipografia etc, e criará o projeto gráfico para o site baseado nos Wireframes. Neste processo o Designer poderá propor alterações nos Wireframes e até mesmo na AI, mas de qualquer forma existirão restrições de natureza conceitual e técnica.

Dentre as principais limitações estão: (1) softwares que interpretarão o código (navegadores) e (2) diferentes tipos e tamanhos de dispositivos que exibirão o site. Neste cenário o que temos feito é escolher a menor resolução de tela (em desktops) e projetado sites com dimensões definidas para ela, sendo assim qualquer usuário que tenha um monitor maior poderá visualizar este site sem que exista a barra de rolagem horizontal, que segundo Nielsen seria um enorme problema de Usabilidade, já que os usuários teriam que usar as barras de rolagem vertical e horizontal para poder acessar todo o conteúdo do site.

Qual é o problema desta abordagem?

1º O cenário

O cenário de acesso a Internet está mudando rapidamente, segundo o The Mobile Internet Report produzido pelo MORGAN STANLEY RESEARCH em 2009, o acesso a Web via dispositivos móveis irá superar o de desktops em 5 anos, isso significa que nosso atual paradigma para tamanhos de tela está superado. Acessar sites usando smartphones torna-se um ato de paciência, a não ser que o site tenha uma versão própria para estes dispositivos, o que nos leva a outro paradigma: se você quer que seu site seja confortavelmente visualizado nestes dispositivos você terá que desenvolver uma versão para cada tipo de dispositivo, pois não existe qualquer padrão de tamanho ou resolução de tela, fazendo com que o custo e tempo investidos no projeto se elevem consideravelmente.

2º Adivinhação

Outro ponto fundamental é que, hoje, nós temos que supor qual é a resolução do monitor da nossa audiência, o que naturalmente não é possível ser feito com precisão. Quando o site já existe podemos propor uma reformulação baseados nas Estatísticas de Visitação (Web Analytics), que são os dados registrados dos acessos ao site, onde temos os percentuais de acessos detalhados com informações sobre a resolução do monitor, navegadores, sistemas operacionais etc. Quando é um projeto novo, ou seja, não temos qualquer informação prévia sobre a audiência, nós podemos supor com base na classe social do público-alvo etc, mas ainda sim de forma extremamente imprecisa, pois as classes mais favorecidas usam monitores maiores e representam a maioria dos acessos via smartphones. A verdade é que o ato de escolher usuários que usam uma determinada resolução faz com que ignoremos todos os outros.

Além da difícil tarefa de supor qual é a resolução da nossa audiência, ou pelo menos da maior parte, se torna cada vez mais popular o uso de addons (plugins) para os navegadores estendendo suas funções originais, ou integrando outras ferramentas ao navegador, e vários destes programas que são incorporados reduzem a área útil da navegação, tanto na parte superior como nas laterais, tornando a já difícil tarefa de prever a área útil que o site ocupará extremamente imprecisa, se não impossível.

Teste de Usabilidade

Indo de encontro aos argumentos acima citados, em maio de 2010 a Mozilla Labs (desenvolvedora do Firefox, navegador mais popular depois do Internet Explorer) produziu um teste de usabilidade da interface se seu navegador que pode ser vista em detalhes no endereço https://testpilot.mozillalabs.com/testcases/toolbar. Foram testados 9.667 usuários em 5 dias e o dado relevante que corrobora os questionamentos acima levantados é de que a barra de rolamento vertical foi acionada por 89% dos usuários, e a barra de rolamento horizontal por 42.8%. A rolagem vertical é a forma padrão de revelar o conteúdo das páginas, mas o rolamento horizontal é considerado um grave problema de usabilidade, no entanto quase a metade dos usuários testados fez uso deste recurso.

A final, o que é Design Adaptável?

Design Adaptável é um conjunto de técnicas e uma filosofia de projeto que tem o objetivo de fazer com que o site se adapte ao dispositivo em que está sendo visualizado.

Estas adaptações acontecem em vários processos/partes que compõe o site:
• Arquitetura da Informação
• Wireframes
• Hierarquia das partes do site
• Imagens
• E até o projeto visual

Usando várias técnicas:
• Grids Fluidos
• Imagens Fluidas
• Media Queries
• Em último caso, Java Script

Dentre as técnicas de adaptação, a principal é a nova especificação do CSS3, chamada de Media Queries. Por tanto, para que possamos aplicar as técnicas de adaptação, o dispositivo/navegador deve ser capaz de interpretar estes atributos, e por tanto CSS3.

Media Types + esteróides = Media Queries

Media Queries são uma extensão das Media Types que nos permitem ter acesso a informações de software e hardware dos usuários quando acessam nosso site, desta forma podemos selecionar os estilos que serão aplicados ao site com uma quantidade de informações incríveis, via CSS.

Por isso eu digo que as Media Queries são as principais ferramentas para construirmos sites adaptáveis.

Query = Pergunta

Quando usamos as Media Queries estamos fazendo uma pergunta para o navegador do usuário, que por sua vez responde com um “sim” (true) ou “não” (false).

Veja abaixo uma tabela com os tipos de queries (perguntas) possíveis:

width Retorna a largura da janela do navegador.
height Retorna a altura da janela do navegador.
device-width Retorna a largura da tela do dispositivo.
device-height Retorna a altura da tela do dispositivo.
orientation Verifica se a orientação é “em pé” (portrait) ou “deitada” (landscape). Se a tela for quadrada a orientação portrait prevalecerá.
aspect-ratio Retorna a proporção da janela do navegador.
device-aspect-ratio Retorna a proporção da tela do dispositivo
color Retorna o número de bits para descrever cada componente de cor. Caso haja variação entre os componentes de cor o menor valor será adotado. Se for monocromático o valor será 0 (zero).
color-index Retorna a profundidade de cores do dispositivo. Se for monocromático o valor será 0 (zero).
monochrome Retorna o número de bits por pixel em uma matriz monocromática. Se for colorida o valor será 0 (zero).
resolution Retorna a resolução do dispositivo, ou seja, a densidade de pixels por polegada, ou centímetro, dependendo da query.
scan Verifica o tipo de formação de imagens em dispositivos como televisores, como: progressivo ou entrelaçado.
grid Verifica se o dispositivo é de grid (cristal líquido) ou bitmap (telas).

As queries podem ser combinadas com as Media Types ou serem usadas sozinhas. Podem ser usadas com operadores lógicos, como: not, and e only, e com prefixos, como: min e max. Todas estas possibilidades fazem com que o uso das Media Queries seja, realmente, poderoso.

Qual é a pergunta?

Existem várias formas de fazer as chamadas CSS com as queries, as principais são:

Abaixo vou exemplificar alguns usos e “traduzi-las” em perguntas:

@media all and (color)
Qualquer se seja o dispositivo, ele é colorido?

@media screen and (max-width: 480px)
Este dispositivo é uma tela e o navegador tem no máximo 480 pixels de largura?

@media handheld and (min-device-height: 240px)
Este é um dispositivo móvel e tem altura de tela útil de no mínimo 240 pixels?

Conclusão

Acho que deu para perceber como é poderoso o uso deste recurso na construção de interfaces, pois podemos entregar uma nova estilização para o mesmo código HTML, fazendo com que nossos sites se adaptem a uma enorme variedade de situações.

Com tantas possibilidades surgem várias questões que deverão ser resolvidas de acordo com cada projeto, como: otimização para dispositivos móveis, organização do código para futuras manutenções, adaptação da Arquitetura da Informação, suporte pelos navegadores etc.

Estas e outras questões são abordadas no blog www.designadaptavel.com.br