Definindo a largura da sua página da web

click fraud protection

A primeira coisa que a maioria dos designers considera ao criar sua página da web é o que resolução para projetar. O que isso realmente significa é decidir a largura do seu design. Não existe mais largura de site padrão.

Por que considerar a resolução

Em 1995, os monitores padrão de 640 por 480 pixels eram os maiores e melhores monitores disponíveis. Isso significa que os web designers se concentraram em fazer páginas com boa aparência em navegadores maximizadas em um monitor de 12 a 14 polegadas nessa resolução.

Atualmente, a resolução de 640 por 480 representa menos de 1 por cento da maioria do tráfego do site. As pessoas usam computadores com resoluções muito mais altas, incluindo 1366 por 768, 1600 por 900 e 5120 por 2880. Em muitos casos, o design para uma tela com resolução de 1366 x 768 funciona.

Todya, a maioria das pessoas tem monitores grandes de tela ampla e não maximizam a janela do navegador. Portanto, se você decidir criar uma página com no máximo 1366 pixels de largura, sua página provavelmente terá uma boa aparência na maioria das janelas do navegador, mesmo em monitores grandes com resoluções mais altas.

instagram viewer

Largura do navegador

Um problema frequentemente esquecido ao decidir a largura de uma página da web é o tamanho dos navegadores de seus clientes. Especificamente, eles maximizam seus navegadores em tela inteira ou os mantêm menores do que em tela inteira?

Depois de contabilizar os clientes que maximizam ou não, pense nas bordas do navegador. Cada navegador da web usa uma barra de rolagem e bordas nas laterais que reduzem o espaço disponível de 800 para cerca 740 pixels ou menos em resoluções de 800 por 600 e cerca de 980 pixels em janelas maximizadas em 1024 por 768 resoluções. Isso é chamado de navegador cromada e pode tirar o espaço utilizável para o design de sua página.

Páginas de largura fixa ou líquida

A largura numérica real não é a única coisa que você precisa pensar ao projetar a largura do seu site. Você também precisa decidir se terá um largura fixa ou largura do líquido. Em outras palavras, você vai definir a largura em um número específico (fixo) ou em uma porcentagem (líquido)?

Largura fixa

As páginas de largura fixa são exatamente como parecem. A largura é fixada em um número específico e não muda, não importa o tamanho do navegador. Essa abordagem pode ser boa se você precisa que seu design tenha exatamente a mesma aparência, não importa quão largo ou estreito sejam os navegadores dos seus leitores, mas esse método não leva em consideração os seus leitores. Pessoas com navegadores mais estreitos do que o seu projeto terão que rolar horizontalmente, e pessoas com navegadores largos terão grandes quantidades de espaço vazio na tela.

Para criar páginas de largura fixa, use números de pixel específicos para as larguras de suas divisões de página.

Largura do Líquido

Páginas de largura líquida (às vezes chamadas páginas de largura flexível) variam em largura dependendo da largura da janela do navegador. Essa estratégia traz designs que focam mais no cliente. O problema com páginas de largura líquida é que podem ser difíceis de ler. Se o comprimento de varredura Se uma linha de texto tiver mais de 10 a 12 palavras ou menos de 4 a 5 palavras, pode ser difícil de ler. Isso significa que os leitores com janelas de navegador grandes ou pequenas têm problemas.

Para criar páginas de largura flexível, use porcentagens ou ems para as larguras das divisões de sua página. Familiarize-se com o CSS largura máxima propriedade. Esta propriedade permite definir uma largura em porcentagens, mas depois limitá-la para que não fique tão grande que as pessoas não consigam lê-la.

Consultas de mídia CSS

A melhor solução hoje em dia é usar consultas de mídia CSS e design responsivo para criar uma página que se ajusta à largura do navegador que a visualiza. Um web design responsivo usa o mesmo conteúdo para criar uma página da web que funciona independentemente de você visualizá-la com 5.120 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.

instagram story viewer