A primeira coisa que a maioria dos designers considera ao criar sua página da Web é a resolução a ser projetada. O que isso realmente significa é decidir quão amplo seu projeto deve ser. Não existe mais nada como uma largura de site padrão.
Por que considerar a resolução?
Em 1995, os monitores de resolução padrão 640x480 eram os maiores e melhores monitores disponíveis. Isso significava que os web designers se concentravam em tornar as páginas que pareciam boas em navegadores da Web maximizadas em um monitor de 12 a 14 polegadas nessa resolução.
Atualmente, a resolução de 640x480 representa menos de 1% da maior parte do tráfego do website. As pessoas usam computadores com resoluções muito maiores, incluindo 1366x768, 1600x900 e 5120x2880. Em muitos casos, o design para uma tela de resolução de 1366x768 funciona.
Estamos em um ponto na história do design da web, onde não precisamos nos preocupar muito com a resolução. A maioria das pessoas tem monitores grandes e widescreen e não maximizam a janela do navegador. Portanto, se você decidir criar uma página que não tenha mais de 1366 pixels de largura, sua página provavelmente ficará bem na maioria das janelas do navegador, mesmo em monitores grandes com resoluções mais altas.
Largura do Navegador
Antes de você pensar “ok, vou fazer minhas páginas 1366 pixels de largura”, há mais nessa história. Um problema muitas vezes negligenciado ao decidir a largura de uma página da Web é o tamanho de seus clientes que mantêm seus navegadores. Especificamente, eles maximizam seus navegadores em um tamanho de tela cheia ou eles os mantêm menores que a tela inteira?
Em uma pesquisa informal com colegas de trabalho que usaram um laptop de resolução 1024x768 padrão da empresa, dois mantiveram todas as suas aplicações maximizadas. O resto tinha janelas de diferentes tamanhos abertas por várias razões. Isso mostra que, se você estiver projetando a intranet dessa empresa com 1024 pixels de largura, 85% dos usuários teriam que rolar horizontalmente para ver a página inteira.
Depois de contabilizar os clientes que maximizam ou não, pense nas bordas do navegador. Cada navegador da Web tem uma barra de rolagem e bordas nas laterais que reduzem o espaço disponível de 800 para cerca de 740 pixels ou menos em resoluções de 800x600 e em torno de 980 pixels em janelas maximizadas com resoluções de 1024x768. Isso é chamado de navegador "chrome" e pode tirar o espaço utilizável para o design da sua página.
Páginas de largura fixa ou líquida
A largura numérica real não é a única coisa em que você precisa pensar ao projetar a largura do seu site. Você também precisa decidir se terá largura fixa ou líquida. Em outras palavras, você vai definir a largura para um número específico (fixo) ou para uma porcentagem (líquido)?
Largura fixa
Páginas de largura fixa são exatamente como elas soam. A largura é fixada em um número específico e não muda, não importa quão grande ou pequeno seja o navegador. Isso pode ser bom se você precisar que seu design seja exatamente o mesmo, não importando o tamanho dos seus navegadores, mas esse método não leva em consideração seus leitores. As pessoas com navegadores mais estreitos do que o seu design terão que rolar na horizontal e as pessoas com navegadores largos terão grandes quantidades de espaço vazio na tela.
Para criar páginas de largura fixa, basta usar números de pixel específicos para as larguras de suas divisões de página.
Largura Líquida
As páginas com largura líquida (às vezes chamadas de páginas de largura flexível) variam em largura, dependendo da largura da janela do navegador. Isso permite que você crie páginas que se concentram mais em seus clientes. O problema com as páginas com largura de líquido é que elas podem ser difíceis de ler. Se o tamanho da leitura de uma linha de texto for maior que 10 a 12 palavras ou menor que 4 a 5 palavras, pode ser difícil de ler. Isso significa que os leitores com janelas grandes ou pequenas do navegador têm problemas.
Para criar páginas de largura flexível, basta usar porcentagens ou ems para as larguras de suas divisões de página. Você também deve se familiarizar com a propriedade max-width do CSS. Essa propriedade permite definir uma largura em porcentagens, mas limitá-la para que ela não fique tão grande que as pessoas não possam lê-la.
E o vencedor é: consultas de mídia CSS
A melhor solução atualmente é usar consultas de mídia CSS e design responsivo para criar uma página que se ajuste à largura do navegador que a visualiza. Um design da Web responsivo usa o mesmo conteúdo para criar uma página da Web que funcione se você visualizá-la com 5120 pixels de largura ou 320 pixels de largura. As páginas de tamanhos diferentes parecem diferentes, mas contêm o mesmo conteúdo. Com a consulta de mídia em CSS3, cada dispositivo receptor responde à consulta com seu tamanho e a folha de estilo se ajusta a esse tamanho específico.
