Variações para cada usuário
O espaço do browser na página
Cada browser ou programa navegador ocupa um espaço diferente na janela do dispositivo em que estiver aberto, seja um computador, assistente pessoal, celular, tablet ou aparelho de TV. Estes espaços variam também de acordo com a resolução de tela utilizada.
Para criar layouts adequados a estas telas, é necessário considerar a largura em pixels e subtrair o espaço ocupado pelo browser da largura total. Para isto, basta configurar o monitor para um tamanho, expandir a janela do browser ao seu tamanho máximo, fazer uma captura de tela, abri-la num programa editor de imagens e medir a área de conteúdo em pixels.
No entanto, este cálculo de medidas fixas é sempre variável, porque cada usuário configura seu programa de maneira diferente, utilizando ferramentas com ou sem ícones, habilitando ou não a barra de status, com ou sem a visualização de barras personalizadas de ferramentas de busca.
■ Acontece também que muitas vezes o tamanho da página diminui porque o usuário navega com a janela do browser apenas parcialmente aberta e pode ver apenas uma parte da página.
■ Os valores usados para a elaboração de layouts devem considerar os valores default, usados pela maioria dos usuários. Pode-se usar os valores:
Para tamanho de tela 1024 x 768:
Internet Explorer - 1003 × 568
Firefox - 1005 × 602
Opera - 1001 × 595
Mozilla - 1003 × 588
Netscape - 1005 × 557
■ Uma maneira de contornar os problemas com as diferentes configurações do usuários é utilizar páginas que se adaptem a diferentes larguras de janela, os chamados "layouts líqüidos", baseados no percentual do espaço ocupado pela página em relação ao tamanho geral da janela.
Nestes, deve-se planejar com precisão as áreas que deverão ou não "esticar" ou "encolher", para controlar melhor o resultado em cada situação. Exemplo: Amazon.com.
■ Já autores, como Ethan Marcotte, defendem que o design de interfaces web para um número cada vez maior de dispositivos deve considerar as diferenças de resolução como facetas da mesma experiência. Pode-se desenhar para uma experiência ideal, mas também agregar tecnologias baseadas nos padrões web para que as telas sejam renderizadas de modo adaptativo a cada mídia. (1)
Recursos como "media query" não permitem configurar uma interface para classes específicas de dispositivos, mas podem verificar as características físicas do dispositivo que interpreta uma interface. Para iPhone e telefones com Android, pode-se incorporar uma consulta a um dos arquivos CSS associados a uma página, que defina um tipo de mídia ("screen"), e a esta associe uma query, especificando que se o dispositivo tem determinada largura máxima ou mínima.
Assuntos relacionados
► Tamanho e resolução da página
► Layout líquido: usar ou não?
► A configuração técnica do usuário
► Acessibilidade
► Testes : Compatibilidade
► Variações para cada usuário : o tamanho (resolução) da página
► Testes : Flexibilidade
Referências (O espaço do browser na página)
1) Responsive web design, de Ethan Marcotte (A List Apart, acesso em 6.10.2011)
► Designing for the web (acesso em 15.1.2006)
