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, telefone portátil, 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 determinado 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. Joshua David McClurg-Genevese (ver Referências bibliográficas (Interface web) 9) sugere os valores:
Para tamanho de tela 800 x 600:
Internet Explorer 6 - 779 × 400
Firefox - 781 × 434
Opera - 777 × 427
Mozilla - 779 × 420
Netscape - 781 × 389
Para tamanho de tela 1024 x 768:
Internet Explorer 6 - 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.
Assuntos relacionados
► A configuração do usuário
► Acessibilidade
► Testes : Compatibilidade
► Variações para cada usuário : o tamanho (resolução) da página
► Testes : Flexibilidade
Referências bibliográficas (Características do conteúdo)
► Designing for the web (acesso em 15.1.2006)