Qual é a largura ideal da página da Web?

Projetar um site e definir a largura da página para uma largura ideal é uma conversa que vale a pena ter. Muitos de vocês notaram que recentemente mudei a largura do design do meu blog. Aumentei a largura da página para 1048 pixels. Alguns de vocês podem discordar da mudança - mas gostaria de compartilhar algumas estatísticas e razões pelas quais ampliei tanto o tema.

1048 pixels não era um número aleatório, no entanto.

Houve duas influências principais na expansão da largura da minha página:

  • Alterar a largura do YoutubeO Youtube oferece tamanhos de incorporação maiores agora. Se você clicar na pequena engrenagem na barra lateral da página de vídeo do Youtube, terá opções para tamanhos maiores e também para o tema. Como os vídeos de alta definição estão se tornando um lugar comum no Youtube, eu queria incorporar esses vídeos ao meu blog e exibi-los com o máximo de detalhes possível (sem consumir toda a largura da página).
  • A publicidade típica vem em larguras de 125, 250 e 300 pixels. 300 pixels parecem estar surgindo cada vez mais em sites de receita de anúncios e eu queria incorporá-los perfeitamente em minha barra lateral.

E, claro, há algum preenchimento à esquerda e à direita da página, o conteúdo e a barra lateral ... então, o número mágico foi de 1048 pixels para o meu tema:

Largura ideal do site

Eu verifiquei as estatísticas do meu leitor?

Sim, claro! Se a maioria dos meus visitantes estivesse executando telas de resolução mais baixa, eu definitivamente teria dúvidas sobre como expandir minha página. Largura e porcentagemDepois de enviar as resoluções de tela do meu pacote Analytics (no Google é Visitantes> Recursos do navegador> Resoluções de tela), construí uma planilha Excel dos resultados e analisei a largura do campo de resolução.

O Google oferece resolução de 1600 × 1200, então você precisa pegar tudo a partir da esquerda do “x”, multiplicar por 1 para torná-lo um resultado numérico para que você possa classificar de forma decrescente, faça um SUMIF e veja quantas visitas são maiores ou menores do que a largura do design que você está olhando.

= ESQUERDA (A2, ENCONTRAR ("x", A2,1) -1) * 1

Abandonei os 22% de leitores que estão executando uma resolução menor? Claro que não! O bom de um layout com o conteúdo à esquerda e a barra lateral à direita é que você pode garantir que seu conteúdo ainda está dentro da largura da maioria dos navegadores. Nesse caso, 99% dos meus leitores estão executando mais de 640 pixels de largura, então estou bem! Não quero que eles percam totalmente a barra lateral, mas isso é secundário em relação ao conteúdo.

9 Comentários

  1. 1

    Eu sugiro um layout híbrido e uma largura de contêiner CSS de 100%. Contanto que você tenha uma largura fixa para a barra lateral, o cabeçalho, o rodapé e as áreas de conteúdo principal se ajustarão para caber na largura restante da tela. Preenche 100% da janela do navegador de todos, independentemente da resolução do monitor do usuário. Então, você não precisa mais contar pixels ou controlar as estatísticas do usuário em relação às resoluções do monitor.

    • 2

      Eu realmente gosto de layouts híbridos, Bob - mas infelizmente eles não funcionam bem às vezes com o conteúdo real. Talvez eu seja preguiçoso, mas para mim é mais fácil saber que o máximo e o mínimo são 640 pixels em meu site. É difícil conceber alongamento quando estou escrevendo as postagens.

      Apenas uma preferência pessoal, eu acho!

  2. 3

    Essencialmente, concordo com sua conclusão, mas se estou usando uma configuração de largura fixa, eu limite a largura a 960 pixels.

    É preciso levar em conta as barras de rolagem verticais e outras barras de atalho do navegador que ocupam largura adicional. Ao permanecer dentro de 960 pixels, é garantido que não há rolagem da esquerda para a direita em uma resolução de tela de 1024 pixels de largura.

    Andy Ebon

  3. 4
  4. 5

    muito estranho. No Firefox, seu site tem uma barra de rolagem horizontal em 1048 e não tem uma aparência limpa até você chegar a 1090.

    Obrigado pelas ótimas estatísticas, embora de resoluções do Google

  5. 6

    Já que você tem o seu definido como 1048 px, seu site cria barras de rolagem horizontais em uma tela de 1024. Acho que teria sido melhor tirar 100 px da largura (e preenchimento) da barra lateral e da área de conteúdo para caber em um 728 × 1024. Essa é a melhor prática hoje.

    O único caso contra isso seria se os números analíticos suportassem isso ... mas, como você não forneceu esses dados em seu artigo, eu diria que o design de sua página está falho.

  6. 7
  7. 8

    Homem tolo
    Nem todo mundo usa todas as janelas em tela cheia - na verdade, aposto que poucos usam. 

    Eu tenho seu blog em uma janela de 80% ... e aí está, uma barra de rolagem horizontal

    E o que está fora da tela ... vamos ver ... nada.

    Portanto, sua barra de rolagem é inútil.

    Uma maneira fácil de perder leitores !!

    • 9

      O conteúdo é centralizado na página @ heenan73: disqus, fornecendo ao leitor exatamente o que ele precisa. Se estou perdendo leitores porque eles podem ver o conteúdo E uma barra de rolagem horizontal ... não tenho certeza se são os leitores que estou procurando. Definitivamente, há algo único em nosso conteúdo que aumenta para 1217px, então vou rastrear e corrigir. Este post foi escrito sobre um tema anterior. Obrigado por chamar minha atenção para isso!

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.