Quando desmoronar

31 de janeiro de 2009 1 Por atercombr

Cerca de uma dúzia de anos atrás, a “resolução de tela que devíamos para a concepção?” Argumento teve sobretudo se tornar irrelevante. 640 × 480 foi para fora, 800 × 600 foi principalmente fora e 1024 × 768 foi um mínimo razoável. Com este passo e mudar com o novo grades no lugar vida deve ser fácil, certo?

Pense novamente. O intervalo tempo viu uma explosão no uso da web em dispositivos móveis e olha para o futuro só divergem de seu padrão 1024 × 768 grelha você liquidada em. Então, o que diferentes telas você pode razoavelmente esperar que os usuários tenham em vista o seu site?

  • Norma monitores 4:3 (1024 × 768, 1600 × 1200)
  • Widescreen 16:10 monitores em desktops e notebooks mais recentes (1280 × 800, 1440 × 900, 1920 × 1200)
  • Netbooks (800×480, 1024×600)
  • Smartphones (geralmente de 480 × 320, mas alguns maiores)
  • Jogos consolas TV e outros dispositivos conectados (640 × 480, equivalente, é geralmente HD 1280 × 720)

Felizmente, fabricantes de dispositivos para a maior parte, têm tentado adaptar o actual web. É um ponto de venda para apoiar a “full web” de modo a CSS2.1 @ @media handheld declaração caiu fora de uso. Os pequenos dispositivos (celulares e dispositivos conectados TV) e tentar resolver o problema pela Resolução scaling o conteúdo de forma dinâmica, permitindo ao utilizador um zoom em uma seção da tela, em seguida, mover para ver o resto. Esta não é uma experiência do usuário ideal, mas é perfeitamente aceitável.

Os usuários com mais velhos netbooks pode ter mais problemas. Zoom não é tão fluido ou obviamente acessíveis sobre estes dispositivos, bem como a resolução de tela horizontal e vertical pode ser severamente formado, parcialmente devido ao sub-optimizada navegador menus / toolbars. Inversamente, os usuários com maior monitores podem achar que o conteúdo optimizado para 1024 × 768 desconfortavelmente é pequena.

Uma melhor experiência para usuários

Felizmente, temos várias opções para proporcionar uma experiência decente para o maior número de usuários possível. Para as pessoas com monitores de alta resolução, a maioria dos navegadores atuais PC (com a excepção do Safari) apoio conteúdo completo zoom. Isto significa que quando um usuário escolhe para ampliar toda a vista se torna maior, e não apenas o tamanho do texto. Em alternativa, já que as grandes monitores são comuns as pessoas têm mais probabilidade de não maximizar sua janela do navegador, o que lhes permite usar a tela restante espaço para outras aplicações.

Para altíssima densidade pixel máquinas (por exemplo, anunciou recentemente Sony Vaio P, que tem um 1600 × 768 8 “ecrã) não há muito que podemos fazer como desenvolvedores. No futuro espero que operam sistemas serão capazes de se adaptar melhor às alta densidade telas, mas, de momento, os usuários terão de aprender a ampliação de texto legível.

Para os usuários com resolução mais baixa telas temos algumas opções. Tradicional netbooks são provavelmente os mais difíceis de apoio: os usuários talvez estar executando antigos navegadores (Internet Explorer 6, por exemplo) que não têm a capacidade de zoom da página, e pode não ter muito espaço vertical para visualizar. Para lidar com estes dispositivos é uma boa idéia para tentar manter a coluna da direita livre de informações essenciais, no caso, não é visível para o usuário, e para maximizar a quantidade de informações “acima da dobra ‘, se possível, ainda mantendo-o legível.

Para lidar com lotes de diferentes resoluções horizontal poderíamos largar a rede fixa e utilizar uma abordagem líquido layout. Estas podem ser bastante difíceis de produzir em uma relação user-friendly caminho, mas um pouco de pensamento (e de uma utilização judiciosa dos min-width e max-width pode produzir um site que parece ser bom e é amigável ao uso. O facto de estes dias navegadores são muito bons em escalar imagens não quer magoar. South Gloucestershire do Conselho do site é um bom exemplo desta abordagem: ele lida bem com uma série de resoluções horizontal entre 800 e 1000 pixels sem quebrar ou ficar excessivamente longo de linhas de texto.

Mobile TV e dispositivos conectados tendem a ter bastante avançado navegadores – Opera e Webkit ambos têm feito grandes avanços neste mercado. Felizmente para nós estes navegadores tanto apoio CSS3 Media Queries. Isto significa que nós podemos com sucesso alvo tela menor tamanho e de criar uma experiência mais agradável para eles. Temos utilizado este método no nosso próprio site:

 <link media="only screen and (max-device-width: 480px)" href="/stylesheets/iphone.css" type="text/css" rel="stylesheet" /> 

Eu provavelmente deveria ter chamado o arquivo CSS algo diferentes estilos como o mesmo irá funcionar bem para a maioria dos dispositivos de baixa resolução, mas ela será suficiente. Acrescentando extra no arquivo CSS podemos reformatar a rede a funcionar bem em uma tela pequena. Por exemplo, comprimir o local menu para duas linhas e alterar a carteira grelha em uma carteira lista.

Enquanto você estiver ciente dos escolhos que pensamos que é muito possível dar uma boa experiência para usuários com diferentes resoluções.