Contente
Celulares, tablets e monitores de computador têm usos, usuários e dimensões diferentes que deixam a questão de qual o melhor tamanho do layout para um site ser determinada pelas necessidades dos usuários primários daquele site. Se um site for feito para ser visto por usuários padrão em um monitor widescreen com uma resolução de 1680x1040 pixels, o tamanho do site deve ser feito para caber na tela principal do navegador. Se o site for feito para uso em dispositivos móveis, deverá ser feito para uma tela muito menor.
Layouts fluídos VS estáticos
A primeira consideração é se o site requer uma dimensão definida em pixels. Usando porcentagens, você pode criar um layout "fluído", que redimensiona áreas dinamicamente, dependendo do tamanho da janela do navegador. Quando usado em combinação com texto, os layouts fluídos podem ser a melhor escolha ao criar um site para resolução de tela padrão assim como navegadores móveis. Layouts fluídos são alcançados usando "width=100%" na declaração do conteúdo CSS, ao invés de "width=960x", por exemplo.
Filtrando tamanhões padrão de tela
Para criar layouts "fixos" ou fluídos, a largura dos divs, wrappers ou tabelas do conteúdo principal devem caber na janela do navegador do usuário, levando em conta tanto a barra de rolagem como a de ferramentas. Você também deve considerar fazer para a maioria. Mais de 80% dos navegadores hoje em dia usam uma resolução de tela acima de 1024x768 pixels. Isso significa que você pode fazer para 1680x1024 pixels, mas é uma boa ideia projetar para o meio termo. 960 ou 980 pixels de largura são duas medidas confiáveis usadas para mostrar o conteúdo confortavelmente em um navegador usado por qualquer pessoa utilizando uma resolução 1024x768 ou superior. O sistema também cabe bem em dispositivos móveis capazes de mostrar sites inteiros. Se estiver muito apertado, 1080 é a próxima melhor largura. Lembre-se da altura de um navegador padrão em qualquer resolução para manter as informações mais importantes acima da "dobra", ou ponto, onde a rolagem se faz necessária.
Telas móveis
Se quer que seu site fique bom em uma variedade de dispositivos móveis, você irá precisar fazê-lo especificamente para o dispositivo ou criar um estilo especial que é usado por navegadores móveis para mostrar a versão "móvel" de seu site. A resolução de 240x320 é o atual padrão para a maioria dos smartphones e dispositivos de internet, como o iPhone. É recomendável usar porcentagens ou layouts "fluídos", uma vez que muitos dispositivos suportam tanto modo retrato quanto paisagem. se criar uma site que foi fixado em 320 pixels de largura, ele pode aparecer cortado para usuário acessando-o no modo retrato.
O 'grid' dourado
Talvez o melhor sistema para determinar as dimensões do layout seja através do uso do sistema 'grid'. Os 'grids' calculam regiões perfeitamente equilibradas dentro de uma largura dada para oferecer uma noção de como dimensionar os elementos dentro do layout principal ou área de conteúdo. Esses elementos incluem caixas promocionais, barras, ad-space ou parágrafos. Como um exemplo, um layout usando uma largura total de 1080 pixels e divida usando o 'grid' dourado teria deixado a área esquerda para posts do blog em 739 pixels de largura e uma barra a direita com 780 pixels de largura, ambas usando a margem de 10 pixels. O resultado final é um layout perfeitamente alinhado e equilibrado. Você pode experimentar vários grids diferentes visitando o sistema gerador de grids (ver Recursos).