Posts Tagged 'resolução de tela'

Layout versus resolução de tela (3)

Atualmente existem dezenas de dispositivos (equipamentos, aparelhos) no qual sua página de internet pode ser vista: ceulares, smartfones, tablets, computadores de mesa ou portáteis. E isso subentende vários formatos de tela, desde as telas tradicionais de micro de mesa em proporção 4:3 ou 1:1 passando pelas telas wide-screen/panorâmicas até os micros portáteis e de mão.

Como citei num artigo anterior, existem técnicas de projeto que ajudam ao projetista de internet (webdesigner) a definir as dimensões de seu site se o cenário for limitado a telas tradicionais, em duas ou três resoluções de tela.

Em monitores 4:3 e 1:1, até 17 polegadas, as resoluções de tela seriam:
800 x 600 pixels, com área útil sem rolagem de tela em 760 x 410 pixels
1024 x 768 px, com área útil de 1000 x 600 pixels
1280 x 1024 px, com área útil de 1260 x 856 pixels

Em monitores panorâmicos 16:9 até 17 polegadas as resoluções de tela seriam:
1440 x 900 pixels
1280 x 600 px
1280 x 768 px
1280 x  720 px
1176 x 664 px

Mas todos esses cuidados acabam não sendo úteis se seu layout vai ser visualizado em dispositivos portáteis que podem ser horizontais ou verticais.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Teoricamente sites em CSS são rediagramados automaticamente para aparecer em dispositivos pequenos (como celulares).
Dispositivos ou navegadores de internet que não rediagramam o seu site o exibem em zoom (visualização que aumenta ou diminui o layout, em escala).
Por fim, pode-se fazer duas versões do mesmo site, uma para dispositivos tradicionais, outra para portáteis mantendo a estrutura e conteúdo (HTML) e mudando a folha de estilos (CSS).

Aí entra o Design Responsivo (responsive design) que nada mais é que o uso de tecnologias para web (HTML, CSS, Javascript, Flash) a fim de rediagramar seu layout para a maioria das situações possíveis: horizotal ou vertical; tela tradicional ou panorâmica; dispositivo de mesa ou de mão.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Cada tecnologia trata a sua maneira estas questões de projeto de interfaces para internet, seja escalonando o layout conforme a resolução de tela (Flash, p.ex.) ou ocultando/recortando/redistribuindo o conteúdo (CSS); portanto cabe ao projetista de internet (webdesigner) estudar a tecnologia a ser utilizada em seu projeto de sites para esse fim.

Em termos práticos pode-se usar bibliotecas de código (como o JQuery) para implementar esses recursos rapidamente, ou desenvovler seu site em CMS (gerenciadores de conteúdo, como o WordPress) que já possuem recursos para adaptar o site a diferentes dispositivos.

Anúncios