Blog CataBits

“Como produzir corretamente meu layout para web”? Essa pergunta me é feita com freqüência, mas a resposta tem suas limitações. A tecnologia muda, o que faz com que a solução de hoje seja tecnicamente superada amanhã. Existem vários caminhos para chegar no mesmo resultado (um programador PHP vai ter uma solução técnica distinta de um webdesigner).

Assim sendo, discorro humildemente sobre algumas soluções possíveis com layout em tabelas, dentro de cenários bem definidos.

Resta dizer que hoje em dia o W3C [1] recomenda que os layouts sejam produzidos em CSS (folhas de estilo) onde as soluções citadas a seguir também se aplicam. Num próximo texto irei discorrer sobre esses mesmos pontos de vista, usando CSS.

Layout encaixado na tela

Aqui o layout (em tabelas) deve ser diagramado dentro dos limites de 760×415 pixels para ser visto confortavelmente em resolução de tela [2] 800×600 pixels. Desta forma tanto o usuário “minino” (800×600) como o máximo (até 1024×768pixels) poderão ver seu layout confortavelmente.
Este tamanho é uma sugestão para ser visto sem margens de HTML [3] em monitores “padrão” no mercado , de 15 polegadas. Monitores de tamanhos diferentes apresentarão layout com barra de rolagem ou espaços vazios em volta (à direita ou abaixo).

O layout (em tabelas) pode ser

• centralizado vertical e horizontalmente, inserido numa outra tabela, com esse alinhamento.

• alinhado de modo padrão, à esquerda, no topo da tela

Neste caso o layout será produzido no tamanho fixo de 760×415 pixels. Ao aumentar a resolução de tela, áreas vazias aparecerão em volta do layout ou à direita e abaixo.

Seu layout pode ser desenhado de forma que essas áreas vazias se “incorporem” ao layout, como se fossem parte dele.

lorem

.Layout líquido (ou fluido)

Aqui o layout (em tabelas) tem de se ajustar a largura da tela, em qualquer resolução. O seu layout deve ser produzido numa largura de 760 pixels (área útil em resolução de 800×600).

O conteúdo desse layout (texto, imagens, vídeos, animações) deverá distribuído numa tabela com 100% de largura (100% da resolução de seu monitor, seja ele 800×600, 1024×768 ou superior).

Ou seja: em resolução mínima (800×600) seu layout será visto assim:

Em resolução maior (1024×768) ocorrerá assim:

Em resoluções maiores a elasticidade será maior:

Layout vertical, fixo, centralizado horizalmente

Novamente seu layout será produzido para resolução mínima de 800×600 (largura de 760 pixels). Ele pode ser centralizado (horizontalmente) na página como um texto.

Monitor: 800×600 pixels
Em resoluções maiores (1024×768) o seu layout apresentará grandes áreas vazias à esquerda e direita.

Monitor: 1024×768 pixels

Essas áreas poderão ser preenchidas com imagens, se incorporando ou não ao layout.

Outras situações

Há que considerar que os navegadores renderizam (exibem) seu conteúdo de modo ligeiramente diferente. Portanto uma boa prática seria visualizar seu conteúdo no navegador Firefox (que teoricamente está 100% dentro dos padrões sugeridos pelo W3C) e fazer adaptações para outros navegadores importantes no mercado (Internet Explorer, Opera).

O Internet Explorer é relevante por ser utilizado pela ampla maioria dos usuários; o Opera tem recursos para renderizar seu layout em dimensões de dispositivos móveis [4] (mesmo navegando em computadores desktop/“de mesa”).

Como neste caso as possibilidades são muitas, não há como dar “receita de bolo”, e sim recomendar práticas como:
• Pesquisar hacks (os famosos “remendos de código”) que façam seu layout aparecer igual em mais de um navegador;
• Definir um ou dois navegadores principais, fazer ajustes para ele(s) e alertar o usuário de que seu site será “melhor exibido nas resoluções X e Y nos navegadores A e B”;
• Considerar a possibilidade de fazer boa parte de seu layout com imagens ou em formato Flash (vetorial) a fim de manter o layout “igual” em qualquer navegador. As imagens deverão ser otimizadas [5] para carregar depressa, e o seu Flash deverá ser visível em computadores com versões antigas do plug-in Flash [6];
• Usar recursos de programação para exibir seu site da melhor maneira possível em diversas resoluções de tela; por exemplo, você pode ter várias versões de seu site (para ser visto em resolução de 800×600, 1024×768 e 1280×1024) e incluir uma programação que redirecione a página inicial (índex) para a versão compatível com a resolução de tela do usuário (1024×768, p.ex.)

…
Notas:
[1] W3C (http://www.w3c.org) é a entidade que regulamenta os padrões a serem seguidos para tecnologias de internet (HTML e derivados). Em breve terá páginas em português.

[2] Configurações das Propriedades de Vídeo de seu sistema operacional (Windows, p.ex.); define o número de pixels que será exibido em seu monitor. Quanto maior o valor, menor as imagens aparecem e vice-versa.

[3] Espaço entre o conteúdo e borda de sua página HTML. Pode ser removido via HTML ou CSS.

[4] Celulares, Palms, etc.

[5] Otimizar aqui significa reduzir o número de cores ou aumentar a compactação das imagens utilizadas em seu layout a fim de que sejam transmitidas mais depressa. Isso se faz usando um editor de imagens, como o Fireworks, Photoshop ou GIMP.

[6] Plug-in é um programa que funciona dentro de seu navegador de internet, e que permite visualizar conteúdo que não seja texto e foto (no caso animação, Flash) mesmo que você não possua o programa original instalado em seu computador.