Posts Tagged 'Layout'

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

Layout versus resolução de tela (2)

Retomando o tema e a pergunta freqüente em curso de webdesign: meu site deve ser feito em que tamanho (melhor dizendo, dimensão = largura e altura)?
Primeiro, vamos definir as resoluções de tela mais utilizadas: 800×600, 1024×768 e 1280×1024 pixels


E a Área útil de cada resolução, sem barra de rolagem: 760 x 410, 1000×600 e 1260×856

Áreas úteis para resolução de monitor de 800×600, 1024×768 e 1280×1024 pixels.

Atenção apenas a dois detalhes:

  1. As resoluções de monitor 800×600 e 1024×768 são proporcionais entre sí, já a resolução 1280×1024 não é proporcional em relação às anteriores. Isso significa que um layout feito para as duas primeiras resoluções, se for visto na terceira, irá aparecer com faixas vazias acima e abaixo (ou cortado nas laterais, como nos filmes da TV tradicional).
  2. As dimensões de área útil aqui citadas são apenas uma referência, pois é impossível prever qual navegador, monitor (14”, 15”, 17”, 21”, 29”) e barras do navegador o usuário está usando, o que pode ampliar ou reduzir a altura (área útil vertical) do navegador.

A variável mais fácil de controlar é a largura (área útil horizontal) tomando o cuidado de definir se seu layout terá ou não borda na página (HTML); neste texto vamos considerar que essa borda já foi retirada de seu layout.

Vamos colocar as situações mais comuns, dentro do que se convencionou chamar de melhores práticas, mas que não chegam a ser definitivas.

Layout encaixado na tela

– Layout fixo

Normalmente esse layout pressupõe ser visto sem alterações de forma, em escala (proporcional).

Assim sendo, seu layout tem de ser feito pensando minimamente para o usuário de 800×600 (área útil em torno de 760×410 pixels) e não deve ter barras de rolagem em nenhuma das “resoluções mais utilizadas”.

Layout em 800×600, 1024×768 e 1280×1024 pixels.



– Layout líquido (ou fluido) encaixado na tela

Nesse caso o layout se ajusta tanto horizontal quanto verticalmente, nas três resoluções de monitor (1024×768 e 1280×1024 pixels). Normalmente desenvolvido em Flash ou HTML (com programação). Se destina a páginas que devem ser vistas por inteiro, ocupando toda a área útil da janela do navegador, sem reduções de escala.


Layouts em 800×600 e 1024×768 pixels.



Layout vertical

– Largura fixa, alinhado à esquerda

Layout em 1280×1024 pixels.

Aqui apenas temos de ter o cuidado de dividir o layout em áreas de maior, médio e menor interesse.

Destina-se a sites onde o conteúdo pode ser distribuído (e exibido) em camadas de relevância sem alterar o layout.
O conteúdo mais relevante deve poder ser visto, sem rolagem (horizontalmente), em resolução de tela 800×600 (largura da área útil em torno de 760 pixels);
o conteúdo de médio interesse (também horizontalmente) em 1024×768 (largura da área útil em torno de 1000 pixels) e 1280×1024 pixels (largura da área útil em torno de 1260 pixels).
O conteúdo de menor interesse a partir de 1280×1024 pixels, com rolagem.

     

Layout projetado para duas resoluções de tela: 800×600 e 1024×768 pixels.

– Largura fixa, centralizado

Aqui recaímos quase que na mesma situação, a área útil horizontal (mínima)deverá ser para 800×600 (largura de 760 pixels); nas demais resoluções as laterais ficam em branco (ou com fundo de página preenchido com cor ou imagem).

Se destina a sites que:

  • precisam ter desenvolvimento rápido
  • podem ter seu conteúdo em escala
  • necessitam ter mesma diagramação, em qualquer situação
Layouts em 800×600, 1024×768 e 1280×1024 pixels.



– Layout líquido horizontal:

No sentido horizontal, se aplica em qualquer resolução. Normalmente feito em tabelas ou CSS, eventualmente em Flash.

Destina-se a sites que precisam ter seu conteúdo principal visto em qualquer resolução – mínima ou máxima – mesmo com alguma alteração no layout.

Layouts em 800×600, 1024×768 e 640×480 pixels (ou nas duas primeiras resoluções de monitor, com largura da janela do navegador reduzida).



Outras tendências

Uma das novidades na área de web, além da acessibilidade, tableless, webstandards é o design “Full flash browser” (numa tradução livre, “Flash em toda a tela do navegador”) que é um layout onde a navegação ocorre sem a tradicional barra de rolagem do navegador, mas percorre (ou “rola”) além da tela visível, em todas as direções como neste exemplo ou neste outro exemplo:

Esse tipo de navegação é uma evolução dos sites com “navegação horizontal“, uma vez que

sugere navegação em qualquer sentido, além (e dentro) da tela do navegador, sem rolagem tradicional.

Uma outra tendência é o design em camadas múltiplas, onde as páginas ocorrem umas sobre as outras. O site da criadora do Harry Potter é um bom exemplo dentro desta tendência.

Como esse assunto evolui, em breve discorrerei sobre layouts para dispositivos móveis e telas wide-screen (panorâmicas).